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

Updated the css themes to remove specific stuff from chartDisplay

Browse Source 
added $components alias to svelte.config.js
This commit is contained in:
Will Stensvold
2025-12-08 23:36:32 -06:00
parent a1349f9cd1
commit 06c157d4af
13 changed files with 100 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,79 +1,48 @@
<script>
export let chart;
export let chart;
</script>
<div class="chart-display">
{#if chart}
<div class="axis">
<div class="axis-label">X-Axis (Horizontal)</div>
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
</div>
<div class="axis">
<div class="axis-label">Y-Axis (Vertical)</div>
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
</div>
{:else}
<div class="empty-state">Click Generate!</div>
{/if}
{#if chart}
<div class="axis">
<div class="axis-label">X-Axis (Horizontal)</div>
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
</div>
<div class="axis">
<div class="axis-label">Y-Axis (Vertical)</div>
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
</div>
{:else}
<div class="empty-state">Click Generate!</div>
{/if}
</div>
<style>
.chart-display {
padding: 20px;
min-height: 120px;
margin: 15px 0;
}
.chart-display {
padding: 20px;
min-height: 120px;
margin: 15px 0;
}
:global(.theme-win95) .chart-display {
background: white;
border: 2px inset #808080;
}
.axis {
margin: 10px 0;
padding: 10px;
border: 1px solid currentColor;
opacity: 0.9;
}
:global(.theme-cyberpunk) .chart-display {
background: rgba(0, 255, 255, 0.05);
border: 1px solid #00ffff;
}
.axis-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 11px;
text-transform: uppercase;
}
:global(.theme-typewriter) .chart-display {
background: #fffef7;
border: 1px solid #2c2416;
}
:global(.theme-nightmare) .chart-display {
background: #000000;
border: 2px solid #8b0000;
}
:global(.theme-vaporwave) .chart-display {
background: rgba(255, 255, 255, 0.15);
border: 2px solid #ff6ad5;
}
:global(.theme-nintendo) .chart-display {
background: #fff;
border: 3px solid #00a3e0;
border-radius: 10px;
color: #484848;
}
.axis {
margin: 10px 0;
padding: 10px;
border: 1px solid currentColor;
opacity: 0.9;
}
.axis-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 11px;
text-transform: uppercase;
}
.empty-state {
font-style: italic;
text-align: center;
padding: 20px;
opacity: 0.7;
}
.empty-state {
font-style: italic;
text-align: center;
padding: 20px;
opacity: 0.7;
}
</style>

4
src/lib/components/index.ts
View File

@@ -1,4 +0,0 @@
export * from './chartDisplay.svelte'
export * from './diceRoller.svelte'
export * from './themeSelector.svelte'
export * from './toggle.svelte'

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

@@ -7,7 +7,7 @@
<div class="button-row">
{#each themes as theme}
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
{theme.charAt(0).toUpperCase() + theme.slice(1)}
{theme.charAt(0).toUpperCase()}
</button>
{/each}
</div>
@@ -21,4 +21,3 @@
margin-top: 10px;
}
</style>

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

@@ -41,3 +41,8 @@
background: #ff00ff;
color: #000;
}
:global(.theme-cyberpunk .chart-display) {
background: rgba(0, 255, 255, 0.05);
border: 1px solid #00ffff;
}

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

@@ -42,3 +42,9 @@
:global(.theme-nightmare button:hover) {
background: #8b0000;
}
:global(.theme-nightmare .chart-display) {
background: #000000;
border: 2px solid #8b0000;
}

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

@@ -55,4 +55,9 @@
box-shadow: 0 2px 0 #a00009;
transform: translateY(2px);
}
:global(.theme-nintendo .chart-display ){
background: #fff;
border: 3px solid #00a3e0;
border-radius: 10px;
color: #484848;
}

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

@@ -30,3 +30,8 @@
color: #f4e8d0;
font-family: 'Courier', monospace;
}
:global(.theme-typewriter) .chart-display {
background: #fffef7;
border: 1px solid #2c2416;
}

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

@@ -39,4 +39,8 @@
text-transform: uppercase;
padding: 12px 30px;
}
:global(.theme-vaporwave .chart-display ){
background: rgba(255, 255, 255, 0.15);
border: 2px solid #ff6ad5;
}

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

@@ -32,3 +32,8 @@
:global(.theme-win95 button:active) {
border-color: #000000 #ffffff #ffffff #000000;
}
:global(.theme-win95 .chart-display) {
background: white;
border: 2px inset #808080;
}

10
src/routes/+layout.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import ThemeSelector from '$components/themeSelector.svelte';
let currentTheme = $state('win95');
let { children } = $props();
</script>
@@ -8,16 +10,20 @@
<link rel="icon" href={favicon} />
</svelte:head>
<nav>
<nav class="titlebar 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>
<section class="theme-{currentTheme}">
{@render children()}
</section>

3
src/routes/play/+page.server.ts
View File

@@ -1,3 +0,0 @@

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

@@ -1,15 +1,12 @@
<script>
import { goto } from '$app/navigation';
import { xAxes, yAxes } from '$lib';
import ChartDisplay from '$lib/components/chartDisplay.svelte';
import DiceRoller from '$lib/components/diceRoller.svelte';
import ThemeSelector from '$lib/components/themeSelector.svelte';
import Toggle from '$lib/components/toggle.svelte';
import ChartDisplay from '$components/chartDisplay.svelte';
import DiceRoller from '$components/diceRoller.svelte';
let currentTheme = 'win95';
let adultMode = false;
let currentChart = null;
let diceRoll = null;
let { data } = $props();
let adultMode = $state(false);
let currentChart = $state({ x: [''], y: [''] });
let diceRoll = $state({ x: 0, y: 0 });
function generateChart() {
const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
@@ -30,35 +27,16 @@
y: Math.floor(Math.random() * 10) + 1
};
}
function goHome() {
goto('/');
}
</script>
<div class="container theme-{currentTheme}">
<div class="container theme-{data.currentTheme}">
<div class="window">
<div class="title-bar">
<button class="home-button" on:click={goHome}>← Home</button>
<span>On the Spectrum - Party Game</span>
</div>
<div class="window-body">
<fieldset>
<legend>Theme Selector</legend>
<ThemeSelector bind:currentTheme />
</fieldset>
<fieldset>
<legend>Adult Mode (18+)</legend>
<Toggle bind:checked={adultMode} />
</fieldset>
<fieldset>
<legend>Chart Generator</legend>
<ChartDisplay chart={currentChart} />
<div class="button-row">
<button on:click={generateChart}>Generate</button>
<button onclick={generateChart}>Generate</button>
</div>
</fieldset>
@@ -66,7 +44,7 @@
<legend>Position Roller</legend>
<DiceRoller roll={diceRoll} />
<div class="button-row">
<button on:click={rollDice}>Roll Dice</button>
<button onclick={rollDice}>Roll Dice</button>
</div>
</fieldset>
</div>

22
svelte.config.js
View File

@@ -1,18 +1,22 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import path from 'path'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: vitePreprocess(),
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter()
}
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://svelte.dev/docs/kit/adapters for more information about adapters.
adapter: adapter(),
alias: {
$components: path.resolve('./src/lib/components'),
}
}
};
export default config;