Added simple main menu
This commit is contained in:
parent
40129ee818
commit
1f055471d3
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,49 +1,33 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
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;
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div#settings > img {
|
||||
height: 1rem;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
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;
|
||||
li {
|
||||
width: 25vw;
|
||||
padding: 10px 20px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
background: #9ea399;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #1c1914;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div#menu > ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div#menu > ul > li {
|
||||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
li:hover {
|
||||
box-shadow: 2px 2px #1c1914;
|
||||
}
|
||||
|
|
@ -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>
|
||||
30
index.html
30
index.html
|
|
@ -1,26 +1,18 @@
|
|||
<!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/index.css">
|
||||
<script type="module" src="src/index.js"></script>
|
||||
<title>Game</title>
|
||||
<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">
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="board">
|
||||
<!-- Renderer will push content here -->
|
||||
</div>
|
||||
<h1>Caa-game</h1>
|
||||
<ul>
|
||||
<li id="resume">Resume game</li>
|
||||
<li id="settings">Settings</li>
|
||||
<li id="quit">Quit game</li>
|
||||
</ul>
|
||||
<script src="src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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");
|
||||
});
|
||||
53
src/index.js
53
src/index.js
|
|
@ -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', () => {
|
||||
remote.app.quit();
|
||||
// Quit game
|
||||
document.getElementById('quit').addEventListener("click", () => {
|
||||
remote.app.quit();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue