From 55f4cfaeef97f02087fe0f160d9571ad2844c078 Mon Sep 17 00:00:00 2001 From: Will Stensvold Date: Tue, 9 Dec 2025 01:13:11 -0600 Subject: [PATCH] Updated all the components to have relative (rem) dimensions Updated a few of the theme files to have the correct layout. If you wanna go thru and update the rest to match win95 and cyberpunk Updated the theme stuff to apply site wide. gotta update the home page and the rules to be same style --- src/lib/components/chartDisplay.svelte | 25 ++-- src/lib/components/diceRoller.svelte | 92 ++++-------- src/lib/components/themeSelector.svelte | 27 ++-- src/lib/styles/cyberpunk.css | 94 ++++++------ src/lib/styles/nightmare.css | 6 + src/lib/styles/nintendo.css | 9 ++ src/lib/styles/typewriter.css | 6 + src/lib/styles/vaporwave.css | 6 + src/lib/styles/win95.css | 81 ++++++----- src/routes/+layout.svelte | 54 ++----- src/routes/+page.svelte | 185 ++++++++++++------------ src/routes/play/+page.svelte | 71 ++++++--- vite.config.ts | 2 +- 13 files changed, 340 insertions(+), 318 deletions(-) diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte index cbbb926..6f7964f 100644 --- a/src/lib/components/chartDisplay.svelte +++ b/src/lib/components/chartDisplay.svelte @@ -3,7 +3,7 @@
- {#if chart} + {#if chart.x != ''}
X-Axis (Horizontal)
{chart.x[0]} ↔ {chart.x[1]}
@@ -13,36 +13,41 @@
{chart.y[0]} ↔ {chart.y[1]}
{:else} -
Click Generate!
+

Click Generate!

{/if}
diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte index fffc455..f1a753f 100644 --- a/src/lib/components/diceRoller.svelte +++ b/src/lib/components/diceRoller.svelte @@ -1,71 +1,43 @@
- {#if roll} -
🎲 🎲
-
X: {roll.x} | Y: {roll.y}
- {:else} -
Click Roll!
- {/if} + {#if diceRoll.x != 0} +
🎲 🎲
+
X: {diceRoll.x} | Y: {diceRoll.y}
+ {:else} +
Click Roll!
+ {/if}
- .theme-nightmare .dice-display { - background: #000000; - border: 2px solid #8b0000; - } - - .theme-vaporwave .dice-display { - background: rgba(255, 255, 255, 0.15); - border: 2px solid #ff6ad5; - } - - .theme-nintendo .dice-display { - background: #fff; - border: 3px solid #00a3e0; - border-radius: 10px; - color: #484848; - } - - .dice-emoji { - font-size: 48px; - text-align: center; - } - - .dice-result { - font-size: 28px; - font-weight: bold; - margin-top: 10px; - text-align: center; - } - - .empty-state { - font-style: italic; - text-align: center; - padding: 20px; - opacity: 0.7; - } - \ No newline at end of file diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte index 0449331..114c4dc 100644 --- a/src/lib/components/themeSelector.svelte +++ b/src/lib/components/themeSelector.svelte @@ -4,20 +4,29 @@ const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo']; -
- {#each themes as theme} - - {/each} -
+
+ Theme Selector + +
+ {#each themes as theme} + + {/each} +
+
diff --git a/src/lib/styles/cyberpunk.css b/src/lib/styles/cyberpunk.css index c8d856c..d28a9bd 100644 --- a/src/lib/styles/cyberpunk.css +++ b/src/lib/styles/cyberpunk.css @@ -1,48 +1,52 @@ /* Cyberpunk Theme */ -:global(.theme-cyberpunk) { - font-family: 'Courier New', monospace; - background: #0a0e27; - color: #00ffff; -} - -:global(.theme-cyberpunk .window){ - background: rgba(10, 14, 39, 0.95); - border: 2px solid #00ffff; - box-shadow: 0 0 20px #ff00ff; -} - -:global(.theme-cyberpunk .title-bar ){ - background: linear-gradient(90deg, #ff00ff, #00ffff); - color: #000; - padding: 12px; - font-weight: bold; - text-transform: uppercase; -} - -:global(.theme-cyberpunk fieldset ){ - border: 1px solid #ff00ff; -} - -:global(.theme-cyberpunk legend ){ - color: #ff00ff; - text-transform: uppercase; -} - -:global(.theme-cyberpunk button ){ - background: transparent; - border: 2px solid #ff00ff; - color: #ff00ff; - font-family: 'Courier New', monospace; - text-transform: uppercase; - padding: 10px 25px; -} - -:global(.theme-cyberpunk button:hover ){ - background: #ff00ff; - color: #000; -} -:global(.theme-cyberpunk .chart-display) { - background: rgba(0, 255, 255, 0.05); - border: 1px solid #00ffff; +:global{ + body:has(.theme-cyberpunk){ + background: #0a0e27; } + .theme-cyberpunk { + font-family: 'Courier New', monospace; + background: #0a0e27; + color: #00ffff; + .dice-display { + background: rgba(0, 255, 255, 0.05); + border: 1px solid #00ffff; + } + .window{ + background: rgba(10, 14, 39, 0.95); + border: 2px solid #00ffff; + box-shadow: 0 0 20px #ff00ff; + } + .title-bar { + background: linear-gradient(90deg, #ff00ff, #00ffff); + color: #000; + padding: 12px; + font-weight: bold; + text-transform: uppercase; + } + fieldset { + border: 1px solid #ff00ff; + } + legend { + color: #ff00ff; + text-transform: uppercase; + } + + button { + background: transparent; + border: 2px solid #ff00ff; + color: #ff00ff; + font-family: 'Courier New', monospace; + text-transform: uppercase; + padding: 10px 25px; + &:hover { + background: #ff00ff; + color: #000; + } + } + .chart-display { + background: rgba(0, 255, 255, 0.05); + border: 1px solid #00ffff; + } + } +} diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css index 188b533..514fb7e 100644 --- a/src/lib/styles/nightmare.css +++ b/src/lib/styles/nightmare.css @@ -47,4 +47,10 @@ background: #000000; border: 2px solid #8b0000; } +:global{ + .theme-nightmare .dice-display { + background: #000000; + border: 2px solid #8b0000; + } +} diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css index 04317d6..5d42fea 100644 --- a/src/lib/styles/nintendo.css +++ b/src/lib/styles/nintendo.css @@ -61,3 +61,12 @@ border-radius: 10px; color: #484848; } + +:global{ + .theme-nintendo .dice-display { + background: #fff; + border: 3px solid #00a3e0; + border-radius: 10px; + color: #484848; + } +} diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css index 5a46776..b4c7c94 100644 --- a/src/lib/styles/typewriter.css +++ b/src/lib/styles/typewriter.css @@ -34,4 +34,10 @@ background: #fffef7; border: 1px solid #2c2416; } +:global{ + .theme-typewriter .dice-display { + background: #fffef7; + border: 1px solid #2c2416; + } +} diff --git a/src/lib/styles/vaporwave.css b/src/lib/styles/vaporwave.css index b27be9a..38db50d 100644 --- a/src/lib/styles/vaporwave.css +++ b/src/lib/styles/vaporwave.css @@ -43,4 +43,10 @@ background: rgba(255, 255, 255, 0.15); border: 2px solid #ff6ad5; } +:global{ + .theme-vaporwave .dice-display { + background: rgba(255, 255, 255, 0.15); + border: 2px solid #ff6ad5; + } +} diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css index 31f047a..c232f97 100644 --- a/src/lib/styles/win95.css +++ b/src/lib/styles/win95.css @@ -1,39 +1,48 @@ /* Windows 95 Theme */ -:global(.theme-win95 ){ - font-family: 'MS Sans Serif', Arial, sans-serif; - background: #008080; -} - -:global(.theme-win95 .window) { - background: #c0c0c0; - border: 2px solid; - border-color: #dfdfdf #808080 #808080 #dfdfdf; - box-shadow: 2px 2px 0 rgba(0,0,0,0.5); -} - -:global(.theme-win95 .title-bar ){ - background: linear-gradient(to right, #000080, #1084d0); - color: white; - padding: 8px; - font-weight: bold; -} - -:global(.theme-win95 fieldset ){ - border: 2px groove #c0c0c0; -} - -:global(.theme-win95 button ){ - background: #c0c0c0; - border: 2px solid; - border-color: #ffffff #000000 #000000 #ffffff; - font-family: 'MS Sans Serif', Arial, sans-serif; -} - -:global(.theme-win95 button:active) { - border-color: #000000 #ffffff #ffffff #000000; -} -:global(.theme-win95 .chart-display) { - background: white; - border: 2px inset #808080; +:global{ + body:has(.theme-win95){ + background: #008080; } + .theme-win95 { + font-family: 'MS Sans Serif', Arial, sans-serif; + background: #008080; + color: black; + + .dice-display { + background: white; + border: 2px inset #808080; + } + .window{ + background: #c0c0c0; + border: 2px solid; + border-color: #dfdfdf #808080 #808080 #dfdfdf; + box-shadow: 2px 2px 0 rgba(0,0,0,0.5); + } + + .title-bar { + background: linear-gradient(to right, #000080, #1084d0); + color: white; + padding: 8px; + font-weight: bold; + } + + fieldset { + border: 2px groove #c0c0c0; + } + + button { + background: #c0c0c0; + border: 2px solid; + border-color: #ffffff #000000 #000000 #ffffff; + font-family: 'MS Sans Serif', Arial, sans-serif; + &:active { + border-color: #000000 #ffffff #ffffff #000000; + } + } + .chart-display { + background: white; + border: 2px inset #808080; + } + } +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 31f7732..56b80d0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,17 +10,16 @@ -