Test Custom Character Creator

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.14.22",
     "@types/react-dom": "^16.9.14",
     "clsx": "^1.1.1",
+    "dexie": "^3.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",

src/App.tsx

@@ -6,6 +6,7 @@ import { CharacterProgramsStage } from "./pages/CreateCharacterPage/stages/Chara
 
 // Page imports
 import { IndexPage } from "./pages/IndexPage/IndexPage";
+import { DevCreator } from "./pages/DevCreator/DevCreator";
 import { SavedCharactersPage } from "./pages/SavedCharactersPage/SavedCharactersPage";
 
 import "./sass/theme.scss";
@@ -14,6 +15,7 @@ function App() {
   return (
     <div className="App">
       <Routes>
+
         <Route index element={<IndexPage />} />
         <Route path="create" element={<CreateCharacterPage />}>
           <Route index element={<CharacterDetailsStage />} />
@@ -22,6 +24,7 @@ function App() {
           <Route path="review" element={<p>Coming soon!</p>} />
         </Route>
         <Route path="saved" element={<SavedCharactersPage />} />
+        <Route path="supersecretcharactercreator" element={<DevCreator />} />
         <Route path="*" element={<p>Page Not Found!</p>} />
       </Routes>
       <Footer />

src/pages/DevCreator/DevPreview.tsx

@@ -0,0 +1,21 @@
+import { CharacterPreview } from "../SavedCharactersPage/components/CharacterPreview/CharacterPreviews";
+import { DevCreator } from "./DevCreator";
+import { Character } from "../../interfaces/character";
+import { DevProps } from "./DevCreator";
+
+
+type DevPreviewPropTypes = {
+    props: DevProps;
+    animationName?: keyof Character["stateAnimations"];
+}
+
+export function DevPreview({props, animationName = "walk"}: DevPreviewPropTypes) {
+
+    if (props.character.stateAnimations[animationName].length == 0) return (
+        <p>nothing to show</p>
+    );
+
+    return (
+        <CharacterPreview character = {props.character} animationName = {animationName}/>
+    )
+}

src/pages/DevCreator/ProgramSelect.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { SchoolProgram } from "../../interfaces";
+import { Programs, DevProps } from "./DevCreator";
+import { emptyCharacter } from "../../constants";
+
+
+export function ProgramSelect(props: {fieldName: string, props: DevProps, onChange : number}) {
+
+    let programList = [];
+
+    function setValue(event: React.ChangeEvent<HTMLSelectElement>) {
+        // Convert from string to enum
+        let id: number = -1;
+        if (event.target.selectedOptions[0] != undefined)
+            id = Number(event.target.selectedOptions[0].dataset.id);
+
+            let newProgram : SchoolProgram = {
+                id: Programs[id as Programs],
+                name: Programs[id as Programs],
+                backstory: "generated by the development character creator",
+                actionTemplates: emptyCharacter.actions
+            }
+
+        if (props.onChange == 0) 
+            props.props.character.major = newProgram;
+        else
+            props.props.character.minor = newProgram;
+
+    }
+
+    programList.push(
+        <option data-id = "-1">{props.fieldName}</option>
+    )
+
+    for (let i = 0; i < 4; i++) {
+        programList.push(
+            <option data-id={i}>{Programs[i as Programs]}</option>
+        );
+    }
+
+    return (
+        <div className="field">
+            <div className="control">
+                <div className="select">
+                    <select defaultValue={0} onChange = {(e) => setValue(e) }>
+                        {programList}
+                   </select>
+                </div>
+            </div>
+        </div>
+    );
+}

src/utils/db.ts

@@ -0,0 +1,35 @@
+import Dexie, { Table } from "dexie";
+import { Character } from "../interfaces/character";
+import { useState } from "react"
+import { emptyCharacter } from "../constants/";
+
+interface Props {
+    character: Character;
+}
+
+export class DexieDatabase extends Dexie {
+
+    characters!: Table<Character>
+
+    constructor() {
+        super("characterDatabase");
+        this.version(1).stores({
+            characters: "++id, character"
+        });
+    }
+}
+
+export const db = new DexieDatabase();
+
+export function AddCharacterForm(props: Props) {
+    if (!db.isOpen()) db.open();
+    async function addCharacter() {
+        try {
+            const id = await db.characters.add(props.character);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    addCharacter();
+}