Erzangel/web-adventure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: more items, keyboard controls

Browse Source
This commit is contained in:
Erzangel
2026-05-29 18:06:20 +02:00
parent 573085f116
commit 03ddbf08b2
2 changed files with 102 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+42 -13
View File
@@ -498,7 +498,7 @@
<div class="bottom-panel">
<div style="color: #667eea; font-weight: bold; margin-bottom: 10px;">Controls</div>
<div class="controls-help">Each action costs 1 AP. Hover buttons to see details.</div>
<div class="controls-help">Keys: Z/Q/S/D move, A attack, E gather, R loot, 1/2/3/4 build. Arrows keep camera orbit.</div>
<div class="button-group">
<button type="button" class="action-button" id="moveUpBtn" title="Move north by 1 tile (cost: 1 AP)">⬆ N</button>
<button type="button" class="action-button" id="moveDownBtn" title="Move south by 1 tile (cost: 1 AP)">⬇ S</button>
@@ -639,13 +639,14 @@
if (aura.defense) auraParts.push(`+${aura.defense} def`);
if (aura.max_health) auraParts.push(`+${aura.max_health} max HP`);
if (aura.free_move_chance) auraParts.push(`${Math.round(aura.free_move_chance * 100)}% free moves`);
if (w.movement_bonus) auraParts.push(`+${w.movement_bonus} move range`);
const auraLine = auraParts.length > 0
? `<div style="color:#7fd6ff; margin-top:2px; pointer-events:none;">Aura (${w.aura_radius || 0}): ${auraParts.join(', ')}</div>`
: '';
return `<div data-slot="${i}" style="padding:3px 6px;margin:2px 0;border-radius:4px;${border};${bg};cursor:pointer;"
title="Click to equip" class="weapon-slot">
${icon}<b>${w.name}</b>
<span style="color:#aaa"> +${w.attack_bonus}atk +${w.range_bonus}rng</span>
<span style="color:#aaa"> +${w.attack_bonus}atk +${w.range_bonus}rng${w.movement_bonus ? ` +${w.movement_bonus}mov` : ''}</span>
${auraLine}
</div>`;
}).join('');
@@ -1521,21 +1522,49 @@
const key = event.key.toLowerCase();
const rotationStep = 0.12;
const panStep = 1.0;
const hotkeys = ["arrowleft", "arrowright", "arrowup", "arrowdown", "z", "q", "s", "d", "a", "e", "r", "1", "2", "3", "4"];
if (["arrowleft", "arrowright", "arrowup", "arrowdown", "z", "q", "s", "d"].includes(key)) {
if (hotkeys.includes(key)) {
event.preventDefault();
cameraAutoFollow = false;
}
if (key === 'arrowleft') rotateCameraBy(rotationStep, 0, 0);
else if (key === 'arrowright') rotateCameraBy(-rotationStep, 0, 0);
else if (key === 'arrowup') rotateCameraBy(0, -rotationStep * 0.45, 0);
else if (key === 'arrowdown') rotateCameraBy(0, rotationStep * 0.45, 0);
else if (key === 'z') panCameraBy(0, panStep);
else if (key === 's') panCameraBy(0, -panStep);
else if (key === 'q') panCameraBy(-panStep, 0);
else if (key === 'd') panCameraBy(panStep, 0);
// Camera controls stay on arrows only.
if (key === 'arrowleft') {
cameraAutoFollow = false;
rotateCameraBy(rotationStep, 0, 0);
} else if (key === 'arrowright') {
cameraAutoFollow = false;
rotateCameraBy(-rotationStep, 0, 0);
} else if (key === 'arrowup') {
cameraAutoFollow = false;
rotateCameraBy(0, -rotationStep * 0.45, 0);
} else if (key === 'arrowdown') {
cameraAutoFollow = false;
rotateCameraBy(0, rotationStep * 0.45, 0);
// Movement + actions on nearby keys.
} else if (key === 'z') {
document.getElementById('moveUpBtn').click();
} else if (key === 's') {
document.getElementById('moveDownBtn').click();
} else if (key === 'q') {
document.getElementById('moveLeftBtn').click();
} else if (key === 'd') {
document.getElementById('moveRightBtn').click();
} else if (key === 'a') {
document.getElementById('attackBtn').click();
} else if (key === 'e') {
document.getElementById('gatherBtn').click();
} else if (key === 'r') {
document.getElementById('lootBtn').click();
} else if (key === '1') {
document.getElementById('buildHouseBtn').click();
} else if (key === '2') {
document.getElementById('buildFarmBtn').click();
} else if (key === '3') {
document.getElementById('buildTowerBtn').click();
} else if (key === '4') {
document.getElementById('buildBlockBtn').click();
}
});
}