From 4fb10dbb3f1fea1e8b5469336d855c9ae0755b03 Mon Sep 17 00:00:00 2001 From: ascpixi <44982772+ascpixi@users.noreply.github.com> Date: Fri, 14 Nov 2025 15:54:45 -0500 Subject: [PATCH] chore: general refactoring --- frontend/src/App.tsx | 472 ++++-------------------- frontend/src/components/FaqButton.tsx | 30 ++ frontend/src/components/FaqQuestion.tsx | 21 ++ frontend/src/components/GameCard.tsx | 50 +++ frontend/src/components/Step.tsx | 83 +++++ frontend/src/components/StoryCard.tsx | 44 +++ frontend/src/components/fonts.ts | 5 + 7 files changed, 312 insertions(+), 393 deletions(-) create mode 100644 frontend/src/components/FaqButton.tsx create mode 100644 frontend/src/components/FaqQuestion.tsx create mode 100644 frontend/src/components/GameCard.tsx create mode 100644 frontend/src/components/Step.tsx create mode 100644 frontend/src/components/StoryCard.tsx create mode 100644 frontend/src/components/fonts.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index daf03c0..eacd62e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,49 +1,9 @@ -const fonts = { - amatic: "'Amatic SC', sans-serif", - amaticBold: "'Amatic SC', sans-serif", - dreamPlanner: "'DREAM PLANNER', Impact, 'Arial Black', sans-serif" -}; - -function FaqButton({ className = "", content = "Check out the parent guide" }: { - className?: string - content?: string -}) { - return ( -
-
-
- -
-

- {content} -

-
-
- ) -} - -function FaqQuestion({ className = "", question = "What is a game jam?" }: { - className?: string - question?: string -}) { - return ( -
-

- {question} -

-
- ) -} +import { fonts } from './components/fonts.js'; +import FaqQuestion from './components/FaqQuestion.js'; +import FaqButton from './components/FaqButton.js'; +import Step from './components/Step.js'; +import StoryCard from './components/StoryCard.js'; +import GameCard from './components/GameCard.js'; function App() { return ( @@ -66,22 +26,18 @@ function App() { -
+
- {/* fishy on the right. His name is frederick. */ } + {/* fishy on the right. His name is frederick. */}
Fish named Frederick
- {/* fishy on the left. His name is gubson */ } + {/* fishy on the left. His name is gubson */}
Fish named Gubson
@@ -91,16 +47,12 @@ function App() {
- {/* Vines overlay below grass */}
- {/* Main content */}
- {/* Left side - CTA */}
- {/* Logo section */}
- {/* RSVP section */}
- {/* Right side - Video section */}
- {/* Text and arrow above video */}

- {/* Steps */} -
+
- {/* Clouds behind astronaut overlay */}
- {/* Seafloor overlay */}
- {/* Astronaut overlay */}
- {/* Cog overlay */}
- {/* Steps content */}
- - {/* Step 1 */} -
-
-

- step 1 -

-

- Sign up for a Campfire near you -

-
- Step 1 -
+ - {/* Step 2 */} -
- Step 2 -
-

- step 2 -

-

- Grab friends (or make new friends!) and form a team of 2-3 -

-
-
+ - {/* Step 3 */} -
-
-

- step 3 -

-

- Learn from workshops, enjoy free food and merch! -

-
- Step 3 -
+ - {/* Step 4 */} -
- Step 4 -
-

- step 4 -

-

- Build your game & publish it online! -

-
-
+
- {/* Map Section */}
- {/* Clouds overlay behind map */}
-
+
- {/* Stories Section */} -
+
-
- -
-

- Counterspell -

-

- Game jam in 50 cities including Toronto, Boston, & Singapore -

-
-
+ -
- -
-

- Scrapyard -

-

- In-person hackathon in 70 cities worldwide -

-
-
+ -
- -
-

- Daydream -

-

- Game jam in 100 cities worldwide -

-
-
+
@@ -542,110 +309,29 @@ function App() {
-
- - Office Click Clack - -
-

- Office Click Clack -

-

- bunnyguy - Daydream dfw -

-
-
+ -
- - Zero Sum - -
-

- Zero Sum -

-

- ARandomPsi - Daydream SV -

-
-
+ -
- - Macuahuitl - -
-

- Macuahuitl -

-

- scoopish - Daydream Global -

-
-
+
@@ -756,7 +442,7 @@ function App() {
- ) + ); } -export default App +export default App; diff --git a/frontend/src/components/FaqButton.tsx b/frontend/src/components/FaqButton.tsx new file mode 100644 index 0000000..0980f17 --- /dev/null +++ b/frontend/src/components/FaqButton.tsx @@ -0,0 +1,30 @@ +import { fonts } from './fonts.js'; + +interface FaqButtonProps { + className?: string; + content?: string; +} + +function FaqButton({ className = "", content = "Check out the parent guide" }: FaqButtonProps) { + return ( +
+
+
+ +
+

+ {content} +

+
+
+ ); +} + +export default FaqButton; diff --git a/frontend/src/components/FaqQuestion.tsx b/frontend/src/components/FaqQuestion.tsx new file mode 100644 index 0000000..5d8f00d --- /dev/null +++ b/frontend/src/components/FaqQuestion.tsx @@ -0,0 +1,21 @@ +import { fonts } from './fonts.js'; + +interface FaqQuestionProps { + className?: string; + question?: string; +} + +function FaqQuestion({ className = "", question = "What is a game jam?" }: FaqQuestionProps) { + return ( +
+

+ {question} +

+
+ ); +} + +export default FaqQuestion; diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx new file mode 100644 index 0000000..16d4e14 --- /dev/null +++ b/frontend/src/components/GameCard.tsx @@ -0,0 +1,50 @@ +import { fonts } from './fonts.js'; + +interface GameCardProps { + imageSrc: string; + imageAlt: string; + title: string; + author: string; + href: string; +} + +function GameCard({ imageSrc, imageAlt, title, author, href }: GameCardProps) { + return ( +
+ + {imageAlt} + +
+

+ {title} +

+

+ {author} +

+
+
+ ); +} + +export default GameCard; diff --git a/frontend/src/components/Step.tsx b/frontend/src/components/Step.tsx new file mode 100644 index 0000000..0186f54 --- /dev/null +++ b/frontend/src/components/Step.tsx @@ -0,0 +1,83 @@ +import { fonts } from './fonts.js'; + +interface StepProps { + stepNumber: number; + title: string; + imageSrc: string; + imageAlt: string; + isReversed?: boolean; +} + +function Step({ stepNumber, title, imageSrc, imageAlt, isReversed = false }: StepProps) { + const content = ( + <> +
+

+ step {stepNumber} +

+

+ {title} +

+
+ {imageAlt} + + ); + + const reversedContent = ( + <> + {imageAlt} +
+

+ step {stepNumber} +

+

+ {title} +

+
+ + ); + + return ( +
+ {isReversed ? reversedContent : content} +
+ ); +} + +export default Step; diff --git a/frontend/src/components/StoryCard.tsx b/frontend/src/components/StoryCard.tsx new file mode 100644 index 0000000..2a7e49e --- /dev/null +++ b/frontend/src/components/StoryCard.tsx @@ -0,0 +1,44 @@ +import { fonts } from './fonts.js'; + +interface StoryCardProps { + imageSrc: string; + imageAlt: string; + title: string; + description: string; +} + +function StoryCard({ imageSrc, imageAlt, title, description }: StoryCardProps) { + return ( +
+ {imageAlt} +
+

+ {title} +

+

+ {description} +

+
+
+ ); +} + +export default StoryCard; diff --git a/frontend/src/components/fonts.ts b/frontend/src/components/fonts.ts new file mode 100644 index 0000000..ae88d49 --- /dev/null +++ b/frontend/src/components/fonts.ts @@ -0,0 +1,5 @@ +export const fonts = { + amatic: "'Amatic SC', sans-serif", + amaticBold: "'Amatic SC', sans-serif", + dreamPlanner: "'DREAM PLANNER', Impact, 'Arial Black', sans-serif" +};