added the dev tools menu for whatever tools needed in the future that require a databaseOC.

src/app/about/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { paths } from "@/paths";
+import styles from "@/styles/home.module.css"
+import { Box, Card, Stack, ListItemButton, ListItemText, Typography, List } from "@mui/material"
+import { useRouter } from "next/navigation";
+
+const navItems = [
+  { label: "Products", path: paths.products.home },
+  { label: "Games", path: paths.games.home },
+  { label: "About", path: "/about" },
+  { label: "Contact", path: "/contact" },
+];
+
+export default function(){
+  const router = useRouter();
+  console.log("Styles again:", styles)
+  return (
+    <>
+      <div className={styles.home}>
+
+        <div className={styles.video}>
+          <video loop autoPlay muted playsInline >
+            <source src="/hero-background.mp4" />
+          </video>
+        </div>
+
+
+
+        <div className={styles.hero} >
+
+        </div>
+
+
+
+
+
+  
+
+      </div>
+    </>
+  )
+}

src/app/dev-tools/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React from "react";
+import styles from "@/styles/dev-tools.module.css"
+import { Container, Select, Stack } from "@mui/material"
+export default function Page(){
+
+  return (
+    <div className={styles.maincontainer}>
+      <div className={styles.leftmenucontainer}>
+        <LeftMenu />
+      </div>
+      <div className={styles.editorcontainer}>
+        <Editor />
+      </div>
+    </div>
+  )
+}
+
+function DynamicCard() {
+  // to add a new kind of data type "map", "string", "bool", etc. they add a prop for it.
+  return (
+    <>
+    </>
+  )
+}
+
+
+interface Theme{
+  value: string;
+  label: string;
+}
+function LeftMenu(){
+  const unitTypes: string[] = ["minion", "enemy", "hero", "ally"];
+  const buildingTypes: string[] = ["enemy", "minion", "terrain", "support"];
+  const [themes, setThemes] = React.useState<Theme[]>([]); // get from the database
+  const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
+  return (
+    <Container className={styles.leftmenu}>
+      <Stack>
+        Type
+        <Select>
+          <option value="">
+            All types
+          </option>
+          {menuMode === "card" ? 
+            buildingTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>)) : 
+            unitTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>))
+          }
+        </Select>
+
+        Theme
+        <Select>
+        </Select>
+      </Stack>
+    </Container>
+  )
+}
+
+
+function Editor(){
+  return (
+    <Container className={styles.editor} maxWidth={false} disableGutters> 
+      yes
+    </Container>
+  )
+}

src/app/page.tsx

@@ -13,12 +13,13 @@ import {
   Typography,
 } from "@mui/material";
 import { paths } from "@/paths";
+import Typewriter from "@/components/Typewriter/Typewriter";
 
 const navItems = [
   { label: "Products", path: paths.products.home },
   { label: "Games", path: paths.games.home },
-  { label: "About", path: "/about" },
-  { label: "Contact", path: "/contact" },
+  { label: "About", path: paths.about.home },
+  { label: "Dev Tools", path: paths.dev.home },
 ];
 
 export default function Home() {
@@ -32,6 +33,7 @@ export default function Home() {
         overflow: "hidden",
       }}
     >
+
       <Box
         component="video"
         autoPlay
@@ -48,6 +50,7 @@ export default function Home() {
           zIndex: 0,
         }}
       />
+
       <Box
         sx={{
           position: "fixed",
@@ -58,6 +61,7 @@ export default function Home() {
         }}
       />
 
+
       <Container
         maxWidth="lg"
         sx={{
@@ -70,6 +74,7 @@ export default function Home() {
           py: { xs: 3, md: 6 },
         }}
       >
+
         <Card
           elevation={10}
           sx={{

src/paths.ts

@@ -8,9 +8,10 @@ export const paths = {
     vor: "/games/visions-of-reality",
     tixtax: "/games/tix-tax"
   },
-  auth: {
-    signIn: '/auth/sign-in',
-    resetPassword: '/auth/reset-password',
-    setPassword: '/auth/set-password',
+  about: {
+    home: "/about"
   },
+  dev: {
+    home: "/dev-tools"
+  }
 } as const;

src/sql/cards.sql

@@ -0,0 +1,73 @@
+\set title cards
+DROP TABLE IF EXISTS cards;
+DROP SEQUENCE IF EXISTS cards_record_num_sequence;
+
+CREATE SEQUENCE cards_record_num_sequence;
+CREATE SEQUENCE cards_card_id_sequence;
+
+CREATE TABLE cards (
+  record_num        INTEGER PRIMARY KEY DEFAULT nextval('cards_record_num_sequence'),
+  card_id           INTEGER      NOT NULL DEFAULT nextval('cards_card_id_sequence'),
+  data_id           VARCHAR(100) NOT NULL,
+  lore_name         VARCHAR(20),
+  lore_description  VARCHAR(255),
+  placement_flags   SMALLINT, -- 2^0 => empty cell, 2^1 => near track, 2^2 => near building, 2^3 => on track
+  hstore            HSTORE, -- Store any kind of card specific data?? resources, minions, enemies generated, etc...
+  created_timestamp TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
+);
+
+
+
+DROP TABLE IF EXISTS units;
+DROP SEQUENCE IF EXISTS units_record_num_sequence;
+DROP SEQUENCE IF EXISTS units_unit_id_sequence;
+
+CREATE SEQUENCE units_record_num_sequence;
+CREATE SEQUENCE units_unit_id_sequence;
+
+CREATE TABLE units (
+  record_num       INTEGER PRIMARY KEY   DEFAULT nextval('units_record_num_sequence'),
+  unit_id          INTEGER      NOT NULL DEFAULT nextval('units_unit_id_sequence'),
+  data_id          VARCHAR(100) NOT NULL,
+  lore_name        VARCHAR(20),
+  lore_description VARCHAR(255),
+  attack_damage    REAL,
+  attack_speed     REAL,
+  crit_chance      REAL,
+  crit_damage      REAL,
+  max_health       REAL,
+  movement_speed   REAL, --- Should also be responsible for dodge chance.
+  armor            REAL,
+  armor_shred      REAL,
+  created_timestamp TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
+);
+
+DROP TABLE IF EXISTS resources;
+DROP SEQUENCE IF EXISTS resources_record_num_sequence;
+DROP SEQUENCE IF EXISTS resources_resource_id_sequence;
+
+CREATE SEQUENCE resources_record_num_sequence;
+CREATE SEQUENCE resources_resource_id_sequence;
+
+CREATE TABLE resources (
+  record_num       INTEGER PRIMARY KEY DEFAULT nextval('resources_record_num_sequence'),
+  resource_id      INTEGER NOT NULL    DEFAULT nextval('resources_resource_id_sequence'),
+  lore_name        VARCHAR(30),
+  lore_description VARCHAR(255),
+  created_timestamp TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
+);
+
+
+DROP TABLE IF EXISTS themes;
+DROP SEQUENCE IF EXISTS themes_record_num_sequence;
+DROP SEQUENCE IF EXISTS themes_theme_id_sequence;
+
+CREATE SEQUENCE themes_record_num_sequence;
+CREATE SEQUENCE themes_theme_id_sequence;
+
+CREATE TABLE themes (
+  record_num        INTEGER PRIMARY KEY DEFAULT nextval('themes_record_num_sequence'),
+  theme_id          INTEGER             DEFAULT nextval('themes_theme_id_sequence'),
+  name              VARCHAR(100),
+  created_timestamp TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
+);

src/styles/about.module.css

@@ -0,0 +1,33 @@
+.wrapper {
+  border-radius: 1em;
+  width: 25em;
+  display: grid;
+  
+  place-items: end;
+}
+
+.text_container {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  z-index: 1;
+
+  height: max-content;
+  width: 100%;
+  padding: 2em;
+  background: rgba(8, 5, 30, 0.75);
+  color: white;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 1em;
+
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+
+  z-index: -1;
+}
+
+

src/styles/dev-tools.module.css

@@ -0,0 +1,33 @@
+.maincontainer {
+  border-radius: 1em;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 20% 1fr;
+  grid-template-areas: "stack";
+}
+
+.leftmenucontainer {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+  width: 100%;
+}
+
+.leftmenu {
+  background-color: #235b79;
+  height: 100%;
+  width: 100%;
+}
+
+.editor {
+  background-color: #1c3464;
+  height: 100%;
+  width: 100%;
+}
+
+.editorcontainer {
+  grid-row: 1 / 4;
+  grid-column: 2 / 3;
+  height: 100%;
+  width: 100%;
+}

src/styles/home.module.css

@@ -0,0 +1,24 @@
+
+.home {
+  display: grid;
+  width: 100vw;
+  height: 100vh;
+  grid-template-areas: "stack";
+  
+}
+
+.hero {
+  grid-area: stack;
+  z-index: 1;
+  color: white;
+  width: min(30em, 100%);
+}
+
+.video {
+  grid-area: stack;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0.5
+}