feat: flesh in player client

README.md

@@ -159,5 +159,8 @@ Pull requests and bug reports are welcome on GitHub at
 
 ## License
 
-All packages available [NPM](https://www.npmjs.com/search?q=%40cats-cradle) are
-MIT licensed.
+This project is mostly licensed under the MIT License. Detailed license
+information, including exceptions for packages that are not MIT licensed, can be
+found in the [LICENSE.md](./LICENSE.md) file. All packages published under the
+[@galaxyops](https://www.npmjs.com/search?q=%40galaxyops) namespace on NPM are
+also MIT licensed unless otherwise specified.

clients/admin-client/README.md

@@ -4,13 +4,3 @@
 
 The admin client is the front end for game masters portal. It provides insight
 into various game runtime features.
-
-```bash
-rushx build:all &&
-rushx start
-```
-
-## TODO
-
-- add unit tests
-- add cdk deploy to ec2

clients/admin-client/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc --build ./tsconfig-build.json && vite build",
-    "build:all": "rush build -t .",
+    "build:all": "nx run-many --target=build --all",
     "artifact": "create-artifact @galaxyops/admin-client",
     "lint": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix",
     "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix-dry-run",

clients/design-system/package.json

@@ -18,7 +18,7 @@
     "dev": "storybook dev -p 3000 -s public",
     "build": "tsc --build ./tsconfig-build.json && vite build",
     "build:storybook": "tsc --p ./tsconfig-build.json && storybook build",
-    "build:all": "rush build -t .",
+    "build:all": "nx run-many --target=build --all",
     "artifact": "create-artifact @galaxyops/design-system",
     "test": "jest --runInBand",
     "test:cov": "jest --coverage --runInBand",

clients/jukebox/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "nest start --debug --watch",
     "build": "tsc",
-    "build:all": "rush build -t .",
+    "build:all": "nx run-many --target=build --all",
     "artifact": "create-artifact @galaxyops/jukebox",
     "watch": "tsc -w",
     "test": "jest --runInBand",

clients/player-client/.env.dist

@@ -0,0 +1 @@
+VITE_PARENT_DOMAIN_NAME=sandbox.nekosgate.com

clients/player-client/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+      'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

clients/player-client/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

clients/player-client/README.md

@@ -0,0 +1,6 @@
+# @galaxyops/player-client
+
+[![GitHub Stars](https://img.shields.io/github/stars/hxtree/galaxyops?style=social)](https://github.com/hxtree/galaxyops/stargazers)
+
+The player client is the front end for game. It's what the player sees to play
+the game.

clients/player-client/bin/app.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import * as cdk from 'aws-cdk-lib';
+import { PlayerClientStack } from '../stacks/player-client.stack';
+
+const app = new cdk.App();
+
+new PlayerClientStack(app, 'PlayerClientStack', {});

clients/player-client/cdk.json

@@ -0,0 +1,17 @@
+{
+  "app": "tsc --build ./tsconfig-build.json && vite build && npx ts-node --prefer-ts-exts bin/app.ts",
+  "watch": {
+    "include": ["src/", "stacks/", "pages/", "components/"],
+    "exclude": ["__tests__", "*.test.ts", "*.e2e-spec.ts"]
+  },
+  "context": {
+    "@aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId": true,
+    "@aws-cdk/core:stackRelativeExports": true,
+    "@aws-cdk/aws-rds:lowercaseDbIdentifier": true,
+    "@aws-cdk/aws-lambda:recognizeVersionProps": true,
+    "@aws-cdk/aws-cloudfront:defaultSecurityPolicyTLSv1.2_2021": true,
+    "@aws-cdk-containers/ecs-service-extensions:enableDefaultLogDriver": true,
+    "@aws-cdk/aws-ec2:uniqueImdsv2TemplateName": true,
+    "@aws-cdk/core:target-partitions": ["aws", "aws-cn"]
+  }
+}

clients/player-client/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href="https://fonts.googleapis.com/css2?family=Jersey+10&Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nekos Gate</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

clients/player-client/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@galaxyops/player-client",
+  "private": true,
+  "type": "commonjs",
+  "version": "2.1.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc --build ./tsconfig-build.json && vite build",
+    "build:all": "nx run-many --target=build --all",
+    "artifact": "create-artifact @galaxyops/player-client",
+    "lint": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix",
+    "lint:ci": "eslint --format visualstudio \"./src/**/*.tsx\"  --fix-dry-run",
+    "preview": "vite preview",
+    "cdk:bootstrap": "cdk bootstrap",
+    "cdk:diff": "cdk diff",
+    "cdk:synth": "cdk synth",
+    "cdk:hotswap": "cdk deploy --hotswap",
+    "cdk:deploy": "cdk deploy",
+    "cdk:watch": "cdk watch",
+    "cdk:destroy": "cdk destroy",
+    "depcheck": "npx depcheck"
+  },
+  "dependencies": {
+    "@galaxyops/design-system": "workspace:*",
+    "axios": "^1.6.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.22.1"
+  },
+  "devDependencies": {
+    "@galaxyops/character-sheet-contracts": "*",
+    "@galaxyops/base-nodejs": "workspace:*",
+    "@galaxyops/create-artifact": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.2.59",
+    "@types/react-dom": "18.2.19",
+    "@typescript-eslint/eslint-plugin": "~6.16.0",
+    "@typescript-eslint/parser": "~6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "aws-cdk": "2.129.0",
+    "aws-cdk-lib": "2.129.0",
+    "constructs": "^10.2.70",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "~4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "~29.6.1",
+    "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3",
+    "vite": "^4.5.0"
+  }
+}

clients/player-client/project.json

@@ -0,0 +1,5 @@
+{
+  "name": "player-client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "tags": ["scope:clients"]
+}

clients/player-client/src/App.tsx

@@ -0,0 +1,33 @@
+import '@galaxyops/design-system/dist/assets/style.css';
+import { AppProvider } from './context/AppProvider';
+import { PageFooter, faGithub } from '@galaxyops/design-system/dist/main';
+import { Router } from './routing/Router';
+
+function App() {
+  const parentDomainName =
+    import.meta.env.VITE_PARENT_DOMAIN_NAME ?? 'sandbox.nekosgate.com';
+
+  return (
+    <AppProvider>
+      <Router />
+      <PageFooter
+        socialMedias={[
+          {
+            icon: faGithub,
+            label: 'Github',
+            url: 'https://github.com/hxtree/galaxyops',
+          },
+        ]}
+        siteOwner="Nekos Gate"
+        links={[
+          { url: `https://jukebox.${parentDomainName}`, label: 'Jukebox' },
+          { url: `https://design.${parentDomainName}`, label: 'Design System' },
+          { url: `https://api.${parentDomainName}`, label: 'Developer API' },
+          { url: 'https://nekosgate.awsapps.com/mail', label: 'WorkMail' },
+        ]}
+      />
+    </AppProvider>
+  );
+}
+
+export default App;

clients/player-client/src/README.md

@@ -0,0 +1,35 @@
+/game-project ├── /assets # Folder for static assets (images, sounds, fonts,
+etc.) │ ├── /images # Images (sprites, backgrounds, etc.) │ ├── /sounds # Sound
+files (music, sound effects, etc.) │ └── /fonts # Fonts used for text rendering
+├── /src # Main source code │ ├── /core # Core systems like game loop, event
+handling, etc. │ │ ├── gameLoop.js # Main game loop (where the game runs) │ │
+├── events.js # Event system (handles input, timers, etc.) │ │ └── utils.js #
+General utility functions (e.g., helpers) │ ├── /entities # Game entities
+(player, enemies, NPCs, etc.) │ │ ├── player.js # Player entity and logic │ │
+├── enemy.js # Enemy AI and logic │ │ └── npc.js # Non-playable character logic
+(optional) │ ├── /input # Input handling (keyboard, mouse, touch, etc.) │ │ ├──
+inputManager.js # Handles user inputs and updates player state │ │ └──
+keybindings.js # Custom key binding configuration (optional) │ ├── /physics #
+Physics (collision detection, gravity, etc.) │ │ ├── physics.js # Basic physics
+engine (collision detection, movement) │ │ └── collision.js # Logic for
+detecting and resolving collisions │ ├── /render # Rendering logic (drawing game
+objects to the canvas) │ │ ├── renderer.js # Handles drawing entities to the
+canvas │ │ ├── sprite.js # Sprite and animation handling │ │ └── background.js #
+Drawing and scrolling background logic │ ├── /audio # Audio management (sound
+effects, music) │ │ ├── audioManager.js # Handles playing sound effects and
+music │ │ └── soundEffects.js # Helper functions for specific sound events │ ├──
+/ui # User interface (HUD, menus, etc.) │ │ ├── hud.js # Handles rendering the
+heads-up display (health bar, score) │ │ ├── menu.js # Logic for menu screens
+(start, pause, etc.) │ │ └── button.js # Logic for interactive buttons │ ├──
+/networking # Multiplayer and server-client communication (if applicable) │ │
+├── networkManager.js # Handles sending and receiving data from the server │ │
+└── sync.js # Synchronizing game state across clients │ ├── /state # Game state
+management (e.g., levels, score, timers) │ │ ├── gameState.js # Manages overall
+game state (playing, paused, etc.) │ │ └── level.js # Handles level transitions,
+enemy spawns, etc. │ └── /config # Configuration files (game settings,
+constants, etc.) │ ├── config.js # Game-wide settings like resolution, speed,
+etc. │ └── constants.js # Constants for the game (e.g., gravity, max health) ├──
+/public # Public assets (HTML, main entry point for the app) │ ├── index.html #
+Main HTML file (canvas, game setup) │ ├── style.css # Styling for the game
+(optional) │ └── /scripts # Any global scripts (e.g., game initializations) └──
+package.json # NPM dependencies and build scripts (if using node/npm)

clients/player-client/src/components/ArchetypeSelect.tsx

@@ -0,0 +1,107 @@
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+import {
+  OutlinedInput,
+  InputLabel,
+  MenuItem,
+  FormControl,
+  Select,
+  SelectChangeEvent,
+  CodeSnippet,
+  CodeSnippetLanguages,
+  ActionMenu,
+  SkillList,
+} from '@galaxyops/design-system/dist/main';
+import { Archetype } from '@galaxyops/character-sheet-contracts';
+
+export default function ArchetypeSelect() {
+  const [archetypes, setArchetypes] = useState<string[]>([]);
+  const [archetypeId, setArchetypeId] = useState<string>('');
+  const [archetypeData, setArchetypeData] = useState<Archetype>();
+  const [isLoading, setLoading] = useState<boolean>(true);
+
+  const parentDomainName =
+    import.meta.env.VITE_PARENT_DOMAIN_NAME ?? 'sandbox.nekosgate.com';
+
+  useEffect(() => {
+    const archetypesFetch = async () => {
+      setLoading(true);
+
+      try {
+        const res = await axios.get(
+          `https://api.${parentDomainName}/character-sheets/archetypes`,
+        );
+
+        setArchetypes(res.data);
+      } catch (err) {
+        const error = err as unknown as Error;
+        console.error('Error fetching archetypes:', error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    archetypesFetch();
+  }, [parentDomainName]);
+
+  const fetchArchetypeData = async (archetypeId: string) => {
+    setLoading(true);
+    try {
+      const res = await axios.get(
+        `https://api.${parentDomainName}/character-sheets/archetypes/${archetypeId}`,
+      );
+
+      setArchetypeData(res.data);
+    } catch (err) {
+      const error = err as unknown as Error;
+      console.error('Error fetching archetype data:', error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = async (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setArchetypeId(value as string);
+    await fetchArchetypeData(value as string);
+  };
+
+  return (
+    <>
+      <FormControl sx={{ m: 1, width: 300 }}>
+        <InputLabel id="archetype-id-label">Archetype</InputLabel>
+        <Select
+          labelId="archetype-id-label"
+          id="archetype-id"
+          onChange={event => handleChange(event)}
+          input={<OutlinedInput label="Archetype" />}
+          className="bg-white"
+        >
+          {archetypes &&
+            archetypes.map(archetype => (
+              <MenuItem key={archetype} value={archetype}>
+                {archetype}
+              </MenuItem>
+            ))}
+        </Select>
+      </FormControl>
+      {archetypeData && Object.keys(archetypeData).length > 0 && (
+        <>
+          <h2>{archetypeId}</h2>
+          <h3>Action Menu</h3>
+          <ActionMenu data={archetypeData} />
+          <h3>Skill List</h3>
+          <SkillList data={archetypeData} spacing={{ top: 1 }} />
+          <h3>Data</h3>
+          <CodeSnippet
+            data={JSON.stringify(archetypeData, null, 2)}
+            language={CodeSnippetLanguages.JSON}
+          />
+        </>
+      )}
+      {isLoading && 'loading'}
+    </>
+  );
+}