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

Updated all the components to have relative (rem) dimensions

Browse Source 
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
This commit is contained in:
Will Stensvold
2025-12-09 01:13:11 -06:00
parent 06c157d4af
commit 55f4cfaeef
13 changed files with 340 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/chartDisplay.svelte
View File

@@ -3,7 +3,7 @@
</script>
<div class="chart-display">
{#if chart}
{#if chart.x != ''}
<div class="axis">
<div class="axis-label">X-Axis (Horizontal)</div>
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
@@ -13,36 +13,41 @@
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
</div>
{:else}
<div class="empty-state">Click Generate!</div>
<p class="empty-state">Click Generate!</p>
{/if}
</div>
<style>
.chart-display {
padding: 20px;
min-height: 120px;
margin: 15px 0;
padding: 1.5rem;
min-height: 7rem;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
}
.axis {
margin: 10px 0;
padding: 10px;
margin: 0.25rem 0;
padding: 1rem;
border: 1px solid currentColor;
opacity: 0.9;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.axis-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 11px;
font-size: 0.675rem;
text-transform: uppercase;
}
.empty-state {
font-style: italic;
text-align: center;
padding: 20px;
opacity: 0.7;
margin: auto;
}
</style>

56
src/lib/components/diceRoller.svelte
View File

@@ -1,11 +1,11 @@
<script>
export let roll;
export let diceRoll;
</script>
<div class="dice-display">
{#if roll}
{#if diceRoll.x != 0}
<div class="dice-emoji">🎲 🎲</div>
<div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
<div class="dice-result">X: {diceRoll.x} | Y: {diceRoll.y}</div>
{:else}
<div class="empty-state">Click Roll!</div>
{/if}
@@ -13,59 +13,31 @@
<style>
.dice-display {
padding: 20px;
min-height: 120px;
margin: 15px 0;
}
.theme-win95 .dice-display {
background: white;
border: 2px inset #808080;
}
.theme-cyberpunk .dice-display {
background: rgba(0, 255, 255, 0.05);
border: 1px solid #00ffff;
}
.theme-typewriter .dice-display {
background: #fffef7;
border: 1px solid #2c2416;
}
.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;
padding: 1.5rem;
min-height: 7rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
.dice-emoji {
font-size: 48px;
font-size: 3rem;
text-align: center;
}
.dice-result {
font-size: 28px;
font-size: 2rem;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
.empty-state {
font-style: italic;
text-align: center;
padding: 20px;
opacity: 0.7;
margin: auto;
}
</style>

13
src/lib/components/themeSelector.svelte
View File

@@ -4,6 +4,9 @@
const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
</script>
<fieldset>
<legend>Theme Selector</legend>
<div class="button-row">
{#each themes as theme}
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
@@ -11,13 +14,19 @@
</button>
{/each}
</div>
</fieldset>
<style>
fieldset {
display: inline-flex;
margin: 0 1rem 0 auto;
}
.button-row {
display: flex;
gap: 10px;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
align-items: center;
}
</style>

32
src/lib/styles/cyberpunk.css
View File

@@ -1,48 +1,52 @@
/* Cyberpunk Theme */
:global(.theme-cyberpunk) {
: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;
}
:global(.theme-cyberpunk .window){
.window{
background: rgba(10, 14, 39, 0.95);
border: 2px solid #00ffff;
box-shadow: 0 0 20px #ff00ff;
}
:global(.theme-cyberpunk .title-bar ){
.title-bar {
background: linear-gradient(90deg, #ff00ff, #00ffff);
color: #000;
padding: 12px;
font-weight: bold;
text-transform: uppercase;
}
:global(.theme-cyberpunk fieldset ){
fieldset {
border: 1px solid #ff00ff;
}
:global(.theme-cyberpunk legend ){
legend {
color: #ff00ff;
text-transform: uppercase;
}
:global(.theme-cyberpunk button ){
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 ){
&:hover {
background: #ff00ff;
color: #000;
}
:global(.theme-cyberpunk .chart-display) {
}
.chart-display {
background: rgba(0, 255, 255, 0.05);
border: 1px solid #00ffff;
}
}
}

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

@@ -47,4 +47,10 @@
background: #000000;
border: 2px solid #8b0000;
}
:global{
.theme-nightmare .dice-display {
background: #000000;
border: 2px solid #8b0000;
}
}

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

@@ -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;
}
}

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

@@ -34,4 +34,10 @@
background: #fffef7;
border: 1px solid #2c2416;
}
:global{
.theme-typewriter .dice-display {
background: #fffef7;
border: 1px solid #2c2416;
}
}

6
src/lib/styles/vaporwave.css
View File

@@ -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;
}
}

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

@@ -1,39 +1,48 @@
/* Windows 95 Theme */
:global(.theme-win95 ){
font-family: 'MS Sans Serif', Arial, sans-serif;
:global{
body:has(.theme-win95){
background: #008080;
}
.theme-win95 {
font-family: 'MS Sans Serif', Arial, sans-serif;
background: #008080;
color: black;
:global(.theme-win95 .window) {
.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);
}
:global(.theme-win95 .title-bar ){
.title-bar {
background: linear-gradient(to right, #000080, #1084d0);
color: white;
padding: 8px;
font-weight: bold;
}
:global(.theme-win95 fieldset ){
fieldset {
border: 2px groove #c0c0c0;
}
:global(.theme-win95 button ){
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) {
&:active {
border-color: #000000 #ffffff #ffffff #000000;
}
:global(.theme-win95 .chart-display) {
}
.chart-display {
background: white;
border: 2px inset #808080;
}
}
}

52
src/routes/+layout.svelte
View File

@@ -10,17 +10,16 @@
<link rel="icon" href={favicon} />
</svelte:head>
<nav class="titlebar theme-{currentTheme}">
<!-- <svelte:body class="theme-{currentTheme}" /> -->
<nav class="title-bar theme-{currentTheme}">
<h1><a href="/">On the Spectrum</a></h1>
<ul>
<li><a href="play">Play</a></li>
<li><a href="rules">Rules</a></li>
<li><a href="submit">Submit</a></li>
</ul>
<fieldset>
<legend>Theme Selector</legend>
<ThemeSelector bind:currentTheme />
</fieldset>
</nav>
<section class="theme-{currentTheme}">
@@ -37,59 +36,24 @@
:global(body) {
margin: 0;
padding: 0;
}
:global(.container) {
padding: 20px;
min-height: 100vh;
}
:global(.window) {
max-width: 800px;
margin: 0 auto;
}
:global(.window-body) {
padding: 20px;
}
:global(fieldset) {
padding: 15px;
margin: 15px 0;
}
:global(legend) {
font-weight: bold;
padding: 0 5px;
}
:global(.button-row) {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
:global(button) {
padding: 8px 24px;
cursor: pointer;
font-weight: bold;
height: 100vh;
}
nav {
display: inline-flex;
width: 100vw;
a {
text-decoration: none;
color: black;
font-weight: 600;
&:visited {
color: inherit;
}
&:hover {
color: oklch(0.6 0.186 25);
}
}
ul {
list-style: none;
padding: none;
display: inline-flex;
gap: 1rem;
align-items: end;

15
src/routes/+page.svelte
View File

@@ -1,9 +1,4 @@
<script lang="ts">
import { goto } from '$app/navigation';
function navigate(page: string) {
goto(`/${page}`);
}
</script>
<div class="home-container">
@@ -12,14 +7,14 @@
<p class="subtitle">Well...are ya?</p>
<div class="tabs">
<button class="tab-button" on:click={() => navigate('play')}>
<a href="/play" class="tab-button">
<span class="tab-icon">🎮</span>
<span>Play</span>
</button>
<button class="tab-button" on:click={() => navigate('rules')}>
</a>
<a href="/rules" class="tab-button">
<span class="tab-icon">📖</span>
<span>Rules</span>
</button>
</a>
</div>
</div>
</div>
@@ -70,6 +65,7 @@
}
.tab-button {
text-decoration: none;
background: white;
border: none;
border-radius: 15px;
@@ -109,3 +105,4 @@
}
}
</style>

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

@@ -3,7 +3,6 @@
import ChartDisplay from '$components/chartDisplay.svelte';
import DiceRoller from '$components/diceRoller.svelte';
let { data } = $props();
let adultMode = $state(false);
let currentChart = $state({ x: [''], y: [''] });
let diceRoll = $state({ x: 0, y: 0 });
@@ -29,9 +28,8 @@
}
</script>
<div class="container theme-{data.currentTheme}">
<div class="container">
<div class="window">
<div class="window-body">
<fieldset>
<legend>Chart Generator</legend>
<ChartDisplay chart={currentChart} />
@@ -42,11 +40,48 @@
<fieldset>
<legend>Position Roller</legend>
<DiceRoller roll={diceRoll} />
<DiceRoller {diceRoll} />
<div class="button-row">
<button onclick={rollDice}>Roll Dice</button>
</div>
</fieldset>
</div>
</div>
</div>
<style>
.container {
margin: 2rem;
}
.window {
max-width: 60rem;
margin: 0 auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
fieldset {
padding: 1.25rem;
margin: 0;
}
legend {
font-weight: bold;
padding: 0 0.5rem;
}
.button-row {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
button {
padding: 0.5rem 1.75rem;
cursor: pointer;
font-weight: bold;
}
</style>