From 4282c80a34eff2dc2278c5833277c7db579ab292 Mon Sep 17 00:00:00 2001 From: Will Stensvold Date: Mon, 15 Dec 2025 22:49:02 -0600 Subject: [PATCH] Adding themes to the selector, there might be a way to do this without duplicating buttons but i couldnt figure out the cascade Also added a favicon this should be able to be themed i haven't tried removed chartDisplay and diceRoller as they are not used anymore renamed generator to gameboard updated the logic in the gameboard to use .empty instead of the numbers it is easier to read --- src/lib/assets/favicon.svg | 48 +++++++++- src/lib/components/chartDisplay.svelte | 35 -------- src/lib/components/diceRoller.svelte | 90 ------------------- .../{generator.svelte => gameboard.svelte} | 48 ++++++---- src/lib/components/themeSelector.svelte | 33 +++++++ src/lib/styles/classroom.css | 2 +- src/routes/+layout.svelte | 10 ++- src/routes/+page.svelte | 1 + src/routes/play/+page.svelte | 22 +++-- 9 files changed, 136 insertions(+), 153 deletions(-) delete mode 100644 src/lib/components/chartDisplay.svelte delete mode 100644 src/lib/components/diceRoller.svelte rename src/lib/components/{generator.svelte => gameboard.svelte} (85%) diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg index cc5dc66..d4fa1dc 100644 --- a/src/lib/assets/favicon.svg +++ b/src/lib/assets/favicon.svg @@ -1 +1,47 @@ -svelte-logo \ No newline at end of file + + + + + + + + + + x + y + + + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte deleted file mode 100644 index f51d1c9..0000000 --- a/src/lib/components/chartDisplay.svelte +++ /dev/null @@ -1,35 +0,0 @@ - - -
- {#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/diceRoller.svelte b/src/lib/components/diceRoller.svelte deleted file mode 100644 index d23d815..0000000 --- a/src/lib/components/diceRoller.svelte +++ /dev/null @@ -1,90 +0,0 @@ - - -
-
X: {roll.x} | Y: {roll.y}
- -
- - - {#each {length: 11} as _, i} - - - {/each} - - - - - - - - - - - {#each {length: 11} as _, i} - {i-5} - {i-5} - {/each} - - - - - - - - -
-
- - \ No newline at end of file diff --git a/src/lib/components/generator.svelte b/src/lib/components/gameboard.svelte similarity index 85% rename from src/lib/components/generator.svelte rename to src/lib/components/gameboard.svelte index 5bf099e..39b1a88 100644 --- a/src/lib/components/generator.svelte +++ b/src/lib/components/gameboard.svelte @@ -1,22 +1,23 @@
-
- {#if chart.x.length > 1} +
+ {#if !chart.empty} {chart.y[1]} {:else} (Top Value) {/if}
↕
-
- {#if chart.x.length > 1} +
+ {#if !chart.empty} {chart.y[0]} {:else} (Bottom Value) @@ -54,8 +55,24 @@ - - + + {#each { length: 10 } as _, i} @@ -78,7 +95,7 @@ {/each} - {#if roll.x !== 0 && roll.y !== 0} + {#if !roll.empty}
-
- {#if chart.x.length > 1} +
+ {#if !chart.empty} {chart.x[0]} {:else} (Left Value) {/if}
↔
-
- {#if chart.x.length > 1} +
+ {#if !chart.empty} {chart.x[1]} {:else} (Right Value) @@ -127,8 +144,8 @@
-
- {#if roll.x === 0 && roll.y === 0} +
+ {#if roll.empty} (X, Y) {:else} ({roll.x}, {roll.y}) @@ -215,7 +232,7 @@ .chart-wrapper { display: flex; justify-content: center; - flex: .9; + flex: 0.9; } .chart-svg { @@ -273,4 +290,5 @@ font-size: 20px; } } - \ No newline at end of file + + diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte index 9dda69e..b2c55e4 100644 --- a/src/lib/components/themeSelector.svelte +++ b/src/lib/components/themeSelector.svelte @@ -25,6 +25,39 @@ width: 45%; } } + + .theme-chalkboard { + background: rgba(245, 245, 220, 0.15); + border-color: #f5f5dc; + color: #f5f5dc; + font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; + text-transform: uppercase; + &:hover { + background: rgba(245, 245, 220, 0.25); + box-shadow: 0 0 10px rgba(245, 245, 220, 0.3); + } + } + .theme-classroom { + background: #f44336; + border-color: #d32f2f; + border-radius: 12px; + color: #fff; + font-family: 'Comic Sans MS', cursive; + text-transform: uppercase; + font-weight: bold; + box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); + + &:hover { + background: #e53935; + transform: translate(-2px, -2px); + box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.2); + } + + &:active { + transform: translate(2px, 2px); + box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); + } + } .theme-cyberpunk { background: transparent; border: 2px solid #ff00ff; diff --git a/src/lib/styles/classroom.css b/src/lib/styles/classroom.css index 5b6f8ba..09c447f 100644 --- a/src/lib/styles/classroom.css +++ b/src/lib/styles/classroom.css @@ -131,4 +131,4 @@ fill: #333; font-weight: bold; } -} \ No newline at end of file +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dfcb5dd..5304fc2 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,6 @@ + + + + +
@@ -67,7 +73,6 @@ } @media screen and (min-width: 450px) { - } :global { @@ -137,4 +142,5 @@ opacity: 0.7; } } - \ No newline at end of file + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8f9bd66..2526f76 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,6 +11,7 @@ On the Spectrum +

On the Spectrum!

Well.. are ya?

diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte index 199b080..a3adb79 100644 --- a/src/routes/play/+page.svelte +++ b/src/routes/play/+page.svelte @@ -1,10 +1,10 @@ @@ -37,10 +40,10 @@
On The Spectrum - +
- +
@@ -80,4 +83,5 @@ opacity: 0.5; cursor: not-allowed; } - \ No newline at end of file + +