source-code/
break-the-web
Public
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.
linknre.codes
ReactPhaser 3TypeScriptZustandVite