feat: more items
This commit is contained in:
+434
-58
@@ -181,6 +181,18 @@
|
||||
background: #44ff44;
|
||||
}
|
||||
|
||||
.stat-bar-fill.exp {
|
||||
background: #f1c40f;
|
||||
}
|
||||
|
||||
.inv-value { transition: color 0.15s; }
|
||||
.inv-value.flash { color: #66ff88 !important; }
|
||||
|
||||
@keyframes inv-flash {
|
||||
0% { color: #66ff88; }
|
||||
100% { color: inherit; }
|
||||
}
|
||||
|
||||
.inventory {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #667eea;
|
||||
@@ -385,6 +397,9 @@
|
||||
<span class="stat-label">Experience:</span>
|
||||
<span class="stat-value" id="statExp">0</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill exp" id="expBar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">Health:</span>
|
||||
<span class="stat-value" id="statHealth">100/100</span>
|
||||
@@ -416,16 +431,22 @@
|
||||
<span class="stat-value" id="statMove">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 8px; border-top: 1px solid #667eea; padding-top: 8px;">
|
||||
<div style="color: #667eea; font-weight: bold; margin-bottom: 6px;">Nearby Buffs</div>
|
||||
<div id="activeBuffs" style="font-size:0.8em; color:#bbb; line-height:1.25;">No nearby buffs</div>
|
||||
</div>
|
||||
<div class="inventory">
|
||||
<div style="color: #667eea; font-weight: bold; margin-bottom: 10px;">Inventory</div>
|
||||
<div class="inventory-item">
|
||||
<span>Wood:</span>
|
||||
<span id="invWood">0</span>
|
||||
<span>🪵 Wood:</span>
|
||||
<span id="invWood" class="inv-value">0</span>
|
||||
</div>
|
||||
<div class="inventory-item">
|
||||
<span>Stone:</span>
|
||||
<span id="invStone">0</span>
|
||||
<span>🪨 Stone:</span>
|
||||
<span id="invStone" class="inv-value">0</span>
|
||||
</div>
|
||||
<div style="color: #667eea; font-weight: bold; margin: 10px 0 6px;">Equipment</div>
|
||||
<div id="weaponSlots" style="font-size:0.82em; color:#ccc;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -489,14 +510,13 @@
|
||||
<button type="button" class="action-button" id="attackBtn" title="Attack nearest selected enemy target (cost: 1 AP on success)">⚔️ Attack</button>
|
||||
</div>
|
||||
<div class="button-group" style="margin-top: 10px;">
|
||||
<button type="button" class="action-button" id="buildHouseBtn" title="Build House (20 wood, 10 stone)">🏠 House</button>
|
||||
<button type="button" class="action-button" id="buildFarmBtn" title="Build Farm (15 wood, 5 stone)">🌾 Farm</button>
|
||||
<button type="button" class="action-button" id="buildTowerBtn" title="Build Guard Tower (30 wood, 20 stone)">🛡️ Tower</button>
|
||||
<button type="button" class="action-button" id="buildHouseBtn" title="House (+20 max HP bonus nearby) — costs 20 🪵 + 10 🪨">🏠 House (20w 10s)</button>
|
||||
<button type="button" class="action-button" id="buildFarmBtn" title="Farm (doubles AP regeneration nearby) — costs 15 🪵 + 5 🪨">🌾 Farm (15w 5s)</button>
|
||||
<button type="button" class="action-button" id="buildTowerBtn" title="Guard Tower (+2 defense bonus nearby) — costs 30 🪵 + 20 🪨">🛡️ Tower (30w 20s)</button>
|
||||
</div>
|
||||
<div class="button-group" style="margin-top: 10px;">
|
||||
<button type="button" class="action-button" id="buildBlockBtn" title="Build Block 1 tile north (cost: 2 wood)">🧱 Block</button>
|
||||
<button type="button" class="action-button" id="lootBtn" title="Loot nearest chest in range">🗝 Loot</button>
|
||||
<button type="button" class="action-button" id="equipBtn" title="Equip first available weapon slot">⚒ Equip</button>
|
||||
<button type="button" class="action-button" id="buildBlockBtn" title="Place an impassable block 1 tile north — costs 2 🪵">🧱 Block (2w)</button>
|
||||
<button type="button" class="action-button" id="lootBtn" title="Loot nearest chest within range 3 — auto-equips weapon">🗝 Loot</button>
|
||||
</div>
|
||||
<div class="status-message" id="statusMessage">Ready for adventure!</div>
|
||||
</div>
|
||||
@@ -522,6 +542,7 @@
|
||||
let ws = null;
|
||||
let cameraKeyBindingsAttached = false;
|
||||
let cameraAutoFollow = true;
|
||||
let cameraFollowOnMove = true;
|
||||
|
||||
const API_BASE = 'http://localhost:8000/api';
|
||||
|
||||
@@ -530,22 +551,94 @@
|
||||
document.getElementById('statusMessage').textContent = msg;
|
||||
}
|
||||
|
||||
function flashEl(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.classList.remove('flash');
|
||||
void el.offsetWidth;
|
||||
el.classList.add('flash');
|
||||
setTimeout(() => el.classList.remove('flash'), 600);
|
||||
}
|
||||
|
||||
function updateUI() {
|
||||
if (!currentPlayer) return;
|
||||
|
||||
document.getElementById('statLevel').textContent = currentPlayer.level;
|
||||
document.getElementById('statExp').textContent = currentPlayer.exp;
|
||||
const levelProgress = ((currentPlayer.exp || 0) % 100);
|
||||
document.getElementById('expBar').style.width = `${Math.max(0, Math.min(100, levelProgress))}%`;
|
||||
document.getElementById('statHealth').textContent = `${currentPlayer.health}/${currentPlayer.max_health}`;
|
||||
document.getElementById('healthBar').style.width = `${(currentPlayer.health / currentPlayer.max_health) * 100}%`;
|
||||
document.getElementById('statActionPoints').textContent = currentPlayer.action_points;
|
||||
document.getElementById('actionBar').style.width = `${(currentPlayer.action_points / currentPlayer.max_action_points) * 100}%`;
|
||||
document.getElementById('statAttack').textContent = currentPlayer.effective_attack ?? currentPlayer.attack;
|
||||
document.getElementById('statRange').textContent = (currentPlayer.attack_range ?? 4).toFixed(1);
|
||||
document.getElementById('statDefense').textContent = currentPlayer.defense;
|
||||
const nearbyBonuses = currentPlayer.nearby_bonuses || {};
|
||||
const defenseBonus = Number(nearbyBonuses.defense || 0);
|
||||
const baseDefense = Number(currentPlayer.base_defense ?? currentPlayer.defense ?? 0);
|
||||
const effectiveDefense = Number(currentPlayer.defense ?? baseDefense);
|
||||
document.getElementById('statDefense').textContent = defenseBonus > 0
|
||||
? `${baseDefense} (+${defenseBonus}) = ${effectiveDefense}`
|
||||
: effectiveDefense;
|
||||
document.getElementById('statMove').textContent = currentPlayer.movement_capacity;
|
||||
|
||||
document.getElementById('invWood').textContent = currentPlayer.inventory.wood || 0;
|
||||
document.getElementById('invStone').textContent = currentPlayer.inventory.stone || 0;
|
||||
const buffRows = [];
|
||||
const actionRegen = Number(nearbyBonuses.action_regen || 0);
|
||||
const healthBonus = Number(nearbyBonuses.max_health || 0);
|
||||
const hpRegenBonus = Number(nearbyBonuses.hp_regen || 0);
|
||||
const freeMoveChance = Number(nearbyBonuses.free_move_chance || 0);
|
||||
if (actionRegen > 0) buffRows.push(`⚡ Nearby aura: +${actionRegen} AP per regen tick`);
|
||||
if (defenseBonus > 0) buffRows.push(`🛡️ Nearby aura: +${defenseBonus} defense`);
|
||||
if (healthBonus > 0) buffRows.push(`❤️ Nearby aura: +${healthBonus} max HP`);
|
||||
if (hpRegenBonus > 0) buffRows.push(`💚 Nearby aura: +${hpRegenBonus} HP per regen tick`);
|
||||
if (freeMoveChance > 0) buffRows.push(`👢 Nearby aura: ${Math.round(freeMoveChance * 100)}% chance moves cost 0 AP`);
|
||||
document.getElementById('activeBuffs').innerHTML = buffRows.length > 0
|
||||
? buffRows.join('<br>')
|
||||
: '<span style="color:#555">No nearby buffs</span>';
|
||||
|
||||
const newWood = currentPlayer.inventory.wood || 0;
|
||||
const newStone = currentPlayer.inventory.stone || 0;
|
||||
const prevWood = parseInt(document.getElementById('invWood').textContent) || 0;
|
||||
const prevStone = parseInt(document.getElementById('invStone').textContent) || 0;
|
||||
document.getElementById('invWood').textContent = newWood;
|
||||
document.getElementById('invStone').textContent = newStone;
|
||||
if (newWood !== prevWood) flashEl('invWood');
|
||||
if (newStone !== prevStone) flashEl('invStone');
|
||||
|
||||
// Weapon slots
|
||||
const slots = currentPlayer.weapon_slots || [];
|
||||
const equippedIdx = currentPlayer.equipped_weapon_slot ?? -1;
|
||||
const slotEl = document.getElementById('weaponSlots');
|
||||
if (slotEl) {
|
||||
const filled = slots.filter(Boolean);
|
||||
if (filled.length === 0) {
|
||||
slotEl.innerHTML = '<span style="color:#555">No weapons</span>';
|
||||
} else {
|
||||
slotEl.innerHTML = slots.map((w, i) => {
|
||||
if (!w) return '';
|
||||
const eq = i === equippedIdx;
|
||||
const border = eq ? 'border:1px solid #f1c40f' : 'border:1px solid #444';
|
||||
const bg = eq ? 'background:#2a2600' : 'background:#1e1e1e';
|
||||
const icon = eq ? '⚔️ ' : '· ';
|
||||
const aura = w.aura_bonuses || {};
|
||||
const auraParts = [];
|
||||
if (aura.action_regen) auraParts.push(`+${aura.action_regen} AP regen`);
|
||||
if (aura.hp_regen) auraParts.push(`+${aura.hp_regen} HP regen`);
|
||||
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`);
|
||||
const auraLine = auraParts.length > 0
|
||||
? `<div style="color:#7fd6ff; margin-top:2px;">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">
|
||||
${icon}<b>${w.name}</b>
|
||||
<span style="color:#aaa"> +${w.attack_bonus}atk +${w.range_bonus}rng</span>
|
||||
${auraLine}
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
}
|
||||
|
||||
if (gameState) {
|
||||
const activePlayerCount = Object.values(gameState.players).filter(p => p.active).length;
|
||||
@@ -568,6 +661,8 @@
|
||||
const structureObjects = {};
|
||||
const resourceObjects = {};
|
||||
const chestObjects = {};
|
||||
const worldEffects = [];
|
||||
let previousFrameTime = performance.now();
|
||||
|
||||
function initScene() {
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
@@ -619,7 +714,7 @@
|
||||
scene.add(directionalLight);
|
||||
|
||||
// Ground plane
|
||||
const groundGeometry = new THREE.PlaneGeometry(500, 500);
|
||||
const groundGeometry = new THREE.PlaneGeometry(200, 200);
|
||||
const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x1a3a1a });
|
||||
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
|
||||
ground.rotation.x = -Math.PI / 2;
|
||||
@@ -627,7 +722,7 @@
|
||||
scene.add(ground);
|
||||
|
||||
// Grid helper: smaller cells so 1-tile movement matches visible grid steps.
|
||||
const gridHelper = new THREE.GridHelper(500, 500, 0x4a5d66, 0x2b3b42);
|
||||
const gridHelper = new THREE.GridHelper(200, 200, 0x4a5d66, 0x2b3b42);
|
||||
gridHelper.position.y = 0.1;
|
||||
scene.add(gridHelper);
|
||||
|
||||
@@ -730,21 +825,28 @@
|
||||
sphere.receiveShadow = true;
|
||||
scene.add(sphere);
|
||||
|
||||
// Add label
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = 256;
|
||||
canvas.height = 128;
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.font = '32px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(player.username, 128, 64);
|
||||
// Compact nameplate — canvas is exactly as tall as the pill so no
|
||||
// transparent headroom inflates the visible sprite quad.
|
||||
const nameCvs = document.createElement('canvas');
|
||||
const nameCtx = nameCvs.getContext('2d');
|
||||
nameCvs.width = 256;
|
||||
nameCvs.height = 44; // just enough for one line of 28px text
|
||||
nameCtx.font = 'bold 28px Arial';
|
||||
const textWidth = nameCtx.measureText(player.username).width;
|
||||
const bgWidth = Math.min(nameCvs.width, textWidth + 22);
|
||||
const bgX = (nameCvs.width - bgWidth) / 2;
|
||||
drawRoundedRect(nameCtx, bgX, 0, bgWidth, nameCvs.height, 8, 'rgba(0,0,0,0.50)');
|
||||
nameCtx.fillStyle = '#ffffff';
|
||||
nameCtx.textAlign = 'center';
|
||||
nameCtx.textBaseline = 'middle';
|
||||
nameCtx.fillText(player.username, nameCvs.width / 2, nameCvs.height / 2);
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
|
||||
// Scale sprite so world-height matches canvas aspect: width=3.2, height=3.2*(44/256)≈0.55
|
||||
const texture = new THREE.CanvasTexture(nameCvs);
|
||||
const spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true, depthWrite: false });
|
||||
const sprite = new THREE.Sprite(spriteMaterial);
|
||||
sprite.scale.set(4, 2, 1);
|
||||
const spriteW = 3.2;
|
||||
sprite.scale.set(spriteW, spriteW * (nameCvs.height / nameCvs.width), 1);
|
||||
sprite.position.set(player.position.x, 2.5, player.position.y);
|
||||
scene.add(sprite);
|
||||
|
||||
@@ -753,10 +855,29 @@
|
||||
const northArrow = new THREE.Mesh(northGeo, northMat);
|
||||
// Rotate so the tip points north (-Z direction in Three.js world space).
|
||||
northArrow.rotation.x = -Math.PI / 2;
|
||||
northArrow.position.set(player.position.x, 0.9, player.position.y - 0.8);
|
||||
northArrow.position.set(player.position.x, 0.5, player.position.y - 1.1);
|
||||
scene.add(northArrow);
|
||||
|
||||
playerSpheres[player.id] = { mesh: sphere, sprite, northArrow };
|
||||
setPlayerVisualState(player);
|
||||
}
|
||||
|
||||
function setPlayerVisualState(player) {
|
||||
const sphereObj = playerSpheres[player.id];
|
||||
if (!sphereObj) return;
|
||||
const isActive = player.active !== false;
|
||||
const opacity = isActive ? 1.0 : 0.35;
|
||||
|
||||
sphereObj.mesh.material.transparent = !isActive;
|
||||
sphereObj.mesh.material.opacity = opacity;
|
||||
|
||||
sphereObj.sprite.material.transparent = !isActive;
|
||||
sphereObj.sprite.material.opacity = opacity;
|
||||
|
||||
if (sphereObj.northArrow) {
|
||||
sphereObj.northArrow.material.transparent = !isActive;
|
||||
sphereObj.northArrow.material.opacity = opacity;
|
||||
}
|
||||
}
|
||||
|
||||
function updatePlayerSphere(player) {
|
||||
@@ -764,11 +885,87 @@
|
||||
playerSpheres[player.id].mesh.position.set(player.position.x, 0.5, player.position.y);
|
||||
playerSpheres[player.id].sprite.position.set(player.position.x, 2.5, player.position.y);
|
||||
if (playerSpheres[player.id].northArrow) {
|
||||
playerSpheres[player.id].northArrow.position.set(player.position.x, 0.9, player.position.y - 0.8);
|
||||
playerSpheres[player.id].northArrow.position.set(player.position.x, 0.5, player.position.y - 1.1);
|
||||
}
|
||||
setPlayerVisualState(player);
|
||||
}
|
||||
}
|
||||
|
||||
function createTextSprite(initialText, textColor = '#ffffff', bgColor = 'rgba(0, 0, 0, 0.7)') {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 256;
|
||||
canvas.height = 96;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
const material = new THREE.SpriteMaterial({ map: texture, transparent: true, depthWrite: false });
|
||||
const sprite = new THREE.Sprite(material);
|
||||
sprite.scale.set(3.5, 1.3, 1);
|
||||
|
||||
const spriteObj = { sprite, canvas, ctx, texture, textColor, bgColor };
|
||||
updateTextSprite(spriteObj, initialText);
|
||||
return spriteObj;
|
||||
}
|
||||
|
||||
function drawRoundedRect(ctx, x, y, width, height, radius, fillStyle) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + width - radius, y);
|
||||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||
ctx.lineTo(x + width, y + height - radius);
|
||||
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||||
ctx.lineTo(x + radius, y + height);
|
||||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function createProgressBarSprite() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 200;
|
||||
canvas.height = 40;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
const material = new THREE.SpriteMaterial({ map: texture, transparent: true, depthWrite: false });
|
||||
const sprite = new THREE.Sprite(material);
|
||||
sprite.scale.set(2.2, 0.35, 1);
|
||||
|
||||
return { sprite, canvas, ctx, texture };
|
||||
}
|
||||
|
||||
function updateProgressBarSprite(barObj, ratio, fillColor = '#ff5555') {
|
||||
const { canvas, ctx, texture } = barObj;
|
||||
const clampedRatio = Math.max(0, Math.min(1, ratio));
|
||||
const pad = 4;
|
||||
const trackX = 12;
|
||||
const trackY = 10;
|
||||
const trackW = canvas.width - 24;
|
||||
const trackH = 20;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawRoundedRect(ctx, trackX - pad, trackY - pad, trackW + pad * 2, trackH + pad * 2, 8, 'rgba(0, 0, 0, 0.65)');
|
||||
drawRoundedRect(ctx, trackX, trackY, trackW, trackH, 6, '#333333');
|
||||
drawRoundedRect(ctx, trackX, trackY, trackW * clampedRatio, trackH, 6, fillColor);
|
||||
texture.needsUpdate = true;
|
||||
}
|
||||
|
||||
function updateTextSprite(spriteObj, text) {
|
||||
const { canvas, ctx, texture, textColor, bgColor } = spriteObj;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.font = 'bold 30px Arial';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
|
||||
texture.needsUpdate = true;
|
||||
}
|
||||
|
||||
function createMonsterCube(monster) {
|
||||
const geometry = new THREE.BoxGeometry(0.6, 0.6, 0.6);
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0xff4444 });
|
||||
@@ -776,7 +973,70 @@
|
||||
cube.position.set(monster.position.x, 0.3, monster.position.y);
|
||||
cube.castShadow = true;
|
||||
scene.add(cube);
|
||||
monsterCubes[monster.id] = cube;
|
||||
|
||||
const label = createTextSprite(`Lv ${monster.level} HP ${monster.health}/${monster.max_health}`, '#ffdede');
|
||||
label.sprite.position.set(monster.position.x, 1.25, monster.position.y);
|
||||
scene.add(label.sprite);
|
||||
|
||||
const hpBar = createProgressBarSprite();
|
||||
hpBar.sprite.position.set(monster.position.x, 0.95, monster.position.y);
|
||||
updateProgressBarSprite(hpBar, monster.max_health > 0 ? monster.health / monster.max_health : 0);
|
||||
scene.add(hpBar.sprite);
|
||||
|
||||
monsterCubes[monster.id] = { mesh: cube, label, hpBar };
|
||||
}
|
||||
|
||||
function spawnFloatingText(text, worldX, worldZ, color = '#ffffff') {
|
||||
const textObj = createTextSprite(text, color, 'rgba(0, 0, 0, 0.55)');
|
||||
textObj.sprite.scale.set(2.5, 0.95, 1);
|
||||
textObj.sprite.position.set(worldX, 1.4, worldZ);
|
||||
scene.add(textObj.sprite);
|
||||
worldEffects.push({
|
||||
type: 'text',
|
||||
object: textObj.sprite,
|
||||
life: 0.9,
|
||||
maxLife: 0.9,
|
||||
velocityY: 1.6,
|
||||
});
|
||||
}
|
||||
|
||||
function spawnGroundPulse(worldX, worldZ, color = 0xffffff) {
|
||||
const ring = new THREE.Mesh(
|
||||
new THREE.RingGeometry(0.22, 0.34, 24),
|
||||
new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.9, side: THREE.DoubleSide })
|
||||
);
|
||||
ring.rotation.x = -Math.PI / 2;
|
||||
ring.position.set(worldX, 0.06, worldZ);
|
||||
scene.add(ring);
|
||||
worldEffects.push({
|
||||
type: 'pulse',
|
||||
object: ring,
|
||||
life: 0.45,
|
||||
maxLife: 0.45,
|
||||
growth: 2.2,
|
||||
});
|
||||
}
|
||||
|
||||
function updateWorldEffects(deltaTime) {
|
||||
for (let i = worldEffects.length - 1; i >= 0; i--) {
|
||||
const fx = worldEffects[i];
|
||||
fx.life -= deltaTime;
|
||||
if (fx.life <= 0) {
|
||||
scene.remove(fx.object);
|
||||
worldEffects.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
const t = fx.life / fx.maxLife;
|
||||
if (fx.type === 'text') {
|
||||
fx.object.position.y += fx.velocityY * deltaTime;
|
||||
fx.object.material.opacity = t;
|
||||
} else if (fx.type === 'pulse') {
|
||||
const scale = 1 + (1 - t) * fx.growth;
|
||||
fx.object.scale.set(scale, scale, scale);
|
||||
fx.object.material.opacity = t;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createBossMesh(monster) {
|
||||
@@ -833,15 +1093,39 @@
|
||||
|
||||
function createResourceMesh(resource) {
|
||||
const isTree = resource.resource_type === 'tree';
|
||||
const geometry = isTree
|
||||
? new THREE.ConeGeometry(0.45, 1.1, 8)
|
||||
: new THREE.BoxGeometry(0.9, 0.75, 0.9);
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: isTree ? 0x2e8b57 : 0x6f7b86,
|
||||
});
|
||||
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(resource.position.x, isTree ? 0.55 : 0.38, resource.position.y);
|
||||
let mesh;
|
||||
if (isTree) {
|
||||
// Trunk
|
||||
const trunkGeo = new THREE.CylinderGeometry(0.1, 0.14, 0.55, 7);
|
||||
const trunkMat = new THREE.MeshPhongMaterial({ color: 0x8b5e3c });
|
||||
const trunk = new THREE.Mesh(trunkGeo, trunkMat);
|
||||
trunk.position.y = 0.28;
|
||||
trunk.castShadow = true;
|
||||
|
||||
// Canopy
|
||||
const canopyGeo = new THREE.ConeGeometry(0.52, 1.2, 8);
|
||||
const canopyMat = new THREE.MeshPhongMaterial({ color: 0x2e8b57 });
|
||||
const canopy = new THREE.Mesh(canopyGeo, canopyMat);
|
||||
canopy.position.y = 1.15; // sits on top of trunk
|
||||
canopy.castShadow = true;
|
||||
|
||||
const group = new THREE.Group();
|
||||
group.add(trunk);
|
||||
group.add(canopy);
|
||||
group.position.set(resource.position.x, 0, resource.position.y);
|
||||
group.receiveShadow = true;
|
||||
scene.add(group);
|
||||
resourceObjects[resource.id] = group;
|
||||
return;
|
||||
}
|
||||
|
||||
// Mountain / rock
|
||||
const geometry = new THREE.DodecahedronGeometry(0.52, 0);
|
||||
const material = new THREE.MeshPhongMaterial({ color: 0x6f7b86 });
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.set(resource.position.x, 0.52, resource.position.y);
|
||||
mesh.rotation.set(Math.random() * 0.4, Math.random() * Math.PI, Math.random() * 0.4);
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
scene.add(mesh);
|
||||
@@ -875,14 +1159,26 @@
|
||||
if (!monsterCubes[monster.id]) {
|
||||
createMonsterCube(monster);
|
||||
} else {
|
||||
monsterCubes[monster.id].position.set(monster.position.x, 0.3, monster.position.y);
|
||||
monsterCubes[monster.id].mesh.position.set(monster.position.x, 0.3, monster.position.y);
|
||||
monsterCubes[monster.id].label.sprite.position.set(monster.position.x, 1.25, monster.position.y);
|
||||
monsterCubes[monster.id].hpBar.sprite.position.set(monster.position.x, 0.95, monster.position.y);
|
||||
updateTextSprite(
|
||||
monsterCubes[monster.id].label,
|
||||
`Lv ${monster.level} HP ${Math.max(0, monster.health)}/${monster.max_health}`
|
||||
);
|
||||
updateProgressBarSprite(
|
||||
monsterCubes[monster.id].hpBar,
|
||||
monster.max_health > 0 ? monster.health / monster.max_health : 0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove deleted monsters
|
||||
for (const mid in monsterCubes) {
|
||||
if (!(gameState.monsters || {})[mid]) {
|
||||
scene.remove(monsterCubes[mid]);
|
||||
scene.remove(monsterCubes[mid].mesh);
|
||||
scene.remove(monsterCubes[mid].label.sprite);
|
||||
scene.remove(monsterCubes[mid].hpBar.sprite);
|
||||
delete monsterCubes[mid];
|
||||
}
|
||||
}
|
||||
@@ -919,7 +1215,15 @@
|
||||
|
||||
const chests = gameState.chests || {};
|
||||
for (const chest of Object.values(chests)) {
|
||||
if (!chestObjects[chest.id]) createChestMesh(chest);
|
||||
if (chest.opened) {
|
||||
// Remove from scene as soon as it's marked opened
|
||||
if (chestObjects[chest.id]) {
|
||||
scene.remove(chestObjects[chest.id]);
|
||||
delete chestObjects[chest.id];
|
||||
}
|
||||
} else if (!chestObjects[chest.id]) {
|
||||
createChestMesh(chest);
|
||||
}
|
||||
}
|
||||
for (const cid in chestObjects) {
|
||||
if (!chests[cid]) {
|
||||
@@ -935,11 +1239,28 @@
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
const now = performance.now();
|
||||
const deltaTime = Math.min((now - previousFrameTime) / 1000, 0.05);
|
||||
previousFrameTime = now;
|
||||
updateGameScene();
|
||||
updateWorldEffects(deltaTime);
|
||||
if (controls) controls.update();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
function followCameraByPlayerDelta(previousPosition, nextPosition) {
|
||||
if (!camera || !controls || !cameraFollowOnMove || !previousPosition || !nextPosition) return;
|
||||
const deltaX = (nextPosition.x ?? 0) - (previousPosition.x ?? 0);
|
||||
const deltaZ = (nextPosition.y ?? 0) - (previousPosition.y ?? 0);
|
||||
if (Math.abs(deltaX) < 0.0001 && Math.abs(deltaZ) < 0.0001) return;
|
||||
|
||||
controls.target.x += deltaX;
|
||||
controls.target.z += deltaZ;
|
||||
camera.position.x += deltaX;
|
||||
camera.position.z += deltaZ;
|
||||
controls.update();
|
||||
}
|
||||
|
||||
// ==================== API FUNCTIONS ====================
|
||||
async function login(username, color) {
|
||||
try {
|
||||
@@ -976,8 +1297,12 @@
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'state_update') {
|
||||
const previousPosition = currentPlayer ? { ...currentPlayer.position } : null;
|
||||
gameState = data;
|
||||
currentPlayer = gameState.players[currentPlayerId] || currentPlayer;
|
||||
if (currentPlayer && previousPosition) {
|
||||
followCameraByPlayerDelta(previousPosition, currentPlayer.position);
|
||||
}
|
||||
|
||||
document.getElementById('timeRemaining').textContent = formatTime(data.time_remaining);
|
||||
|
||||
@@ -1011,6 +1336,7 @@
|
||||
|
||||
async function movePlayer(dx, dy) {
|
||||
try {
|
||||
const previousPosition = currentPlayer ? { ...currentPlayer.position } : null;
|
||||
const response = await fetch(`${API_BASE}/player/${currentPlayerId}/move`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -1028,6 +1354,7 @@
|
||||
currentPlayer.position = data.position;
|
||||
currentPlayer.action_points = data.action_points ?? currentPlayer.action_points;
|
||||
updatePlayerSphere(currentPlayer);
|
||||
followCameraByPlayerDelta(previousPosition, currentPlayer.position);
|
||||
focusCameraOnPlayer(false);
|
||||
updateUI();
|
||||
}
|
||||
@@ -1052,6 +1379,38 @@
|
||||
} else {
|
||||
showMessage(`Action failed: ${data.reason || 'Unknown error'}`);
|
||||
}
|
||||
|
||||
if (data.success && currentPlayer) {
|
||||
if (typeof data.player_health === 'number') {
|
||||
currentPlayer.health = data.player_health;
|
||||
}
|
||||
if (data.respawn_position) {
|
||||
currentPlayer.position = data.respawn_position;
|
||||
updatePlayerSphere(currentPlayer);
|
||||
focusCameraOnPlayer(true);
|
||||
}
|
||||
|
||||
if (actionType === 'gather' && data.gathered) {
|
||||
const wood = data.gathered.wood || 0;
|
||||
const stone = data.gathered.stone || 0;
|
||||
const parts = [];
|
||||
if (wood > 0) parts.push(`+${wood} wood`);
|
||||
if (stone > 0) parts.push(`+${stone} stone`);
|
||||
if (parts.length > 0) {
|
||||
spawnGroundPulse(currentPlayer.position.x, currentPlayer.position.y, 0x66ff88);
|
||||
spawnFloatingText(parts.join(' '), currentPlayer.position.x, currentPlayer.position.y, '#9cff9c');
|
||||
}
|
||||
}
|
||||
if (actionType === 'attack') {
|
||||
if (typeof data.damage === 'number') {
|
||||
spawnFloatingText(`-${data.damage} HP`, currentPlayer.position.x, currentPlayer.position.y, '#ff9999');
|
||||
}
|
||||
if (typeof data.retaliation_damage === 'number' && data.retaliation_damage > 0) {
|
||||
spawnGroundPulse(currentPlayer.position.x, currentPlayer.position.y, 0xff6666);
|
||||
spawnFloatingText(`Retaliated: -${data.retaliation_damage}`, currentPlayer.position.x, currentPlayer.position.y, '#ff7777');
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Action failed:', error);
|
||||
@@ -1122,7 +1481,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('attackBtn').onclick = () => {
|
||||
document.getElementById('attackBtn').onclick = async () => {
|
||||
if (!gameState || !currentPlayer) {
|
||||
showMessage('No targets available');
|
||||
return;
|
||||
@@ -1150,11 +1509,19 @@
|
||||
showMessage(`No target in range (${range.toFixed(1)})`);
|
||||
return;
|
||||
}
|
||||
performAction('attack', nearest.id);
|
||||
spawnGroundPulse(nearest.position.x, nearest.position.y, 0xffaa66);
|
||||
const result = await performAction('attack', nearest.id);
|
||||
if (result && result.success && typeof result.damage === 'number') {
|
||||
spawnFloatingText(`-${result.damage}`, nearest.position.x, nearest.position.y, '#ffb0b0');
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('gatherBtn').onclick = () => {
|
||||
performAction('gather', null);
|
||||
document.getElementById('gatherBtn').onclick = async () => {
|
||||
const data = await performAction('gather', null);
|
||||
if (data && data.success && data.inventory && currentPlayer) {
|
||||
currentPlayer.inventory = data.inventory;
|
||||
updateUI();
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('buildHouseBtn').onclick = () => {
|
||||
@@ -1176,22 +1543,31 @@
|
||||
document.getElementById('lootBtn').onclick = async () => {
|
||||
const data = await performAction('loot');
|
||||
if (data && data.success && typeof data.slot_index === 'number') {
|
||||
await performAction('equip', null, null, null, null, data.slot_index);
|
||||
if (data.weapon_slots) currentPlayer.weapon_slots = data.weapon_slots;
|
||||
const equipData = await performAction('equip', null, null, null, null, data.slot_index);
|
||||
if (equipData && equipData.success) {
|
||||
currentPlayer.equipped_weapon_slot = equipData.equipped_weapon_slot;
|
||||
showMessage(`Equipped: ${data.weapon ? data.weapon.name : 'weapon'}!`);
|
||||
}
|
||||
updateUI();
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('equipBtn').onclick = () => {
|
||||
if (!currentPlayer || !Array.isArray(currentPlayer.weapon_slots)) {
|
||||
showMessage('No weapon slots available');
|
||||
return;
|
||||
// Click a weapon in the inventory panel to equip it (no AP cost).
|
||||
document.getElementById('weaponSlots').addEventListener('click', async (e) => {
|
||||
const targetEl = e.target instanceof Element ? e.target : e.target?.parentElement;
|
||||
if (!targetEl) return;
|
||||
const div = targetEl.closest('[data-slot]');
|
||||
if (!div) return;
|
||||
const slotIndex = parseInt(div.dataset.slot);
|
||||
if (Number.isNaN(slotIndex)) return;
|
||||
const equipData = await performAction('equip', null, null, null, null, slotIndex);
|
||||
if (equipData && equipData.success) {
|
||||
currentPlayer.equipped_weapon_slot = equipData.equipped_weapon_slot;
|
||||
showMessage(`Equipped: ${currentPlayer.weapon_slots[slotIndex]?.name}`);
|
||||
updateUI();
|
||||
}
|
||||
const slot = currentPlayer.weapon_slots.findIndex(w => w);
|
||||
if (slot < 0) {
|
||||
showMessage('No weapon to equip');
|
||||
return;
|
||||
}
|
||||
performAction('equip', null, null, null, null, slot);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== LOGIN FORM ====================
|
||||
|
||||
Reference in New Issue
Block a user