Updated all the components to have relative (rem) dimensions
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:
@@ -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>
|
||||
|
||||
|
||||
@@ -1,71 +1,43 @@
|
||||
<script>
|
||||
export let roll;
|
||||
export let diceRoll;
|
||||
</script>
|
||||
|
||||
<div class="dice-display">
|
||||
{#if roll}
|
||||
<div class="dice-emoji">🎲 🎲</div>
|
||||
<div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
|
||||
{:else}
|
||||
<div class="empty-state">Click Roll!</div>
|
||||
{/if}
|
||||
{#if diceRoll.x != 0}
|
||||
<div class="dice-emoji">🎲 🎲</div>
|
||||
<div class="dice-result">X: {diceRoll.x} | Y: {diceRoll.y}</div>
|
||||
{:else}
|
||||
<div class="empty-state">Click Roll!</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dice-display {
|
||||
padding: 20px;
|
||||
min-height: 120px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.dice-display {
|
||||
padding: 1.5rem;
|
||||
min-height: 7rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-win95 .dice-display {
|
||||
background: white;
|
||||
border: 2px inset #808080;
|
||||
}
|
||||
.dice-emoji {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-cyberpunk .dice-display {
|
||||
background: rgba(0, 255, 255, 0.05);
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
.dice-result {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-typewriter .dice-display {
|
||||
background: #fffef7;
|
||||
border: 1px solid #2c2416;
|
||||
}
|
||||
.empty-state {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.dice-emoji {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dice-result {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
@@ -4,20 +4,29 @@
|
||||
const themes = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'vaporwave', 'nintendo'];
|
||||
</script>
|
||||
|
||||
<div class="button-row">
|
||||
{#each themes as theme}
|
||||
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
||||
{theme.charAt(0).toUpperCase()}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
|
||||
<div class="button-row">
|
||||
{#each themes as theme}
|
||||
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
||||
{theme.charAt(0).toUpperCase()}
|
||||
</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>
|
||||
|
||||
@@ -1,48 +1,52 @@
|
||||
/* Cyberpunk Theme */
|
||||
:global(.theme-cyberpunk) {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #0a0e27;
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
:global(.theme-cyberpunk .window){
|
||||
background: rgba(10, 14, 39, 0.95);
|
||||
border: 2px solid #00ffff;
|
||||
box-shadow: 0 0 20px #ff00ff;
|
||||
}
|
||||
|
||||
:global(.theme-cyberpunk .title-bar ){
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
color: #000;
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
:global(.theme-cyberpunk fieldset ){
|
||||
border: 1px solid #ff00ff;
|
||||
}
|
||||
|
||||
:global(.theme-cyberpunk legend ){
|
||||
color: #ff00ff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
:global(.theme-cyberpunk 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 ){
|
||||
background: #ff00ff;
|
||||
color: #000;
|
||||
}
|
||||
:global(.theme-cyberpunk .chart-display) {
|
||||
background: rgba(0, 255, 255, 0.05);
|
||||
border: 1px solid #00ffff;
|
||||
: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;
|
||||
}
|
||||
.window{
|
||||
background: rgba(10, 14, 39, 0.95);
|
||||
border: 2px solid #00ffff;
|
||||
box-shadow: 0 0 20px #ff00ff;
|
||||
}
|
||||
.title-bar {
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
color: #000;
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid #ff00ff;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #ff00ff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 2px solid #ff00ff;
|
||||
color: #ff00ff;
|
||||
font-family: 'Courier New', monospace;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 25px;
|
||||
&:hover {
|
||||
background: #ff00ff;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.chart-display {
|
||||
background: rgba(0, 255, 255, 0.05);
|
||||
border: 1px solid #00ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,4 +47,10 @@
|
||||
background: #000000;
|
||||
border: 2px solid #8b0000;
|
||||
}
|
||||
:global{
|
||||
.theme-nightmare .dice-display {
|
||||
background: #000000;
|
||||
border: 2px solid #8b0000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,4 +34,10 @@
|
||||
background: #fffef7;
|
||||
border: 1px solid #2c2416;
|
||||
}
|
||||
:global{
|
||||
.theme-typewriter .dice-display {
|
||||
background: #fffef7;
|
||||
border: 1px solid #2c2416;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,39 +1,48 @@
|
||||
/* Windows 95 Theme */
|
||||
:global(.theme-win95 ){
|
||||
font-family: 'MS Sans Serif', Arial, sans-serif;
|
||||
background: #008080;
|
||||
}
|
||||
|
||||
:global(.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);
|
||||
}
|
||||
|
||||
:global(.theme-win95 .title-bar ){
|
||||
background: linear-gradient(to right, #000080, #1084d0);
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:global(.theme-win95 fieldset ){
|
||||
border: 2px groove #c0c0c0;
|
||||
}
|
||||
|
||||
:global(.theme-win95 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) {
|
||||
border-color: #000000 #ffffff #ffffff #000000;
|
||||
}
|
||||
:global(.theme-win95 .chart-display) {
|
||||
background: white;
|
||||
border: 2px inset #808080;
|
||||
:global{
|
||||
body:has(.theme-win95){
|
||||
background: #008080;
|
||||
}
|
||||
.theme-win95 {
|
||||
font-family: 'MS Sans Serif', Arial, sans-serif;
|
||||
background: #008080;
|
||||
color: black;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: linear-gradient(to right, #000080, #1084d0);
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 2px groove #c0c0c0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #c0c0c0;
|
||||
border: 2px solid;
|
||||
border-color: #ffffff #000000 #000000 #ffffff;
|
||||
font-family: 'MS Sans Serif', Arial, sans-serif;
|
||||
&:active {
|
||||
border-color: #000000 #ffffff #ffffff #000000;
|
||||
}
|
||||
}
|
||||
.chart-display {
|
||||
background: white;
|
||||
border: 2px inset #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</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;
|
||||
|
||||
@@ -1,111 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
function navigate(page: string) {
|
||||
goto(`/${page}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="home-container">
|
||||
<div class="home-content">
|
||||
<h1 class="title">On the Spectrum!</h1>
|
||||
<p class="subtitle">Well...are ya?</p>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-button" on:click={() => navigate('play')}>
|
||||
<span class="tab-icon">🎮</span>
|
||||
<span>Play</span>
|
||||
</button>
|
||||
<button class="tab-button" on:click={() => navigate('rules')}>
|
||||
<span class="tab-icon">📖</span>
|
||||
<span>Rules</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-content">
|
||||
<h1 class="title">On the Spectrum!</h1>
|
||||
<p class="subtitle">Well...are ya?</p>
|
||||
|
||||
<div class="tabs">
|
||||
<a href="/play" class="tab-button">
|
||||
<span class="tab-icon">🎮</span>
|
||||
<span>Play</span>
|
||||
</a>
|
||||
<a href="/rules" class="tab-button">
|
||||
<span class="tab-icon">📖</span>
|
||||
<span>Rules</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
.home-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 3rem;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 3rem;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 30px 50px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
.tab-button {
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 30px 50px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.tab-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.tab-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tab-button {
|
||||
padding: 20px 40px;
|
||||
font-size: 1.2rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.tab-button {
|
||||
padding: 20px 40px;
|
||||
font-size: 1.2rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user