Initial commit
This commit is contained in:
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"workbench.colorCustomizations": {
|
||||||
|
"tree.indentGuidesStroke": "#3d92ec",
|
||||||
|
"activityBar.background": "#3A2A1B",
|
||||||
|
"titleBar.activeBackground": "#513B25",
|
||||||
|
"titleBar.activeForeground": "#FCFAF8"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
README.md
Normal file
31
README.md
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
# Last Days of Rome
|
||||||
|
|
||||||
|
This is a simple web-based game where you play as a citizen in the failing Roman Empire. The emperor is trying to burn the city to the ground, and you must escape before it's too late.
|
||||||
|
|
||||||
|
## How to Play
|
||||||
|
|
||||||
|
The goal of the game is to escape the city by reaching a **Relocation** score of 10. You lose if your **Flames** or **Desolation** score reaches 10.
|
||||||
|
|
||||||
|
Each turn, you roll the dice to see what happens in the city. The events will affect your scores.
|
||||||
|
|
||||||
|
You can also try to assassinate the emperor. This is a risky move, but if you succeed, you win the game (though you die a martyr).
|
||||||
|
|
||||||
|
## Technical Details
|
||||||
|
|
||||||
|
This project is built using:
|
||||||
|
|
||||||
|
* **Frontend:** HTML, CSS, JavaScript
|
||||||
|
* **Backend:** PHP
|
||||||
|
|
||||||
|
## How to Run Locally
|
||||||
|
|
||||||
|
To run this project locally, you need a PHP server. You can use a local development environment like XAMPP or MAMP, or you can use the built-in PHP server.
|
||||||
|
|
||||||
|
1. Clone this repository.
|
||||||
|
2. Start a PHP server in the project directory. For example, you can run the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
php -S localhost:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Open your web browser and go to `http://localhost:8000`.
|
||||||
146
game.php
Normal file
146
game.php
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
if (!isset($_SESSION['scores'])) {
|
||||||
|
$_SESSION['scores'] = [
|
||||||
|
'flames' => 0,
|
||||||
|
'desolation' => 0,
|
||||||
|
'relocation' => 0,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
$action = $_GET['action'] ?? '';
|
||||||
|
|
||||||
|
if ($action === 'roll_dice') {
|
||||||
|
$event = roll_dice();
|
||||||
|
$gameState = check_game_state();
|
||||||
|
echo json_encode([
|
||||||
|
'scores' => $_SESSION['scores'],
|
||||||
|
'event' => $event,
|
||||||
|
'gameState' => $gameState,
|
||||||
|
]);
|
||||||
|
} elseif ($action === 'assassinate') {
|
||||||
|
$assassinationResult = assassinate();
|
||||||
|
echo json_encode([
|
||||||
|
'event' => $assassinationResult['event'],
|
||||||
|
'gameState' => $assassinationResult['gameState'],
|
||||||
|
]);
|
||||||
|
} elseif ($action === 'reset_game') {
|
||||||
|
$_SESSION['scores'] = [
|
||||||
|
'flames' => 0,
|
||||||
|
'desolation' => 0,
|
||||||
|
'relocation' => 0,
|
||||||
|
];
|
||||||
|
echo json_encode([
|
||||||
|
'scores' => $_SESSION['scores'],
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function roll_dice() {
|
||||||
|
$roll = rand(1, 6);
|
||||||
|
$event = '';
|
||||||
|
|
||||||
|
if ($roll <= 3) {
|
||||||
|
$event = 'In the Imperial Palace: ' . imperial_palace_event();
|
||||||
|
} elseif ($roll <= 5) {
|
||||||
|
$event = 'Relative Unrest: ' . relative_unrest_event();
|
||||||
|
} else {
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$event = 'The fires spread. +1 Flames.';
|
||||||
|
}
|
||||||
|
return $event;
|
||||||
|
}
|
||||||
|
|
||||||
|
function imperial_palace_event() {
|
||||||
|
$roll = rand(1, 6);
|
||||||
|
$event = '';
|
||||||
|
switch ($roll) {
|
||||||
|
case 1:
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$event = 'The emperor fiddles with manic glee. +1 Flames.';
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
$_SESSION['scores']['desolation']++;
|
||||||
|
$_SESSION['scores']['relocation']++;
|
||||||
|
$event = 'The emperor raises another horse to the position of senator. +1 Desolation, +1 Relocation.';
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
$_SESSION['scores']['relocation']++;
|
||||||
|
$event = 'It\'s execution night at the palace. +1 Relocation.';
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
$_SESSION['scores']['desolation']++;
|
||||||
|
$event = 'The emperor screams like a baby. +1 Desolation.';
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$_SESSION['scores']['relocation']++;
|
||||||
|
$event = 'The emperor sits in front of the flame and commands it to obey. It does not. +1 Flames, +1 Relocation.';
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$event = 'Work continues on a house made of pure gold. It keeps melting. +1 Flames.';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return $event;
|
||||||
|
}
|
||||||
|
|
||||||
|
function relative_unrest_event() {
|
||||||
|
$roll = rand(1, 6);
|
||||||
|
$event = '';
|
||||||
|
switch ($roll) {
|
||||||
|
case 1:
|
||||||
|
$_SESSION['scores']['relocation']++;
|
||||||
|
$event = 'People complain - this is unacceptable. Then they go about their business. +1 Relocation.';
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
$_SESSION['scores']['desolation']++;
|
||||||
|
$event = 'There are no goods at market. +1 Desolation.';
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
$_SESSION['scores']['relocation']++;
|
||||||
|
$event = 'You receive a letter asking you to reassert your faith in the emperor. In writing. +1 Relocation.';
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
$_SESSION['scores']['desolation']++;
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$event = 'Lions are released onto the streets. +1 Desolation, +1 Flames.';
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
$_SESSION['scores']['desolation']++;
|
||||||
|
$event = 'Is Rome really over? +1 Desolation.';
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
$_SESSION['scores']['flames']++;
|
||||||
|
$event = 'The burnings will continue until morale improves. +1 Flames.';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return $event;
|
||||||
|
}
|
||||||
|
|
||||||
|
function assassinate() {
|
||||||
|
$desolation = $_SESSION['scores']['desolation'];
|
||||||
|
$total = 0;
|
||||||
|
for ($i = 0; $i < $desolation; $i++) {
|
||||||
|
$total += rand(1, 6);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($total >= 20) {
|
||||||
|
return ['event' => 'You have assassinated the emperor! You die a martyr.', 'gameState' => 'win_assassination'];
|
||||||
|
} else {
|
||||||
|
return ['event' => 'Your attempt to assassinate the emperor has failed. You are executed.', 'gameState' => 'loss_assassination'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function check_game_state() {
|
||||||
|
if ($_SESSION['scores']['flames'] >= 10) {
|
||||||
|
return 'loss_flames';
|
||||||
|
}
|
||||||
|
if ($_SESSION['scores']['desolation'] >= 10) {
|
||||||
|
return 'loss_desolation';
|
||||||
|
}
|
||||||
|
if ($_SESSION['scores']['relocation'] >= 10) {
|
||||||
|
return 'win';
|
||||||
|
}
|
||||||
|
return 'ongoing';
|
||||||
|
}
|
||||||
46
index.php
Normal file
46
index.php
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Last Days of Rome</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="theme-switcher">
|
||||||
|
<button id="theme-switch">Toggle Theme</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Last Days of Rome</h1>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button id="roll-button">Roll the Dice</button>
|
||||||
|
<button id="assassinate-button">Try to Assassinate the Emperor</button>
|
||||||
|
<button id="new-game-button" style="display: none;">New Game</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<p>You are a citizen in a relatively successful empire. Aalas, the new emperor has arrived, and he's decided that the best thing for everyone would be to burn it all to the ground with you all still inside it. Nothing to be done but carry on as usual, you suppose. He is, after all, the emperor.</p>
|
||||||
|
|
||||||
|
<p>Each turn, roll the dice to see what happens in the imperial palace and in the city. Your goal is to escape the city (Relocation reaches 10) before you're consumed by the flames (Flames reaches 10) or the empire falls and you die in the collapse (Desolation reaches 10).</p>
|
||||||
|
|
||||||
|
<p>You can also attempt to assassinate the emperor. This is risky, but if you succeed, you win the game (you die, but you go out as a martyr, so there's that).</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="scores">
|
||||||
|
<h2>Flames: <span id="flames">0</span></h2>
|
||||||
|
<h2>Desolation: <span id="desolation">0</span></h2>
|
||||||
|
<h2>Relocation: <span id="relocation">0</span></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="log">
|
||||||
|
<h2>Event Log</h2>
|
||||||
|
<ul id="log-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
last-days-of-rome.md
Normal file
85
last-days-of-rome.md
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
# LAST DAYS OF ROME
|
||||||
|
|
||||||
|
You are a citizen in a relatively successful empire. Aalas, the new emperor has arrived, and he's decided that the best thing for everyone would be to burn it all to the ground with you all still inside it. Nothing to be done but carry on as usual, you suppose. He is, after all, the emperor
|
||||||
|
|
||||||
|
## RULES
|
||||||
|
|
||||||
|
You have three scores, which starts O:
|
||||||
|
|
||||||
|
- **FLAMES**
|
||||||
|
- **DESOLATION**
|
||||||
|
- **RELOCATION**
|
||||||
|
|
||||||
|
## WHAT AN ADVANCED SOCIETY WE ARE
|
||||||
|
|
||||||
|
To start the game, you generate a new City Event by rolling a six-sided die (d6). Adjust your scores as directed by the table (or subtable), then roll a new event. Keep rolling new events until one of the following occurs:
|
||||||
|
|
||||||
|
1. If your **FLAMES** score reaches 1O, your house is finally consumed by the spreading wildfires, and you are burned alive in the process. You saw it coming, of course. That knowledge comforts you.
|
||||||
|
|
||||||
|
2. If your **DESOLATION** score reaches 1O, then society breaks down completely and you are killed in the rampage. If it makes any difference to you, then you should know that there is no such thing as an emperor in a wasteland. He shall rule over ashes.
|
||||||
|
|
||||||
|
3. If your **RELOCATION** score reaches 10, you come to your senses and gather your belongings, striking out into the unknown. Maybe you'll find a better life out there,away from fiddling emperors. You'll probably be eaten by wolves,but you should take the chance.
|
||||||
|
|
||||||
|
## WE SHOULD TOTALLY JUST KILL CAESAR
|
||||||
|
|
||||||
|
At any time you can declare that "we should totally just kill Caesar". Roll a number of d6 equal to the current number of your DESOLATION score,and add up the dice.If the total result is 2O or more,then you assassinate the emperor. You die either way, but if you pull it off then it will be immensely satisfying.
|
||||||
|
|
||||||
|
## CITY EVENTS (ROLL A D6)
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>1, 2, or 3</td><td>In the Imperial Palace</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4 or 5</td><td>Relative Unrest</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6</td><td>Add 1 to your FLAMES score</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
## IN THE IMPERIAL PALACE (ROLL A D6)
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>1</td><td>The emperor fiddles with manic glee. It's not tuneful.</td><td>+1 FLAMES</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td><td>The emperor raises another horse to the position of senator</td><td>+1 DESOLATION<br>+1 RELOCATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td><td>It's execution night at the palace. Participants are selected based on performance reviews.</td><td>+1 RELOCATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td><td>The emperor screams like a baby. Why does the world not bend to his whims?</td><td>+1 DESOLATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>5</td><td>The emperor sits in front of the flame and *commands* it to obey. It does not.</td><td>+1 FLAMES<br>+1 RELOCATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6</td><td>Work continues on a house made of pure gold. It keeps melting.</td><td>+1 FLAMES</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
## RELATIVE UNREST (ROLL A D6)
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>1</td><td>People complain - this is unacceptable. Then they go about their business.</td><td>+1 RELOCATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td><td>There are no goods at market. "If you have no bread,then eat shit" is the word from the palace</td><td>+1 DESOLATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td><td>You receive a letter asking you to reassert your faith in the emperor. In writing.</td><td>+1 RELOCATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td><td>Lions are released onto the streets in an attempt to calm the population.</td><td>+1 DESOLATION<br>+1 FLAMES</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>5</td><td>Is Rome really over? It's hard to say. Who knew burning a city took this long?</td><td>+1 DESOLATION</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6</td><td>The Emperor decrees that the burnings will continue until morale improves.</td><td>+1 FLAMES</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
BIN
last-days-of-rome.pdf
Normal file
BIN
last-days-of-rome.pdf
Normal file
Binary file not shown.
90
script.js
Normal file
90
script.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const rollButton = document.getElementById('roll-button');
|
||||||
|
const assassinateButton = document.getElementById('assassinate-button');
|
||||||
|
const newGameButton = document.getElementById('new-game-button');
|
||||||
|
const themeSwitchButton = document.getElementById('theme-switch');
|
||||||
|
const flamesScore = document.getElementById('flames');
|
||||||
|
const desolationScore = document.getElementById('desolation');
|
||||||
|
const relocationScore = document.getElementById('relocation');
|
||||||
|
const logList = document.getElementById('log-list');
|
||||||
|
|
||||||
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
|
||||||
|
if (savedTheme) {
|
||||||
|
document.body.setAttribute('data-theme', savedTheme);
|
||||||
|
} else if (prefersDark) {
|
||||||
|
document.body.setAttribute('data-theme', 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
themeSwitchButton.addEventListener('click', () => {
|
||||||
|
const currentTheme = document.body.getAttribute('data-theme');
|
||||||
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
|
document.body.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
rollButton.addEventListener('click', () => {
|
||||||
|
fetch('game.php?action=roll_dice')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
updateScores(data.scores);
|
||||||
|
logEvent(data.event);
|
||||||
|
checkGameState(data.gameState);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
assassinateButton.addEventListener('click', () => {
|
||||||
|
fetch('game.php?action=assassinate')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
logEvent(data.event);
|
||||||
|
checkGameState(data.gameState);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
newGameButton.addEventListener('click', () => {
|
||||||
|
fetch('game.php?action=reset_game')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
updateScores(data.scores);
|
||||||
|
logList.innerHTML = '';
|
||||||
|
rollButton.disabled = false;
|
||||||
|
assassinateButton.disabled = false;
|
||||||
|
newGameButton.style.display = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateScores(scores) {
|
||||||
|
flamesScore.textContent = scores.flames;
|
||||||
|
desolationScore.textContent = scores.desolation;
|
||||||
|
relocationScore.textContent = scores.relocation;
|
||||||
|
}
|
||||||
|
|
||||||
|
function logEvent(event) {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.textContent = event;
|
||||||
|
logList.prepend(li);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkGameState(gameState) {
|
||||||
|
if (gameState !== 'ongoing') {
|
||||||
|
rollButton.disabled = true;
|
||||||
|
assassinateButton.disabled = true;
|
||||||
|
newGameButton.style.display = 'block';
|
||||||
|
let message = '';
|
||||||
|
if (gameState === 'win') {
|
||||||
|
message = 'You have escaped the city! You win!';
|
||||||
|
} else if (gameState === 'loss_flames') {
|
||||||
|
message = 'You were burned alive. You lose.';
|
||||||
|
} else if (gameState === 'loss_desolation') {
|
||||||
|
message = 'You were killed in the rampage. You lose.';
|
||||||
|
} else if (gameState === 'win_assassination') {
|
||||||
|
message = 'You have assassinated the emperor! You die a martyr, but you win!';
|
||||||
|
} else if (gameState === 'loss_assassination') {
|
||||||
|
message = 'Your attempt to assassinate the emperor has failed. You are executed. You lose.';
|
||||||
|
}
|
||||||
|
setTimeout(() => alert(message), 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
140
style.css
Normal file
140
style.css
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
:root {
|
||||||
|
--background-color-light: #f4f4f4;
|
||||||
|
--text-color-light: #333;
|
||||||
|
--h1-color-light: #a00;
|
||||||
|
--log-background-color-light: #fff;
|
||||||
|
--log-border-color-light: #a00;
|
||||||
|
|
||||||
|
--background-color-dark: #333;
|
||||||
|
--text-color-dark: #f4f4f4;
|
||||||
|
--h1-color-dark: #f4f4f4;
|
||||||
|
--log-background-color-dark: #444;
|
||||||
|
--log-border-color-dark: #f4f4f4;
|
||||||
|
|
||||||
|
--button-background-color: #a00;
|
||||||
|
--button-text-color: #fff;
|
||||||
|
--button-hover-background-color: #c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='light'] {
|
||||||
|
background-color: var(--background-color-light);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='dark'] {
|
||||||
|
background-color: var(--background-color-dark);
|
||||||
|
color: var(--text-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-switcher {
|
||||||
|
position: absolute;
|
||||||
|
right: .75rem;
|
||||||
|
top: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-switch {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='light'] #theme-switch {
|
||||||
|
border-color: var(--text-color-light);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='dark'] #theme-switch {
|
||||||
|
border-color: var(--text-color-dark);
|
||||||
|
color: var(--text-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 1.25rem;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { color: var(--h1-color-light); }
|
||||||
|
|
||||||
|
body[data-theme='dark'] h1 { color: var(--h1-color-dark); }
|
||||||
|
|
||||||
|
.scores {
|
||||||
|
border: 1px solid;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
padding: .75rem 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='light'] .scores {
|
||||||
|
border-color: var(--text-color-light);
|
||||||
|
color: var(--text-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='dark'] .scores {
|
||||||
|
border-color: var(--text-color-dark);
|
||||||
|
color: var(--text-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
background-color: var(--button-background-color);
|
||||||
|
border: none;
|
||||||
|
color: var(--button-text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1em;
|
||||||
|
margin: 0 .5rem 1.5rem;
|
||||||
|
padding: .5rem 1.5rem;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&:hover { background-color: var(--button-hover-background-color); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
max-width: 64rem;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log li {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
padding: .5rem;
|
||||||
|
transition: background-color 0.3s, border-left-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='light'] .log li {
|
||||||
|
background: var(--log-background-color-light);
|
||||||
|
border-left: 5px solid var(--log-border-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body[data-theme='dark'] .log li {
|
||||||
|
background: var(--log-background-color-dark);
|
||||||
|
border-left: 5px solid var(--log-border-color-dark);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user