Fixed arrow buttons.

Browse Source
This commit is contained in:
retoor 2025-10-05 00:08:32 +02:00
parent 3c783056cf
commit 83f28da5c1
2 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
static/js/GameRenderer.js
View File

@ -5,10 +5,14 @@ export class GameRenderer {
this.renderer = null; this.renderer = null;
this.canvas = null; this.canvas = null;
this.tiles = new Map(); // Map of tile meshes this.tiles = new Map();
this.buildings = new Map(); // Map of building meshes // Map of tile meshes
this.cursors = new Map(); // Map of player cursors this.buildings = new Map();
this.labels = new Map(); // Map of building labels // Map of building meshes
this.cursors = new Map();
// Map of player cursors
this.labels = new Map();
// Map of building labels
this.hoveredTile = null; this.hoveredTile = null;
this.cameraPos = { x: 0, y: 50, z: 50 }; this.cameraPos = { x: 0, y: 50, z: 50 };
@ -20,10 +24,10 @@ export class GameRenderer {
init() { init() {
this.canvas = document.getElementById('gameCanvas'); this.canvas = document.getElementById('gameCanvas');
// Create scene // Create scene
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x87CEEB); // Sky blue this.scene.background = new THREE.Color(0x87CEEB);
// Sky blue
// Create camera // Create camera
this.camera = new THREE.OrthographicCamera( this.camera = new THREE.OrthographicCamera(
@ -48,10 +52,8 @@ export class GameRenderer {
directionalLight.position.set(10, 20, 10); directionalLight.position.set(10, 20, 10);
directionalLight.castShadow = true; directionalLight.castShadow = true;
this.scene.add(directionalLight); this.scene.add(directionalLight);
// Create ground // Create ground
this.createGround(); this.createGround();
// Handle window resize // Handle window resize
window.addEventListener('resize', () => this.onResize()); window.addEventListener('resize', () => this.onResize());
} }
@ -81,13 +83,13 @@ export class GameRenderer {
createBuilding(buildingData) { createBuilding(buildingData) {
const { type, x, y, owner_id, name } = buildingData; const { type, x, y, owner_id, name } = buildingData;
// Get building height and color based on type // Get building height and color based on type
let height = 1; let height = 1;
let color = 0x808080; let color = 0x808080;
if (type.includes('house')) { if (type.includes('house')) {
height = type === 'small_house' ? 2 : type === 'medium_house' ? 3 : 4; height = type === 'small_house' ?
2 : type === 'medium_house' ? 3 : 4;
color = 0xD2691E; color = 0xD2691E;
} else if (type.includes('shop') || type === 'supermarket' || type === 'mall') { } else if (type.includes('shop') || type === 'supermarket' || type === 'mall') {
height = 3; height = 3;
@ -154,7 +156,6 @@ export class GameRenderer {
addBuilding(buildingData) { addBuilding(buildingData) {
const key = `${buildingData.x},${buildingData.y}`; const key = `${buildingData.x},${buildingData.y}`;
// Remove existing building at this position // Remove existing building at this position
if (this.buildings.has(key)) { if (this.buildings.has(key)) {
this.scene.remove(this.buildings.get(key)); this.scene.remove(this.buildings.get(key));
@ -251,7 +252,7 @@ export class GameRenderer {
this.cameraPos.y * this.cameraZoom, this.cameraPos.y * this.cameraZoom,
this.cameraPos.z * this.cameraZoom this.cameraPos.z * this.cameraZoom
); );
this.camera.lookAt(this.cameraPos.x, 0, 0); this.camera.lookAt(this.cameraPos.x, 0, this.cameraPos.z - 50);
} }
startRenderLoop() { startRenderLoop() {

35
static/js/InputHandler.js
View File

@ -9,21 +9,19 @@ export class InputHandler {
this.currentTileX = null; this.currentTileX = null;
this.currentTileY = null; this.currentTileY = null;
this.cursorUpdateThrottle = 100; // ms this.cursorUpdateThrottle = 100; // ms
this.lastCursorUpdate = 0; this.lastCursorUpdate = 0;
this.keyPanSpeed = 3; // Controls camera movement speed with arrow keys
} }
init() { init() {
this.canvas = document.getElementById('gameCanvas'); this.canvas = document.getElementById('gameCanvas');
// Mouse events // Mouse events
this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e)); this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e));
this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e)); this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e));
this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e)); this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e));
this.canvas.addEventListener('wheel', (e) => this.onWheel(e)); this.canvas.addEventListener('wheel', (e) => this.onWheel(e));
this.canvas.addEventListener('contextmenu', (e) => e.preventDefault()); this.canvas.addEventListener('contextmenu', (e) => e.preventDefault());
// Keyboard events // Keyboard events
document.addEventListener('keydown', (e) => this.onKeyDown(e)); document.addEventListener('keydown', (e) => this.onKeyDown(e));
} }
@ -36,7 +34,6 @@ export class InputHandler {
this.canvas.style.cursor = 'grabbing'; this.canvas.style.cursor = 'grabbing';
} else if (event.button === 0) { // Left mouse button } else if (event.button === 0) { // Left mouse button
const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY);
if (this.app.isPlacingBuilding && this.app.selectedBuildingType) { if (this.app.isPlacingBuilding && this.app.selectedBuildingType) {
// Place building // Place building
this.app.placeBuilding(tile.x, tile.y); this.app.placeBuilding(tile.x, tile.y);
@ -55,7 +52,6 @@ export class InputHandler {
const dragThreshold = 5; const dragThreshold = 5;
const dx = Math.abs(event.clientX - this.lastMouseX); const dx = Math.abs(event.clientX - this.lastMouseX);
const dy = Math.abs(event.clientY - this.lastMouseY); const dy = Math.abs(event.clientY - this.lastMouseY);
if (dx < dragThreshold && dy < dragThreshold) { if (dx < dragThreshold && dy < dragThreshold) {
// Right click on tile - show context menu // Right click on tile - show context menu
const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY);
@ -76,14 +72,12 @@ export class InputHandler {
onMouseMove(event) { onMouseMove(event) {
// Update tile position // Update tile position
const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY);
if (tile.x !== this.currentTileX || tile.y !== this.currentTileY) { if (tile.x !== this.currentTileX || tile.y !== this.currentTileY) {
this.currentTileX = tile.x; this.currentTileX = tile.x;
this.currentTileY = tile.y; this.currentTileY = tile.y;
// Highlight tile // Highlight tile
this.app.renderer.highlightTile(tile.x, tile.y); this.app.renderer.highlightTile(tile.x, tile.y);
// Send cursor position to server (throttled) // Send cursor position to server (throttled)
const now = Date.now(); const now = Date.now();
if (now - this.lastCursorUpdate > this.cursorUpdateThrottle) { if (now - this.lastCursorUpdate > this.cursorUpdateThrottle) {
@ -111,11 +105,36 @@ export class InputHandler {
} }
onKeyDown(event) { onKeyDown(event) {
// ESC to cancel building placement
if (event.key === 'Escape') { if (event.key === 'Escape') {
this.app.isPlacingBuilding = false; this.app.isPlacingBuilding = false;
this.app.selectedBuildingType = null; this.app.selectedBuildingType = null;
this.app.uiManager.hideContextMenu(); this.app.uiManager.hideContextMenu();
} }
let moved = false;
const s = this.keyPanSpeed; // shorthand for speed
switch (event.key) {
case 'ArrowUp':
this.app.renderer.moveCamera(s, -s); // Move diagonally to pan straight up
moved = true;
break;
case 'ArrowDown':
this.app.renderer.moveCamera(-s, s); // Move diagonally to pan straight down
moved = true;
break;
case 'ArrowLeft':
this.app.renderer.moveCamera(-s, -s); // Move diagonally to pan straight left
moved = true;
break;
case 'ArrowRight':
this.app.renderer.moveCamera(s, s); // Move diagonally to pan straight right
moved = true;
break;
}
if (moved) {
event.preventDefault(); // Prevents the browser from scrolling
}
} }
} }