feat: add logo to header

clients/admin-client/package.json

@@ -28,8 +28,8 @@
     "react-router-dom": "6.22.1"
   },
   "devDependencies": {
-    "@galaxyops/character-sheet-contracts": "*",
     "@galaxyops/base-nodejs": "workspace:*",
+    "@galaxyops/character-sheet-contracts": "*",
     "@galaxyops/create-artifact": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -50,6 +50,7 @@
     "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vite": "^4.5.0"
+    "vite": "^4.5.0",
+    "vite-plugin-static-copy": "^2.1.0"
   }
 }

clients/admin-client/vite.config.mts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/@galaxyops/design-system/dist/assets/*',
+          dest: 'assets'
+        }
+      ]
+    })
+  ],
+  server: {
+    port: 3000,
+    host: '127.0.0.1',
+  },
+});

clients/design-system/src/components/AppBar/AppBar.tsx

@@ -12,7 +12,6 @@ export type NavMenuItem = {
 export type AppBarProps = {
   menuItems?: NavMenuItem[];
   menuMobileItems?: NavMenuItem[];
-  siteTitle?: string;
   theme?: 'dark' | 'light';
   children?: React.ReactNode;
   topRightSlot: ReactNode;
@@ -21,7 +20,7 @@ export type AppBarProps = {
 const BREAKPOINT_MD_MAX = 991;
 
 export const AppBar = (props: AppBarProps) => {
-  const { topRightSlot, children, siteTitle, theme, menuMobileItems } = props;
+  const { topRightSlot, children, theme, menuMobileItems } = props;
   const [collapsed, setCollapsed] = React.useState(true);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const menuMobileRef = React.useRef<HTMLDivElement>(null);
@@ -85,8 +84,12 @@ export const AppBar = (props: AppBarProps) => {
             onClick={() => (collapsed ? openMobileMenu() : closeMobileMenu())}
             ref={appBarIconRef}
           />
-          <a className="navbar-brand font-game" href="/">
-            {siteTitle || 'Your Brand'}
+          <a className="navbar-brand" href="/">
+            <img
+              src="/assets/brand/nekos-gate.png"
+              alt="Nekos Gate"
+              className="navbar-logo"
+            />
           </a>
           <div className="d-none d-sm-block">{topRightSlot}</div>
         </div>

clients/design-system/src/components/AppBar/style.module.scss

@@ -20,15 +20,10 @@
   background-color: $color-white;
 
   & .navbar {
-    height: 80px;
     background-image: none !important;
 
-    & .navbar-brand {
-      color: $color-off-white !important;
-      font-weight: bold;
-      font-size: 2rem !important;
-      line-height: 1;
-      letter-spacing: 0.2rem;
+    & .navbar-logo {
+      height: 60px;
     }
   }
 

clients/design-system/src/components/HeroBanner/HeroBanner.tsx

@@ -27,7 +27,7 @@ export const HeroBanner = (props: HeroBannerProps) => {
           <div className="hero-gradient-overlay d-none d-md-block"></div>
         </>
       )}
-      <div className="container pt-1 pb-sm-1 py-md-3 pb-lg-5">
+      <div className="container pt-0 pb-sm-1 pb-md-3 pb-lg-5">
         <div className="row g-0">
           {breadcrumb}
 

clients/design-system/src/game-assets/IsometricCanvas/types/Actor.type.ts

@@ -8,7 +8,7 @@ export type Actor = {
   actorId: string;
   height?: number; // Optional height of the actor (for collision, etc.)
   spriteMapRegistry?: SpriteMapRegistry;
-  currentState: ActorState; // Current state of the actor (e.g., idle, moving)
+  currentState?: ActorState; // Current state of the actor (e.g., idle, moving)
   movement: Movement; // Movement data for the actor
   animation: Animation; // Animation data for the actor
   lastUpdated?: DateTime; // Timestamp for when the actor's data was last updated

clients/design-system/stories/web-assets/organisms/AppBar.stories.tsx

@@ -1,54 +1,63 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import {
-  AppBar,
-  AppBarProps,
-  Toolbar,
-  FontAwesomeIcon,
-  faBars,
-  faGithub,
-  IconButton,
-} from '../../../src/main';
+import { AppBar, AppBarProps, Button, Link } from '../../../src/main';
 
 export default {
   title: 'Web Assets/Organisms/AppBar',
   component: AppBar,
 } as Meta<typeof AppBar>;
 
+type NavMenuItem = {
+  link: string;
+  title: string;
+};
+const menuItems: NavMenuItem[] = [
+  { link: '/', title: 'Home' },
+  { link: '/dice-analyzer', title: 'Dice analyzer' },
+  { link: '/archetypes', title: 'Archetypes' },
+  { link: '/character-sheets', title: 'Character Sheets' },
+];
+
 export const AppBarLight = (args: AppBarProps) => (
   <AppBar {...args}>
-    <Toolbar>
-      <IconButton color="inherit" aria-label="open drawer" edge="start">
-        <FontAwesomeIcon icon={faBars} />
-      </IconButton>
-      LOGO
-      <IconButton href="https://github.com/hxtree/galaxyops" color="inherit">
-        <FontAwesomeIcon icon={faGithub} />
-      </IconButton>
-    </Toolbar>
+    <ul className="navbar-nav me-auto">
+      {menuItems &&
+        menuItems.map((menuItem: NavMenuItem) => (
+          <li className="nav-item">
+            <Link href={menuItem.link}>{menuItem.title}</Link>
+          </li>
+        ))}
+    </ul>
   </AppBar>
 );
 
 AppBarLight.args = {
   position: 'fixed',
   theme: 'light',
-};
+  siteTitle: 'NekosGate',
+  topRightSlot: (
+    <>
+      <Button href="/login" color="secondary" size="small">
+        Login
+      </Button>
+    </>
+  ),
+} as AppBarProps;
 
 export const AppBarDark = (args: AppBarProps) => (
   <AppBar {...args}>
-    <Toolbar>
-      <IconButton color="inherit" aria-label="open drawer" edge="start">
-        <FontAwesomeIcon icon={faBars} />
-      </IconButton>
-      LOGO
-      <IconButton href="https://github.com/hxtree/galaxyops" color="inherit">
-        <FontAwesomeIcon icon={faGithub} />
-      </IconButton>
-    </Toolbar>
+    <ul className="navbar-nav me-auto">
+      {menuItems &&
+        menuItems.map((menuItem: NavMenuItem) => (
+          <li className="nav-item">
+            <Link href={menuItem.link}>{menuItem.title}</Link>
+          </li>
+        ))}
+    </ul>
   </AppBar>
 );
 
 AppBarDark.args = {
-  position: 'fixed',
+  ...AppBarLight.args,
   theme: 'dark',
 };

clients/player-client/package.json

@@ -28,8 +28,8 @@
     "react-router-dom": "6.22.1"
   },
   "devDependencies": {
-    "@galaxyops/character-sheet-contracts": "*",
     "@galaxyops/base-nodejs": "workspace:*",
+    "@galaxyops/character-sheet-contracts": "*",
     "@galaxyops/create-artifact": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -50,6 +50,7 @@
     "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "typescript": "5.3.3",
-    "vite": "^4.5.0"
+    "vite": "^4.5.0",
+    "vite-plugin-static-copy": "^2.1.0"
   }
 }

clients/player-client/src/pages/home.page.tsx

@@ -1,12 +1,14 @@
-import { IsometricCanvas } from '@galaxyops/design-system/dist/main';
+import {
+  IsometricCanvas,
+  IsometricCanvasProps,
+} from '@galaxyops/design-system/dist/main';
 import gameState from './game-state.json';
 
 export default function HomePage() {
   return (
     <>
-      <main className="container mt-5">
-        <IsometricCanvas args={gameState} />
-      </main>
+      {/* @ts-expect-error needed for types temp */}
+      <IsometricCanvas {...(gameState as IsometricCanvasProps)} />
     </>
   );
 }

clients/player-client/vite.config.mts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/@galaxyops/design-system/dist/assets/*',
+          dest: 'assets'
+        }
+      ]
+    })
+  ],
+  server: {
+    port: 3000,
+    host: '127.0.0.1',
+  },
+});