citygamin

+ {bodyOverlays.map(o => ( +

+ ))} +

+ ) +} + +function App() { + const [hovered, setHovered] = useState(null) + const [selected, setSelected] = useState(null) + const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) + const [view, setView] = useState({ x: 0, y: 0, scale: 1 }) + const [playerLoc, setPlayerLoc] = useState('A') + const [travelAnim, setTravelAnim] = useState(null) + const [combat, setCombat] = useState(null) + const [bodyParts, setBodyParts] = useState(freshBody()) + const [bodyInjuries, setBodyInjuries] = useState(freshInjuries()) + const [combatTime, setCombatTime] = useState(0) + const [displayTime, setDisplayTime] = useState(0) + const [playerMoney, setPlayerMoney] = useState(50) + const [playerInventory, setPlayerInventory] = useState(['leather_bag']) + const [hoverInfo, setHoverInfo] = useState(null) + const [equippedWeapons, setEquippedWeapons] = useState({ left: 'fists', right: 'rusty_sword' }) + const [weaponConditions, setWeaponConditions] = useState({ rusty_sword: 65 }) + const [buyArmChoice, setBuyArmChoice] = useState(null) + const [showInventory, setShowInventory] = useState(false) + const [invTab, setInvTab] = useState('health') + const [gameTime, setGameTime] = useState({ day: 1, hour: 8 }) + const [contextMenu, setContextMenu] = useState(null) + const [weather, setWeather] = useState('clear') + const [expandedWeapon, setExpandedWeapon] = useState(null) + const [weaponsOpen, setWeaponsOpen] = useState(false) + const [itemsOpen, setItemsOpen] = useState(false) + const [movementOpen, setMovementOpen] = useState(false) + const [moveMode, setMoveMode] = useState(null) + const [playerMoveTarget, setPlayerMoveTarget] = useState(null) + const [moveAnim, setMoveAnim] = useState(null) + const [attackAnim, setAttackAnim] = useState(null) + const [attackLerp, setAttackLerp] = useState(null) + const [hitShake, setHitShake] = useState(null) + const [mapView, setMapView] = useState({ x: 0, y: 0, size: 150 }) + const mapPanning = useRef(false) + const mapMoved = useRef(false) + const mapPanStart = useRef({ x: 0, y: 0 }) + const moveAnimRef = useRef(null) + moveAnimRef.current = moveAnim + const attackAnimRef = useRef(null) + attackAnimRef.current = attackAnim + const combatRef = useRef(null) + combatRef.current = combat + + const locMap = {} + locations.forEach(l => { locMap[l.id] = l }) + + const weatherLabels = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', storm: 'Storm' } + + const combatLogEnd = useRef(null) + const svgRef = useRef(null) + const isPanning = useRef(false) + const panStart = useRef({ x: 0, y: 0 }) + + const playerHp = totalHp(bodyParts) + const currentWeight = playerInventory.reduce((sum, id) => sum + (itemMap[id]?.weight ?? 0), 0) + + const [showSettings, setShowSettings] = useState(false) + const [showLocationModal, setShowLocationModal] = useState(null) + const [surroundingsExpanded, setSurroundingsExpanded] = useState(false) + const [charactersExpanded, setCharactersExpanded] = useState(false) + const [actionNpc, setActionNpc] = useState(null) + const [selectedNpc, setSelectedNpc] = useState(null) + const [locationLog, setLocationLog] = useState([`You arrive at ${locMap[playerLoc]?.name}.`]) + const [limbSelect, setLimbSelect] = useState(null) + const [selectedTarget, setSelectedTarget] = useState(null) + const [selectedSkill, setSelectedSkill] = useState(null) + const [selectedEnemy, setSelectedEnemy] = useState(0) + const [targetEnemy, setTargetEnemy] = useState(null) + const [showEnemyInv, setShowEnemyInv] = useState(false) + const [enemyInvTab, setEnemyInvTab] = useState('health') + const [charView, setCharView] = useState(null) + + const liveCharacters = characters + + const connectedTo = (locId) => { + const result = [] + for (const c of connections) { + if (c.from === locId) result.push(c.to) + if (c.to === locId) result.push(c.from) + } + return result + } + + const shopAtLoc = shops.find(s => s.locationId === selected) + + const travel = (targetId) => { + if (travelAnim) return + const from = locations.find(l => l.id === playerLoc) + const to = locations.find(l => l.id === targetId) + if (!from || !to) return + setTravelAnim({ from, to, fromId: playerLoc, toId: targetId, startTs: null, progress: 0 }) + } + + const buyItem = (item) => { + if (playerMoney < item.price) return + if (item.weaponId) { + setBuyArmChoice({ item }) + } else { + setPlayerMoney(m => m - item.price) + setPlayerInventory(prev => [...prev, item.itemId]) + } + } + + const confirmEquipArm = (arm) => { + const { item } = buyArmChoice + setPlayerMoney(m => m - item.price) + setWeaponConditions(prev => ({ ...prev, [item.weaponId]: weaponMap[item.weaponId].maxCondition })) + setEquippedWeapons(prev => { + if (arm === 'left') return { ...prev, left: item.weaponId } + if (arm === 'right') return { ...prev, right: item.weaponId } + return { left: item.weaponId, right: item.weaponId } + }) + setBuyArmChoice(null) + } + + const handleWheel = (e) => { + e.preventDefault() + const rect = svgRef.current.getBoundingClientRect() + const mx = e.clientX - rect.left + const my = e.clientY - rect.top + const factor = e.deltaY > 0 ? 0.9 : 1.1 + setView(v => { + const ns = Math.max(0.3, Math.min(3, v.scale * factor)) + const rx = mx / rect.width + const ry = my / rect.height + const nx = v.x + (rx * 800) / v.scale - (rx * 800) / ns + const ny = v.y + (ry * 600) / v.scale - (ry * 600) / ns + return { x: nx, y: ny, scale: ns } + }) + } + + const handleBgPointerDown = (e) => { + if (e.button !== 0) return + isPanning.current = true + panStart.current = { x: e.clientX, y: e.clientY, vx: view.x, vy: view.y } + e.currentTarget.setPointerCapture(e.pointerId) + } + + const handleBgPointerMove = (e) => { + if (!isPanning.current) return + const dx = (e.clientX - panStart.current.x) / view.scale + const dy = (e.clientY - panStart.current.y) / view.scale + setView(v => ({ ...v, x: panStart.current.vx - dx, y: panStart.current.vy - dy })) + } + + const handleBgPointerUp = () => { + isPanning.current = false + } + + const zoomIn = () => { + const rect = svgRef.current.getBoundingClientRect() + const mx = mousePos.x - rect.left + const my = mousePos.y - rect.top + const factor = 1.3 + setView(v => { + const ns = Math.max(0.3, Math.min(3, v.scale * factor)) + const rx = mx / rect.width + const ry = my / rect.height + const nx = v.x + (rx * 800) / v.scale - (rx * 800) / ns + const ny = v.y + (ry * 600) / v.scale - (ry * 600) / ns + return { x: nx, y: ny, scale: ns } + }) + } + + const zoomOut = () => { + const rect = svgRef.current.getBoundingClientRect() + const mx = mousePos.x - rect.left + const my = mousePos.y - rect.top + const factor = 1 / 1.3 + setView(v => { + const ns = Math.max(0.3, Math.min(3, v.scale * factor)) + const rx = mx / rect.width + const ry = my / rect.height + const nx = v.x + (rx * 800) / v.scale - (rx * 800) / ns + const ny = v.y + (ry * 600) / v.scale - (ry * 600) / ns + return { x: nx, y: ny, scale: ns } + }) + } + + const makeEnemy = (npc, index) => { + const npcWeaponId = npc.weapon ?? 'fists' + const npcWeapon = weaponMap[npcWeaponId] + const spread = 20 + return { + id: npc.id, + name: npc.name, + pos: { x: 120 + index * spread, y: 60 + index * spread }, + integrity: freshBody(), + injuries: freshInjuries(), + attack: npcWeapon?.damage ?? 30, + speed: npcWeapon?.speed ?? 10, + weapon: npcWeaponId, + inventory: npc.inventory ?? [], + money: npc.money ?? 0, + } + } + + const startFight = (npcList) => { + const list = npcList ?? (() => { + const npc = liveCharacters.find(c => c.id === actionNpc) + return npc ? [npc] : [] + })() + if (list.length === 0) return + const enemies = list.map((npc, i) => makeEnemy(npc, i)) + setCombat({ + playerPos: { x: 20, y: 75 }, + log: [`You engage ${enemies.map(e => e.name).join(' and ')} in combat!`], + enemies + }) + setCombatTime(0) + setExpandedWeapon('ROOT') + setDisplayTime(0) + setSelectedEnemy(0) + } + + const getSkillRange = (weaponId, skillName) => { + if (weaponId === 'left_arm' || weaponId === 'right_arm') return 12 + const base = weaponMap[weaponId] + if (!base) return 15 + const skill = (base.skills ?? []).find(s => s.name === skillName) + return skill?.range ?? 15 + } + + const canAttack = (weaponId, skillName, enemyIndex) => { + if (!combat) return false + const enemy = combat.enemies[enemyIndex ?? selectedEnemy] + if (!enemy || enemy.integrity.head <= 0) return false + const dx = combat.playerPos.x - enemy.pos.x + const dy = combat.playerPos.y - enemy.pos.y + const range = getSkillRange(weaponId, skillName) + return Math.sqrt(dx * dx + dy * dy) <= range + } + + const startMove = (targetX, targetY) => { + if (!combat) return + if (moveAnim || attackAnim) return + const fromX = combat.playerPos.x + const fromY = combat.playerPos.y + const dx = targetX - fromX + const dy = targetY - fromY + const dist = Math.sqrt(dx * dx + dy * dy) + if (dist < 1) return + const speed = moveMode === 'walk' ? 1 : 3 + setMoveAnim({ fromX, fromY, toX: targetX, toY: targetY, speed }) + setMoveMode(null) + } + + const zoomMap = (step) => { + setMapView(v => { + const newSize = Math.max(30, Math.min(250, v.size + step * 10)) + const cx = v.x + v.size / 2 + const cy = v.y + v.size / 2 + const clampedX = newSize > 150 ? (150 - newSize) / 2 : Math.max(0, Math.min(150 - newSize, cx - newSize / 2)) + const clampedY = newSize > 150 ? (150 - newSize) / 2 : Math.max(0, Math.min(150 - newSize, cy - newSize / 2)) + return { x: clampedX, y: clampedY, size: newSize } + }) + } + + const playerAttack = (targetPart, weaponId, skillName, enemyIndex) => { + if (!combat) return + if (attackAnim) return + const ei = enemyIndex ?? selectedEnemy + const enemy = combat.enemies[ei] + if (!enemy) return + if (enemy.integrity.head <= 0) { + setCombat(c => ({ ...c, log: [...c.log, 'That enemy is already defeated!'] })) + return + } + if (!canAttack(weaponId, skillName, ei)) { + setCombat(c => ({ ...c, log: [...c.log, 'You are too far from the enemy to attack!'] })) + return + } + if (attackAnim) return + const wid = weaponId || equippedWeapons.right + if (wid === 'left_arm' || wid === 'right_arm') { + const armDmg = 10 + const dmg = Math.max(1, armDmg + Math.floor(Math.random() * 5) - 2) + const severity = Math.round(dmg / 5) + 1 + setAttackAnim({ + targetPart, weaponId: wid, skillName: 'Punch', + dmg, severity, injType: 'bruise', injLabel: 'bruise', + enemyIndex: ei, + combatLog: combat.log, + bodyParts: bodyParts, + bodyInjuries: bodyInjuries, + startTs: null + }) + return + } + const base = weaponMap[wid] + const skill = (base.skills ?? []).find(s => s.name === skillName) ?? { name: 'Attack', mult: 1.0, damageType: 'blunt' } + const bothHands = equippedWeapons.left === wid && equippedWeapons.right === wid + const bothMult = bothHands ? 1.5 : 1.0 + + if (skill.damageType === 'shove') { + const actionTime = Math.max(1, (20 - base.speed) * 0.3 + 1) + const pushDist = 30 + Math.floor(Math.random() * 20) + const dx = enemy.pos.x - combat.playerPos.x + const dy = enemy.pos.y - combat.playerPos.y + const dist = Math.sqrt(dx * dx + dy * dy) || 1 + const nx = dx / dist, ny = dy / dist + let ex = enemy.pos.x, ey = enemy.pos.y + const steps = Math.ceil(pushDist / 3) + for (let i = 1; i <= steps; i++) { + const sx = enemy.pos.x + nx * (pushDist * i / steps) + const sy = enemy.pos.y + ny * (pushDist * i / steps) + if (MAP_BLOCKS.some(b => rectCollides(sx, sy, b))) break + ex = sx; ey = sy + } + const actualPush = Math.sqrt((ex - enemy.pos.x) ** 2 + (ey - enemy.pos.y) ** 2) + const clamped = { x: Math.max(5, Math.min(145, ex)), y: Math.max(5, Math.min(145, ey)) } + setCombatTime(t => t + actionTime) + setCombat(c => { + const enemies = [...c.enemies] + enemies[ei] = { ...enemies[ei], pos: clamped } + return { + ...c, + enemies, + log: [...c.log, `You shove the ${enemy.name} back ${Math.round(actualPush)} units!`] + } + }) + return + } + + const cond = weaponConditions[wid] ?? base.maxCondition + const conditionPenalty = cond < 30 ? 0.5 : cond < 60 ? 0.25 : 0 + const adjustedDmg = Math.round(base.damage * skill.mult * bothMult * (1 - conditionPenalty)) + const variance = Math.floor(Math.random() * (Math.max(2, adjustedDmg / 2) + 1)) - Math.floor(Math.max(2, adjustedDmg / 4)) + const dmg = Math.max(1, adjustedDmg + variance) + const severity = Math.round(dmg / 5) + 1 + const injType = injuryType(skill.damageType) + const injLabel = injType === 'laceration' ? 'laceration' : injType === 'stab' ? 'stab wound' : 'cut' + + setAttackAnim({ + targetPart, weaponId: wid, skillName, + dmg, severity, injType, injLabel, + enemyIndex: ei, + combatLog: combat.log, + bodyParts: bodyParts, + bodyInjuries: bodyInjuries, + startTs: null + }) + } + + useEffect(() => { + const anim = attackAnimRef.current + if (!anim) return + const startTs = performance.now() + const hitAt = 0.5 + let hit = false + const startPos = combatRef.current?.playerPos ?? { x: 20, y: 75 } + const targetEnemy = anim.enemyIndex !== undefined ? combatRef.current?.enemies[anim.enemyIndex] : null + const targetPos = targetEnemy?.pos ?? startPos + const frame = requestAnimationFrame(function tick() { + const elapsed = (performance.now() - startTs) / 1000 + setCombatTime(ct => ct + 1/60) + + let lerp + if (elapsed < 0.3) { + lerp = elapsed / 0.3 + } else if (elapsed < 0.5) { + lerp = 1 + } else if (elapsed < 0.8) { + lerp = 1 - (elapsed - 0.5) / 0.3 + } else { + lerp = 0 + } + setAttackLerp({ from: startPos, to: targetPos, t: lerp }) + + if (elapsed >= hitAt && !hit) { + hit = true + setHitShake({ enemyIndex: anim.enemyIndex, startTs: performance.now() }) + const wid = anim.weaponId + const isArm = wid === 'left_arm' || wid === 'right_arm' + if (!isArm) { + const base = weaponMap[wid] + setWeaponConditions(prev => wid !== 'fists' ? { ...prev, [wid]: Math.max(0, (prev[wid] ?? base.maxCondition) - (1 + Math.floor(Math.random() * 2))) } : prev) + } + + const decayedPlayer = calcIntegrity(anim.bodyParts, anim.bodyInjuries, hitAt) + let finalPlayerParts = decayedPlayer + let finalPlayerInjuries = anim.bodyInjuries + let log = [...anim.combatLog] + + const cc = combatRef.current + if (anim.enemyIndex !== undefined && cc) { + const enemy = cc.enemies[anim.enemyIndex] + if (enemy) { + const decayedEnemy = calcIntegrity(enemy.integrity, enemy.injuries, hitAt) + const hitEnemy = { ...decayedEnemy, [anim.targetPart]: Math.max(0, decayedEnemy[anim.targetPart] - anim.dmg) } + const newEnemyInjuries = applyInjury(enemy.injuries, anim.targetPart, anim.injType, anim.severity) + + log.push(`You ${anim.skillName ? anim.skillName.toLowerCase() : 'attack'} the ${enemy.name}'s ${bodyPartLabels[anim.targetPart]} — ${anim.injLabel} (severity ${anim.severity}, integrity -${anim.dmg}).`) + + if (hitEnemy.head <= 0) { + log.push(`You crush the ${enemy.name}'s head!`) + log.push(`You defeated the ${enemy.name}!`) + } + + if (hitEnemy.head > 0) { + const eDmg = Math.max(1, enemy.attack + Math.floor(Math.random() * 6) - 2) + const eSeverity = 1 + Math.floor(Math.random() * 4) + const eType = ['cut', 'laceration', 'stab'][Math.floor(Math.random() * 3)] + const ePart = randomPart() + const eLabel = eType === 'laceration' ? 'laceration' : eType === 'stab' ? 'stab wound' : 'cut' + const eTime = Math.max(2, (20 - enemy.speed) * 0.3 + 1) + + const decayedPlayer2 = calcIntegrity(finalPlayerParts, finalPlayerInjuries, eTime) + finalPlayerParts = { ...decayedPlayer2, [ePart]: Math.max(0, decayedPlayer2[ePart] - eDmg) } + finalPlayerInjuries = applyInjury(finalPlayerInjuries, ePart, eType, eSeverity) + + log.push(`${enemy.name} lands a ${eLabel} on your ${bodyPartLabels[ePart]} (severity ${eSeverity}, integrity -${eDmg}).`) + + if (finalPlayerParts.head <= 0) { + log.push('You have been defeated...') + } + } + + setCombat(prev => { + const enemies = prev.enemies.map((e, i) => i === anim.enemyIndex ? { ...e, integrity: hitEnemy, injuries: newEnemyInjuries } : e) + return { ...prev, enemies, log } + }) + } + } + + setBodyParts(finalPlayerParts) + setBodyInjuries(finalPlayerInjuries) + } + if (elapsed >= 1) { + setAttackAnim(null) + setAttackLerp(null) + setHitShake(null) + } else { + requestAnimationFrame(tick) + } + }) + return () => cancelAnimationFrame(frame) + }, [attackAnim]) + + useEffect(() => { + if (!travelAnim) return + if (travelAnim.startTs === null) { + setTravelAnim(a => ({ ...a, startTs: performance.now() })) + return + } + const duration = 1000 + const frame = requestAnimationFrame(() => { + const elapsed = performance.now() - travelAnim.startTs + const progress = Math.min(1, elapsed / duration) + setTravelAnim(a => ({ ...a, progress })) + if (progress >= 1) { + setPlayerLoc(travelAnim.toId) + setTravelAnim(null) + } + }) + return () => cancelAnimationFrame(frame) + }, [travelAnim]) + + useEffect(() => { + const anim = moveAnimRef.current + if (!anim) return + const frame = requestAnimationFrame(() => { + const { fromX, fromY, toX, toY, speed } = anim + const dx = toX - fromX + const dy = toY - fromY + const dist = Math.sqrt(dx * dx + dy * dy) + if (dist <= speed) { + setCombat(c => ({ ...c, playerPos: { x: toX, y: toY } })) + setMoveAnim(null) + return + } + const step = 0.5 + const steps = Math.floor(speed / step) + let cx = fromX, cy = fromY + for (let i = 0; i < steps; i++) { + const nx = cx + (dx / dist) * step + const ny = cy + (dy / dist) * step + if (MAP_BLOCKS.some(b => rectCollides(nx, ny, b))) break + cx = nx; cy = ny + } + if (cx === fromX && cy === fromY) { + setMoveAnim(null) + } else { + setMoveAnim({ fromX: cx, fromY: cy, toX, toY, speed }) + setCombat(c => ({ ...c, playerPos: { x: cx, y: cy } })) + setCombatTime(t => t + 1/60) + } + }) + return () => cancelAnimationFrame(frame) + }, [moveAnim]) + + useEffect(() => { + if (!combat) { setDisplayTime(0); return } + if (displayTime >= combatTime) return + const frame = requestAnimationFrame(() => { + setDisplayTime(t => Math.min(t + 0.03, combatTime)) + }) + return () => cancelAnimationFrame(frame) + }, [displayTime, combatTime, combat]) + + useEffect(() => { + if (!hitShake) return + const duration = 300 + const frame = requestAnimationFrame(function tick() { + if (!hitShake) return + if (performance.now() - hitShake.startTs >= duration) { + setHitShake(null) + } else { + requestAnimationFrame(tick) + } + }) + return () => cancelAnimationFrame(frame) + }, [hitShake]) + + const lastDecayRef = useRef(-1) + useEffect(() => { + if (!combat) { lastDecayRef.current = -1; return } + const s = Math.floor(combatTime) + if (s > lastDecayRef.current && s >= 1) { + const delta = s - Math.max(0, lastDecayRef.current) + lastDecayRef.current = s + setBodyParts(p => calcIntegrity(p, bodyInjuries, delta)) + setCombat(c => ({ + ...c, + enemies: c.enemies.map(e => ({ ...e, integrity: calcIntegrity(e.integrity, e.injuries, delta) })) + })) + } + }, [combatTime, combat, bodyInjuries]) + + const handleItemClick = (itemId, i) => { + setCharView('player') + } + + const confirmLimbAttack = (part) => { + if (!limbSelect) return + const partMap = { larm: 'leftArm', rarm: 'rightArm', lleg: 'leftLeg', rleg: 'rightLeg' } + const fullPart = partMap[part] || part + playerAttack(fullPart, limbSelect, null, selectedEnemy) + setLimbSelect(null) + } + + return ( +

+ {combat && ( +

{(attackAnim || moveAnim) && ( + + )} Time: {Math.floor(displayTime / 60)}:{String(Math.floor(displayTime) % 60).padStart(2, '0')}.{String(Math.floor((displayTime % 1) * 100)).padStart(2, '0')}

+ {playerHp > 0 && combat.enemies.some(e => e.integrity.head > 0) && ( +

setExpandedWeapon(expandedWeapon === 'ROOT' ? null : 'ROOT')}> + {expandedWeapon === 'ROOT' ? '▼' : '▶'} + { e.stopPropagation(); setCharView('player') }}>Player +

+ {expandedWeapon === 'ROOT' && ( +

setWeaponsOpen(!weaponsOpen)}> + {weaponsOpen ? '▼' : '▶'} + Weapons +

+ {weaponsOpen && ( +

+ {(() => { + const lw = equippedWeapons.left + const rw = equippedWeapons.right + const leftFree = lw === 'fists' + const rightFree = rw === 'fists' + const entries = [] + if (leftFree) { + entries.push( +

setHoverInfo({ type: 'weapon', id: 'left_arm' })} + onMouseLeave={() => setHoverInfo(null)} + onClick={() => { setLimbSelect('left_arm'); setSelectedSkill(null); setSelectedTarget(null); setMoveMode(null) }}> + ○ + Left Arm +

+ ) + } else { + entries.push( +

setHoverInfo({ type: 'weapon', id: lw })} + onMouseLeave={() => setHoverInfo(null)} + onClick={() => { setLimbSelect(lw); setSelectedSkill(null); setSelectedTarget(null); setMoveMode(null) }}> + ○ + Left: {weaponMap[lw].name} +

+ ) + } + if (rightFree) { + entries.push( +

setHoverInfo({ type: 'weapon', id: 'right_arm' })} + onMouseLeave={() => setHoverInfo(null)} + onClick={() => { setLimbSelect('right_arm'); setSelectedSkill(null); setSelectedTarget(null); setMoveMode(null) }}> + ○ + Right Arm +

+ ) + } else if (lw !== rw) { + entries.push( +

setHoverInfo({ type: 'weapon', id: rw })} + onMouseLeave={() => setHoverInfo(null)} + onClick={() => { setLimbSelect(rw); setSelectedSkill(null); setSelectedTarget(null); setMoveMode(null) }}> + ○ + Right: {weaponMap[rw].name} +

+ ) + } + if (leftFree && rightFree) { + entries.push( +

setHoverInfo({ type: 'weapon', id: 'fists' })} + onMouseLeave={() => setHoverInfo(null)} + onClick={() => { setLimbSelect('fists'); setSelectedSkill(null); setSelectedTarget(null); setMoveMode(null) }}> + ○ + Fists +

+ ) + } + return entries + })()} +

+ )} +

setItemsOpen(!itemsOpen)}> + {itemsOpen ? '▼' : '▶'} + Items +

+ {itemsOpen && ( +

+ {playerInventory.length === 0 ? ( +

No items

+ ) : ( + playerInventory.map((itemId, i) => ( +

handleItemClick(itemId, i)}> + ○ + {itemMap[itemId]?.name ?? itemId} +

+ )) + )} +

+ )} +

setMovementOpen(!movementOpen)}> + {movementOpen ? '▼' : '▶'} + Movement +

+ {movementOpen && ( +

{ if (!moveAnim && !attackAnim) setMoveMode(m => m === "walk" ? null : "walk") }}> + ○ + Walk +

{ if (!moveAnim && !attackAnim) setMoveMode(m => m === "run" ? null : "run") }}> + ○ + Run +

+ {moveMode && ( +

Click on the mini-map to move

+ )} +

+ +

Combat Log

+ {(combat?.log || []).map((entry, i) => ( +

{entry}

+ ))} +

+ {(combat?.enemies || []).map((enemy, i) => ( +

{ setSelectedEnemy(i); setTargetEnemy(i); setCharView(i) }}> + {enemy.name} +

+ ))} +

+ {charView !== null && ( +

{ setCharView(null); setHoverInfo(null); setContextMenu(null) }} + onContextMenu={e => { e.preventDefault(); setContextMenu(null) }} + onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY })}> +

e.stopPropagation()}> + +

+ {charView === 'player' ? ( + + ) : combat?.enemies[charView] ? ( + + ) : null} +

+ {charView === 'player' ? ( + <> + + + + + ) : ( + <> + + + + + )} +

+ + {charView === 'player' ? ( + <> + {invTab === 'health' && ( +

Body Parts

+ {Object.keys(MAX_BODY).map(part => { + const hp = bodyParts[part] + const max = MAX_BODY[part] + const injuries = bodyInjuries[part] ?? [] + return ( +

{bodyPartLabels[part]}

{hp}/{max}

+ {injuries.length > 0 && ( +

+ {injuries.map((inj, i) => ( + {inj.type} ({inj.severity}) + ))} +

+ )} +

+ ) + })} +

+ Integrity + {playerHp}/{MAX_HP} +

+ )} + + {invTab === 'inventory' && ( +

Weapons

+ {(() => { + const lw = equippedWeapons.left, rw = equippedWeapons.right + if (lw === rw) { + return ( +

setHoverInfo({ type: 'weapon', id: lw })} + onMouseLeave={() => setHoverInfo(null)} + onContextMenu={e => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, weaponId: lw, side: 'both' }) }}> + {lw === 'fists' ? 'Fists' : `Both: ${weaponMap[lw].name}`} + {lw !== 'fists' && ( + <>DMG: {weaponMap[lw].damage} + COND: {weaponConditions[lw] ?? weaponMap[lw].maxCondition}/{weaponMap[lw].maxCondition} + {weaponMap[lw].passives.length > 0 && ( + {weaponMap[lw].passives.join(', ')} + )} + )} +

+ ) + } + return ['left', 'right'].map(side => { + const wid = equippedWeapons[side] + if (wid === 'fists') return null + return ( +

setHoverInfo({ type: 'weapon', id: wid })} + onMouseLeave={() => setHoverInfo(null)} + onContextMenu={e => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, weaponId: wid, side }) }}> + {side === 'left' ? 'Left' : 'Right'}: {weaponMap[wid].name} + DMG: {weaponMap[wid].damage} + COND: {weaponConditions[wid] ?? weaponMap[wid].maxCondition}/{weaponMap[wid].maxCondition} + {weaponMap[wid].passives.length > 0 && ( + {weaponMap[wid].passives.join(', ')} + )} +

+ ) + }) + })()} +

Inventory ({playerInventory.length})

+ {playerInventory.length === 0 ? ( +

Empty

+ ) : ( + <> + {playerInventory.map((itemId, i) => ( +

setHoverInfo({ type: 'item', id: itemId })} + onMouseLeave={() => setHoverInfo(null)}> + {itemMap[itemId]?.name ?? itemId} +

+ ))} + + )} +

Weight: {currentWeight}/{MAX_WEIGHT}

{playerMoney}g

+ )} + + {invTab === 'stats' && ( +

Character

NameYou

Age24

Location{locMap[playerLoc]?.name ?? playerLoc}

Day{gameTime.day}

Time{String(gameTime.hour).padStart(2, '0')}:00

Weather{weatherLabels[weather]}

Equipped{equippedWeapons.left === equippedWeapons.right ? (equippedWeapons.left === 'fists' ? 'Fists' : `Both: ${weaponMap[equippedWeapons.left].name}`) : [equippedWeapons.left !== 'fists' ? `L:${weaponMap[equippedWeapons.left].name}` : '', equippedWeapons.right !== 'fists' ? `R:${weaponMap[equippedWeapons.right].name}` : ''].filter(Boolean).join(' + ')}

+ {(() => { + const shown = new Set() + const rows = [] + const addWeapon = (wid) => { + if (shown.has(wid) || wid === 'fists') return + shown.add(wid) + rows.push( + +

Skills{weaponMap[wid].skills.map(s => s.name).join(', ')}

Weapon SPD{weaponMap[wid].speed}

+ + ) + } + addWeapon(equippedWeapons.left) + addWeapon(equippedWeapons.right) + return rows + })()} +

Integrity{playerHp}/{MAX_HP}

Items{playerInventory.length}

Weight{currentWeight}/{MAX_WEIGHT}

Money{playerMoney}g

+ )} + + ) : combat?.enemies[charView] ? ( + <> + {enemyInvTab === 'health' && ( +

Body Parts

+ {Object.keys(MAX_BODY).map(part => { + const hp = combat.enemies[charView].integrity[part] + const max = MAX_BODY[part] + const injuries = combat.enemies[charView].injuries[part] ?? [] + return ( +

{bodyPartLabels[part]}

{hp}/{max}

+ {injuries.length > 0 && ( +

+ {injuries.map((inj, i) => ( + {inj.type} ({inj.severity}) + ))} +

+ )} +

+ ) + })} +

+ Integrity + {Object.values(combat.enemies[charView].integrity).reduce((a, b) => a + b, 0)}/{MAX_HP} +

+ )} + + {enemyInvTab === 'inventory' && ( +

Inventory ({(combat.enemies[charView].inventory || []).length})

+ {(combat.enemies[charView].inventory || []).length === 0 ? ( +

Empty

+ ) : ( + <> + {combat.enemies[charView].inventory.map((itemId, i) => ( +

setHoverInfo({ type: 'item', id: itemId })} + onMouseLeave={() => setHoverInfo(null)}> + {itemMap[itemId]?.name ?? itemId} +

+ ))} + + )} +

{combat.enemies[charView].money || 0}g

+ )} + + {enemyInvTab === 'stats' && ( +

{combat.enemies[charView].name}

Attack{combat.enemies[charView].attack || 0}

Speed{combat.enemies[charView].speed || 0}

+ )} + + ) : null} +

+ )} + {showSettings && ( +

+ Settings + +

Display

+ Zoom +

+ + {Math.round(view.scale * 100)}% + +

Game

+ Day + {gameTime.day} +

+ Time + {String(gameTime.hour).padStart(2, "0")}:00 +

+ Weather + {weatherLabels[weather]} +

Player

+ Location + {locMap[playerLoc]?.name ?? playerLoc} +

+ Money + {playerMoney}g +

+ )} + {limbSelect && ( +

setLimbSelect(null)}> +

e.stopPropagation()}> +

Select body part to attack

+ + + + + + +

+ +

+ )} +

+ )} + {!combat && ( + <> + + +

+ + +

Day {gameTime.day} {String(gameTime.hour).padStart(2, '0')}:00

{weatherLabels[weather]}

+ +

+ + +

+ +

+ + {hovered && ( +

{locMap[hovered].name}

{locMap[hovered].description}

+ )} + + {hoverInfo?.type === 'item' && itemMap[hoverInfo.id] && ( +

{itemMap[hoverInfo.id].name}

{itemMap[hoverInfo.id].description}

+ )} + + {hoverInfo?.type === 'weapon' && hoverInfo.id && (weaponMap[hoverInfo.id] || hoverInfo.id === 'left_arm' || hoverInfo.id === 'right_arm') && ( +

+ {hoverInfo.id === 'left_arm' || hoverInfo.id === 'right_arm' ? ( + <> +

{hoverInfo.id === 'left_arm' ? 'Left Arm' : 'Right Arm'}

A weak unarmed punch (DMG: 10)

+ + ) : ( + <> +

{weaponMap[hoverInfo.id].name}

DMG: {weaponMap[hoverInfo.id].damage} SPD: {weaponMap[hoverInfo.id].speed}

+ Condition: {weaponConditions[hoverInfo.id] ?? weaponMap[hoverInfo.id].maxCondition}/{weaponMap[hoverInfo.id].maxCondition} +

+ Skills: {weaponMap[hoverInfo.id].skills.map(s => `${s.name} (${s.damageType})`).join(', ')} +

+ {weaponMap[hoverInfo.id].passives.length > 0 && ( +

+ Passives: {weaponMap[hoverInfo.id].passives.join(', ')} +

+ )} + + )} +

+ )} + + {selected && ( +

{locMap[selected].name}

{locMap[selected].description}

+ + {playerLoc !== selected && connectedTo(playerLoc).includes(selected) && ( +

Travel here

+ +

+ )} + + {shopAtLoc && ( +

{shopAtLoc.name}

+ {shopAtLoc.items.map((item, i) => ( +

+ {item.name} + {item.price}g + +

+ ))} +

+ )} + +

Characters here

+ {liveCharacters.filter(c => c.location === selected).length === 0 ? ( +

None

+ ) : ( + liveCharacters.filter(c => c.location === selected).map(c => ( +

{c.name}

+ {c.money !== undefined && ( + {c.money}g + )} + {c.inventory && c.inventory.length > 0 && ( + {c.inventory.map(id => itemMap[id]?.name ?? id).join(', ')} + )} +

+ )) + )} +

+ {playerLoc === selected && ( + + )} + +

+ )} + + {showLocationModal && ( +

{ setShowLocationModal(null); setActionNpc(null) }}> +

e.stopPropagation()}> +

{locMap[showLocationModal]?.name}

+ +

Log

+ {locationLog.map((line, i) => ( +

{line}

+ ))} +

Surroundings

{locMap[showLocationModal]?.description}

Connections

+ {connections.filter(c => c.from === showLocationModal || c.to === showLocationModal).map(c => { + const otherId = c.from === showLocationModal ? c.to : c.from + return

{locMap[otherId]?.name}

+ })} +

+ {shops.filter(s => s.locationId === showLocationModal).length > 0 && ( +

Shops

+ {shops.filter(s => s.locationId === showLocationModal).map(s => ( +

{s.name}

+ ))} +

+ )} +

Characters

+ {liveCharacters.filter(c => c.id !== 'player' && c.location === showLocationModal).length === 0 ? ( +

No one here.

+ ) : ( + liveCharacters.filter(c => c.id !== 'player' && c.location === showLocationModal).map(c => ( +

{c.name}

+ +

+ )) + )} +

+ {actionNpc && ( +

setActionNpc(null)}> +

e.stopPropagation()}> + +

+ +

+ )} +

+ )} + + {showInventory && ( +

{ setShowInventory(false); setHoverInfo(null); setContextMenu(null) }} + onContextMenu={e => { e.preventDefault(); setContextMenu(null) }} + onMouseMove={(e) => setMousePos({ x: e.clientX, y: e.clientY })}> +

e.stopPropagation()}> + +

+ +

+ + + +

+ + {invTab === 'health' && ( +

Body Parts

+ {Object.keys(MAX_BODY).map(part => { + const hp = bodyParts[part] + const max = MAX_BODY[part] + const injuries = bodyInjuries[part] ?? [] + return ( +

{bodyPartLabels[part]}

{hp}/{max}

+ {injuries.length > 0 && ( +

+ {injuries.map((inj, i) => ( + {inj.type} ({inj.severity}) + ))} +

+ )} +

+ ) + })} +

+ Integrity + {playerHp}/{MAX_HP} +

+ )} + + {invTab === 'inventory' && ( +

Weapons

+ {(() => { + const lw = equippedWeapons.left, rw = equippedWeapons.right + if (lw === rw) { + return ( +

+ ) + } + return ['left', 'right'].map(side => { + const wid = equippedWeapons[side] + if (wid === 'fists') return null + return ( +

+ ) + }) + })()} +

Inventory ({playerInventory.length})

+ {playerInventory.length === 0 ? ( +

Empty

+ ) : ( + <> + {playerInventory.map((itemId, i) => ( +

setHoverInfo({ type: 'item', id: itemId })} + onMouseLeave={() => setHoverInfo(null)}> + {itemMap[itemId]?.name ?? itemId} +

+ ))} + + )} +

Weight: {currentWeight}/{MAX_WEIGHT}

{playerMoney}g

+ )} + + {invTab === 'stats' && ( +

Character

NameYou

Age24

Location{locMap[playerLoc]?.name ?? playerLoc}

Day{gameTime.day}

Time{String(gameTime.hour).padStart(2, '0')}:00

Weather{weatherLabels[weather]}

+ {(() => { + const shown = new Set() + const rows = [] + const addWeapon = (wid) => { + if (shown.has(wid) || wid === 'fists') return + shown.add(wid) + rows.push( + +

Skills{weaponMap[wid].skills.map(s => s.name).join(', ')}

Weapon SPD{weaponMap[wid].speed}

+ + ) + } + addWeapon(equippedWeapons.left) + addWeapon(equippedWeapons.right) + return rows + })()} +

Integrity{playerHp}/{MAX_HP}

Items{playerInventory.length}

Weight{currentWeight}/{MAX_WEIGHT}

Money{playerMoney}g

+ )} +

+ )} + + {showSettings && ( +

+ Settings + +

Display

+ Zoom +

+ + {Math.round(view.scale * 100)}% + +

Game

+ Day + {gameTime.day} +

+ Time + {String(gameTime.hour).padStart(2, '0')}:00 +

+ Weather + {weatherLabels[weather]} +

Player

+ Location + {locMap[playerLoc]?.name ?? playerLoc} +

+ Money + {playerMoney}g +

+ )} + + )} + + {hoverInfo?.type === 'enemy' && ( +

{hoverInfo.name}

{hoverInfo.defeated ? 'Defeated' : 'Hostile'}

+ )} + {buyArmChoice && ( +

setBuyArmChoice(null)}> +

e.stopPropagation()}> +

Equip {buyArmChoice.item.name}

+ + + +

+ +

+ )} +

+ ) +} + +export default App diff --git a/src/assets/body/malebody.png b/src/assets/body/malebody.png new file mode 100644 index 0000000..0188a75 Binary files /dev/null and b/src/assets/body/malebody.png differ diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..02251f4 Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/vite.svg b/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/src/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..8b91b62 --- /dev/null +++ b/src/index.css @@ -0,0 +1,10 @@ +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body, #root { + width: 100%; + height: 100%; +} diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})