Added simple main menu

This commit is contained in:
corner 2020-03-15 17:23:01 +01:00
parent 40129ee818
commit 1f055471d3
6 changed files with 172 additions and 101 deletions

49
css/game.css Normal file
View File

@ -0,0 +1,49 @@
html, body {
margin: 0;
padding: 0;
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;
}

View File

@ -1,49 +1,33 @@
html, body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
width: 100vw;
background: lightskyblue;
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;
h1 {
text-align: center;
}
div#menu > ul {
ul {
list-style-type: none;
margin: 0;
text-align: center;
padding: 0;
display: grid;
}
div#menu > ul > li {
padding-top: 10px;
li {
width: 25vw;
padding: 10px 20px;
margin: 0 auto;
margin-top: 20px;
background: #9ea399;
border-radius: 5px;
border: 2px solid #1c1914;
cursor: pointer;
}
li:hover {
box-shadow: 2px 2px #1c1914;
}

27
game.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/game.css">
<script type="module" src="src/game.js"></script>
<title>Game</title>
</head>
<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>
<li><a id="mainmenu">Return to main menu</a></li>
</ul>
</div>
<div id="board">
<!-- Renderer will push content here -->
</div>
</body>
</html>

View File

@ -3,24 +3,16 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caa-game</title>
<link rel="stylesheet" href="css/index.css">
<script type="module" src="src/index.js"></script>
<title>Game</title>
</head>
<body>
<div id="settings">
<img src="res/cog-solid.svg" alt="Settings">
</div>
<div id="menu">
<h1>Caa-game</h1>
<ul>
<li><a id="close">Quit game</a></li>
<li><a id="save">Save progress</a></li>
<li id="resume">Resume game</li>
<li id="settings">Settings</li>
<li id="quit">Quit game</li>
</ul>
</div>
<div id="board">
<!-- Renderer will push content here -->
</div>
<script src="src/index.js"></script>
</body>
</html>

52
src/game.js Normal file
View File

@ -0,0 +1,52 @@
const { ipcRenderer, remote } = require('electron')
var asdf = require('asdf-games');
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
const window = { w: 640, h: 320 };
const game = new Game(window.w, window.h, true);
ipcRenderer.send('resize', window);
const { scene, w, h } = game;
var Player = require("./src/entities/player.js")
var Level = require("./src/levels/level.js")
const mouseAim = new MouseControls(document.getElementById('board'));
const keys = new KeyControls();
var player = new Player(keys, window);
var level = new Level(window, keys, player);
scene.add(level);
scene.add(player);
game.run((dt ,t) => {
if (mouseAim.isDown) {
console.log('cliccccccccccc');
}
// Check gamestate
// 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();
});
// Return to main menu button
document.getElementById('mainmenu').addEventListener('click', () => {
remote.getCurrentWindow().loadFile(__dirname + "/index.html");
});

View File

@ -1,47 +1,14 @@
const { ipcRenderer, remote } = require('electron')
const { remote } = require("electron");
var asdf = require('asdf-games');
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
document.addEventListener("DOMContentLoaded", () => {
const window = { w: 640, h: 320 };
// Start game
document.getElementById('resume').addEventListener("click", () => {
remote.getCurrentWindow().loadFile(__dirname + "/game.html");
});
const game = new Game(window.w, window.h, true);
ipcRenderer.send('resize', window);
const { scene, w, h } = game;
var Player = require("./src/entities/player.js")
var Level = require("./src/levels/level.js")
const mouseAim = new MouseControls(document.getElementById('board'));
const keys = new KeyControls();
var player = new Player(keys, window);
var level = new Level(window, keys, player);
scene.add(level);
scene.add(player);
game.run((dt ,t) => {
if (mouseAim.isDown) {
console.log('cliccccccccccc');
}
// Check gamestate
// 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', () => {
// Quit game
document.getElementById('quit').addEventListener("click", () => {
remote.app.quit();
});
});