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

71
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,24 +28,60 @@
}
</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} />
<div class="button-row">
<button onclick={generateChart}>Generate</button>
</div>
</fieldset>
<fieldset>
<legend>Chart Generator</legend>
<ChartDisplay chart={currentChart} />
<div class="button-row">
<button onclick={generateChart}>Generate</button>
</div>
</fieldset>
<fieldset>
<legend>Position Roller</legend>
<DiceRoller roll={diceRoll} />
<div class="button-row">
<button onclick={rollDice}>Roll Dice</button>
</div>
</fieldset>
</div>
<fieldset>
<legend>Position Roller</legend>
<DiceRoller {diceRoll} />
<div class="button-row">
<button onclick={rollDice}>Roll Dice</button>
</div>
</fieldset>
</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>