source-code/
break-the-web
Public
codeCodeinfoIssues 0call_splitPull Requestsplay_circleActions
break-the-web/src/store.ts
typescript32 lines1 KB
import { create } from 'zustand';

interface GameState {
    isGameStarted: boolean;
    setGameStarted: (started: boolean) => void;
    checkpoint: number;
    setCheckpoint: (cp: number) => void;
    stolenElements: string[];
    addStolenElement: (id: string) => void;
    resetStolenElements: () => void;
    isTerminalOpen: boolean;
    setTerminalOpen: (open: boolean) => void;
    damageLevel: number;
    increaseDamage: () => void;
}

const useGameStore = create<GameState>((set) => ({
    isGameStarted: false,
    setGameStarted: (started) => set({ isGameStarted: started }),
    checkpoint: 0,
    setCheckpoint: (cp) => set({ checkpoint: cp }),
    stolenElements: [],
    addStolenElement: (id) => set((state) => ({ stolenElements: [...state.stolenElements, id] })),
    resetStolenElements: () => set({ stolenElements: [] }),
    isTerminalOpen: false,
    setTerminalOpen: (open) => set({ isTerminalOpen: open }),
    damageLevel: 0,
    increaseDamage: () => set((state) => ({ damageLevel: state.damageLevel + 1 })),
}));

export default useGameStore;

About

Interact with the web page itself using HTML5 Drag-and-Drop to pull inputs and images directly into the Phaser physics engine. Alter the website state through bi-directional communication between React and Phaser, unlocking a glitchy horror mode. The game is built using React, Phaser 3, Zustand for state management, and Vanilla CSS.

ReactPhaser 3TypeScriptZustandVite

Contributors

1