updated some stuff to work on my PC.
deleteed the emoji from the rules. moved the titlebar and stuff out from the pages to the layout so it gets applied everywere. will need to work on the title changing but that should be easy.
This commit is contained in:
@@ -1,18 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
export let chart;
|
export let chart;
|
||||||
|
console.log(chart, chart.x != [''], chart.x);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="chart-display">
|
<div class="chart-display">
|
||||||
{#if chart && chart.x && chart.y}
|
{#if chart.x.length > 1}
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">X-Axis (Horizontal)</div>
|
<div class="axis-label">X-Axis (Horizontal)</div>
|
||||||
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
<div>{chart.x[0]} ↔ {chart.x[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="axis">
|
<div class="axis">
|
||||||
<div class="axis-label">Y-Axis (Vertical)</div>
|
<div class="axis-label">Y-Axis (Vertical)</div>
|
||||||
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
<div>{chart.y[0]} ↔ {chart.y[1]}</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="empty-state">Click Generate!</div>
|
<div class="empty-state">Click Generate!</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
<script>
|
<script>
|
||||||
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
||||||
export let currentTheme;
|
export let currentTheme;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
{#each themeNames as theme}
|
{#each themeNames as theme}
|
||||||
<button
|
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
||||||
on:click={() => currentTheme = theme}
|
{themeDisplayNames[theme]}
|
||||||
class:active={currentTheme === theme}
|
</button>
|
||||||
>
|
{/each}
|
||||||
{themeDisplayNames[theme]}
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.button-row {
|
.button-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 1rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 10px;
|
button {
|
||||||
}
|
max-width: 33%;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
/* Base styles that apply to all themes */
|
/* Base styles that apply to all themes */
|
||||||
.container {
|
.container {
|
||||||
padding: 20px;
|
padding: 2rem;
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.window {
|
.window {
|
||||||
@@ -17,6 +16,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
span{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.home-button {
|
.home-button {
|
||||||
@@ -81,6 +83,5 @@ button {
|
|||||||
.empty-state {
|
.empty-state {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
@@ -1,29 +1,64 @@
|
|||||||
<script>
|
<script>
|
||||||
import '$lib/styles/themes.js';
|
import '$lib/styles/themes.js';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
import { setContext } from 'svelte';
|
import { setContext } from 'svelte';
|
||||||
|
|
||||||
// Create a theme store that persists across pages
|
// Create a theme store that persists across pages
|
||||||
const theme = writable('win95');
|
const theme = writable('win95');
|
||||||
setContext('theme', theme);
|
setContext('theme', theme);
|
||||||
|
|
||||||
let currentTheme;
|
let currentTheme;
|
||||||
theme.subscribe(value => {
|
theme.subscribe((value) => {
|
||||||
currentTheme = value;
|
currentTheme = value;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="app-container theme-{currentTheme}">
|
<div class="app-container theme-{currentTheme}">
|
||||||
<slot />
|
<div class="wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<div class="window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<a href="/" class="back-button">←Back</a>
|
||||||
|
<span>A Sludge & Friends game</span>
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:global(body) {
|
:global(body) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.back-button {
|
||||||
|
padding: 5px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.app-container {
|
.container {
|
||||||
min-height: 100vh;
|
width: 100%;
|
||||||
}
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -1,142 +1,117 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
import ThemeSelector from '$components/themeSelector.svelte';
|
||||||
|
|
||||||
const themeStore = getContext('theme');
|
const themeStore = getContext('theme');
|
||||||
let currentTheme = $themeStore;
|
let currentTheme = $themeStore;
|
||||||
|
|
||||||
$: themeStore.set(currentTheme);
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="home-wrapper">
|
<div class="home-content">
|
||||||
<div class="home-container">
|
<h1 class="title">On the Spectrum!</h1>
|
||||||
<div class="home-window">
|
<p class="subtitle">Well.. are ya?</p>
|
||||||
<div class="home-title-bar">
|
|
||||||
<span>A Sludge & Friends game</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="home-content">
|
<div class="tabs">
|
||||||
<h1 class="title">On the Spectrum!</h1>
|
<a href="/play" class="tab-button">
|
||||||
<p class="subtitle">Well.. are ya?</p>
|
<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 class="tabs">
|
<div class="theme-selector-container">
|
||||||
<a href="/play" class="tab-button">
|
<fieldset>
|
||||||
<span class="tab-icon">Play</span>
|
<legend>Theme Selector</legend>
|
||||||
</a>
|
<ThemeSelector bind:currentTheme />
|
||||||
<a href="/rules" class="tab-button">
|
</fieldset>
|
||||||
<span class="tab-icon">Rules</span>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="theme-selector-container">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Theme Selector</legend>
|
|
||||||
<ThemeSelector bind:currentTheme />
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.home-wrapper {
|
.home-content {
|
||||||
min-height: 100vh;
|
padding: 40px;
|
||||||
display: flex;
|
text-align: center;
|
||||||
align-items: center;
|
}
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-container {
|
.title {
|
||||||
width: 100%;
|
font-size: 3rem;
|
||||||
max-width: 700px;
|
font-weight: bold;
|
||||||
}
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
.home-window {
|
.subtitle {
|
||||||
width: 100%;
|
font-size: 1.3rem;
|
||||||
}
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
.home-content {
|
.tabs {
|
||||||
padding: 40px;
|
display: flex;
|
||||||
text-align: center;
|
gap: 20px;
|
||||||
}
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.tab-button {
|
||||||
font-size: 3rem;
|
border: none;
|
||||||
font-weight: bold;
|
border-radius: 10px;
|
||||||
margin-bottom: 1rem;
|
padding: 25px 40px;
|
||||||
line-height: 1.2;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
.subtitle {
|
.tab-icon {
|
||||||
font-size: 1.3rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 2.5rem;
|
}
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
.theme-selector-container {
|
||||||
display: flex;
|
margin-top: 2rem;
|
||||||
gap: 20px;
|
}
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button {
|
.theme-selector-container fieldset {
|
||||||
border: none;
|
padding: 20px;
|
||||||
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 {
|
.theme-selector-container legend {
|
||||||
font-size: 2.5rem;
|
font-weight: bold;
|
||||||
}
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-selector-container {
|
@media (max-width: 768px) {
|
||||||
margin-top: 2rem;
|
.title {
|
||||||
}
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-selector-container fieldset {
|
.subtitle {
|
||||||
padding: 20px;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-selector-container legend {
|
.tab-button {
|
||||||
font-weight: bold;
|
padding: 20px 30px;
|
||||||
padding: 0 10px;
|
font-size: 1.1rem;
|
||||||
}
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.tab-icon {
|
||||||
.title {
|
font-size: 2rem;
|
||||||
font-size: 2rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
.home-content {
|
||||||
font-size: 1.1rem;
|
padding: 30px 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.tab-button {
|
|
||||||
padding: 20px 30px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-icon {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-content {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,76 +1,84 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { xAxes, yAxes } from '$lib';
|
||||||
import xAxes from '$lib/data/xAxes.js';
|
import ChartDisplay from '$components/chartDisplay.svelte';
|
||||||
import yAxes from '$lib/data/yAxes.js';
|
import DiceRoller from '$components/diceRoller.svelte';
|
||||||
import ChartDisplay from '$components/ChartDisplay.svelte';
|
|
||||||
import DiceRoller from '$components/DiceRoller.svelte';
|
|
||||||
import ThemeSelector from '$components/ThemeSelector.svelte';
|
|
||||||
import Toggle from '$components/Toggle.svelte';
|
|
||||||
|
|
||||||
const theme = getContext('theme');
|
let adultMode = $state(false);
|
||||||
let currentTheme;
|
let currentChart = $state({ x: [''], y: [''] });
|
||||||
theme.subscribe(value => {
|
let diceRoll = $state({ x: 0, y: 0 });
|
||||||
currentTheme = value;
|
|
||||||
});
|
|
||||||
|
|
||||||
let adultMode = false;
|
function generateChart() {
|
||||||
let currentChart = null;
|
const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
|
||||||
let diceRoll = null;
|
const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
|
||||||
|
|
||||||
function generateChart() {
|
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
||||||
const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
|
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
||||||
const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
|
|
||||||
|
|
||||||
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
currentChart = {
|
||||||
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
x: randomX.values,
|
||||||
|
y: randomY.values
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
currentChart = {
|
function rollDice() {
|
||||||
x: randomX.values,
|
diceRoll = {
|
||||||
y: randomY.values
|
x: Math.floor(Math.random() * 10) + 1,
|
||||||
};
|
y: Math.floor(Math.random() * 10) + 1
|
||||||
}
|
};
|
||||||
|
}
|
||||||
function rollDice() {
|
|
||||||
diceRoll = {
|
|
||||||
x: Math.floor(Math.random() * 10) + 1,
|
|
||||||
y: Math.floor(Math.random() * 10) + 1
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="window">
|
<div class="window">
|
||||||
<div class="title-bar">
|
<fieldset>
|
||||||
<a href="/" class="home-button">← Home</a>
|
<legend>Chart Generator</legend>
|
||||||
<span>On the Spectrum - Party Game</span>
|
<ChartDisplay chart={currentChart} />
|
||||||
</div>
|
<div class="button-row">
|
||||||
|
<button onclick={generateChart}>Generate</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<div class="window-body">
|
<fieldset>
|
||||||
<!-- <fieldset>
|
<legend>Position Roller</legend>
|
||||||
<legend>Adult Mode (18+)</legend>
|
<DiceRoller {diceRoll} />
|
||||||
<Toggle bind:checked={adultMode} />
|
<div class="button-row">
|
||||||
</fieldset> -->
|
<button onclick={rollDice}>Roll Dice</button>
|
||||||
|
</div>
|
||||||
<fieldset>
|
</fieldset>
|
||||||
<legend>Chart Generator</legend>
|
</div>
|
||||||
<ChartDisplay chart={currentChart} />
|
|
||||||
<div class="button-row">
|
|
||||||
<button on:click={generateChart}>Generate</button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Position Roller</legend>
|
|
||||||
<DiceRoller roll={diceRoll} />
|
|
||||||
<div class="button-row">
|
|
||||||
<button on:click={rollDice}>Roll Dice</button>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Theme Selector</legend>
|
|
||||||
<ThemeSelector bind:currentTheme={$theme} />
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.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>
|
||||||
|
|
||||||
|
|||||||
@@ -1,187 +1,149 @@
|
|||||||
<script>
|
<script>
|
||||||
import { getContext } from 'svelte';
|
import { getContext } from 'svelte';
|
||||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
import ThemeSelector from '$components/themeSelector.svelte';
|
||||||
|
|
||||||
const themeStore = getContext('theme');
|
const themeStore = getContext('theme');
|
||||||
let currentTheme = $themeStore;
|
let currentTheme = $themeStore;
|
||||||
|
|
||||||
$: themeStore.set(currentTheme);
|
$: themeStore.set(currentTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="rules-wrapper">
|
<div class="window-body">
|
||||||
<div class="rules-container">
|
<fieldset>
|
||||||
<div class="window">
|
<legend>Theme Selector</legend>
|
||||||
<div class="title-bar">
|
<ThemeSelector bind:currentTheme />
|
||||||
<a href="/" class="back-button">← Back</a>
|
</fieldset>
|
||||||
<span>Rules</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="window-body">
|
<div class="rules-content">
|
||||||
<fieldset>
|
<h1>How to Play</h1>
|
||||||
<legend>Theme Selector</legend>
|
|
||||||
<ThemeSelector bind:currentTheme />
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<div class="rules-content">
|
<section>
|
||||||
<h1>How to Play</h1>
|
<h2>Basic Gameplay</h2>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10
|
||||||
|
being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a
|
||||||
|
phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other
|
||||||
|
players.
|
||||||
|
</li>
|
||||||
|
<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Basic Gameplay</h2>
|
<h2>Understanding the Scale</h2>
|
||||||
<ol>
|
<p>Each axis uses a 1-10 scale:</p>
|
||||||
<li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
|
<ul>
|
||||||
<li><strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10 being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other players.</li>
|
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
||||||
<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
|
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
||||||
</ol>
|
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
||||||
</section>
|
<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
|
||||||
|
<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Understanding the Scale</h2>
|
<h2>Scoring (Optional)</h2>
|
||||||
<p>Each axis uses a 1-10 scale:</p>
|
<p>Want to make it competitive? Try these scoring systems:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
||||||
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
<li><strong>4 Points:</strong> 1 away</li>
|
||||||
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
<li><strong>3 Points:</strong> 2 away</li>
|
||||||
<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
|
<li><strong>2 Points:</strong> 3 away</li>
|
||||||
<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
|
<li><strong>1 Points:</strong> 4 away</li>
|
||||||
</ul>
|
<li><strong>0 Points:</strong> 5+ away</li>
|
||||||
</section>
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Scoring (Optional)</h2>
|
<h2>About Themes</h2>
|
||||||
<p>Want to make it competitive? Try these scoring systems:</p>
|
<p>Choose from six visual themes to customize your experience:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
||||||
<li><strong>4 Points:</strong> 1 away</li>
|
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
||||||
<li><strong>3 Points:</strong> 2 away</li>
|
<li><strong>Typewriter:</strong> Classic vintage paper look</li>
|
||||||
<li><strong>2 Points:</strong> 3 away</li>
|
<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
|
||||||
<li><strong>1 Points:</strong> 4 away</li>
|
<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
|
||||||
<li><strong>0 Points:</strong> 5+ away</li>
|
<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>About Themes</h2>
|
<h2>FAQ</h2>
|
||||||
<p>Choose from six visual themes to customize your experience:</p>
|
<p>
|
||||||
<ul>
|
<strong>Can I play solo?</strong><br />
|
||||||
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
While designed for groups, you can use it for self-reflection or to prep for game night!
|
||||||
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
</p>
|
||||||
<li><strong>Typewriter:</strong> Classic vintage paper look</li>
|
|
||||||
<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
|
|
||||||
<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
|
|
||||||
<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
|
|
||||||
</ul>
|
|
||||||
<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<p>
|
||||||
<h2>FAQ</h2>
|
<strong>How many spectrums are there?</strong><br />
|
||||||
<p><strong>Can I play solo?</strong><br>
|
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
|
||||||
While designed for groups, you can use it for self-reflection or to prep for game night!</p>
|
</p>
|
||||||
|
|
||||||
<p><strong>How many spectrums are there?</strong><br>
|
<p>
|
||||||
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
|
<strong>What if I'm perfectly neutral?</strong><br />
|
||||||
|
Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!
|
||||||
|
</p>
|
||||||
|
|
||||||
<p><strong>What if I'm perfectly neutral?</strong><br>
|
<p>
|
||||||
Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!</p>
|
<strong>Can we make our own rules?</strong><br />
|
||||||
|
Absolutely! These are guidelines. House rules are encouraged!
|
||||||
<p><strong>Can we make our own rules?</strong><br>
|
</p>
|
||||||
Absolutely! These are guidelines. House rules are encouraged!</p>
|
</section>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.rules-wrapper {
|
.rules-content {
|
||||||
min-height: 100vh;
|
padding: 20px 0;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-container {
|
h1 {
|
||||||
width: 100%;
|
font-size: 2.5rem;
|
||||||
max-width: 900px;
|
margin-bottom: 30px;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.title-bar {
|
h2 {
|
||||||
display: flex;
|
font-size: 1.8rem;
|
||||||
align-items: center;
|
margin-top: 30px;
|
||||||
gap: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
section {
|
||||||
padding: 5px 15px;
|
margin-bottom: 30px;
|
||||||
cursor: pointer;
|
}
|
||||||
border-radius: 4px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-content {
|
p {
|
||||||
padding: 20px 0;
|
line-height: 1.6;
|
||||||
}
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
ol,
|
||||||
font-size: 2.5rem;
|
ul {
|
||||||
margin-bottom: 30px;
|
line-height: 1.8;
|
||||||
text-align: center;
|
padding-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
li {
|
||||||
font-size: 1.8rem;
|
margin-bottom: 10px;
|
||||||
margin-top: 30px;
|
}
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
strong {
|
||||||
font-size: 1.3rem;
|
font-weight: bold;
|
||||||
margin-top: 20px;
|
}
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
@media (max-width: 768px) {
|
||||||
margin-bottom: 30px;
|
h1 {
|
||||||
}
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
h2 {
|
||||||
line-height: 1.6;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 10px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
line-height: 1.8;
|
|
||||||
padding-left: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.rules-wrapper {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user