diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..eb2acde --- /dev/null +++ b/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 ( + <> +
+ +
+ +
+ + + +
+ +
+ + + + + + + +
+ + ) +} diff --git a/src/app/dev-tools/page.tsx b/src/app/dev-tools/page.tsx new file mode 100644 index 0000000..9f7fa2b --- /dev/null +++ b/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 ( +
+
+ +
+
+ +
+
+ ) +} + +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([]); // get from the database + const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card"); + return ( + + + Type + + + Theme + + + + ) +} + + +function Editor(){ + return ( + + yes + + ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 1bf1bb8..d8f1e26 100644 --- a/src/app/page.tsx +++ b/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", }} > + + + + 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 +); diff --git a/src/styles/about.module.css b/src/styles/about.module.css new file mode 100644 index 0000000..73ae438 --- /dev/null +++ b/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; +} + + diff --git a/src/styles/dev-tools.module.css b/src/styles/dev-tools.module.css new file mode 100644 index 0000000..f632a18 --- /dev/null +++ b/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%; +} diff --git a/src/styles/home.module.css b/src/styles/home.module.css new file mode 100644 index 0000000..40118e7 --- /dev/null +++ b/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 +}