diff --git a/css/game.css b/css/game.css new file mode 100644 index 0000000..24b2dd1 --- /dev/null +++ b/css/game.css @@ -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; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index 24b2dd1..1843fb8 100644 --- a/css/index.css +++ b/css/index.css @@ -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; } \ No newline at end of file diff --git a/game.html b/game.html new file mode 100644 index 0000000..35dd510 --- /dev/null +++ b/game.html @@ -0,0 +1,27 @@ + + + + + + + + Game + + +
+ Settings +
+ + + +
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index 2a3ca36..15d8c4b 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,18 @@ - - - - - Game + + + Caa-game + -
- Settings -
- - - -
- -
+

Caa-game

+ + \ No newline at end of file diff --git a/src/game.js b/src/game.js new file mode 100644 index 0000000..0dd9b98 --- /dev/null +++ b/src/game.js @@ -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"); +}); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 3d682b4..dd7f4fc 100644 --- a/src/index.js +++ b/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(); + }); }); \ No newline at end of file