From 2d3ce1982c8ab2a2e161c7892c8ebb58d8e11e89 Mon Sep 17 00:00:00 2001
From: Talon <talon@iamtalon.me>
Date: Mon, 24 Apr 2023 13:23:56 +0200
Subject: [PATCH] CSS styles

---
 src/game/commands/dark.js |   3 +
 src/game/index.html       | 181 +++++++++++++++++++++++++++++++++-----
 src/game/index.js         |  76 ++++++++--------
 3 files changed, 202 insertions(+), 58 deletions(-)
 create mode 100644 src/game/commands/dark.js
diff --git a/src/game/commands/dark.js b/src/game/commands/dark.js
new file mode 100644
index 0000000..4ed7e6d
--- /dev/null
+++ b/src/game/commands/dark.js
@@ -0,0 +1,3 @@
+export default async function DarkCommand(args, context) {
+    document.body.classList.toggle('dark-theme');
+}
\ No newline at end of file
diff --git a/src/game/index.html b/src/game/index.html
index cee7ad7..233a351 100644
--- a/src/game/index.html
+++ b/src/game/index.html
@@ -1,22 +1,161 @@
-<html>
-<head>
-<title>Assassin bug</title>
-</head>
-<body>
-<h1>Assassin bug</h1>
-<div id="play-area" hidden=true>
-    <div aria-live="polite" id="output-area"></div>
-    <input type="text" id="input-area" placeholder="Type command" />
-</div>
-
-<div id="save-game-found" hidden=true>
-    <h1>Found a save game</h1>
-    <button id="load-save-game">Load</button>
-    <button id="start-new-game">New</button>
-</div>
-<div id="before-play">
-    <h1>Welcome</h1>
-    <button id="begin">Begin the adventure</button>
-</div>
-</body>
+<html>
+
+<head>
+    <title>Assassin bug</title>
+    <style>
+        /* General reset for browser default styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* Root CSS variables for easy customization */
+        :root {
+            --background-color: #2d3142;
+            --primary-color: #ef8354;
+            --secondary-color: #ffd462;
+            --text-color: #f5e7dc;
+            --font-family: 'Roboto', sans-serif;
+            --heading-font-family: 'Pacifico', cursive;
+            --font-size: 18px;
+            --line-height: 1.6;
+        }
+
+        /* Basic styling for the body, set background color, font-family, font-size and line-height */
+        body {
+            background-color: var(--background-color);
+            color: var(--text-color);
+            font-family: var(--font-family);
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+            padding: 2rem;
+        }
+
+        /* Header styles */
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: var(--heading-font-family);
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+
+        /* Paragraph and links styles */
+        p {
+            margin-bottom: 1rem;
+        }
+
+        a {
+            color: var(--primary-color);
+            text-decoration: none;
+        }
+
+        a:hover,
+        a:focus {
+            color: var(--secondary-color);
+        }
+
+        /* Game container styles */
+        .game-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Game command input styles */
+        input[type="text"] {
+            width: 100%;
+            padding: 0.5rem;
+            font-size: 1rem;
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 2px var(--secondary-color);
+        }
+
+        /* Button styles */
+        button {
+            background-color: var(--primary-color);
+            color: #fff;
+            padding: 0.5rem 1rem;
+            font-size: 1rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover,
+        button:focus {
+            background-color: var(--secondary-color);
+            outline: none;
+        }
+
+        /* Dark theme styles */
+        body.dark-theme {
+            background-color: #2d3142;
+            color: #f5e7dc;
+        }
+
+        body.dark-theme h1,
+        body.dark-theme h2,
+        body.dark-theme h3,
+        body.dark-theme h4,
+        body.dark-theme h5,
+        body.dark-theme h6 {
+            color: var(--primary-color);
+        }
+
+        body.dark-theme a {
+            color: var(--primary-color);
+        }
+
+        body.dark-theme a:hover,
+        body.dark-theme a:focus {
+            color: var(--secondary-color);
+        }
+
+        body.dark-theme input[type="text"]:focus {
+            border-color: var(--secondary-color);
+            box-shadow: 0 0 0 2px var(--secondary-color);
+        }
+
+        body.dark-theme button:hover,
+        body.dark-theme button:focus {
+            background-color: var(--secondary-color);
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Assassin bug</h1>
+    <div class="game-container" id="play-area" hidden=true>
+        <div aria-live="polite" id="output-area"></div>
+        <input type="text" id="input-area" placeholder="Type command" />
+    </div>
+
+    <div id="save-game-found" hidden=true>
+        <h1>Found a save game</h1>
+        <button id="load-save-game">Load</button>
+        <button id="start-new-game">New</button>
+    </div>
+    <div id="before-play">
+        <h1>Welcome</h1>
+        <button id="begin">Begin the adventure</button>
+    </div>
+</body>
+
 </html>
\ No newline at end of file
diff --git a/src/game/index.js b/src/game/index.js
index 976972f..2a9ba2f 100644
--- a/src/game/index.js
+++ b/src/game/index.js
@@ -1,37 +1,39 @@
-import Game from '../engine';
-import Rooms from './rooms';
-import Items from './items';
-import MeowCommand from './commands/meow';
-
-if (localStorage.getItem("save")) {
-    document.getElementById("save-game-found").hidden = false;
-    document.getElementById("before-play").hidden = true;
-    document.getElementById("load-save-game").addEventListener("click", () => {
-        document.getElementById("save-game-found").hidden = true;
-        document.getElementById("play-area").hidden = false;
-        startGame(false);
-    })
-    document.getElementById("start-new-game").addEventListener("click", () => {
-        document.getElementById("save-game-found").hidden = true;
-        document.getElementById("play-area").hidden = false;
-        startGame(true);
-    })
-}
-
-document.getElementById("begin").addEventListener("click", () => {
-    document.getElementById("before-play").hidden = true;
-    document.getElementById("play-area").hidden = false;
-    startGame(true);
-})
-
-function startGame(newGame) {
-    const game = new Game(newGame);
-
-    game.init({
-        rooms: Rooms,
-        commands: [
-            [["meow", "mew"], MeowCommand]
-        ],
-        items: Items
-    });
-}
+import Game from '../engine';
+import Rooms from './rooms';
+import Items from './items';
+import MeowCommand from './commands/meow';
+import DarkCommand from "./commands/dark";
+
+if (localStorage.getItem("save")) {
+    document.getElementById("save-game-found").hidden = false;
+    document.getElementById("before-play").hidden = true;
+    document.getElementById("load-save-game").addEventListener("click", () => {
+        document.getElementById("save-game-found").hidden = true;
+        document.getElementById("play-area").hidden = false;
+        startGame(false);
+    })
+    document.getElementById("start-new-game").addEventListener("click", () => {
+        document.getElementById("save-game-found").hidden = true;
+        document.getElementById("play-area").hidden = false;
+        startGame(true);
+    })
+}
+
+document.getElementById("begin").addEventListener("click", () => {
+    document.getElementById("before-play").hidden = true;
+    document.getElementById("play-area").hidden = false;
+    startGame(true);
+})
+
+function startGame(newGame) {
+    const game = new Game(newGame);
+
+    game.init({
+        rooms: Rooms,
+        commands: [
+            [["meow", "mew"], MeowCommand],
+            [["dark"], DarkCommand]
+        ],
+        items: Items
+    });
+}
