Sludge-Games/onTheSpectrum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Chalkboard and Classroom themes

Browse Source 
Combined DicerRoller and Chart
Centered Title
Standardized UI Sizes across themes.
This commit is contained in:
Giac
2025-12-14 15:52:16 -06:00
parent f161d4f5c0
commit 85a51a1fda
12 changed files with 652 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/lib/components/generator.svelte Normal file
View File

@@ -0,0 +1,276 @@
<script>
export let chart;
export let roll;
</script>
<div class="unified-chart">
<div class="main-row">
<!-- Y-axis vertical on left -->
<div class="y-axis-container">
<div class="y-extreme" class:placeholder={chart.x.length === 1}>
{#if chart.x.length > 1}
{chart.y[1]}
{:else}
(Top Value)
{/if}
</div>
<div class="y-arrow">↕</div>
<div class="y-extreme" class:placeholder={chart.x.length === 1}>
{#if chart.x.length > 1}
{chart.y[0]}
{:else}
(Bottom Value)
{/if}
</div>
</div>
<!-- Chart -->
<div class="chart-wrapper">
<svg viewBox="0 20 220 235" class="chart-svg">
<!-- Grid -->
{#each { length: 9 } as _, i}
<line
x1={40 + i * 20}
y1="40"
x2={40 + i * 20}
y2="220"
stroke="currentColor"
stroke-width="0.5"
opacity="0.2"
/>
<line
x1="20"
y1={40 + i * 20}
x2="200"
y2={40 + i * 20}
stroke="currentColor"
stroke-width="0.5"
opacity="0.2"
/>
{/each}
<!-- Main Axes -->
<line x1="20" y1="220" x2="200" y2="220" stroke="currentColor" stroke-width="2" />
<line x1="20" y1="40" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
<!-- Center lines (between 5 and 6) -->
<line x1="20" y1="130" x2="200" y2="130" stroke="currentColor" stroke-width="20" opacity="0.2" />
<line x1="110" y1="40" x2="110" y2="220" stroke="currentColor" stroke-width="20" opacity="0.2" />
<!-- Axis Numbers (1-10) -->
{#each { length: 10 } as _, i}
<text
x={20 + i * 20}
y="238"
text-anchor="middle"
font-size="10"
fill="currentColor"
opacity="0.6">{i + 1}</text
>
<text
x="10"
y={224 - i * 20}
text-anchor="end"
font-size="10"
fill="currentColor"
opacity="0.6">{i + 1}</text
>
{/each}
<!-- Crosshairs (only show when roll exists) -->
{#if roll.x !== 0 && roll.y !== 0}
<line
x1={20 + (roll.x - 1) * 20}
y1="40"
x2={20 + (roll.x - 1) * 20}
y2="220"
stroke="currentColor"
stroke-width="1"
stroke-dasharray="3,3"
opacity="0.4"
/>
<line
x1="20"
y1={220 - (roll.y - 1) * 20}
x2="200"
y2={220 - (roll.y - 1) * 20}
stroke="currentColor"
stroke-width="1"
stroke-dasharray="3,3"
opacity="0.4"
/>
<!-- Point -->
<circle cx={20 + (roll.x - 1) * 20} cy={220 - (roll.y - 1) * 20} r="6" class="point" />
{/if}
</svg>
</div>
</div>
<!-- X-axis horizontal below chart (always visible) -->
<div class="x-axis-container">
<div class="x-extreme" class:placeholder={chart.x.length === 1}>
{#if chart.x.length > 1}
{chart.x[0]}
{:else}
(Left Value)
{/if}
</div>
<div class="x-arrow">↔</div>
<div class="x-extreme" class:placeholder={chart.x.length === 1}>
{#if chart.x.length > 1}
{chart.x[1]}
{:else}
(Right Value)
{/if}
</div>
</div>
<!-- Coordinates Display (always visible) -->
<div class="coordinates" class:placeholder={roll.x === 0 && roll.y === 0}>
{#if roll.x === 0 && roll.y === 0}
(X, Y)
{:else}
({roll.x}, {roll.y})
{/if}
</div>
</div>
<style>
.unified-chart {
padding-bottom: 20px;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.main-row {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.y-axis-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 150px;
flex-shrink: 0;
}
.y-extreme {
text-align: center;
font-weight: bold;
font-size: 14px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
width: 100%;
}
.y-extreme.placeholder,
.x-extreme.placeholder {
opacity: 0.5;
font-style: italic;
font-weight: normal;
}
.y-arrow {
font-size: 28px;
opacity: 0.6;
flex-shrink: 0;
}
.x-axis-container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
max-width: 500px;
}
.x-extreme {
flex: 1;
text-align: center;
font-weight: bold;
font-size: 14px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.x-arrow {
font-size: 24px;
opacity: 0.6;
flex-shrink: 0;
}
.chart-wrapper {
display: flex;
justify-content: center;
flex: .9;
}
.chart-svg {
width: 100%;
max-width: 500px;
height: auto;
overflow: visible;
}
.coordinates {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 5px;
}
.coordinates.placeholder {
opacity: 0.5;
font-style: italic;
font-weight: normal;
}
.point {
fill: currentColor;
stroke: none;
}
@media (max-width: 768px) {
.main-row {
flex-direction: column;
gap: 10px;
}
.y-axis-container {
/* Keep vertical stacking on mobile */
width: 100%;
max-width: 500px;
}
.y-extreme {
width: 100%;
}
.y-extreme,
.x-extreme {
font-size: 12px;
}
.y-arrow,
.x-arrow {
font-size: 20px;
}
.coordinates {
font-size: 20px;
}
}
</style>

110
src/lib/styles/chalkboard.css Normal file
View File

@@ -0,0 +1,110 @@
.theme-chalkboard {
font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
background: #1a3a1a;
color: #f5f5dc;
.window {
background: #2d4a2d;
border-color: #8b7355;
box-shadow:
inset 0 0 100px rgba(0, 0, 0, 0.3),
0 4px 15px rgba(0, 0, 0, 0.5);
}
.title-bar {
background: #8b7355;
color: #f5f5dc;
text-align: center;
font-weight: bold;
border-bottom: 3px solid #6d5a45;
}
fieldset {
border-color: rgba(245, 245, 220, 0.5);
background: rgba(26, 58, 26, 0.3);
}
legend {
color: #f5f5dc;
text-transform: uppercase;
font-weight: bold;
}
button {
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);
}
}
.chart-display,
.dice-display {
background: rgba(26, 58, 26, 0.5);
border-color: rgba(245, 245, 220, 0.4);
}
.title {
color: #f5f5dc;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.subtitle {
color: #e8e8c8;
}
.tab-button {
background: rgba(245, 245, 220, 0.15);
border-color: #f5f5dc;
color: #f5f5dc;
text-transform: uppercase;
&:hover {
background: rgba(245, 245, 220, 0.25);
transform: translateY(-2px);
}
}
.back-button {
background: rgba(245, 245, 220, 0.15);
border-color: #f5f5dc;
color: #f5f5dc;
&:hover {
background: rgba(245, 245, 220, 0.25);
}
}
h1 {
color: #f5f5dc;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
h2 {
color: #e8e8c8;
text-decoration: underline;
}
h3 {
color: #f5f5dc;
}
p,
li {
color: #f5f5dc;
line-height: 1.6;
}
.point {
fill: #ffeb3b;
stroke: #ffeb3b;
}
svg line,
svg text {
stroke: rgba(245, 245, 220, 0.7);
fill: rgba(245, 245, 220, 0.7);
}
}

134
src/lib/styles/classroom.css Normal file
View File

@@ -0,0 +1,134 @@
.theme-classroom {
font-family: 'Comic Sans MS', 'Marker Felt', 'Bradley Hand', cursive;
background: #ffeb3b;
color: #333;
.window {
background: #ffffff;
border-color: #f44336;
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.15);
}
.title-bar {
background: #f44336;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
fieldset {
border-color: #2196f3;
background: #fff;
}
legend {
color: #2196f3;
text-transform: uppercase;
font-weight: bold;
background: #fff;
}
button {
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);
}
}
.chart-display,
.dice-display {
background: #ffffff;
border-color: #2196f3;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
}
.title {
color: #f44336;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.subtitle {
color: #2196f3;
font-weight: bold;
}
.tab-button {
background: #2196f3;
border-color: #1976d2;
border-radius: 12px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
&:hover {
background: #1e88e5;
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.2);
}
}
.back-button {
background: #ffeb3b;
border-color: #fbc02d;
border-radius: 8px;
color: #333;
font-weight: bold;
&:hover {
background: #fdd835;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}
}
h1 {
color: #f44336;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
h2 {
color: #2196f3;
}
h3 {
color: #ffeb3b;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
p,
li {
color: #333;
font-weight: 500;
}
.point {
fill: #f44336;
stroke: #d32f2f;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2));
}
svg line {
stroke: #2196f3;
}
svg text {
fill: #333;
font-weight: bold;
}
}

14
src/lib/styles/cyberPunk.css
View File

@@ -5,20 +5,19 @@
.window { .window {
background: rgba(10, 14, 39, 0.95); background: rgba(10, 14, 39, 0.95);
border: 2px solid #00ffff; border-color: #00ffff;
box-shadow: 0 0 20px #ff00ff; box-shadow: 0 0 20px #ff00ff;
} }
.title-bar { .title-bar {
background: linear-gradient(90deg, #ff00ff, #00ffff); background: linear-gradient(90deg, #ff00ff, #00ffff);
color: #000; color: #000;
padding: 12px;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
fieldset { fieldset {
border: 1px solid #ff00ff; border-color: #ff00ff;
} }
legend { legend {
@@ -28,11 +27,10 @@
button { button {
background: transparent; background: transparent;
border: 2px solid #ff00ff; border-color: #ff00ff;
color: #ff00ff; color: #ff00ff;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
text-transform: uppercase; text-transform: uppercase;
padding: 10px 25px;
&:hover { &:hover {
background: #ff00ff; background: #ff00ff;
color: #000; color: #000;
@@ -42,7 +40,7 @@
.chart-display, .chart-display,
.dice-display { .dice-display {
background: rgba(0, 255, 255, 0.05); background: rgba(0, 255, 255, 0.05);
border: 1px solid #00ffff; border-color: #00ffff;
} }
.title { .title {
@@ -56,7 +54,7 @@
.tab-button { .tab-button {
background: transparent; background: transparent;
border: 2px solid #ff00ff; border-color: #ff00ff;
color: #ff00ff; color: #ff00ff;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
@@ -68,7 +66,7 @@
.back-button { .back-button {
background: transparent; background: transparent;
border: 1px solid #ff00ff; border-color: #ff00ff;
color: #ff00ff; color: #ff00ff;
&:hover { &:hover {
background: #ff00ff; background: #ff00ff;

15
src/lib/styles/nightmare.css
View File

@@ -5,22 +5,20 @@
.window { .window {
background: #0d0000; background: #0d0000;
border: 3px solid #8b0000; border-color: #8b0000;
box-shadow: 0 0 30px #ff0000; box-shadow: 0 0 30px #ff0000;
} }
.title-bar { .title-bar {
background: linear-gradient(180deg, #3a0000, #000000); background: linear-gradient(180deg, #3a0000, #000000);
color: #ff0000; color: #ff0000;
padding: 15px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 10px #ff0000; text-shadow: 0 0 10px #ff0000;
} }
fieldset { fieldset {
border: 2px solid #8b0000; border-color: #8b0000;
} }
legend { legend {
@@ -30,11 +28,10 @@
button { button {
background: #3a0000; background: #3a0000;
border: 2px solid #8b0000; border-color: #8b0000;
color: #ff0000; color: #ff0000;
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
text-transform: uppercase; text-transform: uppercase;
padding: 10px 25px;
&:hover { &:hover {
background: #8b0000; background: #8b0000;
} }
@@ -43,7 +40,7 @@
.chart-display, .chart-display,
.dice-display { .dice-display {
background: #000000; background: #000000;
border: 2px solid #8b0000; border-color: #8b0000;
} }
.title { .title {
@@ -58,7 +55,7 @@
.tab-button { .tab-button {
background: #3a0000; background: #3a0000;
border: 2px solid #8b0000; border-color: #8b0000;
color: #ff0000; color: #ff0000;
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
text-transform: uppercase; text-transform: uppercase;
@@ -70,7 +67,7 @@
.back-button { .back-button {
background: #3a0000; background: #3a0000;
border: 2px solid #8b0000; border-color: #8b0000;
color: #ff0000; color: #ff0000;
&:hover { &:hover {
background: #8b0000; background: #8b0000;

42
src/lib/styles/nintendo.css
View File

@@ -1,11 +1,11 @@
.theme-nintendo { .theme-nintendo {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background: #e60012; background: #e60012;
color: #fff; color: #a00009;
.window { .window {
background: #fff; background: #fff;
border: 8px solid #e60012; border-color: #e60012;
border-radius: 20px; border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
overflow: hidden; overflow: hidden;
@@ -14,49 +14,51 @@
.title-bar { .title-bar {
background: #e60012; background: #e60012;
color: #fff; color: #fff;
padding: 20px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-size: 24px;
letter-spacing: 2px;
} }
fieldset { fieldset {
border: 3px solid #e60012; border-color: #e60012;
border-radius: 15px; border-radius: 15px;
background: #f7f7f7; background: #f7f7f7;
} }
legend { legend {
color: #e60012; color: #e60012;
font-weight: bold;
background: #ffffff;
text-transform: uppercase;
font-size: 0.9em;
} }
button { button {
background: #e60012; background: #e60012;
border: none; border-color: #b80010;
border-radius: 25px; border-radius: 12px;
color: #fff; color: #ffffff;
font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
padding: 12px 30px; box-shadow: 0 4px 0 #b80010;
box-shadow: 0 4px 0 #a00009;
&:hover { &:hover {
background: #ff0018; background: #ff1a2e;
transform: translateY(-2px);
box-shadow: 0 6px 0 #b80010;
} }
&:active { &:active {
box-shadow: 0 2px 0 #a00009;
transform: translateY(2px); transform: translateY(2px);
box-shadow: 0 2px 0 #b80010;
} }
} }
.chart-display, .chart-display,
.dice-display { .dice-display {
background: #fff; background: #ffffff;
border: 3px solid #00a3e0; border-color: #e0e0e0;
border-radius: 10px; border-radius: 12px;
color: #484848; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} }
.title { .title {
@@ -64,7 +66,8 @@
} }
.subtitle { .subtitle {
color: #484848; color: #a00009;
font-weight: 600;
} }
.tab-button { .tab-button {
@@ -90,7 +93,6 @@
border-radius: 25px; border-radius: 25px;
color: #fff; color: #fff;
box-shadow: 0 4px 0 #a00009; box-shadow: 0 4px 0 #a00009;
padding: 8px 20px;
&:hover { &:hover {
background: #ff0018; background: #ff0018;

24
src/lib/styles/sludge.css
View File

@@ -5,23 +5,21 @@
.window { .window {
background: rgba(61, 55, 42, 0.95); background: rgba(61, 55, 42, 0.95);
border: 4px solid #8b8555; border-color: #8b8555;
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
} }
.title-bar { .title-bar {
background: linear-gradient(180deg, #8b8555 0%, #6d6750 100%); background: linear-gradient(180deg, #8b8555 0%, #6d6750 100%);
color: #c4b896; color: #c4b896;
padding: 15px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 4px;
border-bottom: 3px solid rgba(0, 0, 0, 0.3); border-bottom: 3px solid rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
fieldset { fieldset {
border: 3px solid #8b8555; border-color: #8b8555;
background: rgba(58, 52, 38, 0.5); background: rgba(58, 52, 38, 0.5);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
} }
@@ -30,32 +28,25 @@
color: #c4b896; color: #c4b896;
text-transform: uppercase; text-transform: uppercase;
background: #4a4235; background: #4a4235;
padding: 2px 10px;
border: 2px solid #8b8555; border: 2px solid #8b8555;
} }
button { button {
background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
border: 3px solid #8b8555; border-color: #8b8555;
border-bottom-width: 5px;
color: #c4b896; color: #c4b896;
text-transform: uppercase; text-transform: uppercase;
padding: 12px 30px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
&:hover { &:hover {
background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%); background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
border-color: #9a9565; border-color: #9a9565;
} }
&:active {
border-bottom-width: 3px;
transform: translateY(2px);
}
} }
.chart-display, .chart-display,
.dice-display { .dice-display {
background: rgba(42, 37, 26, 0.8); background: rgba(42, 37, 26, 0.8);
border: 3px solid #8b8555; border-color: #8b8555;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
} }
@@ -69,8 +60,7 @@
.tab-button { .tab-button {
background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
border: 3px solid #8b8555; border-color: #8b8555;
border-bottom-width: 5px;
color: #c4b896; color: #c4b896;
text-transform: uppercase; text-transform: uppercase;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -83,8 +73,7 @@
.back-button { .back-button {
background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%); background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
border: 3px solid #8b8555; border-color: #8b8555;
border-bottom-width: 5px;
color: #c4b896; color: #c4b896;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
&:hover { &:hover {
@@ -113,6 +102,5 @@
.point { .point {
fill: #b5ad88; fill: #b5ad88;
filter: drop-shadow(0 0 5px #b5ad88); filter: drop-shadow(0 0 5px #b5ad88);
stroke-width: 3;
} }
} }

18
src/lib/styles/themes.js
View File

@@ -1,19 +1,23 @@
export const themeNames = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'sludge', 'nintendo']; export const themeNames = ['chalkboard', 'classroom', 'cyberpunk', 'nightmare', 'nintendo', 'sludge', 'typewriter', 'win95'];
export const themeDisplayNames = { export const themeDisplayNames = {
win95: 'Win 95', chalkboard: 'Chalkboard',
classroom: 'Classroom',
cyberpunk: 'Cyberpunk', cyberpunk: 'Cyberpunk',
typewriter: 'Typewriter',
nightmare: 'Nightmare', nightmare: 'Nightmare',
nintendo: 'Nintendo',
sludge: 'Sludge', sludge: 'Sludge',
nintendo: 'Nintendo' typewriter: 'Typewriter',
win95: 'Win 95'
}; };
// Import all theme CSS files // Import all theme CSS files
// These will be bundled and applied globally // These will be bundled and applied globally
import './win95.css'; import './chalkboard.css';
import './classroom.css';
import './cyberPunk.css'; import './cyberPunk.css';
import './typewriter.css';
import './nightmare.css'; import './nightmare.css';
import './sludge.css';
import './nintendo.css'; import './nintendo.css';
import './sludge.css';
import './typewriter.css';
import './win95.css';

15
src/lib/styles/typewriter.css
View File

@@ -5,21 +5,20 @@
.window { .window {
background: #fffef7; background: #fffef7;
border: 3px double #2c2416; border-style: double;
border-color: #2c2416;
box-shadow: 5px 5px 15px rgba(0,0,0,0.3); box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
} }
.title-bar { .title-bar {
background: #2c2416; background: #2c2416;
color: #f4e8d0; color: #f4e8d0;
padding: 12px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px;
} }
fieldset { fieldset {
border: 2px solid #2c2416; border-color: #2c2416;
} }
legend { legend {
@@ -29,7 +28,7 @@
button { button {
background: #2c2416; background: #2c2416;
border: 2px solid #2c2416; border-color: #2c2416;
color: #f4e8d0; color: #f4e8d0;
font-family: 'Courier', monospace; font-family: 'Courier', monospace;
} }
@@ -37,7 +36,7 @@
.chart-display, .chart-display,
.dice-display { .dice-display {
background: #fffef7; background: #fffef7;
border: 1px solid #2c2416; border-color: #2c2416;
} }
.home-content { .home-content {
@@ -55,7 +54,7 @@
.tab-button { .tab-button {
background: #2c2416; background: #2c2416;
border: 2px solid #2c2416; border-color: #2c2416;
color: #f4e8d0; color: #f4e8d0;
font-family: 'Courier', monospace; font-family: 'Courier', monospace;
&:hover { &:hover {
@@ -66,7 +65,7 @@
.back-button { .back-button {
background: #2c2416; background: #2c2416;
color: #f4e8d0; color: #f4e8d0;
border: 2px solid #2c2416; border-color: #2c2416;
&:hover { &:hover {
background: #4a3a28; background: #4a3a28;
} }

18
src/lib/styles/win95.css
View File

@@ -1,43 +1,46 @@
.theme-win95 { .theme-win95 {
font-family: 'MS Sans Serif', Arial, sans-serif; font-family: 'MS Sans Serif', Arial, sans-serif;
background: #008080; background: #008080;
.window { .window {
background: #c0c0c0; background: #c0c0c0;
border: 2px solid;
border-color: #dfdfdf #808080 #808080 #dfdfdf; border-color: #dfdfdf #808080 #808080 #dfdfdf;
border-style: solid;
box-shadow: 2px 2px 0 rgba(0,0,0,0.5); box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
} }
.title-bar { .title-bar {
background: linear-gradient(to right, #000080, #1084d0); background: linear-gradient(to right, #000080, #1084d0);
color: white; color: white;
padding: 8px;
font-weight: bold; font-weight: bold;
} }
fieldset { fieldset {
border: 2px groove #c0c0c0; border-style: groove;
border-color: #c0c0c0;
} }
button { button {
background: #c0c0c0; background: #c0c0c0;
border: 2px solid;
border-color: #ffffff #000000 #000000 #ffffff; border-color: #ffffff #000000 #000000 #ffffff;
border-style: solid;
font-family: 'MS Sans Serif', Arial, sans-serif; font-family: 'MS Sans Serif', Arial, sans-serif;
&:active { &:active {
border-color: #000000 #ffffff #ffffff #000000; border-color: #000000 #ffffff #ffffff #000000;
} }
} }
.chart-display, .chart-display,
.dice-display { .dice-display {
background: white; background: white;
border: 2px inset #808080; border-style: inset;
border-color: #808080;
} }
.tab-button { .tab-button {
background: #c0c0c0; background: #c0c0c0;
border: 2px solid;
border-color: #ffffff #000000 #000000 #ffffff; border-color: #ffffff #000000 #000000 #ffffff;
border-style: solid;
color: #000; color: #000;
} }
@@ -51,12 +54,13 @@
.back-button { .back-button {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
} }
.back-button:hover { .back-button:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
h1, h1,
h2 { h2 {
color: #000080; color: #000080;

39
src/routes/+layout.svelte
View File

@@ -4,7 +4,7 @@
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import { page } from '$app/state'; import { page } from '$app/state';
// Create a theme store that persists across pages // Create a theme store that persists across pages
const theme = writable('win95'); const theme = writable('chalkboard');
setContext('theme', theme); setContext('theme', theme);
let currentTheme; let currentTheme;
@@ -27,6 +27,8 @@
<style> <style>
.back-button { .back-button {
position: absolute;
left: 10px;
padding: 5px 15px; padding: 5px 15px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
@@ -34,6 +36,7 @@
color: inherit; color: inherit;
font-weight: bold; font-weight: bold;
transition: all 0.2s; transition: all 0.2s;
border: 2px solid;
} }
.app-container { .app-container {
@@ -48,21 +51,23 @@
max-width: 55rem; max-width: 55rem;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
border-width: 4px;
border-style: solid;
} }
.title-bar { .title-bar {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
padding: 12px;
span { span {
text-align: center; text-align: center;
flex-grow: 0.75;
} }
} }
@media screen and (min-width: 450px) { @media screen and (min-width: 450px) {
.app-container {
padding: 2rem;
}
} }
:global { :global {
@@ -75,6 +80,7 @@
fieldset { fieldset {
padding: 15px; padding: 15px;
margin: 15px 0; margin: 15px 0;
border: 2px solid;
} }
legend { legend {
@@ -94,6 +100,27 @@
padding: 8px 24px; padding: 8px 24px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
border: 2px solid;
}
.tab-button {
border: 2px solid;
border-radius: 10px;
padding: 25px 40px;
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 180px;
text-decoration: none;
}
.tab-icon {
font-size: 2.5rem;
} }
.chart-display, .chart-display,
@@ -101,6 +128,7 @@
padding: 20px; padding: 20px;
min-height: 120px; min-height: 120px;
margin: 15px 0; margin: 15px 0;
border: 2px solid;
} }
.empty-state { .empty-state {
@@ -110,4 +138,3 @@
} }
} }
</style> </style>

36
src/routes/play/+page.svelte
View File

@@ -1,7 +1,6 @@
<script> <script>
import { xAxes, yAxes } from '$lib'; import { xAxes, yAxes } from '$lib';
import ChartDisplay from '$components/chartDisplay.svelte'; import Generator from '$components/generator.svelte';
import DiceRoller from '$components/diceRoller.svelte';
let adultMode = $state(false); let adultMode = $state(false);
let currentChart = $state({ x: [''], y: [''] }); let currentChart = $state({ x: [''], y: [''] });
@@ -18,12 +17,15 @@
x: randomX.values, x: randomX.values,
y: randomY.values y: randomY.values
}; };
// Reset dice roll when generating new chart
diceRoll = { x: 0, y: 0 };
} }
function rollDice() { function rollDice() {
diceRoll = { diceRoll = {
x: Math.floor(Math.random() * 11) - 5, x: Math.floor(Math.random() * 10) + 1,
y: Math.floor(Math.random() * 11) - 5 y: Math.floor(Math.random() * 10) + 1
}; };
} }
</script> </script>
@@ -34,22 +36,20 @@
<div class="container"> <div class="container">
<fieldset> <fieldset>
<legend>Chart Generator</legend> <legend>On The Spectrum</legend>
<ChartDisplay chart={currentChart} /> <Generator chart={currentChart} roll={diceRoll} />
<div class="button-row"> <div class="button-row">
<button onclick={generateChart}>Generate</button> <button onclick={generateChart}>Generate Axes</button>
</div> <button onclick={rollDice} disabled={currentChart.x.length === 1}>Roll Dice</button>
</fieldset>
<fieldset>
<legend>Position Roller</legend>
<DiceRoller roll={diceRoll} />
<div class="button-row">
<button onclick={rollDice}>Roll Dice</button>
</div> </div>
</fieldset> </fieldset>
</div> </div>
<style> <style>
.container {
padding: 1rem;
}
fieldset { fieldset {
padding: 1.25rem; padding: 1.25rem;
margin: 0; margin: 0;
@@ -65,11 +65,19 @@
gap: 10px; gap: 10px;
justify-content: center; justify-content: center;
margin-top: 10px; margin-top: 10px;
flex-wrap: wrap;
} }
button { button {
padding: 0.5rem 1.75rem; padding: 0.5rem 1.75rem;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
flex: 1;
min-width: 140px;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
} }
</style> </style>