Added settings menu
This commit is contained in:
parent
e0f25a25f4
commit
ee365d4c1c
@ -2,4 +2,48 @@ html, body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#settings {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#settings > img {
|
||||||
|
height: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: white;
|
||||||
|
padding-top: 2rem;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
width: 20vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu > ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#menu > ul > li {
|
||||||
|
padding-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
11
index.html
11
index.html
@ -8,6 +8,17 @@
|
|||||||
<title>Game</title>
|
<title>Game</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="settings">
|
||||||
|
<img src="res/cog-solid.svg" alt="Settings">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a id="close">Quit game</a></li>
|
||||||
|
<li><a id="save">Save progress</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="board">
|
<div id="board">
|
||||||
<!-- Renderer will push content here -->
|
<!-- Renderer will push content here -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
1
res/cog-solid.svg
Normal file
1
res/cog-solid.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
17
res/main.css
17
res/main.css
@ -1,17 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: rgba(42, 42, 46, 1);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
#board {
|
|
||||||
position: relative;
|
|
||||||
background-color: #111;
|
|
||||||
width: max-content;
|
|
||||||
height: auto;
|
|
||||||
margin: auto;
|
|
||||||
border: 5px solid whitesmoke;
|
|
||||||
}
|
|
||||||
19
src/index.js
19
src/index.js
@ -1,4 +1,4 @@
|
|||||||
const { ipcRenderer } = require('electron')
|
const { ipcRenderer, remote } = require('electron')
|
||||||
|
|
||||||
var asdf = require('asdf-games');
|
var asdf = require('asdf-games');
|
||||||
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
|
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
|
||||||
@ -13,7 +13,7 @@ const { scene, w, h } = game;
|
|||||||
var Player = require("./src/entities/player.js")
|
var Player = require("./src/entities/player.js")
|
||||||
var Level = require("./src/levels/level.js")
|
var Level = require("./src/levels/level.js")
|
||||||
|
|
||||||
const mouseAim = new MouseControls();
|
const mouseAim = new MouseControls(document.getElementById('board'));
|
||||||
const keys = new KeyControls();
|
const keys = new KeyControls();
|
||||||
|
|
||||||
var player = new Player(keys, window);
|
var player = new Player(keys, window);
|
||||||
@ -30,3 +30,18 @@ game.run((dt ,t) => {
|
|||||||
// Check gamestate
|
// Check gamestate
|
||||||
// TODO
|
// TODO
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* *********************************************************
|
||||||
|
Settings behavior
|
||||||
|
********************************************************* */
|
||||||
|
|
||||||
|
// Opening and closing of menu.
|
||||||
|
document.getElementById('settings').addEventListener('click', () => {
|
||||||
|
const menuRef = document.getElementById('menu');
|
||||||
|
menuRef.style.display = menuRef.style.display === "block" ? "none" : "block";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quit Game handling.
|
||||||
|
document.getElementById('close').addEventListener('click', () => {
|
||||||
|
remote.app.quit();
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user