Introduce game engine

.eslintrc.cjs

@@ -16,5 +16,8 @@ module.exports = {
       { allowConstantExport: true },
     ],
     '@typescript-eslint/no-unused-vars': 'warn',
+    // I am going to be real with you, this pipe system is not going to be very typed.
+    // Lets just. put this aside for now.
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 };

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn test

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+coverage
 
 # Editor directories and files
 .vscode/*

package.json

@@ -7,9 +7,11 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "format": "prettier --write .",
+    "format": "prettier --write src/ tests/",
     "lint": "eslint . --ext ts,tsx --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@awesome.me/webawesome": "^3.2.1",
@@ -54,14 +56,16 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^4.0.6",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4",
     "jsdom": "^27.1.0",
     "prettier": "^3.2.5",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vitest": "^4.0.6"
   },
   "engines": {
     "node": ">=20.0.0",

src/app/App.tsx

@@ -1,18 +1,25 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { HomePage } from '../home';
 import { GamePage } from '../game';
+import { EndPage } from '../end';
+import { GameShell } from '../game/GameShell';
+import { SceneBridge } from '../game/SceneBridge';
 
 import '@awesome.me/webawesome/dist/styles/webawesome.css';
 
 export const App = () => {
   return (
-    <BrowserRouter
-      future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
-    >
-      <Routes>
-        <Route path='/' element={<HomePage />} />
-        <Route path='/play' element={<GamePage />} />
-      </Routes>
-    </BrowserRouter>
+    <GameShell>
+      <BrowserRouter
+        future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
+      >
+        <SceneBridge />
+        <Routes>
+          <Route path='/' element={<HomePage />} />
+          <Route path='/play' element={<GamePage />} />
+          <Route path='/end' element={<EndPage />} />
+        </Routes>
+      </BrowserRouter>
+    </GameShell>
   );
 };

src/common/ToggleTile.tsx

@@ -20,6 +20,7 @@ export class JoiToggleTileElement extends LitElement {
       display: block;
       width: 100%;
       cursor: pointer;
+      text-align: left;
 
       background: var(--wa-color-neutral-fill-quiet);
       opacity: var(--tile-inactive-opacity);

src/end/ClimaxResult.tsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import { useGameFrame } from '../game/hooks';
+import { climax, type ClimaxResultType } from '../game/plugins/dice/climax';
+
+type OutcomeDisplay = { label: string; description: string };
+
+const outcomes: Record<NonNullable<ClimaxResultType>, OutcomeDisplay> = {
+  climax: { label: 'Climax', description: 'You came' },
+  denied: { label: 'Denied', description: 'Better luck next time' },
+  ruined: { label: 'Ruined', description: 'How unfortunate' },
+};
+
+const earlyEnd: OutcomeDisplay = { label: 'Ended early', description: '' };
+
+const StyledResult = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const StyledLabel = styled.span`
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: var(--text-color);
+`;
+
+const StyledDescription = styled.span`
+  font-size: 0.85rem;
+  opacity: 0.6;
+`;
+
+export const ClimaxResult = () => {
+  const result = useGameFrame(climax.result) as ClimaxResultType;
+  const display = (result && outcomes[result]) || earlyEnd;
+
+  return (
+    <StyledResult>
+      <StyledLabel>{display.label}</StyledLabel>
+      {display.description && (
+        <StyledDescription>{display.description}</StyledDescription>
+      )}
+    </StyledResult>
+  );
+};

src/end/EndPage.tsx

@@ -0,0 +1,159 @@
+import styled, { keyframes } from 'styled-components';
+import { WaButton } from '@awesome.me/webawesome/dist/react';
+import { ContentSection } from '../common';
+import { useGameEngine } from '../game/hooks/UseGameEngine';
+import { useGameFrame } from '../game/hooks';
+import Clock from '../game/plugins/clock';
+import Rand from '../game/plugins/rand';
+import Scene from '../game/plugins/scene';
+import { formatTime } from '../utils';
+import { ClimaxResult } from './ClimaxResult';
+import { GameTimeline } from './GameTimeline';
+
+const fadeInUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const StyledEndPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wa-space-l);
+
+  min-height: 100%;
+  width: 100%;
+  padding: 16px;
+
+  & > * {
+    max-width: 480px;
+    width: 100%;
+    animation: ${fadeInUp} 500ms cubic-bezier(0.23, 1, 0.32, 1) both;
+  }
+
+  & > :nth-child(1) {
+    animation-delay: 100ms;
+  }
+  & > :nth-child(2) {
+    animation-delay: 250ms;
+  }
+  & > :nth-child(3) {
+    animation-delay: 400ms;
+  }
+`;
+
+const StyledTitle = styled.h1`
+  text-align: center;
+  font-size: clamp(2rem, 8vw, 3.5rem);
+  font-weight: bold;
+  line-height: 1;
+`;
+
+const StyledCard = styled(ContentSection)`
+  display: flex;
+  flex-direction: column;
+  gap: var(--wa-space-m);
+  padding: 20px;
+`;
+
+const StyledStatsRow = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+const StyledStat = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+`;
+
+const StyledStatValue = styled.span`
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: var(--text-color);
+`;
+
+const StyledStatLabel = styled.span`
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.4;
+`;
+
+const StyledDivider = styled.hr`
+  border: none;
+  border-top: 1px solid currentColor;
+  width: 100%;
+  margin: 0;
+`;
+
+const StyledActions = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledFinishButton = styled(WaButton)`
+  &::part(base) {
+    height: fit-content;
+    padding: 12px 40px;
+  }
+
+  &::part(label) {
+    font-size: 1.25rem;
+    text-transform: uppercase;
+  }
+`;
+
+export const EndPage = () => {
+  const { injectImpulse } = useGameEngine();
+  const clockState = useGameFrame(Clock.paths) as
+    | { elapsed?: number }
+    | undefined;
+  const randState = useGameFrame(Rand.paths) as { seed?: string } | undefined;
+
+  const displayTime =
+    typeof clockState?.elapsed === 'number' ? clockState.elapsed : 0;
+  const seed = randState?.seed ?? '';
+
+  return (
+    <StyledEndPage>
+      <StyledTitle>Game Over</StyledTitle>
+      <StyledCard>
+        <ClimaxResult />
+        <StyledDivider />
+        <StyledStatsRow>
+          <StyledStat>
+            <StyledStatValue>{formatTime(displayTime)}</StyledStatValue>
+            <StyledStatLabel>Play time</StyledStatLabel>
+          </StyledStat>
+          <StyledStat>
+            <StyledStatValue
+              style={{ fontFamily: 'monospace', fontSize: '1rem' }}
+            >
+              {seed}
+            </StyledStatValue>
+            <StyledStatLabel>Seed</StyledStatLabel>
+          </StyledStat>
+        </StyledStatsRow>
+        <StyledDivider />
+        <GameTimeline />
+      </StyledCard>
+      <StyledActions>
+        <StyledFinishButton
+          size='large'
+          onClick={() => injectImpulse(Scene.setScene('home'))}
+        >
+          Finish
+        </StyledFinishButton>
+      </StyledActions>
+    </StyledEndPage>
+  );
+};