Before starting work on only sending changes in world

Doing this to allow for stupidly big worlds (also better network usage)

scripts/game.mjs

@@ -7,6 +7,7 @@ export class Game {
   constructor(id, options) {
     this.id = id;
     this.players = [];
+    this.oldWorld = []
     this.world = new World(options)
   }
 

scripts/server/netcode.mjs

@@ -19,9 +19,6 @@ function connected(client) {
       const roomPlayers   = client.game.players; // Dont send client id's to everyone, TODO
       const metadata      = {players: roomPlayers, roomID: roomID}
       io.to(client.game.id).emit('metadata', metadata)
-
-
-
       const id = client.game.id
       client.emit('message', id)
     }
@@ -52,25 +49,20 @@ function connected(client) {
         client.join(info[0].id)
         client.game = info[0];
         client.player = info[1]
-
         log.log(`${client.id} joined the game as ${data.name} `, 'FgMagenta');
         client.emit('inGame', true)
         client.sync()
         client.sendMeta()
     })
 
-
     client.on('leaveGame', function(data){
       log.log(client.id + ' disconnected.')
       client.game.removePlayerByID(client.id)
-
     })
 
-
     client.on('clickCanvas', function(data){
       if (!roomManager.getAllPlayerIDs().includes(client.id)) return new IllegalAction(client.id, 1)
       client.game.world.click(data.tilePosition[0],data.tilePosition[1], data.mode, client.player)
-
       client.sync()
     })
 }

scripts/world/revealer.mjs

@@ -15,7 +15,6 @@ export function reveal(x, y, data) {
 
     if (data[x][y].type === 1) {
     while (toSearch.length > 0) {
-            console.log("LoopReveal")
             const x = toSearch[0][0]
             const y = toSearch[0][1]
             searchedLocations.push(toSearch[0])

www/game.html

@@ -26,14 +26,26 @@
 
     <div class="menu" id="menu">
       <div id="joinType">
-      <h2>Create Room Or Join with code?</h2>
-      <button type="button" id="gotoCreate">create game</button>
-      <button type="button" id="gotoJoin">Join game</button>
-
+      <h1>Join Game</h1>
+      <hr>
+      <div class="codeContainer">
+      <h3>Invited to a game? Enter the code into the box below and click 'join'</h3>
+      <input type="text" class="codeInput" id="joinGameCode" value="" placeholder="Enter Game Code"> <br>
+      <button type="button" class="codeButton" id="gotoJoin">Join Game</button>
+      </div>
+      <hr>
+      <br><br>
+      <h1>Create New Game</h1>
+      <hr>
+      <div class="codeContainer">
+      <h3>To create a new game to play with your friends, click the 'Create Game' button below</h3>
+      <button type="button"  id="gotoCreate">Create Game</button>
+      </div>
+      <hr>
     </div>
       <div id="joinGame" style="display: none;">
         <input type="text" id="joinGameCode" value="">
-        <input type="text" id="joinGameUsername" value="bob">
+        <input type="text" id="joinGameUsername" value="">
         <button type="button" id="joinGameButton">Join</button>
       </div>
       <div id="createGame" style="display: none;">
@@ -44,7 +56,7 @@
             <h3>Settings</h3>
             <div class="row">
             <span>Username</span>
-            <input type="text" id="createGameUsername" value="">
+            <input type="text" id="createGameUsername" value="" placeholder="Input Username">
             </div>
             <u>Color</u>
             <div id="createGameSelectColorBar"></div>
@@ -64,15 +76,15 @@
             </div>
             <div class="row">
               <span>Number of mines</span>
-              <input type="number" id="createGameOptionsMines" value="100">
+              <input type="text" id="createGameOptionsMines" value="100">
             </div>
             <div class="row">
               <span>Minefield Width</span>
-              <input type="number" id="createGameOptionsWidth" value="32">
+              <input type="text" id="createGameOptionsWidth" value="32">
             </div>
             <div class="row">
               <span>Minefield Height</span>
-              <input type="number" id="createGameOptionsHeight" value="32">
+              <input type="text" id="createGameOptionsHeight" value="32">
             </div>
 
 

www/scripts/display/html.js

@@ -4,19 +4,19 @@ export var canvas = document.getElementById('canvas');
 export var ctx = canvas.getContext('2d');
 export var wrapper = document.getElementById('game');
 
-scaleEverythingGood()
-
-window.addEventListener('resize', scaleEverythingGood);
-
-function scaleEverythingGood() {
-  const width = window.innerWidth-2;
-  const height = window.innerHeight-2;
-  let canvasWidth
-  if (canvas.width > canvas.height) {
-    canvasWidth = Math.max(width, height)
-  } else {
-    canvasWidth = width
-  }
-  canvasWidth = canvasWidth/4
-  canvas.style.width = `${canvasWidth}px`;
-}
+// scaleEverythingGood()
+//
+// window.addEventListener('resize', scaleEverythingGood);
+//
+// function scaleEverythingGood() {
+//   const width = window.innerWidth-2;
+//   const height = window.innerHeight-2;
+//   let canvasWidth
+//   if (canvas.width > canvas.height) {
+//     canvasWidth = Math.max(width, height)
+//   } else {
+//     canvasWidth = width
+//   }
+//   canvasWidth = canvasWidth/4
+//   canvas.style.width = `${canvasWidth}px`;
+// }

www/scripts/interface/mainmenu/create.js

@@ -2,6 +2,7 @@ import {joinGame, createGame} from "/scripts/net/netcode.js"
 import { changeScene } from "/scripts/interface/scene.js"
 import {Picker} from "./picker.js"
 import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
+import * as util from "/scripts/util.js"
 import {ID} from "/scripts/util.js"
 import * as status from "/scripts/net/status.js"
 
@@ -30,25 +31,36 @@ mineSlider.oninput = function() {
 	menuPicker.select(3)
 }
 
-mineBox.addEventListener("change", function() {
+mineBox.addEventListener("input", function() {
 updateCount(1)
 menuPicker.select(3)
 })
 
-heightBox.addEventListener("change", function(){
+heightBox.addEventListener("input", function(){
+  heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
 	updateCount(2)
-  widthBox.value = Math.abs(Math.round(heightBox.value))
+
+})
+
+heightBox.addEventListener("change", function(){
+  heightBox.value = util.clamp(heightBox.value, 8, 500)
   menuPicker.select(3)
 })
 
-widthBox.addEventListener("change", function(){
+widthBox.addEventListener("input", function(){
+  widthBox.value = util.clamp(Math.abs(Math.round(widthBox.value.replace(/\D/g,''))), 8, 500)
   updateCount(2)
-  widthBox.value = Math.abs(Math.round(widthBox.value))
+
+})
+
+widthBox.addEventListener("change", function(){
+  widthBox.value = util.clamp(widthBox.value, 8, 500)
   menuPicker.select(3)
 })
 
 
 
+
 var mines = 5;
 var mode = 0;
 
@@ -90,10 +102,9 @@ function updateCount(mode) {
 
 	const max = maxMines(width, height)
 	const min = minMines(width, height)
-  console.log(max, min)
+
 	if (mode === 0) {
 			mines = Math.round((mineSlider.value/10) * (width*height) /100)
-      console.log(mines, mineBox.value)
 			updateCount(2)
 		}
    else if (mode === 1) {

www/scripts/interface/mainmenu/menu.js

@@ -10,6 +10,11 @@ function ID(id) {
 const joinType = ID("joinType")
 const joinGameMenu = ID("joinGame")
 const createGameMenu = ID("createGame")
+const codeInput = ID("joinGameCode")
+
+codeInput.addEventListener("input", e => {
+	e.target.value = e.target.value.toUpperCase().replace(/[^0-9a-z]/gi, '')
+})
 
 
 ID("gotoCreate").addEventListener("click", e => {
@@ -23,8 +28,6 @@ joinType.style.display = "none"
 joinGameMenu.style.display = "";
 })
 
-
-
 ID("joinGameButton").addEventListener("click", e => {
 	join(e)
 });

www/scripts/util.js

@@ -5,3 +5,7 @@ export function randomNumber(min, max) {
 export function ID(id) {
 	return document.getElementById(id)
 }
+
+export function clamp(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}

www/style.css

@@ -9,7 +9,7 @@
   font-family: moderndos;
 }
 
-h1, h2 {
+h1, h2, h3 {
   margin: 0px;
 }
 
@@ -76,6 +76,36 @@ hr {
   /* background: red; */
 }
 
+.codeContainer {
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: block;
+  position: relative;
+  /* background: red; */
+  width: 700px;
+}
+
+input {
+  text-align: center;
+}
+
+input.codeInput {
+  width: inherit !important;
+  text-align: center;
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+  border-radius: 2px;
+  outline: solid gray 2px;
+  font-size: 4.8em;
+  }
+
+.codeContainer > button {
+  max-width: auto !important;
+  width: inherit !important;
+}
+
 .sliderNumber {
   position: absolute;
   -webkit-user-select: none;