chore: splitting concerns between a "core" and "game"

When starting the split of the game state, I realized there's a lot of "not touching for long time" code spread everywhere, while next to something we may change a dozen of times a week. With that I also cleaned the imports.

src/ui/animation/animation-timed.tsx → src/core/animation/animation-timed.tsx

@@ -1,7 +1,7 @@
-import { assert } from "@game/common/assert";
-import { EaseMap } from "@game/lib/easing";
-import { Signal } from "@game/state/lib/types";
-import { makeArray } from "@game/common/arrays";
+import { makeArray } from "@game/core/common/arrays";
+import { assert } from "@game/core/common/assert";
+import { EaseMap } from "@game/core/common/easing";
+import { Signal } from "@game/core/signals/types";
 
 // IDEAS/TODO
 //

src/ui/animation/animation.test.tsx → src/core/animation/animation.test.tsx

@@ -1,7 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { signal } from "@game/core/signals/signals";
+import { describe, expect, it, vi } from "vitest";
 import { AnimationPlan, linear } from "./animation-timed";
-import { signal } from "@game/state/lib/signals";
-import { vi } from "vitest";
 
 describe("interpolate", () => {
   it.each([

src/ui/animation/animation.tsx → src/core/animation/animation.tsx

@@ -1,4 +1,4 @@
-import { signal } from "@game/state/lib/signals";
+import { signal } from "@game/core/signals/signals";
 
 import {
   ParallelProps,
@@ -281,5 +281,6 @@ export {
   SequenceEngine,
   Step,
   Transition,
-  Wait,
+  Wait
 };
+

src/ui/animation/types.ts → src/core/animation/types.ts

@@ -1,6 +1,7 @@
-import { Signal } from "@game/state/lib/types";
+import { EaseMap } from "@game/core/common/easing";
+import { Signal } from "@game/core/signals/types";
+
 import { createParticleEffect } from "./animation";
-import { EaseMap } from "@game/lib/easing";
 
 // Core animation signal with transition tracking
 export type TransitionSignal<T> = Signal<T> & {

src/ui/lib/jsx-runtime.ts → src/core/jsx/jsx-runtime.ts

@@ -1,16 +1,20 @@
+import {
+  animationIntrinsicElements,
+  setupAnimationElement,
+} from "@game/core/animation/animation-timed";
+
+import { setupGameObject } from "@game/core/jsx/phaser-jsx";
+
 import {
   EventId,
   setupStateMachineElement,
   StateId,
   stateMachineIntrinsicElements,
-} from "../../state/lib/state-machine";
+} from "@game/core/state-machine/state-machine";
 import {
-  stateObserverIntrinsicElements,
   setupStateObserverElement,
-} from "../../state/lib/state-observer";
-import { setupAnimationElement } from "../animation/animation-timed";
-import { animationIntrinsicElements } from "../animation/animation-timed";
-import { setupGameObject } from "./phaser-jsx";
+  stateObserverIntrinsicElements,
+} from "@game/core/state-machine/state-observer";
 
 /*
   JSX runtime

src/ui/lib/phaser-jsx.ts → src/core/jsx/phaser-jsx.ts

@@ -1,18 +1,18 @@
-import { SignalImpl } from "@game/state/lib/signals";
-import { Signal } from "@game/state/lib/types";
+import { SignalImpl } from "@game/core/signals/signals";
+import { Signal } from "@game/core/signals/types";
 
 import {
-  cleanupSymbol,
   ContainerElement,
   ImageElement,
   NineSliceElement,
   PhaserGameObjectProps,
   RectangleElement,
-  SignalCleanup,
   SpriteElement,
   TextElement,
 } from "./types";
 
+import { cleanupSymbol, SignalCleanup } from "@game/core/signals/types";
+
 export const JsxElementsRegistry = {
   elements: new Map<
     Phaser.GameObjects.GameObject,

src/ui/lib/types.ts → src/core/jsx/types.ts

@@ -1,4 +1,4 @@
-import { SignalValue, Signal } from "@game/state/lib/types";
+import { SignalValue, Signal } from "@game/core/signals/types";
 
 declare global {
   interface Window {
@@ -151,9 +151,3 @@ export interface PhaserGameObjectProps<
   bind?: Record<string, Signal<any>>;
   ref?: (gameObject: T) => void;
 }
-
-export const cleanupSymbol = Symbol("cleanup");
-
-export interface SignalCleanup {
-  [cleanupSymbol]: Array<() => void>;
-}

src/state/lib/signals.ts → src/core/signals/signals.ts

@@ -1,12 +1,11 @@
 import {
   Cleanup,
   Effect,
-  EqualityFn,
   MutableSignal,
   Signal,
   SignalValue,
   Subscriber,
-} from "./types";
+} from "@game/core/signals/types";
 
 /**
  * Signal implementation

src/state/lib/types.ts → src/core/signals/types.ts

@@ -25,3 +25,9 @@ export interface MutableSignal<T> extends Signal<T> {
    */
   mutate(fn: (value: T) => boolean): void;
 }
+
+export const cleanupSymbol = Symbol("cleanup");
+
+export interface SignalCleanup {
+  [cleanupSymbol]: Array<() => void>;
+}

src/state/lib/state-machine.test.tsx → src/core/state-machine/state-machine.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest";
-import { signal } from "./signals";
-import { FiniteStateMachine } from "./state-machine";
+
+import { signal } from "@game/core/signals/signals";
+import { FiniteStateMachine } from "@game/core/state-machine/state-machine";
 
 describe("FiniteStateMachine", () => {
   it("should transition between states with valid event", () => {

src/state/lib/state-machine.tsx → src/core/state-machine/state-machine.tsx

@@ -1,7 +1,7 @@
-import { assert } from "@game/common/assert";
-import { signal } from "./signals";
-import { Signal } from "./types";
-import { makeArray } from "@game/common/arrays";
+import { makeArray } from "@game/core/common/arrays";
+import { assert } from "@game/core/common/assert";
+import { signal } from "@game/core/signals/signals";
+import { Signal } from "@game/core/signals/types";
 
 declare global {
   namespace JSX {

src/state/lib/state-observer.tsx → src/core/state-machine/state-observer.tsx

@@ -1,5 +1,6 @@
-import { makeArray } from "@game/common/arrays";
-import { assert } from "@game/common/assert";
+import { makeArray } from "@game/core/common/arrays";
+import { assert } from "@game/core/common/assert";
+
 import { EventId, FiniteStateMachine, StateId } from "./state-machine";
 
 declare global {
@@ -51,12 +52,12 @@ declare global {
   }
 }
 
-interface StateObserverElement<S extends StateId, E extends EventId> {
+export interface StateObserverElement<S extends StateId, E extends EventId> {
   fsm: FiniteStateMachine<S, E>;
   children?: StateObserverAction<S, E>[];
 }
 
-interface StateObserverContext<S extends StateId, E extends EventId> {
+export interface StateObserverContext<S extends StateId, E extends EventId> {
   fsm: FiniteStateMachine<S, E>;
   type: "enter" | "exit" | "event" | "transition";
   previous: S;

src/ui/components/AbstractFlex.ts → src/core/ui/AbstractFlex.ts

@@ -1,5 +1,5 @@
-import { SignalValue } from "@game/state/lib/types";
-import { TransformablePhaserGameObject } from "../lib/types";
+import { TransformablePhaserGameObject } from "@game/core/jsx/types";
+import { SignalValue } from "@game/core/signals/types";
 
 export const ALIGN_ITEMS = {
   CENTER: "center",

src/ui/components/Flex.tsx → src/core/ui/Flex.tsx

@@ -2,7 +2,8 @@
  * Based off https://github.com/jjcapellan/phaser3-flex
  */
 
-import { isSignal } from "@game/state/lib/signals";
+import { isSignal } from "@game/core/signals/signals";
+
 import {
   ALIGN_ITEMS,
   DIRECTION,

src/ui/components/FlexWrapped.tsx → src/core/ui/FlexWrapped.tsx

@@ -10,24 +10,6 @@ import {
 import { FlexColumn } from "./FlexColumn";
 import { FlexRow } from "./FlexRow";
 
-/**
- * Alignment values for the flex column
- *
- * This is meant not to be exported! We don't want to be confused with AlignItems
- */
-const ALIGNMENT = {
-  JUSTIFY: "justify",
-  STRETCH: "stretch",
-  TOP: "top",
-  RIGHT: "right",
-  BOTTOM: "bottom",
-  LEFT: "left",
-  CENTER: "center",
-  SPACE_BETWEEN: "space-between",
-  SPACE_AROUND: "space-around",
-  SPACE_EVENLY: "space-evenly",
-} as const;
-
 export class FlexWrapped extends AbstractFlex {
   private linesContainer: AbstractFlex;
   private currentLine: AbstractFlex;

src/ui/components/Stack.tsx → src/core/ui/Stack.tsx

@@ -1,6 +1,6 @@
-import { getSignalValue } from "@game/state/lib/signals";
-import { Signal } from "@game/state/lib/types";
-import { PhaserGameObjectProps } from "@game/ui/lib/types";
+import { getSignalValue } from "@game/core/signals/signals";
+import { Signal } from "@game/core/signals/types";
+import { PhaserGameObjectProps } from "@game/core/jsx/types";
 
 type Alignment = "start" | "center" | "end";
 type Direction = "horizontal" | "vertical";
@@ -25,6 +25,9 @@ interface StackProps
   debug?: boolean;
 }
 
+/**
+ * @deprecated Use Flex instead
+ */
 export function Stack({
   direction = "vertical",
   spacing = 0,

src/main.ts

@@ -1,11 +1,11 @@
 import { Game, Types } from "phaser";
 
-import { GAME_HEIGHT, GAME_WIDTH } from "./consts";
+import { GAME_HEIGHT, GAME_WIDTH } from "@game/consts";
 
-import PhaserGamebus from "./lib/gamebus";
-import { GameStateManager } from "./state/game-state";
+import PhaserGamebus from "@game/lib/gamebus";
+import { GameStateManager } from "@game/state/game-state";
 
-import { SCENE_CLASSES } from "./scenes/scenes";
+import { SCENE_CLASSES } from "@game/scenes/scenes";
 
 if (import.meta.env.VITE_DEBUG) {
 }

src/scenes/boot/boot-scene.ts

@@ -1,4 +1,5 @@
 import { Scene } from "phaser";
+
 import { SCENES } from "../scenes";
 import { DebugPanel, DebugParameters } from "../game/debug-panel";
 

src/scenes/boot/preloader-scene.ts

@@ -1,6 +1,7 @@
+import { RESOURCES } from "@game/assets";
 import { GAME_WIDTH } from "@game/consts";
+
 import { AbstractScene } from "..";
-import { RESOURCES } from "../../assets";
 import { SCENES } from "../scenes";
 
 export const RESOURCES_INDEX = Object.keys(RESOURCES).reduce(

src/scenes/example-scene.tsx

@@ -0,0 +1,56 @@
+import PhaserGamebus from "@game/lib/gamebus";
+
+import { AbstractScene } from "./index";
+import { SCENES } from "./scenes";
+
+/**
+ * Example scene
+ *
+ * Copy this file, place it where it is relevant, update dependencies and have fun :)
+ * Don't forget to add the scene to the scenes.ts file
+ */
+
+export class GameScene extends AbstractScene {
+  declare bus: Phaser.Events.EventEmitter;
+  declare gamebus: PhaserGamebus;
+
+  camera: Phaser.Cameras.Scene2D.Camera;
+
+  constructor() {
+    super(SCENES.GAME);
+  }
+
+  key_one!: Phaser.Input.Keyboard.Key;
+  key_two!: Phaser.Input.Keyboard.Key;
+
+  create() {
+    this.bus = this.gamebus.getBus();
+
+    this.camera = this.cameras.main;
+
+    this.key_one = this.input.keyboard!.addKey(
+      Phaser.Input.Keyboard.KeyCodes.ONE
+    );
+    this.key_two = this.input.keyboard!.addKey(
+      Phaser.Input.Keyboard.KeyCodes.TWO
+    );
+
+    this.registerSystems();
+
+    this.key_one.on("down", () => {
+      console.log("key_one");
+    });
+
+    this.key_two.on("down", () => {
+      console.log("key_two");
+    });
+  }
+
+  registerSystems() {
+    console.log("registering systems");
+  }
+
+  update(_time: number, _delta: number) {}
+
+  shutdown() {}
+}

src/scenes/game/debug-panel.ts

@@ -1,5 +1,5 @@
 import { Pane } from "tweakpane";
-import { JsxElementsRegistry } from "../../ui/lib/phaser-jsx";
+import { JsxElementsRegistry } from "@game/core/jsx/phaser-jsx";
 
 export const DebugParameters: any = {
   fps: 0,

src/scenes/game/game-scene.tsx

@@ -1,11 +1,12 @@
+import { computed, effect, signal } from "@game/core/signals/signals";
+import { Signal } from "@game/core/signals/types";
+import { Stack } from "@game/core/ui/Stack";
+import PhaserGamebus from "@game/lib/gamebus";
 import { GameStatus } from "@game/state/game-state";
-import { computed, effect, signal } from "@game/state/lib/signals";
-import { Signal } from "@game/state/lib/types";
+import SoundSystem from "@game/systems/SoundSystem";
+
 import { AbstractScene } from "..";
-import PhaserGamebus from "../../lib/gamebus";
-import { Stack } from "../../ui/components/Stack";
 import { SCENES } from "../scenes";
-import SoundSystem from "../../systems/SoundSystem.ts";
 
 let i = 0;
 

src/scenes/hud/hud-scene.tsx

@@ -1,6 +1,7 @@
-import PhaserGamebus from "../../lib/gamebus";
-import { Flex } from "../../ui/components/Flex";
-import { FlexRow } from "../../ui/components/FlexRow";
+import { Flex } from "@game/core/ui/Flex";
+import { FlexRow } from "@game/core/ui/FlexRow";
+import PhaserGamebus from "@game/lib/gamebus";
+
 import { AbstractScene } from "../index";
 import { SCENES } from "../scenes";
 import { LeftPanel } from "./left-panel";

src/scenes/hud/left-panel.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "../../ui/components/Flex";
+import { Flex } from "@game/core/ui/Flex";
 
 export const LeftPanel = ({
   width,

src/scenes/hud/right-panel.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "../../ui/components/Flex";
+import { Flex } from "@game/core/ui/Flex";
 
 export const RightPanel = ({
   width,