Merge branch 'main' of github.com:gvorbeck/codex-quest

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[handlebars]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  }
+}

README.md

@@ -15,10 +15,8 @@ Github Actions deploys the site when pushes are made to `main` branch.
 ## Tech Stack
 
 - [Ant Design Component Library](https://ant.design/components/overview)
-- [classnames](https://github.com/JedWatson/classnames)
 - [Firebase](https://console.firebase.google.com/)
 - [Jest](https://jestjs.io/)
-- [Marked](https://marked.js.org/)
 - [React](https://react.dev/)
 - [React Router](https://reactrouter.com/en/main)
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)

package.json

@@ -1,32 +1,33 @@
 {
   "name": "codex-quest",
-  "title": "Codex.Quest",
-  "version": "1.15.0.0",
+  "title": "codex quest",
+  "version": "1.16.0.0",
   "bfrpgEdition": "4th",
   "bfrpgRelease": "137",
   "private": true,
   "license": "CC BY-SA 4.0",
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@dice-roller/rpg-dice-roller": "^5.4.1",
-    "antd": "^5.9.3",
+    "antd": "^5.10.0",
     "classnames": "^2.3.2",
-    "dompurify": "^3.0.5",
-    "firebase": "^10.4.0",
-    "firebase-admin": "^11.10.1",
-    "marked": "^9.0.3",
+    "dompurify": "^3.0.6",
+    "firebase": "^10.5.0",
+    "firebase-admin": "^11.11.0",
+    "marked": "^9.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
-    "web-vitals": "^3.4.0"
+    "web-vitals": "^3.5.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
     ]
   },
   "scripts": {
-    "start": "vite",
+    "start": "vite --logLevel info",
+    "plop": "plop",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "test": "jest --coverage"
@@ -62,23 +63,24 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/dompurify": "^3.0.3",
     "@types/jest": "^29.5.5",
-    "@types/marked": "^5.0.2",
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
+    "@types/marked": "^6.0.0",
+    "@types/node": "^20.8.5",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
     "@vitejs/plugin-react": "^4.1.0",
     "autoprefixer": "^10.4.15",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "^14.0.1",
-    "postcss": "^8.4.30",
+    "plop": "^4.0.0",
+    "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "tailwindcss": "^3.3.3",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-svgr": "^4.0.0",
+    "vite": "^4.4.11",
+    "vite-plugin-svgr": "^4.1.0",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

plop-templates/Component/Component.tsx.hbs

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface {{pascalCase name}}Props {
+// define your prop types here
+}
+
+const {{pascalCase name}}: React.FC<{{pascalCase name}}Props> = ({}) => {
+  return <div>{{pascalCase name}}</div>};
+
+  export default {{pascalCase name}};

plopfile.js

@@ -0,0 +1,24 @@
+module.exports = function (plop) {
+  plop.setGenerator("component", {
+    description: "Create a component dir/file",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is your component name?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/components/{{pascalCase name}}/{{pascalCase name}}.tsx",
+        templateFile: "plop-templates/Component/Component.tsx.hbs",
+      },
+      // {
+      //   type: "add",
+      //   path: "src/components/{{pascalCase name}}/{{pascalCase name}}.test.js",
+      //   templateFile: "plop-templates/Component/Component.test.js.hbs",
+      // },
+    ],
+  });
+};

src/App.tsx

@@ -12,6 +12,9 @@ import { Suspense, lazy, useEffect, useState } from "react";
 import { doc, setDoc } from "firebase/firestore";
 import { db } from "./firebase.js";
 import { ConfigProvider, Spin } from "antd";
+import GameSheet from "./pages/GameSheet/GameSheet";
+import GameList from "./pages/GameList/GameList";
+import { MODE, ModeType } from "./data/definitions";
 // import Welcome from "./pages/Welcome/Welcome";
 // import CharacterCreator from "./pages/CharacterCreator/CharacterCreator";
 // import Sources from "./pages/Sources/Sources";
@@ -26,10 +29,13 @@ const Sources = lazy(() => import("./pages/Sources/Sources"));
 const CharacterSheet = lazy(
   () => import("./pages/CharacterSheet/CharacterSheet")
 );
+const GMPortal = lazy(() => import("./pages/GameList/GameList"));
 
 function App() {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
+  const [mode, setMode] = useState<ModeType>(MODE.PLAYER);
+
   const auth = getAuth();
 
   useEffect(() => {
@@ -84,7 +90,13 @@ function App() {
           <Route
             path="/"
             element={
-              <PageLayout user={user} handleLogin={handleLogin} auth={auth} />
+              <PageLayout
+                user={user}
+                handleLogin={handleLogin}
+                auth={auth}
+                mode={mode}
+                setMode={setMode}
+              />
             }
           >
             <Route
@@ -93,7 +105,11 @@ function App() {
                 loading ? (
                   <Spin />
                 ) : user ? (
-                  <CharacterList user={user} />
+                  mode === MODE.PLAYER ? (
+                    <CharacterList user={user} />
+                  ) : (
+                    <GameList user={user} />
+                  )
                 ) : (
                   <Welcome />
                 )
@@ -105,6 +121,7 @@ function App() {
             />
             <Route path="/create" element={<CharacterCreator />} />
             <Route path="/sources" element={<Sources />} />
+            <Route path="u/:uid/g/:id" element={<GameSheet user={user} />} />
           </Route>
         </Routes>
       </Suspense>

src/components/AttackModal/AmmoSelect/AmmoSelect.tsx

@@ -1,5 +1,11 @@
 import { Select } from "antd";
-import { AmmoSelectProps } from "./definitions";
+import { EquipmentItem } from "../../../data/definitions";
+
+type AmmoSelectProps = {
+  ammo: string[] | undefined;
+  equipment: EquipmentItem[];
+  setAmmo: (ammo: EquipmentItem) => void;
+};
 
 export default function AmmoSelect({
   ammo,

src/components/AttackModal/AttackButtons/AttackButtons.tsx

@@ -1,6 +1,16 @@
 import { Button } from "antd";
-import { AttackButtonsProps } from "./definitions";
 import { useState } from "react";
+import { AttackType, EquipmentItem } from "../../../data/definitions";
+
+type AttackButtonsProps = {
+  weapon: EquipmentItem;
+  damage?: (damage: string) => void;
+  attack: (attack: AttackType) => void;
+  type: AttackType;
+  ammo?: EquipmentItem;
+  isMissile?: boolean;
+  handleCancel: () => void;
+};
 
 export default function AttackButtons({
   weapon,

src/components/AttackModal/AttackModal.tsx

@@ -3,15 +3,26 @@ import { useState } from "react";
 import { DiceRoller } from "@dice-roller/rpg-dice-roller";
 import CloseIcon from "../CloseIcon/CloseIcon";
 import equipmentItems from "../../data/equipmentItems.json";
-import { EquipmentItem } from "../EquipmentStore/definitions";
 import WeaponTypeBoth from "./WeaponTypeBoth/WeaponTypeBoth";
 import AttackButtons from "./AttackButtons/AttackButtons";
 import WeaponTypeMissile from "./WeaponTypeMissile/WeaponTypeMissile";
-import { CharacterData } from "../definitions";
 import { races } from "../../data/races";
 import { classes } from "../../data/classes";
-import { ClassNames, RaceNames } from "../../data/definitions";
-import { AttackModalProps, AttackType } from "./definitions";
+import {
+  AttackType,
+  CharacterData,
+  ClassNames,
+  EquipmentItem,
+  RaceNames,
+} from "../../data/definitions";
+import { ModalProps } from "../../modals/definitions";
+
+interface AttackModalProps extends ModalProps {
+  isAttackModalOpen: boolean;
+  attackBonus: number;
+  weapon?: EquipmentItem;
+  setCharacterData: (character: CharacterData) => void;
+}
 
 const roller = new DiceRoller();
 

src/components/AttackModal/RangeRadioGroup/RangeRadioGroup.tsx

@@ -1,5 +1,10 @@
-import { Radio } from "antd";
-import { RangeRadioGroupProps } from "./definitions";
+import { Radio, RadioChangeEvent } from "antd";
+
+type RangeRadioGroupProps = {
+  missileRangeBonus: number;
+  handleRangeChange: (e: RadioChangeEvent) => void;
+  missileRangeValues: number[];
+};
 
 export default function RangeRadioGroup({
   missileRangeBonus,

src/components/AttackModal/WeaponTypeBoth/WeaponTypeBoth.tsx

@@ -1,8 +1,26 @@
-import { Switch } from "antd";
+import { RadioChangeEvent, Switch } from "antd";
 import RangeRadioGroup from "../RangeRadioGroup/RangeRadioGroup";
-import { WeaponTypeBothProps } from "./definitions";
 import AttackButtons from "../AttackButtons/AttackButtons";
 import AmmoSelect from "../AmmoSelect/AmmoSelect";
+import {
+  AttackType,
+  CharacterData,
+  EquipmentItem,
+} from "../../../data/definitions";
+
+type WeaponTypeBothProps = {
+  handleSwitchChange: (switchChange: boolean) => void;
+  isMissile: boolean;
+  missileRangeBonus: number;
+  handleRangeChange: (e: RadioChangeEvent) => void;
+  attackingWeapon: EquipmentItem;
+  characterData: CharacterData | undefined;
+  damage: (roll: string, ammo?: string) => void;
+  attack: (type: AttackType) => void;
+  ammo: EquipmentItem | undefined;
+  setAmmo: React.Dispatch<React.SetStateAction<EquipmentItem | undefined>>;
+  handleCancel: () => void;
+};
 
 export default function WeaponTypeBoth({
   handleSwitchChange,

src/components/AttackModal/WeaponTypeMissile/WeaponTypeMissile.tsx

@@ -1,7 +1,26 @@
+import { RadioChangeEvent } from "antd";
 import AmmoSelect from "../AmmoSelect/AmmoSelect";
 import AttackButtons from "../AttackButtons/AttackButtons";
 import RangeRadioGroup from "../RangeRadioGroup/RangeRadioGroup";
-import { WeaponTypeMissileProps } from "./definitions";
+import {
+  AttackType,
+  CharacterData,
+  EquipmentItem,
+} from "../../../data/definitions";
+
+type WeaponTypeMissileProps = {
+  handleSwitchChange: (switchChange: boolean) => void;
+  isMissile: boolean;
+  missileRangeBonus: number;
+  handleRangeChange: (e: RadioChangeEvent) => void;
+  attackingWeapon: EquipmentItem;
+  characterData: CharacterData | undefined;
+  damage: (roll: string, ammo?: string) => void;
+  attack: (type: AttackType) => void;
+  ammo: EquipmentItem | undefined;
+  setAmmo: React.Dispatch<React.SetStateAction<EquipmentItem | undefined>>;
+  handleCancel: () => void;
+};
 
 export default function WeaponTypeMissile({
   missileRangeBonus,