From a14610465859c67ba12346fcaf8075b41b8a9b52 Mon Sep 17 00:00:00 2001 From: Will Stensvold Date: Tue, 9 Dec 2025 11:41:29 -0600 Subject: [PATCH] updated some stuff to work on my PC. deleteed the emoji from the rules. moved the titlebar and stuff out from the pages to the layout so it gets applied everywere. will need to work on the title changing but that should be easy. --- src/lib/components/chartDisplay.svelte | 30 +-- src/lib/components/themeSelector.svelte | 36 +-- src/lib/styles/general.css | 9 +- src/routes/+layout.svelte | 73 ++++-- src/routes/+page.svelte | 217 ++++++++---------- src/routes/play/+page.svelte | 140 ++++++------ src/routes/rules/+page.svelte | 292 +++++++++++------------- 7 files changed, 390 insertions(+), 407 deletions(-) diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte index d91f0f5..b800e77 100644 --- a/src/lib/components/chartDisplay.svelte +++ b/src/lib/components/chartDisplay.svelte @@ -1,18 +1,20 @@
- {#if chart && chart.x && chart.y} -
-
X-Axis (Horizontal)
-
{chart.x[0]} ↔ {chart.x[1]}
-
-
-
Y-Axis (Vertical)
-
{chart.y[0]} ↔ {chart.y[1]}
-
- {:else} -
Click Generate!
- {/if} -
\ No newline at end of file + {#if chart.x.length > 1} +
+
X-Axis (Horizontal)
+
{chart.x[0]} ↔ {chart.x[1]}
+
+
+
Y-Axis (Vertical)
+
{chart.y[0]} ↔ {chart.y[1]}
+
+ {:else} +
Click Generate!
+ {/if} + + diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte index 2d3652d..7593a6c 100644 --- a/src/lib/components/themeSelector.svelte +++ b/src/lib/components/themeSelector.svelte @@ -1,25 +1,25 @@
- {#each themeNames as theme} - - {/each} + {#each themeNames as theme} + + {/each}
\ No newline at end of file + .button-row { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + button { + max-width: 33%; + } + } + + diff --git a/src/lib/styles/general.css b/src/lib/styles/general.css index c77b234..b7cd4bd 100644 --- a/src/lib/styles/general.css +++ b/src/lib/styles/general.css @@ -1,7 +1,6 @@ /* Base styles that apply to all themes */ .container { - padding: 20px; - min-height: 100vh; + padding: 2rem; } .window { @@ -17,6 +16,9 @@ display: flex; align-items: center; gap: 15px; + span{ + margin: 0 auto; + } } .home-button { @@ -81,6 +83,5 @@ button { .empty-state { font-style: italic; text-align: center; - padding: 20px; opacity: 0.7; -} \ No newline at end of file +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c27e221..714ce50 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,29 +1,64 @@
- +
+
+
+
+ ←Back + A Sludge & Friends game +
+ +
+
+
- .app-container { - min-height: 100vh; - } - \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 165c2c1..d46f03e 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,142 +1,117 @@ -
-
-
-
- A Sludge & Friends game -
- -
-

On the Spectrum!

-

Well.. are ya?

- -
- - Play - - - Rules - -
+
+

On the Spectrum!

+

Well.. are ya?

-
-
- Theme Selector - -
-
-
-
-
+
+ + 🎮 + Play + + + 📖 + Rules + +
+ +
+
+ Theme Selector + +
+
\ No newline at end of file + .home-content { + padding: 30px 20px; + } + } + diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte index 19bb7f4..dba820e 100644 --- a/src/routes/play/+page.svelte +++ b/src/routes/play/+page.svelte @@ -1,76 +1,84 @@
-
-
- ← Home - On the Spectrum - Party Game -
- -
- +
+
+ Chart Generator + +
+ +
+
-
- Chart Generator - -
- -
-
+
+ Position Roller + +
+ +
+
+
+
+ + -
- Position Roller - -
- -
-
- -
- Theme Selector - -
-
-
-
\ No newline at end of file diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte index de1330d..c3f49cc 100644 --- a/src/routes/rules/+page.svelte +++ b/src/routes/rules/+page.svelte @@ -1,187 +1,149 @@ -
-
-
-
- ← Back - Rules -
- -
-
- Theme Selector - -
+
+
+ Theme Selector + +
-
-

How to Play

+
+

How to Play

-
-

Basic Gameplay

-
    -
  1. Generate: Click "Generate" to create a random 2D spectrum with X and Y axes
    2. -
  2. Play:Have the clue-giver roll 2d10 with one d10 being X and the other d10 being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other players.
    3. -
  3. Repeat: Generate a new spectrum and keep playing!
    4. -
-
+
+

Basic Gameplay

+
    +
  1. + Generate: Click "Generate" to create a random 2D spectrum with X and Y axes +
    2. +
  2. + Play:Have the clue-giver roll 2d10 with one d10 being X and the other d10 + being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a + phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other + players. +
    3. +
  3. Repeat: Generate a new spectrum and keep playing!
    4. +
+
-
-

Understanding the Scale

-

Each axis uses a 1-10 scale:

-
    -
  • 1-2: Strongly aligned with left/bottom option
    • -
  • 3-4: Prefer left/bottom, but not extremely
    • -
  • 5-6: Slightly prefer right/top
    • -
  • 7-8: Prefer right/top, but not extremely
    • -
  • 9-10: Strongly aligned with right/top option
    • -
-
+
+

Understanding the Scale

+

Each axis uses a 1-10 scale:

+
    +
  • 1-2: Strongly aligned with left/bottom option
    • +
  • 3-4: Prefer left/bottom, but not extremely
    • +
  • 5-6: Slightly prefer right/top
    • +
  • 7-8: Prefer right/top, but not extremely
    • +
  • 9-10: Strongly aligned with right/top option
    • +
+
-
-

Scoring (Optional)

-

Want to make it competitive? Try these scoring systems:

-
    -
  • 5 Points: On the Spectrum!
    • -
  • 4 Points: 1 away
    • -
  • 3 Points: 2 away
    • -
  • 2 Points: 3 away
    • -
  • 1 Points: 4 away
    • -
  • 0 Points: 5+ away
    • -
-
+
+

Scoring (Optional)

+

Want to make it competitive? Try these scoring systems:

+
    +
  • 5 Points: On the Spectrum!
    • +
  • 4 Points: 1 away
    • +
  • 3 Points: 2 away
    • +
  • 2 Points: 3 away
    • +
  • 1 Points: 4 away
    • +
  • 0 Points: 5+ away
    • +
+
-
-

About Themes

-

Choose from six visual themes to customize your experience:

-
    -
  • Windows 95: Nostalgic retro computing vibes
    • -
  • Cyberpunk: Neon-soaked futuristic aesthetic
    • -
  • Typewriter: Classic vintage paper look
    • -
  • Nightmare: Dark and spooky atmosphere
    • -
  • Vaporwave: Dreamy 80s-90s nostalgia
    • -
  • Nintendo: Bold and playful gaming style
    • -
-

Themes are purely cosmetic—pick what speaks to your vibe!

-
+
+

About Themes

+

Choose from six visual themes to customize your experience:

+
    +
  • Windows 95: Nostalgic retro computing vibes
    • +
  • Cyberpunk: Neon-soaked futuristic aesthetic
    • +
  • Typewriter: Classic vintage paper look
    • +
  • Nightmare: Dark and spooky atmosphere
    • +
  • Vaporwave: Dreamy 80s-90s nostalgia
    • +
  • Nintendo: Bold and playful gaming style
    • +
+

Themes are purely cosmetic—pick what speaks to your vibe!

+
-
-

FAQ

-

Can I play solo?
- While designed for groups, you can use it for self-reflection or to prep for game night!

- -

How many spectrums are there?
- Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.

- -

What if I'm perfectly neutral?
- Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!

- -

Can we make our own rules?
- Absolutely! These are guidelines. House rules are encouraged!

-
-
-
-
-
+
+

FAQ

+

+ Can I play solo?
+ While designed for groups, you can use it for self-reflection or to prep for game night! +

+ +

+ How many spectrums are there?
+ Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums. +

+ +

+ What if I'm perfectly neutral?
+ Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting! +

+ +

+ Can we make our own rules?
+ Absolutely! These are guidelines. House rules are encouraged! +

+
+
\ No newline at end of file + h2 { + font-size: 1.5rem; + } + } +