Hecc-inc./caa-game
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Compare commits

base: Hecc-inc.:ee365d4c1cbf559b9da231d3949ecbd780865c38
Branches Tags
Hecc-inc.:master
Hecc-inc.:1.0.0
..
compare: Hecc-inc.:1f055471d36e7f53c3337fd88b6557091cb9b17b
Branches Tags
Hecc-inc.:master
Hecc-inc.:1.0.0

2 Commits
ee365d4c1c ... 1f055471d3

Author SHA1 Message Date
stickyPiston
1f055471d3 Added simple main menu 2020-03-15 17:23:01 +01:00
stickyPiston
40129ee818 Updated electron-reload so that it reloads the electron process when needed 2020-03-15 17:21:29 +01:00
7 changed files with 177 additions and 104 deletions
Show Stats Expand all files Collapse all files

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;
}

54
css/index.css
View File

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

20
index.html
View File

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

8
main.js
View File

@ -1,13 +1,15 @@
const { app, BrowserWindow, ipcMain } = require('electron') const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path') const path = require('path')
require('electron-reload')(__dirname); require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});
function createWindow () { function createWindow () {
// Create the browser window. // Create the browser window.
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 640,
height: 600, height: 320,
backgroundColor: '#111', backgroundColor: '#111',
resizable: false, resizable: false,
frame: false, frame: false,

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");
});

51
src/index.js
View File

@ -1,47 +1,14 @@
const { ipcRenderer, remote } = require('electron') const { remote } = require("electron");
var asdf = require('asdf-games'); document.addEventListener("DOMContentLoaded", () => {
const { Game, Container, math, KeyControls, MouseControls, Text, Texture, TileMap, Sprite, TileSprite } = asdf;
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); // Quit game
ipcRenderer.send('resize', window); document.getElementById('quit').addEventListener("click", () => {
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(); remote.app.quit();
});
}); });