From c821b58f943774b4f8128571df6561ec9be4dddd Mon Sep 17 00:00:00 2001 From: Theodore Weicker Date: Wed, 4 Mar 2026 11:41:50 -0800 Subject: [PATCH 1/2] feat: added links / routing to the three states of matter games and added basic pages for the three games --- src/app/cookingGame/page.tsx | 11 +++++++++++ src/app/pipesGame/page.tsx | 11 +++++++++++ src/app/statesOfMatterGame/page.tsx | 21 +++++++++++++++++++-- src/app/wireGame/page.tsx | 11 +++++++++++ 4 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 src/app/cookingGame/page.tsx create mode 100644 src/app/pipesGame/page.tsx create mode 100644 src/app/wireGame/page.tsx diff --git a/src/app/cookingGame/page.tsx b/src/app/cookingGame/page.tsx new file mode 100644 index 0000000..969e058 --- /dev/null +++ b/src/app/cookingGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function CookingGamePage() { + return ( +
+ + +
+ ); +} diff --git a/src/app/pipesGame/page.tsx b/src/app/pipesGame/page.tsx new file mode 100644 index 0000000..4ba267e --- /dev/null +++ b/src/app/pipesGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function PipesGamePage() { + return ( +
+ + +
+ ); +} diff --git a/src/app/statesOfMatterGame/page.tsx b/src/app/statesOfMatterGame/page.tsx index 2285bd9..6a49dde 100644 --- a/src/app/statesOfMatterGame/page.tsx +++ b/src/app/statesOfMatterGame/page.tsx @@ -1,11 +1,28 @@ import Navbar from "@/components/Navbar"; -import UnityIFrame from "@/components/UnityIFrame"; +import Link from "next/link"; export default function StatesOfMatterPage() { return (
- + + {/* TODO: Implement the Figma Design here */} +
+

Choose a Game

+ + {/* Placeholder links to verify your routing works */} +
+ + Wire Game + + + Cooking Game + + + Pipes Game + +
+
); } diff --git a/src/app/wireGame/page.tsx b/src/app/wireGame/page.tsx new file mode 100644 index 0000000..6ee0b61 --- /dev/null +++ b/src/app/wireGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function WireGamePage() { + return ( +
+ + +
+ ); +} From 3edd44a767d21418904cc6afcb6bda98b669ee35 Mon Sep 17 00:00:00 2001 From: Theodore Weicker Date: Tue, 10 Mar 2026 11:36:04 -0700 Subject: [PATCH 2/2] feat: fixed the UI for the main selection page and created a SOM game card component --- public/Icons/heat-icon.svg | 36 ++++++++++ public/Icons/pipe-icon.svg | 39 +++++++++++ public/Icons/wire-icon.svg | 35 ++++++++++ src/app/statesOfMatterGame/page.tsx | 62 ++++++++++++----- src/components/StatesOfMatterGameCard.tsx | 84 +++++++++++++++++++++++ 5 files changed, 237 insertions(+), 19 deletions(-) create mode 100644 public/Icons/heat-icon.svg create mode 100644 public/Icons/pipe-icon.svg create mode 100644 public/Icons/wire-icon.svg create mode 100644 src/components/StatesOfMatterGameCard.tsx diff --git a/public/Icons/heat-icon.svg b/public/Icons/heat-icon.svg new file mode 100644 index 0000000..fe4cf02 --- /dev/null +++ b/public/Icons/heat-icon.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Icons/pipe-icon.svg b/public/Icons/pipe-icon.svg new file mode 100644 index 0000000..8fd203f --- /dev/null +++ b/public/Icons/pipe-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Icons/wire-icon.svg b/public/Icons/wire-icon.svg new file mode 100644 index 0000000..5bdb96a --- /dev/null +++ b/public/Icons/wire-icon.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/statesOfMatterGame/page.tsx b/src/app/statesOfMatterGame/page.tsx index 6a49dde..736a5b4 100644 --- a/src/app/statesOfMatterGame/page.tsx +++ b/src/app/statesOfMatterGame/page.tsx @@ -1,28 +1,52 @@ import Navbar from "@/components/Navbar"; -import Link from "next/link"; +import StatesOfMatterGameCard from "@/components/StatesOfMatterGameCard"; +import { Box, Flex, Heading, Text, SimpleGrid } from "@chakra-ui/react"; export default function StatesOfMatterPage() { + const games = [ + { + title: "Wire Spark", + description: "Master the circuits and light up the city!", + href: "/wireGame", + bgGradient: "linear(to-br, blue.400, blue.600)", + iconSrc: "/icons/wire-icon.svg", + }, + { + title: "Heating Station", + description: "Cook up some science in the heat lab!", + href: "/cookingGame", + bgGradient: "linear(to-br, orange.400, red.500)", + iconSrc: "/icons/heat-icon.svg", + }, + { + title: "Pipe Flow", + description: "Connect the flow and fix the leaks!", + href: "/pipesGame", + bgGradient: "linear(to-br, teal.400, teal.500)", + iconSrc: "/icons/pipe-icon.svg", + }, + ]; + return ( -
+ - {/* TODO: Implement the Figma Design here */} -
-

Choose a Game

+ + {/* Main Title: Bumped to 5xl for maximum impact */} + + Choose Your Experiment + + + + Ready to become a scientist today? + - {/* Placeholder links to verify your routing works */} -
- - Wire Game - - - Cooking Game - - - Pipes Game - -
-
-
+ + {games.map((game, index) => ( + + ))} + + + ); } diff --git a/src/components/StatesOfMatterGameCard.tsx b/src/components/StatesOfMatterGameCard.tsx new file mode 100644 index 0000000..75d87fb --- /dev/null +++ b/src/components/StatesOfMatterGameCard.tsx @@ -0,0 +1,84 @@ +import { Box, Heading, Text, Button } from "@chakra-ui/react"; +import Link from "next/link"; +import Image from "next/image"; + +interface StatesOfMatterGameCardProps { + title: string; + description: string; + href: string; + bgGradient: string; + iconSrc: string; +} + +export default function StatesOfMatterGameCard({ + title, + description, + href, + bgGradient, + iconSrc, +}: StatesOfMatterGameCardProps) { + return ( + + {/* TOP HALF: Adaptive Graphic Area */} + + + {`${title} + + + + {/* BOTTOM HALF: Large Titles and Playful Text */} + + + {title} + + + {description} + + + + + + + + ); +}