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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -2,6 +2,7 @@ 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;
|
||||
|
|
@ -30,7 +31,8 @@ function startGame(newGame) {
|
|||
game.init({
|
||||
rooms: Rooms,
|
||||
commands: [
|
||||
[["meow", "mew"], MeowCommand]
|
||||
[["meow", "mew"], MeowCommand],
|
||||
[["dark"], DarkCommand]
|
||||
],
|
||||
items: Items
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue