Refactor everything and add CONTEXT

CONTEXT.md

@@ -0,0 +1,5 @@
+-   I renamed web-game to game-player. Have to fix everything upon that.
+-   Split game-player so that we dont have settings in this way anymore. We use modules more independently
+-   Refactor how interpolation works. We where thinking about doing it using components. Maybe extend the game entities into our own entities?
+-   Redo ui using react
+-   We wanted to extract reset functionality into game-web. Game should stay more pure. Especially since we have the bug that camera does not reset on reset call. For this also take a look if player in web should actually have such deep access. ALl sketchy.

packages/web-game/package.json → packages/game-player/package.json

@@ -3,19 +3,13 @@
     "private": true,
     "version": "1.0.0",
     "type": "module",
-    "scripts": {
-        "web-game-dev": "vite",
-        "web-game-build": "tsc && vite build",
-        "web-game-preview": "vite preview"
-    },
     "devDependencies": {
         "@types/sat": "^0.0.35",
         "@types/three": "^0.162.0",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
         "tailwindcss": "^3.4.3",
-        "typescript": "^5.4.2",
-        "vite": "^5.1.6"
+        "typescript": "^5.4.2"
     },
     "dependencies": {
         "@dimforge/rapier2d": "^0.14",
@@ -27,9 +21,7 @@
         "shared": "*",
         "three": "^0.162.0",
         "troika-three-text": "^0.49.1",
-        "tsconfig": "*",
-        "vite-plugin-top-level-await": "^1.4.1",
-        "vite-plugin-wasm": "^3.3.0"
+        "tsconfig": "*"
     },
     "eslintConfig": {
         "root": true,

packages/web-game/src/game/game-loop.ts → packages/game-player/src/game-player-loop.ts

@@ -1,4 +1,4 @@
-import { GameInterface } from "./web-game"
+import { GameInterface } from "./game-player"
 
 export class GameLoop {
     private animationFrame: number | undefined

packages/web-game/src/game/web-game.ts → packages/game-player/src/game-player.ts

@@ -1,7 +1,17 @@
 import { ReplayCaptureService } from "game/src/model/replay/replay-capture-service"
-import { Color, WebGLRenderer } from "three"
+import {
+    Color,
+    Mesh,
+    MeshBasicMaterial,
+    Object3D,
+    Shape,
+    ShapeGeometry,
+    Vector2,
+    Vector3,
+    WebGLRenderer,
+} from "three"
 import { GameSettings } from "./model/settings"
-import { WebGameStore } from "./model/store"
+import { GamePlayerStore } from "./model/store"
 import { ModuleCamera } from "./modules/module-camera"
 import { ModuleHookHandler } from "./modules/module-hook-handler"
 import { ModuleInput } from "./modules/module-input/module-input"
@@ -19,7 +29,7 @@ export interface GameInterface {
 }
 
 export class WebGame implements GameInterface {
-    store: WebGameStore
+    store: GamePlayerStore
 
     replayCapture: ReplayCaptureService
 
@@ -31,6 +41,8 @@ export class WebGame implements GameInterface {
     moduleUI: ModuleUI
     moduleVisual: ModuleVisual
 
+    private test: Object3D
+
     constructor(settings: GameSettings) {
         const renderer = new WebGLRenderer({
             antialias: true,
@@ -40,7 +52,7 @@ export class WebGame implements GameInterface {
         renderer.autoClear = false
         renderer.setClearColor(Color.NAMES["black"], 1)
 
-        this.store = new WebGameStore(settings, renderer)
+        this.store = new GamePlayerStore(settings, renderer)
 
         this.replayCapture = new ReplayCaptureService()
 
@@ -58,6 +70,22 @@ export class WebGame implements GameInterface {
         this.onCanvasResize = this.onCanvasResize.bind(this)
         const observer = new ResizeObserver(this.onCanvasResize)
         observer.observe(renderer.domElement)
+
+        // red rectangle
+        this.test = new Mesh(
+            new ShapeGeometry(
+                new Shape([
+                    new Vector2(-1, -1),
+                    new Vector2(1, -1),
+                    new Vector2(1, 1),
+                    new Vector2(-1, 1),
+                ]),
+            ),
+            new MeshBasicMaterial({ color: 0xff0000 }),
+        )
+        this.test.position.z = 1
+
+        this.store.scene.add(this.test)
     }
 
     dispose() {
@@ -99,6 +127,19 @@ export class WebGame implements GameInterface {
     }
 
     onUpdate(delta: number, overstep: number) {
+        const vec = new Vector3() // create once and reuse
+
+        vec.set(
+            (this.moduleInput.mouse.x / window.innerWidth) * 2 - 1,
+            -(this.moduleInput.mouse.y / window.innerHeight) * 2 + 1,
+            0.5,
+        )
+
+        vec.unproject(this.moduleCamera)
+
+        this.test.position.x = vec.x - 1
+        this.test.position.y = vec.y - 1
+
         this.store.interpolation.onUpdate(delta, overstep)
 
         this.moduleParticles.update(delta)

packages/web-game/src/game/model/settings.ts → packages/game-player/src/model/settings.ts

@@ -1,5 +1,5 @@
 import { WorldConfig } from "game/proto/world"
-import { UserOther } from "../../../../shared/src/lobby-api/user-other"
+import { UserOther } from "shared/src/lobby-api/user-other"
 
 export interface ReplayModel {}
 

packages/web-game/src/game/model/store.ts → packages/game-player/src/model/store.ts

@@ -1,22 +1,41 @@
 import * as RAPIER from "@dimforge/rapier2d"
+import { EventStore } from "game/src/framework/event"
+import { ResourceStore } from "game/src/framework/resource"
 import { Game } from "game/src/game"
 import { Scene, WebGLRenderer } from "three"
 import { InterpolationStore } from "./interpolation"
 import { GameSettings } from "./settings"
 
-export class WebGameStore {
-    public game: Game
+export class GamePlayerStore {
     public interpolation: InterpolationStore
     public renderer: WebGLRenderer
     public scene: Scene
 
+    public events: EventStore<GamePlayerEvents>
+    public game: Game
+    public resources: ResourceStore<GamePlayerResources>
+
     constructor(
         public settings: GameSettings,
         renderer: WebGLRenderer,
     ) {
+        this.events = new EventStore()
         this.game = new Game(settings, { rapier: RAPIER })
+        this.resources = new ResourceStore({
+            renderer,
+            scene: new Scene(),
+        })
+
         this.interpolation = new InterpolationStore(this.game)
-        this.renderer = renderer
         this.scene = new Scene()
+        this.renderer = renderer
     }
 }
+
+export interface GamePlayerResources {
+    renderer: WebGLRenderer
+    scene: Scene
+    interpolation: InterpolationStore
+}
+
+export interface GamePlayerEvents {}

packages/web-game/src/game/modules/module-camera.ts → packages/game-player/src/modules/module-camera.ts

@@ -1,7 +1,7 @@
 import { levelComponents, LevelEntity } from "game/src/modules/module-level"
 import { rocketComponents, RocketEntity } from "game/src/modules/module-rocket"
 import * as THREE from "three"
-import { WebGameStore } from "../model/store"
+import { GamePlayerStore } from "../model/store"
 
 type TransitionAnimation =
     | undefined
@@ -39,7 +39,7 @@ export class ModuleCamera extends THREE.OrthographicCamera {
     private transitionAnimation: TransitionAnimation = undefined
     private startAnimation: StartAnimation = undefined
 
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         super()
 
         this.position.z = 5

packages/web-game/src/game/modules/module-hook-handler.ts → packages/game-player/src/modules/module-hook-handler.ts

@@ -1,7 +1,7 @@
-import { WebGameStore } from "../model/store"
+import { GamePlayerStore } from "../model/store"
 
 export class ModuleHookHandler {
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         store.game.store.events.listen({
             finished: () => {
                 store.settings.hooks?.onFinished?.()

packages/web-game/src/game/modules/module-input/module-input.ts → packages/game-player/src/modules/module-input/module-input.ts

@@ -1,4 +1,4 @@
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 import { Keyboard } from "./keyboard"
 import { Mouse } from "./mouse"
 import { Touch } from "./touch"
@@ -9,15 +9,15 @@ const CHARCODE_NINE = "9".charCodeAt(0)
 
 export class ModuleInput {
     private keyboard: Keyboard
-    private mouse: Mouse
+    mouse: Mouse
 
     private touch: Touch
     private touchVertical: TouchVertical
 
     private rotationSpeed = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0]
     private rotationSpeedIndex = 2
 
-    constructor(runtime: WebGameStore) {
+    constructor(runtime: GamePlayerStore) {
         this.keyboard = new Keyboard()
         this.mouse = new Mouse(runtime)
         this.touch = new Touch(runtime)

packages/web-game/src/game/modules/module-input/mouse.ts → packages/game-player/src/modules/module-input/mouse.ts

@@ -1,4 +1,4 @@
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 
 // const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 
@@ -14,7 +14,10 @@ export class Mouse {
 
     private ptrEvents = ["pointerdown", "pointerup", "pointermove", "pointercancel"] as const
 
-    constructor(private runtime: WebGameStore) {
+    public x = 0
+    public y = 0
+
+    constructor(private runtime: GamePlayerStore) {
         this.onPointerEvent = this.onPointerEvent.bind(this)
 
         for (const ptrEvent of this.ptrEvents) {
@@ -43,6 +46,9 @@ export class Mouse {
     }
 
     private onPointerEvent(event: PointerEvent) {
+        this.x = event.clientX
+        this.y = event.clientY
+
         if (event.pointerType !== "mouse") {
             return
         }

packages/web-game/src/game/modules/module-input/touch-alt.ts → packages/game-player/src/modules/module-input/touch-alt.ts

@@ -1,4 +1,4 @@
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 
 export class TouchAlt {
     private pointer?: {
@@ -15,7 +15,7 @@ export class TouchAlt {
 
     private touchEvents = ["touchstart", "touchend", "touchmove", "touchcancel"] as const
 
-    constructor(private runtime: WebGameStore) {
+    constructor(private runtime: GamePlayerStore) {
         this.onTouchEvent = this.onTouchEvent.bind(this)
 
         for (const ptrEvent of this.touchEvents) {

packages/web-game/src/game/modules/module-input/touch-vertical.ts → packages/game-player/src/modules/module-input/touch-vertical.ts

@@ -1,4 +1,4 @@
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 
 export class TouchVertical {
     private pointer?: {
@@ -15,7 +15,7 @@ export class TouchVertical {
 
     private touchEvents = ["touchstart", "touchend", "touchmove", "touchcancel"] as const
 
-    constructor(private runtime: WebGameStore) {
+    constructor(private runtime: GamePlayerStore) {
         this.onTouchEvent = this.onTouchEvent.bind(this)
 
         for (const ptrEvent of this.touchEvents) {

packages/web-game/src/game/modules/module-input/touch.ts → packages/game-player/src/modules/module-input/touch.ts

@@ -1,4 +1,4 @@
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 
 export class Touch {
     private thrustPointerId?: number
@@ -16,7 +16,7 @@ export class Touch {
 
     private touchEvents = ["touchstart", "touchend", "touchmove", "touchcancel"] as const
 
-    constructor(private runtime: WebGameStore) {
+    constructor(private runtime: GamePlayerStore) {
         this.onTouchEvent = this.onTouchEvent.bind(this)
 
         for (const ptrEvent of this.touchEvents) {

packages/web-game/src/game/modules/module-lobby/module-lobby.ts → packages/game-player/src/modules/module-lobby/module-lobby.ts

@@ -9,7 +9,7 @@ import { UserOther } from "shared/src/lobby-api/user-other"
 import { lerp } from "three/src/math/MathUtils"
 import { Text } from "troika-three-text"
 import { slerp } from "../../model/interpolation"
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 import { Rocket } from "../module-visual/objects/rocket"
 
 export class OtherUserGhost {
@@ -22,7 +22,7 @@ export class OtherUserGhost {
     private previousFrame: Frame | undefined
 
     constructor(
-        private store: WebGameStore,
+        private store: GamePlayerStore,
         private user: UserOther,
     ) {
         this.mesh = new Rocket(0.2)
@@ -107,7 +107,7 @@ export class OtherUserGhost {
 export class OtherUserGhosts {
     private ghosts: Map<string, OtherUserGhost>
 
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         this.ghosts = new Map()
     }
 
@@ -193,7 +193,7 @@ export class ModuleLobby {
 
     private setupEveryMs = 1000 * 30
 
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         if (store.settings.instanceType !== "play") {
             throw new Error("ModuleLobby can only be used in play mode")
         }

packages/web-game/src/game/modules/module-particles/module-particles.ts → packages/game-player/src/modules/module-particles/module-particles.ts

@@ -1,7 +1,7 @@
 import { changeAnchor } from "game/src/model/utils"
 import { ROCKET_SIZE, rocketComponents, RocketEntity } from "game/src/modules/module-rocket"
 import { Color } from "three"
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 import {
     downBias,
     ParticleTemplate,
@@ -66,7 +66,7 @@ export class ModuleParticles {
 
     private simulation: ParticleSimulation
 
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         const shapes = store.game.store.entities
             .multiple("shape")
             .map(x => x.get("shape").vertices.map(x => x.position))

packages/web-game/src/game/modules/module-particles/particles-simulation.ts → packages/game-player/src/modules/module-particles/particles-simulation.ts

@@ -2,7 +2,7 @@ import { Point } from "game/src/model/utils"
 import { makeCCW, quickDecomp } from "poly-decomp-es"
 import * as SAT from "sat"
 import * as THREE from "three"
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 import { Environment, aabbFromCircle, newEnvironment } from "./particle-environment"
 import {
     ParticleTemplate,
@@ -34,7 +34,7 @@ export class ParticleSimulation {
     private instanceMatrix = new THREE.Matrix4()
     private maxInstances = 2048
 
-    constructor(store: WebGameStore, shapes: Point[][]) {
+    constructor(store: GamePlayerStore, shapes: Point[][]) {
         const geometry = new THREE.CircleGeometry(1, 32)
         const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
 

packages/web-game/src/game/modules/module-ui/module-ui.ts → packages/game-player/src/modules/module-ui/module-ui.ts

@@ -1,5 +1,5 @@
 import { OrthographicCamera, Scene } from "three"
-import { WebGameStore } from "../../model/store"
+import { GamePlayerStore } from "../../model/store"
 import { Timer } from "./timer"
 
 export class ModuleUI {
@@ -8,7 +8,7 @@ export class ModuleUI {
 
     private timer: Timer
 
-    constructor(private store: WebGameStore) {
+    constructor(private store: GamePlayerStore) {
         this.camera = new OrthographicCamera(-1, 1, 1, -1, -100, 100)
         this.scene = new Scene()