{
  "id": "game-timer",
  "name": "Game Timer",
  "category": "gaming",
  "tags": ["gaming", "timer", "board game", "countdown"],
  "description": "Turn timer for board games with adjustable countdown and buzzer alert.",
  "triggers": ["game timer", "turn timer", "board game timer", "countdown"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function GameTimer() {\n  const [seconds, setSeconds] = React.useState(60);\n  const [timeLeft, setTimeLeft] = React.useState(60);\n  const [running, setRunning] = React.useState(false);\n  const [buzzed, setBuzzed] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!running) return;\n    const interval = setInterval(() => {\n      setTimeLeft((t) => {\n        if (t <= 1) {\n          setRunning(false);\n          setBuzzed(true);\n          return 0;\n        }\n        return t - 1;\n      });\n    }, 1000);\n    return () => clearInterval(interval);\n  }, [running]);\n\n  const reset = () => {\n    setRunning(false);\n    setBuzzed(false);\n    setTimeLeft(seconds);\n  };\n\n  const fmt = (s) => {\n    const m = Math.floor(s / 60);\n    const sec = s % 60;\n    return `${m}:${sec.toString().padStart(2, '0')}`;\n  };\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: buzzed ? '#fef2f2' : '#ffffff', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', color: '#1e293b', alignItems: 'center', justifyContent: 'center' }}>\n      <h2 style={{ margin: '0 0 16px', fontSize: 18 }}>Game Timer</h2>\n      <div style={{ fontSize: 56, fontWeight: 800, color: buzzed ? '#dc2626' : timeLeft <= 10 ? '#ea580c' : '#059669', marginBottom: 16, fontVariantNumeric: 'tabular-nums' }}>\n        {fmt(timeLeft)}\n      </div>\n      {buzzed && <div style={{ fontSize: 20, fontWeight: 700, color: '#dc2626', marginBottom: 16 }}>Time\u2019s Up!</div>}\n      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>\n        <button onClick={() => setRunning(!running)} style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: running ? '#dc2626' : '#059669', color: '#fff', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>{running ? 'Pause' : 'Start'}</button>\n        <button onClick={reset} style={{ padding: '10px 20px', borderRadius: 8, border: '1px solid #cbd5e1', background: '#fff', color: '#1e293b', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>Reset</button>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n        <label style={{ fontSize: 13, fontWeight: 500 }}>Seconds:</label>\n        <input type=\"number\" value={seconds} onChange={e => { const v = Number(e.target.value); setSeconds(v); setTimeLeft(v); setBuzzed(false); }} style={{ width: 70, padding: 6, borderRadius: 6, border: '1px solid #cbd5e1', fontSize: 14, textAlign: 'center' }} />\n      </div>\n    </div>\n  );\n}\nrender(<GameTimer/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_DEFAULT_SECONDS", "description": "Default countdown duration in seconds", "default": "60" }
  ]
}