feat: Enhanced game tools

.github/workflows/info.yml

@@ -5,15 +5,6 @@ on:
       affected_projects:
         description: 'JSON array of affected projects'
         value: ${{ jobs.Info.outputs.affected_projects }}
-      should_run_e2e:
-        description: 'Whether to run the e2e because of e2e change'
-        value: ${{ contains(fromJSON(jobs.Info.outputs.affected_projects), '@ageorgedev/ageorgedev-e2e') }}
-      should_deploy_site:
-        description: 'Whether to deploy the site'
-        value: ${{ contains(fromJSON(jobs.Info.outputs.affected_projects), '@ageorgedev/ageorgedev') }}
-      should_deploy_design_system:
-        description: 'Whether to deploy the design-system storybook'
-        value: ${{ contains(fromJSON(jobs.Info.outputs.affected_projects), '@ageorgedev/design-docs')}}
       production_deploy_matrix:
         description: 'JSON array of projects to deploy to production'
         value: ${{ jobs.Info.outputs.production_deploy_matrix }}
@@ -42,6 +33,7 @@ jobs:
           AFFECTED: ${{ steps.affected_projects.outputs.affected_projects }}
           SITE_PROJECT: ${{ vars.VERCEL_PROJECT_AGEORGEDEV }}
           DESIGN_PROJECT: ${{ vars.VERCEL_PROJECT_DESIGN_SYSTEM }}
+          GAME_TOOLS_PROJECT: ${{ vars.VERCEL_PROJECT_GAME_TOOLS }}
         run: |
           matrix=$(echo "$AFFECTED" | jq -c '
             . as $p |
@@ -51,6 +43,9 @@ jobs:
             else . end |
             if ($p | contains(["@ageorgedev/design-docs"])) then
               . + [{"vercel_project_name": env.DESIGN_PROJECT}]
+            else . end |
+            if ($p | contains(["@ageorgedev/game-tools"])) then
+              . + [{"vercel_project_name": env.GAME_TOOLS_PROJECT}]
             else . end
           ')
           echo "production_deploy_matrix=$matrix" >> "$GITHUB_OUTPUT"
@@ -60,6 +55,7 @@ jobs:
           AFFECTED: ${{ steps.affected_projects.outputs.affected_projects }}
           SITE_PROJECT: ${{ vars.VERCEL_PROJECT_AGEORGEDEV }}
           DESIGN_PROJECT: ${{ vars.VERCEL_PROJECT_DESIGN_SYSTEM }}
+          GAME_TOOLS_PROJECT: ${{ vars.VERCEL_PROJECT_GAME_TOOLS }}
         run: |
           matrix=$(echo "$AFFECTED" | jq -c '
             . as $p |
@@ -69,6 +65,9 @@ jobs:
             else . end |
             if ($p | contains(["@ageorgedev/design-docs"])) then
               . + [{"vercel_project_name": env.DESIGN_PROJECT, "label": "Design System"}]
+            else . end |
+            if ($p | contains(["@ageorgedev/game-tools"])) then
+              . + [{"vercel_project_name": env.GAME_TOOLS_PROJECT, "label": "Game Tools"}]
             else . end
           ')
           echo "pr_deploy_matrix=$matrix" >> "$GITHUB_OUTPUT"

.vscode/settings.json

@@ -9,5 +9,20 @@
   "editor.defaultFormatter": "biomejs.biome",
   "nxConsole.generateAiAgentRules": true,
   "js/ts.preferences.preferTypeOnlyAutoImports": true,
-  "js/ts.tsdk.path": "node_modules/typescript/lib"
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#8f491a",
+    "statusBar.background": "#643312",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#8f491a",
+    "statusBarItem.remoteBackground": "#643312",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "tab.activeBorder": "#8f491a",
+    "titleBar.activeBackground": "#643312",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#64331299",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#643312"
 }

apps/ageorgedev-e2e/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test'
+import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests',
@@ -11,4 +11,4 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
   ],
-})
+});

apps/ageorgedev-e2e/tests/smoke.spec.ts

@@ -1,20 +1,20 @@
-import { expect, test } from '@playwright/test'
+import { expect, test } from '@playwright/test';
 
 test('home page renders', async ({ page }) => {
-  await page.goto('/')
-  await expect(page.getByRole('heading', { name: 'Anish' })).toBeVisible()
-  await expect(page.getByRole('heading', { name: 'George' })).toBeVisible()
+  await page.goto('/');
+  await expect(page.getByRole('heading', { name: 'Anish' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'George' })).toBeVisible();
   await expect(
     page.getByRole('heading', { name: 'Web Developer' })
-  ).toBeVisible()
-})
+  ).toBeVisible();
+});
 
 test('resume page renders', async ({ page }) => {
-  await page.goto('/resume')
-  await expect(page.locator('body')).not.toBeEmpty()
-})
+  await page.goto('/resume');
+  await expect(page.locator('body')).not.toBeEmpty();
+});
 
 test('talks page renders', async ({ page }) => {
-  await page.goto('/talks')
-  await expect(page.locator('body')).not.toBeEmpty()
-})
+  await page.goto('/talks');
+  await expect(page.locator('body')).not.toBeEmpty();
+});

apps/ageorgedev/package.json

@@ -22,7 +22,7 @@
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-router": "1.170.11",
     "@tanstack/react-start": "1.168.19",
-    "ramda": "0.28.0",
+    "ramda": "0.32.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "remark-frontmatter": "5.0.0",

apps/ageorgedev/postcss.config.js

@@ -8,4 +8,4 @@ export default {
     'postcss-nesting': {},
     '@tailwindcss/postcss': {},
   },
-}
+};

apps/ageorgedev/src/components/GlobalProviders.tsx

@@ -1,5 +1,5 @@
-import { ThemeProvider } from '@ageorgedev/design-system/theming/ThemeProvider'
+import { ThemeProvider } from '@ageorgedev/design-system/theming/ThemeProvider';
 
 export function GlobalProviders({ children }: React.PropsWithChildren) {
-  return <ThemeProvider>{children}</ThemeProvider>
+  return <ThemeProvider>{children}</ThemeProvider>;
 }

apps/ageorgedev/src/components/HomeAboveFold/HomeAboveFold.spec.tsx

@@ -1,25 +1,25 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import { HomeAboveFold } from './HomeAboveFold'
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { HomeAboveFold } from './HomeAboveFold';
 
 describe('HomeAboveFold', () => {
   it('renders a heading with the title', () => {
-    render(<HomeAboveFold />)
+    render(<HomeAboveFold />);
     expect(
       screen.getByRole('heading', { name: /web developer/i })
-    ).toBeInTheDocument()
-  })
+    ).toBeInTheDocument();
+  });
 
   it('renders the subtitle text', () => {
-    render(<HomeAboveFold />)
+    render(<HomeAboveFold />);
     expect(
       screen.getByText(/architecting web experiences since 2016/i)
-    ).toBeInTheDocument()
-  })
+    ).toBeInTheDocument();
+  });
 
   it('renders social links to GitHub and LinkedIn', () => {
-    render(<HomeAboveFold />)
-    expect(screen.getByRole('link', { name: /github/i })).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: /linkedin/i })).toBeInTheDocument()
-  })
-})
+    render(<HomeAboveFold />);
+    expect(screen.getByRole('link', { name: /github/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /linkedin/i })).toBeInTheDocument();
+  });
+});

apps/ageorgedev/src/components/HomeAboveFold/HomeAboveFold.tsx

@@ -1,11 +1,11 @@
-import { NameLogo } from '@ageorgedev/design-system/logo/NameLogo'
+import { NameLogo } from '@ageorgedev/design-system/logo/NameLogo';
 import {
   Heading3,
   Heading4,
-} from '@ageorgedev/design-system/typography/typography-components'
-import { cn } from '@ageorgedev/toolbelt/cn'
-import { GithubLogoIcon, LinkedinLogoIcon } from '@phosphor-icons/react/ssr'
-import styles from './HomeAboveFold.module.css'
+} from '@ageorgedev/design-system/typography/typography-components';
+import { cn } from '@ageorgedev/toolbelt/cn';
+import { GithubLogoIcon, LinkedinLogoIcon } from '@phosphor-icons/react/ssr';
+import styles from './HomeAboveFold.module.css';
 
 export function HomeAboveFold() {
   return (
@@ -62,5 +62,5 @@ export function HomeAboveFold() {
         </div>
       </section>
     </div>
-  )
+  );
 }

apps/ageorgedev/src/components/Resume/Skill.spec.tsx

@@ -1,28 +1,28 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import { Skill } from './Skill'
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Skill } from './Skill';
 
 describe('Skill', () => {
   it('renders the skill name', () => {
-    render(<Skill name="TypeScript" type="tool" level={4} />)
-    expect(screen.getByText('TypeScript')).toBeInTheDocument()
-  })
+    render(<Skill name="TypeScript" type="tool" level={4} />);
+    expect(screen.getByText('TypeScript')).toBeInTheDocument();
+  });
 
   it('renders for each skill type without throwing', () => {
-    const { rerender } = render(<Skill name="React" type="tool" level={5} />)
-    expect(screen.getByText('React')).toBeInTheDocument()
+    const { rerender } = render(<Skill name="React" type="tool" level={5} />);
+    expect(screen.getByText('React')).toBeInTheDocument();
 
-    rerender(<Skill name="Performance" type="technique" level={4} />)
-    expect(screen.getByText('Performance')).toBeInTheDocument()
+    rerender(<Skill name="Performance" type="technique" level={4} />);
+    expect(screen.getByText('Performance')).toBeInTheDocument();
 
-    rerender(<Skill name="Mentoring" type="human" level={3} />)
-    expect(screen.getByText('Mentoring')).toBeInTheDocument()
-  })
+    rerender(<Skill name="Mentoring" type="human" level={3} />);
+    expect(screen.getByText('Mentoring')).toBeInTheDocument();
+  });
 
   it('renders for all valid levels without throwing', () => {
-    const { rerender } = render(<Skill name="skill" type="tool" level={3} />)
-    rerender(<Skill name="skill" type="tool" level={4} />)
-    rerender(<Skill name="skill" type="tool" level={5} />)
-    expect(screen.getByText('skill')).toBeInTheDocument()
-  })
-})
+    const { rerender } = render(<Skill name="skill" type="tool" level={3} />);
+    rerender(<Skill name="skill" type="tool" level={4} />);
+    rerender(<Skill name="skill" type="tool" level={5} />);
+    expect(screen.getByText('skill')).toBeInTheDocument();
+  });
+});

apps/ageorgedev/src/components/Resume/Skill.tsx

@@ -1,18 +1,18 @@
-import { cn } from '@ageorgedev/toolbelt/cn'
-import { map } from 'ramda'
-import styles from './Skill.module.css'
+import { cn } from '@ageorgedev/toolbelt/cn';
+import { map } from 'ramda';
+import styles from './Skill.module.css';
 
-type SkillType = 'tool' | 'technique' | 'human'
-type SkillLevel = 3 | 4 | 5
+type SkillType = 'tool' | 'technique' | 'human';
+type SkillLevel = 3 | 4 | 5;
 
 type SkillProps = {
-  name: string
-  type: SkillType
-  level: SkillLevel
-}
+  name: string;
+  type: SkillType;
+  level: SkillLevel;
+};
 
 export function Skill(props: SkillProps) {
-  const styleClasses = levelClasses[props.type][props.level]
+  const styleClasses = levelClasses[props.type][props.level];
 
   return (
     <div
@@ -23,42 +23,42 @@ export function Skill(props: SkillProps) {
     >
       {props.name}
     </div>
-  )
+  );
 }
 
-type SkillClassMap = Record<SkillLevel, string>
+type SkillClassMap = Record<SkillLevel, string>;
 
 const primaryAccentColorClasses: SkillClassMap = {
   3: 'bg-primary-surface text-primary-onsurface',
   4: 'bg-primary-surface-2 text-primary-onsurface-2',
   5: `${styles.highSkill} bg-primary-surface-2 text-primary-onsurface-2`, // TODO
-}
+};
 
 const secondaryAccentColorClasses: SkillClassMap = {
   3: 'bg-secondary-surface text-secondary-onsurface',
   4: 'bg-secondary-surface-2 text-secondary-onsurface-2',
   5: `${styles.highSkill} bg-secondary-surface-2 text-secondary-onsurface-2`,
-}
+};
 
 const levelClassesForHuman: SkillClassMap = {
   3: 'bg-primary-surface text-primary-onsurface',
   4: 'bg-primary-surface-2 text-primary-onsurface-2',
   5: `${styles.highSkill} bg-primary-surface-2 text-primary-onsurface-2`, // TODO
-}
+};
 
 const levelClasses: Record<SkillType, SkillClassMap> = {
   tool: primaryAccentColorClasses,
   technique: secondaryAccentColorClasses,
   human: levelClassesForHuman,
-}
+};
 
 const skillMapper =
   (type: SkillType) =>
   ([name, level]: [string, SkillLevel]) => ({
     name,
     level,
     type,
-  })
+  });
 
 export const toolSkills: SkillProps[] = map(skillMapper('tool'), [
   ['React', 5],
@@ -73,7 +73,7 @@ export const toolSkills: SkillProps[] = map(skillMapper('tool'), [
   ['AgGrid', 3],
   ['Node', 4],
   ['Ramda', 4],
-])
+]);
 
 export const techSkills: SkillProps[] = map(skillMapper('technique'), [
   ['Performance', 4],
@@ -89,7 +89,7 @@ export const techSkills: SkillProps[] = map(skillMapper('technique'), [
   ['Functional programming', 5],
   ['Accessibility', 4],
   ['CSS animations', 5],
-])
+]);
 
 export const humanSkills: SkillProps[] = map(skillMapper('human'), [
   ['Mentoring', 4],
@@ -100,10 +100,10 @@ export const humanSkills: SkillProps[] = map(skillMapper('human'), [
   ['Leadership', 3],
   ['Stakeholder management', 5],
   ['Training', 5],
-])
+]);
 
 export const AllSkills: SkillProps[] = [
   ...toolSkills,
   ...techSkills,
   ...humanSkills,
-]
+];