Dokumentation

Game Title

Section Heading

Standard game text with base size

Small UI text for scores and stats

Buttons

Game Input

Score Display

Game Component

import { useState } from 'react';
import { useGameControl } from '../hooks/useGameControl';

export function GameComponent() {
    const [score, setScore] = useState(0);
    const { 
        startGame,
        pauseGame,
        gameState 
    } = useGameControl();

    return (
        <div className="game-container">
            <div className="score-display">
                Score: {score}
            </div>
            {/* Game controls */}
        </div>
    );
}

Custom Hook

import { useState, useEffect } from 'react';

export function useGameTimer(initialTime: number) {
    const [timeLeft, setTimeLeft] = useState(initialTime);
    const [isRunning, setIsRunning] = useState(false);

    useEffect(() => {
        let timer: NodeJS.Timeout;
        if (isRunning && timeLeft > 0) {
            timer = setInterval(() => {
                setTimeLeft(prev => prev - 1);
            }, 1000);
        }
        return () => clearInterval(timer);
    }, [isRunning, timeLeft]);

    return { timeLeft, isRunning, setIsRunning };
}