CSS styles
parent
8c4b1c987b
commit
2d3ce1982c
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default async function DarkCommand(args, context) {
|
||||||
|
document.body.classList.toggle('dark-theme');
|
||||||
|
}
|
||||||
|
|
@ -1,22 +1,161 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<title>Assassin bug</title>
|
<head>
|
||||||
</head>
|
<title>Assassin bug</title>
|
||||||
<body>
|
<style>
|
||||||
<h1>Assassin bug</h1>
|
/* General reset for browser default styles */
|
||||||
<div id="play-area" hidden=true>
|
* {
|
||||||
<div aria-live="polite" id="output-area"></div>
|
margin: 0;
|
||||||
<input type="text" id="input-area" placeholder="Type command" />
|
padding: 0;
|
||||||
</div>
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
<div id="save-game-found" hidden=true>
|
|
||||||
<h1>Found a save game</h1>
|
/* Root CSS variables for easy customization */
|
||||||
<button id="load-save-game">Load</button>
|
:root {
|
||||||
<button id="start-new-game">New</button>
|
--background-color: #2d3142;
|
||||||
</div>
|
--primary-color: #ef8354;
|
||||||
<div id="before-play">
|
--secondary-color: #ffd462;
|
||||||
<h1>Welcome</h1>
|
--text-color: #f5e7dc;
|
||||||
<button id="begin">Begin the adventure</button>
|
--font-family: 'Roboto', sans-serif;
|
||||||
</div>
|
--heading-font-family: 'Pacifico', cursive;
|
||||||
</body>
|
--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>
|
</html>
|
||||||
|
|
@ -1,37 +1,39 @@
|
||||||
import Game from '../engine';
|
import Game from '../engine';
|
||||||
import Rooms from './rooms';
|
import Rooms from './rooms';
|
||||||
import Items from './items';
|
import Items from './items';
|
||||||
import MeowCommand from './commands/meow';
|
import MeowCommand from './commands/meow';
|
||||||
|
import DarkCommand from "./commands/dark";
|
||||||
if (localStorage.getItem("save")) {
|
|
||||||
document.getElementById("save-game-found").hidden = false;
|
if (localStorage.getItem("save")) {
|
||||||
document.getElementById("before-play").hidden = true;
|
document.getElementById("save-game-found").hidden = false;
|
||||||
document.getElementById("load-save-game").addEventListener("click", () => {
|
document.getElementById("before-play").hidden = true;
|
||||||
document.getElementById("save-game-found").hidden = true;
|
document.getElementById("load-save-game").addEventListener("click", () => {
|
||||||
document.getElementById("play-area").hidden = false;
|
document.getElementById("save-game-found").hidden = true;
|
||||||
startGame(false);
|
document.getElementById("play-area").hidden = false;
|
||||||
})
|
startGame(false);
|
||||||
document.getElementById("start-new-game").addEventListener("click", () => {
|
})
|
||||||
document.getElementById("save-game-found").hidden = true;
|
document.getElementById("start-new-game").addEventListener("click", () => {
|
||||||
document.getElementById("play-area").hidden = false;
|
document.getElementById("save-game-found").hidden = true;
|
||||||
startGame(true);
|
document.getElementById("play-area").hidden = false;
|
||||||
})
|
startGame(true);
|
||||||
}
|
})
|
||||||
|
}
|
||||||
document.getElementById("begin").addEventListener("click", () => {
|
|
||||||
document.getElementById("before-play").hidden = true;
|
document.getElementById("begin").addEventListener("click", () => {
|
||||||
document.getElementById("play-area").hidden = false;
|
document.getElementById("before-play").hidden = true;
|
||||||
startGame(true);
|
document.getElementById("play-area").hidden = false;
|
||||||
})
|
startGame(true);
|
||||||
|
})
|
||||||
function startGame(newGame) {
|
|
||||||
const game = new Game(newGame);
|
function startGame(newGame) {
|
||||||
|
const game = new Game(newGame);
|
||||||
game.init({
|
|
||||||
rooms: Rooms,
|
game.init({
|
||||||
commands: [
|
rooms: Rooms,
|
||||||
[["meow", "mew"], MeowCommand]
|
commands: [
|
||||||
],
|
[["meow", "mew"], MeowCommand],
|
||||||
items: Items
|
[["dark"], DarkCommand]
|
||||||
});
|
],
|
||||||
}
|
items: Items
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue