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>
|
||||
export let chart;
|
||||
export let chart;
|
||||
console.log(chart, chart.x != [''], chart.x);
|
||||
</script>
|
||||
|
||||
<div class="chart-display">
|
||||
{#if chart && chart.x && chart.y}
|
||||
<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>
|
||||
{#if chart.x.length > 1}
|
||||
<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>
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<script>
|
||||
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
||||
export let currentTheme;
|
||||
import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
|
||||
export let currentTheme;
|
||||
</script>
|
||||
|
||||
<div class="button-row">
|
||||
{#each themeNames as theme}
|
||||
<button
|
||||
on:click={() => currentTheme = theme}
|
||||
class:active={currentTheme === theme}
|
||||
>
|
||||
{themeDisplayNames[theme]}
|
||||
</button>
|
||||
{/each}
|
||||
{#each themeNames as theme}
|
||||
<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
|
||||
{themeDisplayNames[theme]}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
button {
|
||||
max-width: 33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
/* Base styles that apply to all themes */
|
||||
.container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.window {
|
||||
@@ -17,6 +16,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
span{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.home-button {
|
||||
@@ -81,6 +83,5 @@ button {
|
||||
.empty-state {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +1,64 @@
|
||||
<script>
|
||||
import '$lib/styles/themes.js';
|
||||
import { writable } from 'svelte/store';
|
||||
import { setContext } from 'svelte';
|
||||
import '$lib/styles/themes.js';
|
||||
import { writable } from 'svelte/store';
|
||||
import { setContext } from 'svelte';
|
||||
|
||||
// Create a theme store that persists across pages
|
||||
const theme = writable('win95');
|
||||
setContext('theme', theme);
|
||||
// Create a theme store that persists across pages
|
||||
const theme = writable('win95');
|
||||
setContext('theme', theme);
|
||||
|
||||
let currentTheme;
|
||||
theme.subscribe(value => {
|
||||
currentTheme = value;
|
||||
});
|
||||
let currentTheme;
|
||||
theme.subscribe((value) => {
|
||||
currentTheme = value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:global(body) {
|
||||
margin: 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;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.window {
|
||||
width: 100%;
|
||||
}
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -1,142 +1,117 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import ThemeSelector from '$components/themeSelector.svelte';
|
||||
|
||||
const themeStore = getContext('theme');
|
||||
let currentTheme = $themeStore;
|
||||
|
||||
$: themeStore.set(currentTheme);
|
||||
const themeStore = getContext('theme');
|
||||
let currentTheme = $themeStore;
|
||||
|
||||
$: themeStore.set(currentTheme);
|
||||
</script>
|
||||
|
||||
<div class="home-wrapper">
|
||||
<div class="home-container">
|
||||
<div class="home-window">
|
||||
<div class="home-title-bar">
|
||||
<span>A Sludge & Friends game</span>
|
||||
</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">Play</span>
|
||||
</a>
|
||||
<a href="/rules" class="tab-button">
|
||||
<span class="tab-icon">Rules</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="home-content">
|
||||
<h1 class="title">On the Spectrum!</h1>
|
||||
<p class="subtitle">Well.. are ya?</p>
|
||||
|
||||
<div class="theme-selector-container">
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="theme-selector-container">
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.home-content {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-window {
|
||||
width: 100%;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.tab-button {
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.tab-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.theme-selector-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
border: none;
|
||||
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;
|
||||
}
|
||||
.theme-selector-container fieldset {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.theme-selector-container legend {
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.theme-selector-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.theme-selector-container fieldset {
|
||||
padding: 20px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.theme-selector-container legend {
|
||||
font-weight: bold;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.tab-button {
|
||||
padding: 20px 30px;
|
||||
font-size: 1.1rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 20px 30px;
|
||||
font-size: 1.1rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.home-content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,76 +1,84 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import xAxes from '$lib/data/xAxes.js';
|
||||
import yAxes from '$lib/data/yAxes.js';
|
||||
import ChartDisplay from '$components/ChartDisplay.svelte';
|
||||
import DiceRoller from '$components/DiceRoller.svelte';
|
||||
import ThemeSelector from '$components/ThemeSelector.svelte';
|
||||
import Toggle from '$components/Toggle.svelte';
|
||||
import { xAxes, yAxes } from '$lib';
|
||||
import ChartDisplay from '$components/chartDisplay.svelte';
|
||||
import DiceRoller from '$components/diceRoller.svelte';
|
||||
|
||||
const theme = getContext('theme');
|
||||
let currentTheme;
|
||||
theme.subscribe(value => {
|
||||
currentTheme = value;
|
||||
});
|
||||
let adultMode = $state(false);
|
||||
let currentChart = $state({ x: [''], y: [''] });
|
||||
let diceRoll = $state({ x: 0, y: 0 });
|
||||
|
||||
let adultMode = false;
|
||||
let currentChart = null;
|
||||
let diceRoll = null;
|
||||
function generateChart() {
|
||||
const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
|
||||
const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
|
||||
|
||||
function generateChart() {
|
||||
const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
|
||||
const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
|
||||
|
||||
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
||||
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
||||
|
||||
currentChart = {
|
||||
x: randomX.values,
|
||||
y: randomY.values
|
||||
};
|
||||
}
|
||||
const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
|
||||
const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
|
||||
|
||||
function rollDice() {
|
||||
diceRoll = {
|
||||
x: Math.floor(Math.random() * 10) + 1,
|
||||
y: Math.floor(Math.random() * 10) + 1
|
||||
};
|
||||
}
|
||||
currentChart = {
|
||||
x: randomX.values,
|
||||
y: randomY.values
|
||||
};
|
||||
}
|
||||
|
||||
function rollDice() {
|
||||
diceRoll = {
|
||||
x: Math.floor(Math.random() * 10) + 1,
|
||||
y: Math.floor(Math.random() * 10) + 1
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<a href="/" class="home-button">← Home</a>
|
||||
<span>On the Spectrum - Party Game</span>
|
||||
</div>
|
||||
|
||||
<div class="window-body">
|
||||
<!-- <fieldset>
|
||||
<legend>Adult Mode (18+)</legend>
|
||||
<Toggle bind:checked={adultMode} />
|
||||
</fieldset> -->
|
||||
<div class="window">
|
||||
<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 on:click={generateChart}>Generate</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Position Roller</legend>
|
||||
<DiceRoller {diceRoll} />
|
||||
<div class="button-row">
|
||||
<button onclick={rollDice}>Roll Dice</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
@@ -1,187 +1,149 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import ThemeSelector from '$components/themeSelector.svelte';
|
||||
|
||||
const themeStore = getContext('theme');
|
||||
let currentTheme = $themeStore;
|
||||
|
||||
$: themeStore.set(currentTheme);
|
||||
const themeStore = getContext('theme');
|
||||
let currentTheme = $themeStore;
|
||||
|
||||
$: themeStore.set(currentTheme);
|
||||
</script>
|
||||
|
||||
<div class="rules-wrapper">
|
||||
<div class="rules-container">
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<a href="/" class="back-button">← Back</a>
|
||||
<span>Rules</span>
|
||||
</div>
|
||||
|
||||
<div class="window-body">
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</fieldset>
|
||||
<div class="window-body">
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</fieldset>
|
||||
|
||||
<div class="rules-content">
|
||||
<h1>How to Play</h1>
|
||||
<div class="rules-content">
|
||||
<h1>How to Play</h1>
|
||||
|
||||
<section>
|
||||
<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>
|
||||
<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>
|
||||
<h2>Understanding the Scale</h2>
|
||||
<p>Each axis uses a 1-10 scale:</p>
|
||||
<ul>
|
||||
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
||||
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
||||
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
||||
<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>
|
||||
<h2>Understanding the Scale</h2>
|
||||
<p>Each axis uses a 1-10 scale:</p>
|
||||
<ul>
|
||||
<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
|
||||
<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
|
||||
<li><strong>5-6:</strong> Slightly prefer right/top</li>
|
||||
<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>
|
||||
<h2>Scoring (Optional)</h2>
|
||||
<p>Want to make it competitive? Try these scoring systems:</p>
|
||||
<ul>
|
||||
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
||||
<li><strong>4 Points:</strong> 1 away</li>
|
||||
<li><strong>3 Points:</strong> 2 away</li>
|
||||
<li><strong>2 Points:</strong> 3 away</li>
|
||||
<li><strong>1 Points:</strong> 4 away</li>
|
||||
<li><strong>0 Points:</strong> 5+ away</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Scoring (Optional)</h2>
|
||||
<p>Want to make it competitive? Try these scoring systems:</p>
|
||||
<ul>
|
||||
<li><strong>5 Points:</strong> On the Spectrum!</li>
|
||||
<li><strong>4 Points:</strong> 1 away</li>
|
||||
<li><strong>3 Points:</strong> 2 away</li>
|
||||
<li><strong>2 Points:</strong> 3 away</li>
|
||||
<li><strong>1 Points:</strong> 4 away</li>
|
||||
<li><strong>0 Points:</strong> 5+ away</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>About Themes</h2>
|
||||
<p>Choose from six visual themes to customize your experience:</p>
|
||||
<ul>
|
||||
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
||||
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
||||
<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>
|
||||
<h2>About Themes</h2>
|
||||
<p>Choose from six visual themes to customize your experience:</p>
|
||||
<ul>
|
||||
<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
|
||||
<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
|
||||
<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>
|
||||
<h2>FAQ</h2>
|
||||
<p><strong>Can I play solo?</strong><br>
|
||||
While designed for groups, you can use it for self-reflection or to prep for game night!</p>
|
||||
|
||||
<p><strong>How many spectrums are there?</strong><br>
|
||||
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
|
||||
|
||||
<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>Can we make our own rules?</strong><br>
|
||||
Absolutely! These are guidelines. House rules are encouraged!</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h2>FAQ</h2>
|
||||
<p>
|
||||
<strong>Can I play solo?</strong><br />
|
||||
While designed for groups, you can use it for self-reflection or to prep for game night!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>How many spectrums are there?</strong><br />
|
||||
Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
|
||||
</p>
|
||||
|
||||
<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>Can we make our own rules?</strong><br />
|
||||
Absolutely! These are guidelines. House rules are encouraged!
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.rules-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.rules-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.rules-container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.rules-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
line-height: 1.8;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
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>
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user