From 83f28da5c17b383b018d56122d11fc9903d8b3fb Mon Sep 17 00:00:00 2001 From: retoor Date: Sun, 5 Oct 2025 00:08:32 +0200 Subject: [PATCH] Fixed arrow buttons. --- static/js/GameRenderer.js | 25 +++++++++++++------------ static/js/InputHandler.js | 35 +++++++++++++++++++++++++++-------- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/static/js/GameRenderer.js b/static/js/GameRenderer.js index 4f3c083..5a107b6 100644 --- a/static/js/GameRenderer.js +++ b/static/js/GameRenderer.js @@ -5,10 +5,14 @@ export class GameRenderer { this.renderer = null; this.canvas = null; - this.tiles = new Map(); // Map of tile meshes - this.buildings = new Map(); // Map of building meshes - this.cursors = new Map(); // Map of player cursors - this.labels = new Map(); // Map of building labels + this.tiles = new Map(); + // Map of tile meshes + this.buildings = new Map(); + // Map of building meshes + this.cursors = new Map(); + // Map of player cursors + this.labels = new Map(); + // Map of building labels this.hoveredTile = null; this.cameraPos = { x: 0, y: 50, z: 50 }; @@ -20,10 +24,10 @@ export class GameRenderer { init() { this.canvas = document.getElementById('gameCanvas'); - // Create 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 this.camera = new THREE.OrthographicCamera( @@ -48,10 +52,8 @@ export class GameRenderer { directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; this.scene.add(directionalLight); - // Create ground this.createGround(); - // Handle window resize window.addEventListener('resize', () => this.onResize()); } @@ -81,13 +83,13 @@ export class GameRenderer { createBuilding(buildingData) { const { type, x, y, owner_id, name } = buildingData; - // Get building height and color based on type let height = 1; let color = 0x808080; 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; } else if (type.includes('shop') || type === 'supermarket' || type === 'mall') { height = 3; @@ -154,7 +156,6 @@ export class GameRenderer { addBuilding(buildingData) { const key = `${buildingData.x},${buildingData.y}`; - // Remove existing building at this position if (this.buildings.has(key)) { this.scene.remove(this.buildings.get(key)); @@ -251,7 +252,7 @@ export class GameRenderer { this.cameraPos.y * 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() { diff --git a/static/js/InputHandler.js b/static/js/InputHandler.js index 298339c..436eac6 100644 --- a/static/js/InputHandler.js +++ b/static/js/InputHandler.js @@ -9,21 +9,19 @@ export class InputHandler { this.currentTileX = null; this.currentTileY = null; - this.cursorUpdateThrottle = 100; // ms this.lastCursorUpdate = 0; + this.keyPanSpeed = 3; // Controls camera movement speed with arrow keys } init() { this.canvas = document.getElementById('gameCanvas'); - // Mouse events this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e)); this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e)); this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e)); this.canvas.addEventListener('wheel', (e) => this.onWheel(e)); this.canvas.addEventListener('contextmenu', (e) => e.preventDefault()); - // Keyboard events document.addEventListener('keydown', (e) => this.onKeyDown(e)); } @@ -36,7 +34,6 @@ export class InputHandler { this.canvas.style.cursor = 'grabbing'; } else if (event.button === 0) { // Left mouse button const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); - if (this.app.isPlacingBuilding && this.app.selectedBuildingType) { // Place building this.app.placeBuilding(tile.x, tile.y); @@ -55,7 +52,6 @@ export class InputHandler { const dragThreshold = 5; const dx = Math.abs(event.clientX - this.lastMouseX); const dy = Math.abs(event.clientY - this.lastMouseY); - if (dx < dragThreshold && dy < dragThreshold) { // Right click on tile - show context menu const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); @@ -76,14 +72,12 @@ export class InputHandler { onMouseMove(event) { // Update tile position const tile = this.app.renderer.screenToWorld(event.clientX, event.clientY); - if (tile.x !== this.currentTileX || tile.y !== this.currentTileY) { this.currentTileX = tile.x; this.currentTileY = tile.y; // Highlight tile this.app.renderer.highlightTile(tile.x, tile.y); - // Send cursor position to server (throttled) const now = Date.now(); if (now - this.lastCursorUpdate > this.cursorUpdateThrottle) { @@ -111,11 +105,36 @@ export class InputHandler { } onKeyDown(event) { - // ESC to cancel building placement if (event.key === 'Escape') { this.app.isPlacingBuilding = false; this.app.selectedBuildingType = null; 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 + } } }