MagicSchoolJs/src/views/DebugView.tsx

import { observer } from "mobx-react-lite";
import { ChangeEvent, useState } from "react";
import { GameClock } from "../utils/gameClock";
import { game } from "../model/game";

export const DebugView = observer(function () {

    const [skipTime, setSkipTime] = useState<number>(5);

    const isDebugMode = location.hostname === "localhost" ||
        location.hostname === "127.0.0.1" ||
        location.hostname === "[::1]";

    function handleTimeScaleChange(event: ChangeEvent<HTMLInputElement>): void {
        game.school.time.setTimeScale(Number(event.target.value));
    }

    function handleSkipTime(): void {
        GameClock.skipTime(skipTime);
    }

    function handleRestartClick(): void {
        game.restart();
    }

    function handleSaveClick(): void {
        game.save();
    }

    function handleLoadClick(): void {
        game.school.time.pause();
        game.load();
        game.school.time.resume();
    }

    function handleTickClick(): void {
        GameClock.pause();
        GameClock.tick(0.1);
    }

    return <div className="debug">
        <div>
            Время
            {
                isDebugMode
                    ? <div className="timeScale">
                        Масштаб
                        <input
                            type="range"
                            min={1}
                            max={100}
                            step={1}
                            value={game.school.time.timeScale}
                            onChange={handleTimeScaleChange}
                            style={{ width: '100%' }}
                        />
                        x{game.school.time.timeScale}
                    </div>
                    : <></>
            }
            {
                game.school.time.paused
                    ? <button onClick={() => game.school.time.resume()}>|&gt;</button>
                    : <button onClick={() => game.school.time.pause()}>||</button>
            }
            {
                isDebugMode
                    ? <button onClick={handleSkipTime}>
                        <input type="number" value={skipTime} onChange={(e) => setSkipTime(Number(e.target.value))}></input>
                        Пропустить
                    </button>
                    : <></>
            }
            <button onClick={handleTickClick}>Tick</button>
        </div>
        <div>
            <button onClick={handleRestartClick}>Restart</button>
            <button onClick={handleSaveClick}>Save</button>
            <button onClick={handleLoadClick}>Load</button>
        </div>
        <div className="tps">TPS: {game.school.tps}</div>
    </div>
});