mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-05-10 16:15:23 -04:00
500 lines
14 KiB
TypeScript
500 lines
14 KiB
TypeScript
'use client'
|
||
|
||
import {debug} from 'common/logger'
|
||
import {useCallback, useEffect, useRef, useState} from 'react'
|
||
import {useT} from 'web/lib/locale'
|
||
|
||
const GRID_SIZE = 9
|
||
const MAX_LIVES = 3
|
||
const GAME_DURATION = 20
|
||
|
||
const BUG_TYPES = [
|
||
{icon: '🐛', label: 'worm', duration: 1600},
|
||
{icon: '🪲', label: 'beetle', duration: 1200},
|
||
{icon: '🦟', label: 'mozzie', duration: 800},
|
||
]
|
||
|
||
function Heart({filled}: {filled: any}) {
|
||
return (
|
||
<span style={{fontSize: 20, filter: filled ? 'none' : 'grayscale(1) opacity(0.3)'}}>❤️</span>
|
||
)
|
||
}
|
||
|
||
const css = `
|
||
.wab-wrap * { box-sizing: border-box; }
|
||
|
||
.wab-wrap {
|
||
font-family: 'Share Tech Mono', monospace;
|
||
min-height: 420px;
|
||
border-radius: 16px;
|
||
border: 1px solid #1a2e1a;
|
||
padding: 28px 24px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wab-wrap::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(57,255,20,0.018) 2px,
|
||
rgba(57,255,20,0.018) 4px
|
||
);
|
||
pointer-events: none;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.wab-title {
|
||
font-family: 'VT323', monospace;
|
||
font-size: 36px;
|
||
letter-spacing: 2px;
|
||
text-shadow: 0 0 8px #39ff1466;
|
||
margin: 0;
|
||
line-height: 1;
|
||
}
|
||
|
||
.wab-subtitle {
|
||
font-size: 13px;
|
||
margin: -12px 0 0;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.wab-hud {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: 380px;
|
||
background: canvas-100;
|
||
border: 1px solid #1f3a1f;
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.wab-hud-label { font-size: 11px; letter-spacing: 1px; display: block; }
|
||
.wab-hud-val { font-size: 18px; font-family: 'VT323', monospace; }
|
||
|
||
.wab-timer-bar-wrap {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
background: canvas-100;
|
||
border: 1px solid #1f3a1f;
|
||
border-radius: 4px;
|
||
height: 6px;
|
||
overflow: hidden;
|
||
}
|
||
.wab-timer-bar {
|
||
height: 100%;
|
||
transition: width 1s linear, background 0.3s;
|
||
border-radius: 4px;
|
||
}
|
||
.wab-timer-bar.warn { background: #ffcc00; }
|
||
.wab-timer-bar.crit { background: #ff4444; }
|
||
|
||
.wab-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
max-width: 380px;
|
||
width: 100%;
|
||
}
|
||
|
||
.wab-hole {
|
||
aspect-ratio: 1;
|
||
background: canvas-100;
|
||
border: 2px solid #1a2e1a;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: default;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: border-color 0.15s;
|
||
box-shadow: inset 0 4px 12px rgba(0,0,0,0.7);
|
||
}
|
||
|
||
.wab-hole.has-bug {
|
||
cursor: crosshair;
|
||
border-color: #2a4a2a;
|
||
}
|
||
|
||
.wab-hole.has-bug:hover { border-color: #39ff1466; }
|
||
|
||
.wab-bug {
|
||
font-size: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
animation: bugPop 0.18s cubic-bezier(0.34,1.56,0.64,1) forwards;
|
||
transform-origin: center bottom;
|
||
user-select: none;
|
||
line-height: 1;
|
||
}
|
||
|
||
.wab-bug.whacked {
|
||
animation: bugWhack 0.22s ease-out forwards;
|
||
}
|
||
|
||
@keyframes bugPop {
|
||
from { transform: scale(0) translateY(20px); opacity: 0; }
|
||
to { transform: scale(1) translateY(0px); opacity: 1; }
|
||
}
|
||
|
||
@keyframes bugWhack {
|
||
0% { transform: scale(1.2) rotate(-10deg); opacity: 1; }
|
||
100% { transform: scale(0) rotate(20deg); opacity: 0; }
|
||
}
|
||
|
||
.wab-score-pop {
|
||
position: absolute;
|
||
top: 12%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-family: 'VT323', monospace;
|
||
font-size: 22px;
|
||
animation: scoreFly 0.7s ease-out forwards;
|
||
pointer-events: none;
|
||
white-space: nowrap;
|
||
z-index: 10;
|
||
}
|
||
|
||
.wab-miss-flash {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: rgba(255,60,60,0.35);
|
||
animation: missFade 0.4s ease-out forwards;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes missFade {
|
||
from { opacity: 1; }
|
||
to { opacity: 0; }
|
||
}
|
||
|
||
.wab-btn {
|
||
font-family: 'VT323', monospace;
|
||
font-size: 20px;
|
||
letter-spacing: 2px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 10px 32px;
|
||
cursor: pointer;
|
||
transition: transform 0.1s, box-shadow 0.1s;
|
||
}
|
||
.wab-btn:hover { transform: scale(1.04); box-shadow: 0 0 16px #39ff1466; }
|
||
.wab-btn:active { transform: scale(0.97); }
|
||
|
||
.wab-idle, .wab-gameover {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
text-align: center;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.wab-idle p, .wab-gameover p {
|
||
font-size: 11px;
|
||
margin: 0;
|
||
max-width: 480px;
|
||
line-height: 1.6;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.wab-legend {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 12px;
|
||
color: #4a7a4a;
|
||
}
|
||
.wab-legend span { display: flex; align-items: center; gap: 4px; }
|
||
|
||
.wab-lives { display: flex; gap: 4px; }
|
||
`
|
||
|
||
export default function WhackABug() {
|
||
const t = useT()
|
||
const [gameState, setGameState] = useState('idle')
|
||
const [lives, setLives] = useState(MAX_LIVES)
|
||
const [timeLeft, setTimeLeft] = useState(GAME_DURATION)
|
||
const [holes, setHoles] = useState(Array(GRID_SIZE).fill(null))
|
||
const [effects, setEffects] = useState<{id: number; index: number; type: string}[]>([])
|
||
|
||
const timersRef = useRef<ReturnType<typeof setTimeout>[]>([])
|
||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||
const spawnRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
const livesRef = useRef(MAX_LIVES)
|
||
const gameRef = useRef('idle')
|
||
// Tracks IDs of bugs that were successfully whacked — checked synchronously
|
||
// in disappear timeouts to avoid the async state-updater mutation race.
|
||
const whackedIdsRef = useRef(new Set<number>())
|
||
|
||
const clearAll = useCallback(() => {
|
||
timersRef.current.forEach((t) => clearTimeout(t))
|
||
timersRef.current = []
|
||
if (timerRef.current) clearInterval(timerRef.current)
|
||
if (spawnRef.current) clearTimeout(spawnRef.current)
|
||
}, [])
|
||
|
||
const endGame = useCallback(() => {
|
||
gameRef.current = 'gameover'
|
||
setGameState('gameover')
|
||
clearAll()
|
||
setHoles(Array(GRID_SIZE).fill(null))
|
||
}, [clearAll])
|
||
|
||
const wonGame = useCallback(() => {
|
||
gameRef.current = 'won'
|
||
setGameState('won')
|
||
clearAll()
|
||
setHoles(Array(GRID_SIZE).fill(null))
|
||
}, [clearAll])
|
||
|
||
const spawnBug = useCallback(() => {
|
||
if (gameRef.current !== 'playing') return
|
||
|
||
const type = BUG_TYPES[Math.floor(Math.random() * BUG_TYPES.length)]
|
||
const index = Math.floor(Math.random() * GRID_SIZE)
|
||
// Stable ID created once per spawn so the disappear timeout can reference it
|
||
const bugId = Date.now() + Math.random()
|
||
|
||
setHoles((prev) => {
|
||
if (prev[index]) {
|
||
scheduleNext()
|
||
return prev
|
||
}
|
||
const next = [...prev]
|
||
next[index] = {type, id: bugId, whacked: false}
|
||
return next
|
||
})
|
||
|
||
const disappear = setTimeout(() => {
|
||
if (gameRef.current !== 'playing') return
|
||
|
||
// If this specific bug was whacked, its ID is in the set — skip penalty.
|
||
if (whackedIdsRef.current.has(bugId)) return
|
||
|
||
// Bug escaped: clear the hole and deduct a life.
|
||
setHoles((prev) => {
|
||
if (!prev[index] || prev[index].id !== bugId) return prev
|
||
const next = [...prev]
|
||
next[index] = null
|
||
return next
|
||
})
|
||
|
||
livesRef.current -= 1
|
||
setLives(livesRef.current)
|
||
setEffects((prev) => [...prev, {id: Date.now(), index, type: 'miss'}])
|
||
if (livesRef.current <= 0) endGame()
|
||
}, type.duration)
|
||
|
||
timersRef.current.push(disappear)
|
||
scheduleNext()
|
||
}, [endGame])
|
||
|
||
function scheduleNext() {
|
||
const delay = 700 + Math.random() * 900
|
||
spawnRef.current = setTimeout(spawnBug, delay)
|
||
}
|
||
|
||
const startGame = useCallback(() => {
|
||
clearAll()
|
||
livesRef.current = MAX_LIVES
|
||
gameRef.current = 'playing'
|
||
whackedIdsRef.current.clear()
|
||
setLives(MAX_LIVES)
|
||
setTimeLeft(GAME_DURATION)
|
||
setHoles(Array(GRID_SIZE).fill(null))
|
||
setEffects([])
|
||
setGameState('playing')
|
||
|
||
timerRef.current = setInterval(() => {
|
||
setTimeLeft((t) => {
|
||
if (t <= 1) {
|
||
wonGame()
|
||
return 0
|
||
}
|
||
return t - 1
|
||
})
|
||
}, 1000)
|
||
|
||
spawnRef.current = setTimeout(spawnBug, 400)
|
||
}, [clearAll, endGame, spawnBug, wonGame])
|
||
|
||
const whack = useCallback((index: number) => {
|
||
debug('Wacked')
|
||
setHoles((prev) => {
|
||
const hole = prev[index]
|
||
if (!hole || hole.whacked) return prev
|
||
// Register this bug as whacked before the disappear timeout can fire
|
||
whackedIdsRef.current.add(hole.id)
|
||
const next = [...prev]
|
||
next[index] = {...hole, whacked: true}
|
||
const t = setTimeout(() => {
|
||
setHoles((h) => {
|
||
const n = [...h]
|
||
n[index] = null
|
||
return n
|
||
})
|
||
}, 220)
|
||
timersRef.current.push(t)
|
||
return next
|
||
})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
const _cleanup = (e: any) => {
|
||
setEffects((prev) => prev.filter((ef) => ef.id !== e.id))
|
||
}
|
||
return () => clearAll()
|
||
}, [clearAll])
|
||
|
||
useEffect(() => {
|
||
effects.forEach((ef) => {
|
||
const t = setTimeout(() => {
|
||
setEffects((prev) => prev.filter((x) => x.id !== ef.id))
|
||
}, 700)
|
||
return () => clearTimeout(t)
|
||
})
|
||
}, [effects])
|
||
|
||
useEffect(() => {
|
||
setTimeout(() => {
|
||
startGame()
|
||
}, 5000)
|
||
}, [])
|
||
|
||
const pct = (timeLeft / GAME_DURATION) * 100
|
||
const barClass = pct <= 20 ? 'crit' : pct <= 40 ? 'warn' : ''
|
||
|
||
return (
|
||
<>
|
||
<style>{css}</style>
|
||
<div className="wab-wrap">
|
||
<h2 className="wab-title">{t('game.whackabug.title', 'WHACK-A-BUG')}</h2>
|
||
<p className="wab-subtitle">
|
||
{t('game.whackabug.subtitle', '// blame the bugs for the error')}
|
||
</p>
|
||
|
||
{
|
||
<div className="wab-idle">
|
||
<div className="wab-legend">
|
||
{BUG_TYPES.map((b) => (
|
||
<span key={b.label}>
|
||
<span style={{fontSize: 16}}>{b.icon}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
<p className={'text-ink-1000/75 text-sm'}>
|
||
{t(
|
||
'game.whackabug.instructions_lives',
|
||
'You have {lives} lives. Bugs escape = lost life.',
|
||
{lives: MAX_LIVES},
|
||
)}
|
||
<br />
|
||
{t(
|
||
'game.whackabug.instructions_time',
|
||
'{seconds} seconds. Smash as many as you can.',
|
||
{seconds: GAME_DURATION},
|
||
)}
|
||
</p>
|
||
</div>
|
||
}
|
||
|
||
{gameState === 'won' ? (
|
||
<div className="wab-gameover">
|
||
<p style={{color: '#39ff14', fontSize: 14}}>
|
||
{t('game.whackabug.victory_title', '// VICTORY — time is up')}
|
||
</p>
|
||
<p className={'guidance'}>
|
||
{t(
|
||
'game.whackabug.victory_message',
|
||
"Still finding bugs in the wild? Contact us and we'll track them down.",
|
||
)}
|
||
</p>
|
||
<button className="wab-btn" onClick={startGame}>
|
||
{t('game.whackabug.play_again', 'PLAY AGAIN')}
|
||
</button>
|
||
</div>
|
||
) : gameState === 'gameover' ? (
|
||
<div className="wab-gameover">
|
||
<p style={{color: '#ff4444', fontSize: 14}}>
|
||
{t('game.whackabug.gameover_title', '// GAME OVER — all bugs escaped')}
|
||
</p>
|
||
<p className={'guidance'}>
|
||
{t(
|
||
'game.whackabug.gameover_message',
|
||
"If the bugs are too much to handle, contact us and we'll squash them for you.",
|
||
)}
|
||
</p>
|
||
<button className="wab-btn" onClick={startGame}>
|
||
{t('game.whackabug.retry', 'RETRY')}
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<button className="wab-btn" onClick={startGame}>
|
||
{t('game.whackabug.start_game', 'START GAME')}
|
||
</button>
|
||
)}
|
||
|
||
{gameState === 'playing' && (
|
||
<>
|
||
<div className="wab-hud">
|
||
<div className="wab-lives">
|
||
{Array.from({length: MAX_LIVES}).map((_, i) => (
|
||
<Heart key={i} filled={i < lives} />
|
||
))}
|
||
</div>
|
||
<div style={{textAlign: 'right'}}>
|
||
<span className="wab-hud-label">{t('game.whackabug.time', 'TIME')}</span>
|
||
<span
|
||
className="wab-hud-val"
|
||
style={{color: timeLeft <= 6 ? '#ff4444' : '#39ff14'}}
|
||
>
|
||
{String(timeLeft).padStart(2, '0')}s
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="wab-timer-bar-wrap">
|
||
<div className={`wab-timer-bar ${barClass}`} style={{width: `${pct}%`}} />
|
||
</div>
|
||
|
||
<div className="wab-grid">
|
||
{holes.map((hole, i) => {
|
||
const holeEffects = effects.filter((e) => e.index === i)
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`wab-hole${hole && !hole.whacked ? ' has-bug' : ''}`}
|
||
onClick={() => whack(i)}
|
||
>
|
||
{hole && (
|
||
<div key={hole.id} className={`wab-bug${hole.whacked ? ' whacked' : ''}`}>
|
||
{hole.type.icon}
|
||
</div>
|
||
)}
|
||
{holeEffects.map((ef) => (
|
||
<div key={ef.id} className="wab-miss-flash" />
|
||
))}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|