From 1f49b1b9bf16632db5d03265b6593b7958a4be07 Mon Sep 17 00:00:00 2001 From: Alexander Bass Date: Wed, 22 Jun 2022 21:14:51 -0400 Subject: [PATCH] Commit before I destroy the server code --- scripts/game.mjs | 2 +- scripts/server/netcode.mjs | 2 + www/index.html | 33 ++++-- www/scripts/display/html.js | 7 -- www/scripts/game/game.js | 4 +- www/scripts/interface/mainmenu/menu.js | 63 ++++++++--- www/scripts/interface/scene.js | 8 +- www/scripts/net/netcode.js | 11 ++ www/style.css | 150 +++++++++++++++++++------ 9 files changed, 212 insertions(+), 68 deletions(-) diff --git a/scripts/game.mjs b/scripts/game.mjs index 3ae6c39..0e013b0 100644 --- a/scripts/game.mjs +++ b/scripts/game.mjs @@ -7,7 +7,7 @@ export class Game { constructor(name) { this.name = name; this.players = []; - this.world = new World([16,9]) + this.world = new World([16,16]) } addPlayer(id, name) { diff --git a/scripts/server/netcode.mjs b/scripts/server/netcode.mjs index fbc9817..410c8e3 100644 --- a/scripts/server/netcode.mjs +++ b/scripts/server/netcode.mjs @@ -39,6 +39,8 @@ function connected(client) { client.emit('inGame', true) client.sendMeta() }) + + client.on('leaveGame', function(data){ log.log(client.id + ' disconnected.') client.game.removePlayerByID(client.id) diff --git a/www/index.html b/www/index.html index a76fa7e..42a0e8e 100644 --- a/www/index.html +++ b/www/index.html @@ -5,14 +5,15 @@ +
- -
+

+ -
- + diff --git a/www/scripts/display/html.js b/www/scripts/display/html.js index f6332a2..ed16a9e 100644 --- a/www/scripts/display/html.js +++ b/www/scripts/display/html.js @@ -3,8 +3,6 @@ import {game} from "../game/game.js" export var canvas = document.getElementById('canvas'); export var ctx = canvas.getContext('2d'); export var wrapper = document.getElementById('game'); -export var rightBar = document.getElementById('rightBar'); -export var leftBar = document.getElementById('leftBar'); canvas.width = game.tileSize*game.gridSize[0]; canvas.height = game.tileSize*game.gridSize[1]; scaleEverythingGood() @@ -22,9 +20,4 @@ function scaleEverythingGood() { } canvasWidth = canvasWidth/4 canvas.style.width = `${canvasWidth}px`; - rightBar.style.width = `${canvasWidth}px` - leftBar.style.width = `${canvasWidth/2}px` - const wrapperWidth = rightBar.style.width + leftBar.style.width; - wrapper.style.width = `${wrapperWidth}px` - wrapper.style.height = `${height}px` } diff --git a/www/scripts/game/game.js b/www/scripts/game/game.js index 7c15010..9ea27b2 100644 --- a/www/scripts/game/game.js +++ b/www/scripts/game/game.js @@ -6,8 +6,8 @@ class Game { this.status = status; } reset() { - game = new Game(16, [16, 9], null, false); + game = new Game(16, [16, 16], null, false); } } -export var game = new Game(16, [16, 9]) +export var game = new Game(16, [16, 16]) diff --git a/www/scripts/interface/mainmenu/menu.js b/www/scripts/interface/mainmenu/menu.js index 2f8dfc7..dc1e8b2 100644 --- a/www/scripts/interface/mainmenu/menu.js +++ b/www/scripts/interface/mainmenu/menu.js @@ -1,23 +1,58 @@ import * as status from "../../net/status.js" -import {joinGame} from "/scripts/net/netcode.js" +import {joinGame, createGame} from "/scripts/net/netcode.js" import { changeScene } from "/scripts/interface/scene.js" -document.getElementById("submit").addEventListener("click", e => { - submit(e) +function ID(id) { + return document.getElementById(id) +} + +const joinType = ID("joinType") +const joinGameMenu = ID("joinGame") +const createGameMenu = ID("createGame") + +ID("gotoCreate").addEventListener("click", e => { +joinType.style.display = "none" +createGameMenu.style.display = "" +}) + +ID("gotoJoin").addEventListener("click", e => { +joinType.style.display = "none" +joinGameMenu.style.display = ""; +}) + + + +ID("joinGameButton").addEventListener("click", e => { + join(e) }); -function submit(event) { - const room = document.getElementById("room").value - const name = document.getElementById("name").value +function join(event) { + const roomCode = ID("joinGameCode").value + const name = ID("joinGameUsername").value if (room == '' || name == '' || status.get() == 'disconnected') return - joinGame({room: room, name: name}) - event.preventDefault(); + joinGame({room: roomCode, name: name}) } -window.addEventListener('load', - function() { - const room = document.getElementById("room").value - const name = document.getElementById("name").value - joinGame({room: room, name: name}) - }, false); + +ID("createRoomButton").addEventListener("click", e => { + create(e) +}); + +function create(event) { + const name = ID("createGameUsername").value + const mines = ID("createGameOptionsMines").value + const width = ID("createGameOptionsWidth").value + const height = ID("createGameOptionsHeight").value + if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return + + const data = + { + name: name, + mines: mines, + width: width, + height: height + } + createGame(data) + +} diff --git a/www/scripts/interface/scene.js b/www/scripts/interface/scene.js index ed1b76f..7956496 100644 --- a/www/scripts/interface/scene.js +++ b/www/scripts/interface/scene.js @@ -2,13 +2,13 @@ import * as picker from "/scripts/interface/game/picker.js" export function changeScene(scene) { if (scene == "game") { - // document.getElementById('menu').style = "display: none;" - // document.getElementById('container').style = "" + document.getElementById('menu').style = "display: none;" + document.getElementById('game').style = "" // picker.create(); } if (scene == "mainmenu") { - // document.getElementById('menu').style = "" - // document.getElementById('container').style = "display: none;" + document.getElementById('menu').style = "" + document.getElementById('game').style = "display: none;" // picker.destroy(); } }; diff --git a/www/scripts/net/netcode.js b/www/scripts/net/netcode.js index a0aea16..5e8e6c3 100644 --- a/www/scripts/net/netcode.js +++ b/www/scripts/net/netcode.js @@ -11,6 +11,10 @@ export function joinGame(data){ socket.emit('joinGame', data); } +export function createGame(data){ + socket.emit('createGame', data); +} + export function clickCanvas(data) { socket.emit('clickCanvas', data); } @@ -26,6 +30,13 @@ socket.on('disconnect', function(data){ status.disconnected() }) +socket.on('message', function(data) { + const mess = document.getElementById("message") + mess.textContent = `Server Connection: ${connection}` + +}) + + socket.on('illegalAction', function(data){ let action illegalAction(data) diff --git a/www/style.css b/www/style.css index f8dd09e..5665a15 100644 --- a/www/style.css +++ b/www/style.css @@ -1,3 +1,95 @@ + +/* #mydiv { + position: absolute; + cursor: move; + z-index: 10; + background: coral; + width: 30px; + height: 30px; + border: 1px solid #d3d3d3; +} */ + + + +span.button > img { + pointer-events: none; + image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */ + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ + image-rendering: pixelated; /* Chrome */ + -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ + width: 70px; + height: 70px; + transform: translate(0, 8px); + border: 2px solid darkgray; + border-radius: 4px; + background: lightgray; +} + +span.button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + background: tan; + width:90px; + height:90px; + margin: 5px 5px 5px 5px; + vertical-align: middle; + border-radius: 3px; + white-space: normal; + align-items: center; + cursor: pointer; + +} + +span.button:hover { + background: gray; +} + +.canvas1{ + z-index: 0; +} + +.canvas3 { + z-index: 2; +} + +.canvasStack { + + /* top: 50px; */ + + background: darkslategray; + +} + +#wrapper { + + /* display: flex; */ + /* justify-content: right; */ + /* left: 50%; */ + /* transform: translate(-50%, 0); */ + /* position: absolute; */ + background: khaki; + width: 750px; + height: 750px; +} + +#wrapwrap { + display: block; + margin: 0 auto; + margin-left: auto; + margin-right: auto; +} + +main { + + margin-left: auto; + margin-right: auto; +} + canvas { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ @@ -8,44 +100,36 @@ canvas { image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; - cursor: pointer; - width: inherit; - height: inherit; +} + + +.hidden { + display: none; } body { - margin: 0px; +text-align: center; +background-color: #2c2f33; +color: white; +font-variant: normal; +font-family: verdana; } -#status { - position: absolute; - display: block; -} -#game { - margin: 0px; - padding: 0px; - background: tan; - width: 100%; - height: 100px; - display: flex; -} - -#leftBar { - margin: 0px; - padding: 0px; - display: inline-flex; - background: red; - height: inherit; -} -#rightBar { - margin: 0px; - padding: 0px; - display: inline-flex; - background: orange; - height: inherit; - align-items: center; +h1 { + font-size: 25pt; } -.canvasContainer { - +h2 { + font-size: 20pt; +} +p{ + /* font-size: 12pt; */ + /* text-align: left; */ + margin: 0; +} + +h4 { + font-size: 12pt; + padding: 0; + margin: 0; }