From 9d06bd7610c7197bbe360d2040738194173ccb22 Mon Sep 17 00:00:00 2001 From: Giac Date: Mon, 8 Dec 2025 20:45:05 -0600 Subject: [PATCH] Added routs/Lib Components and assets. --- src/lib/components/chartDisplay.svelte | 79 +++++ src/lib/components/diceRoller.svelte | 71 ++++ src/lib/components/themeSelector.svelte | 26 ++ src/lib/components/toggle.svelte | 58 ++++ src/lib/data/xAxes.js | 15 + src/lib/data/yAxes.js | 15 + src/lib/styles/themes.css | 298 ++++++++++++++++ src/routes/+layout.svelte | 1 + src/routes/+page.svelte | 112 +++++- src/routes/play/+page.svelte | 438 ++++++++++++++++++++---- src/routes/rules/+page.svelte | 145 ++++++++ svelte.config.js | 2 +- tsconfig.json | 3 +- 13 files changed, 1193 insertions(+), 70 deletions(-) create mode 100644 src/lib/components/chartDisplay.svelte create mode 100644 src/lib/components/diceRoller.svelte create mode 100644 src/lib/components/themeSelector.svelte create mode 100644 src/lib/components/toggle.svelte create mode 100644 src/lib/data/xAxes.js create mode 100644 src/lib/data/yAxes.js create mode 100644 src/lib/styles/themes.css create mode 100644 src/routes/rules/+page.svelte diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte new file mode 100644 index 0000000..f28e420 --- /dev/null +++ b/src/lib/components/chartDisplay.svelte @@ -0,0 +1,79 @@ + + +
+ {#if chart} +
+
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 diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte new file mode 100644 index 0000000..fffc455 --- /dev/null +++ b/src/lib/components/diceRoller.svelte @@ -0,0 +1,71 @@ + + +
+ {#if roll} +
🎲 🎲
+
X: {roll.x} | Y: {roll.y}
+ {:else} +
Click Roll!
+ {/if} +
+ + \ No newline at end of file diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte new file mode 100644 index 0000000..4b56b9c --- /dev/null +++ b/src/lib/components/themeSelector.svelte @@ -0,0 +1,26 @@ + + +
+ {#each themes as theme} + + {/each} +
+ + \ No newline at end of file diff --git a/src/lib/components/toggle.svelte b/src/lib/components/toggle.svelte new file mode 100644 index 0000000..6f170c1 --- /dev/null +++ b/src/lib/components/toggle.svelte @@ -0,0 +1,58 @@ + + +
+ Family Friendly +
checked = !checked} + on:keypress={(e) => e.key === 'Enter' && (checked = !checked)} + role="switch" + aria-checked={checked} + tabindex="0" + > +
+
+ Adult +
+ + \ No newline at end of file diff --git a/src/lib/data/xAxes.js b/src/lib/data/xAxes.js new file mode 100644 index 0000000..d2f72f8 --- /dev/null +++ b/src/lib/data/xAxes.js @@ -0,0 +1,15 @@ +export const xAxes = [ + { values: ["Traditional", "Experimental"], adult: false }, + { values: ["Budget", "Luxury"], adult: false }, + { values: ["Old", "New"], adult: false }, + { values: ["Simple", "Complex"], adult: false }, + { values: ["Minimal", "Maximal"], adult: false }, + + // Adult axes + { values: ["Beer", "Cocktails"], adult: true }, + { values: ["Swipe-happy", "Selective"], adult: true }, + { values: ["Casual", "Serious"], adult: true }, + + // Add more X axes here... + // Format: { values: ["Left extreme", "Right extreme"], adult: true/false } +]; \ No newline at end of file diff --git a/src/lib/data/yAxes.js b/src/lib/data/yAxes.js new file mode 100644 index 0000000..c1ee875 --- /dev/null +++ b/src/lib/data/yAxes.js @@ -0,0 +1,15 @@ +export const yAxes = [ + { values: ["Thin", "Thick"], adult: false }, + { values: ["Planned", "Spontaneous"], adult: false }, + { values: ["Calm", "Upbeat"], adult: false }, + { values: ["Indoor", "Outdoor"], adult: false }, + { values: ["Solo", "Group"], adult: false }, + + // Adult axes + { values: ["Occasional", "Frequent"], adult: true }, + { values: ["Hookups", "Relationships"], adult: true }, + { values: ["Private", "Public"], adult: true }, + + // Add more Y axes here... + // Format: { values: ["Bottom extreme", "Top extreme"], adult: true/false } +]; \ No newline at end of file diff --git a/src/lib/styles/themes.css b/src/lib/styles/themes.css new file mode 100644 index 0000000..0be428d --- /dev/null +++ b/src/lib/styles/themes.css @@ -0,0 +1,298 @@ +:global(body) { + margin: 0; + padding: 0; +} + +.container { + padding: 20px; + min-height: 100vh; +} + +.window { + max-width: 800px; + margin: 0 auto; +} + +.window-body { + padding: 20px; +} + +fieldset { + padding: 15px; + margin: 15px 0; +} + +legend { + font-weight: bold; + padding: 0 5px; +} + +.button-row { + display: flex; + gap: 10px; + justify-content: center; + margin-top: 10px; +} + +button { + padding: 8px 24px; + cursor: pointer; + font-weight: bold; +} + +/* Windows 95 Theme */ +.theme-win95 { + font-family: 'MS Sans Serif', Arial, sans-serif; + background: #008080; +} + +.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); +} + +.theme-win95 .title-bar { + background: linear-gradient(to right, #000080, #1084d0); + color: white; + padding: 8px; + font-weight: bold; +} + +.theme-win95 fieldset { + border: 2px groove #c0c0c0; +} + +.theme-win95 button { + background: #c0c0c0; + border: 2px solid; + border-color: #ffffff #000000 #000000 #ffffff; + font-family: 'MS Sans Serif', Arial, sans-serif; +} + +.theme-win95 button:active { + border-color: #000000 #ffffff #ffffff #000000; +} + +/* Cyberpunk Theme */ +.theme-cyberpunk { + font-family: 'Courier New', monospace; + background: #0a0e27; + color: #00ffff; +} + +.theme-cyberpunk .window { + background: rgba(10, 14, 39, 0.95); + border: 2px solid #00ffff; + box-shadow: 0 0 20px #ff00ff; +} + +.theme-cyberpunk .title-bar { + background: linear-gradient(90deg, #ff00ff, #00ffff); + color: #000; + padding: 12px; + font-weight: bold; + text-transform: uppercase; +} + +.theme-cyberpunk fieldset { + border: 1px solid #ff00ff; +} + +.theme-cyberpunk legend { + color: #ff00ff; + text-transform: uppercase; +} + +.theme-cyberpunk button { + background: transparent; + border: 2px solid #ff00ff; + color: #ff00ff; + font-family: 'Courier New', monospace; + text-transform: uppercase; + padding: 10px 25px; +} + +.theme-cyberpunk button:hover { + background: #ff00ff; + color: #000; +} + +/* Typewriter Theme */ +.theme-typewriter { + font-family: 'Courier', monospace; + background: #f4e8d0; + color: #2c2416; +} + +.theme-typewriter .window { + background: #fffef7; + border: 3px double #2c2416; + box-shadow: 5px 5px 15px rgba(0,0,0,0.3); +} + +.theme-typewriter .title-bar { + background: #2c2416; + color: #f4e8d0; + padding: 12px; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; +} + +.theme-typewriter fieldset { + border: 2px solid #2c2416; +} + +.theme-typewriter button { + background: #2c2416; + border: 2px solid #2c2416; + color: #f4e8d0; + font-family: 'Courier', monospace; +} + +/* Nightmare Theme */ +.theme-nightmare { + font-family: 'Georgia', serif; + background: #000000; + color: #8b0000; +} + +.theme-nightmare .window { + background: #0d0000; + border: 3px solid #8b0000; + box-shadow: 0 0 30px #ff0000; +} + +.theme-nightmare .title-bar { + background: linear-gradient(180deg, #3a0000, #000000); + color: #ff0000; + padding: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 5px; + text-shadow: 0 0 10px #ff0000; +} + +.theme-nightmare fieldset { + border: 2px solid #8b0000; +} + +.theme-nightmare legend { + color: #ff0000; + text-shadow: 0 0 5px #ff0000; +} + +.theme-nightmare button { + background: #3a0000; + border: 2px solid #8b0000; + color: #ff0000; + font-family: 'Georgia', serif; + text-transform: uppercase; + padding: 10px 25px; +} + +.theme-nightmare button:hover { + background: #8b0000; +} + +/* Vaporwave Theme */ +.theme-vaporwave { + font-family: 'Arial', sans-serif; + background: linear-gradient(180deg, #ff6ad5 0%, #c774e8 50%, #ad8cff 100%); + color: #fff; +} + +.theme-vaporwave .window { + background: rgba(255, 106, 213, 0.3); + backdrop-filter: blur(10px); + border: 3px solid #00f0ff; + box-shadow: 0 8px 32px rgba(0, 240, 255, 0.4); +} + +.theme-vaporwave .title-bar { + background: linear-gradient(90deg, #ff6ad5, #00f0ff); + color: #fff; + padding: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 4px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +.theme-vaporwave fieldset { + border: 2px solid #00f0ff; + background: rgba(255, 255, 255, 0.1); +} + +.theme-vaporwave legend { + color: #00f0ff; + text-transform: uppercase; +} + +.theme-vaporwave button { + background: linear-gradient(135deg, #ff6ad5, #c774e8); + border: 2px solid #00f0ff; + color: #fff; + text-transform: uppercase; + padding: 12px 30px; +} + +/* Nintendo Theme */ +.theme-nintendo { + font-family: 'Arial', sans-serif; + background: #e60012; + color: #fff; +} + +.theme-nintendo .window { + background: #fff; + border: 8px solid #e60012; + border-radius: 20px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); + overflow: hidden; +} + +.theme-nintendo .title-bar { + background: #e60012; + color: #fff; + padding: 20px; + text-align: center; + font-weight: bold; + font-size: 24px; + letter-spacing: 2px; +} + +.theme-nintendo .window-body { + color: #484848; +} + +.theme-nintendo fieldset { + border: 3px solid #e60012; + border-radius: 15px; + background: #f7f7f7; +} + +.theme-nintendo legend { + color: #e60012; +} + +.theme-nintendo button { + background: #e60012; + border: none; + border-radius: 25px; + color: #fff; + text-transform: uppercase; + padding: 12px 30px; + box-shadow: 0 4px 0 #a00009; +} + +.theme-nintendo button:hover { + background: #ff0018; +} + +.theme-nintendo button:active { + box-shadow: 0 2px 0 #a00009; + transform: translateY(2px); +} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 98dd9f1..ed553bb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -11,6 +11,7 @@