Cleaned up some

index.js

@@ -4,48 +4,12 @@ const gridSize = [18, 18];
 const perlinScale = 3;
 var express = require('express');
 
-class Server {
-  constructor(){
-    this.games = []
-  }
-
-  addGame(name) {
-    let roomNames = []
-    for (let i = 0; i < this.games.length; i++) {
-      roomNames.push(this.games[i].name)
-    }
-    if (!roomNames.includes(name)) {
-    const game = new Game([18,18], name)
-    this.games.push(game)
-      console.log("added game - " + game.name)
-    } else {
-      console.log("tried to make room already taken")
-    }
-  }
-
-  getGameByName(name, mode) {
-
-    var game = this.games.filter(obj => obj.name == name)[0]
-    console.log(name, mode, game)
-    console.log(game == undefined && mode)
-    if (game == undefined && mode) {
-      this.addGame(name)
-      return this.games.filter(obj => obj.name == name)[0]
-    }
-    return game;
-  }
-
-  removeGame(name) {
-    this.players = this.players.filter(obj => obj.name != name);
-    console.log("removed goom - " + name)
-  }
-}
-
-
+process.title = "Server"
 
 class Player {
-  constructor(id, color) {
+  constructor(id, name, color) {
     this.id = id;
+    this.name = name;
     this.color = color;
   }
 }
@@ -56,7 +20,7 @@ class Game {
     this.world = worldgen.generateWorld(gridSize, perlinScale);
   }
 
-  addPlayer(id) {
+  addPlayer(id, name) {
     var color
     switch(util.randomNumber(1,4)) {
       case 1:
@@ -75,7 +39,7 @@ class Game {
         color = "yellow";
       break;
     }
-    const player = new Player(id, color);
+    const player = new Player(id, name, color);
     this.players.push(player);
   }
 
@@ -111,9 +75,10 @@ io.on('connection', function(client) {
       client.broadcast.emit('playerList', game.players)
     })
 
-    client.on('joinGame', function(tank){
+    client.on('joinGame', function(data){
         game.addPlayer(client.id);
-        console.log(client.id + ' joined the game');
+        console.log(data)
+        console.log(`${client.id} joined the game as ${data.name} requesting to join room: ${data.room}`);
         client.emit('gameVars', {gridSize: gridSize, world: game.world})
         client.broadcast.emit('playerList', game.players)
         client.emit('playerList', game.players)
@@ -125,6 +90,7 @@ io.on('connection', function(client) {
     })
 
       client.on('clickCanvas', function(data){
+        console.log(data)
         const xu = data.tilePosition[0]
         const yu = data.tilePosition[1]
         game.world[xu][yu].structure = data.structure

package.json

@@ -2,16 +2,19 @@
   "name": "empires",
   "version": "1.0.0",
   "description": "",
-  "main": "server.js",
-  "dependencies": {
-    "dotenv": "^16.0.0",
-    "express": "^4.17.3",
-    "socket.io": "^4.4.1"
-  },
-  "devDependencies": {},
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "repository": {
+    "type": "git",
+    "url": "empires"
+  },
   "author": "",
-  "license": "UNLICENSED"
+  "license": "UNLICENSED",
+  "dependencies": {
+    "express": "^4.18.1",
+    "socket.io": "^4.5.0",
+    "socket.js": "^0.1.4"
+  }
 }

perlin.js

@@ -5,6 +5,7 @@
  * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
  * Better rank ordering method by Stefan Gustavson in 2012.
  * Converted to Javascript by Joseph Gentle.
+ * Converted to NPM Package by Jacob Schneider
  *
  * Version 2012-03-09
  *
@@ -14,8 +15,8 @@
  *
  */
 
-(function(global){
-  var module = global.noise = {};
+module.exports = (function(global){
+  var functions = global.noise = {};
 
   function Grad(x, y, z) {
     this.x = x; this.y = y; this.z = z;
@@ -52,7 +53,7 @@
 
   // This isn't a very good seeding function, but it works ok. It supports 2^16
   // different seed values. Write something better if you need more seeds.
-  module.seed = function(seed) {
+  functions.seed = function(seed) {
     if(seed > 0 && seed < 1) {
       // Scale the seed out
       seed *= 65536;
@@ -76,7 +77,7 @@
     }
   };
 
-  module.seed(0);
+  functions.seed(0);
 
   /*
   for(var i=0; i<256; i++) {
@@ -92,7 +93,7 @@
   var G3 = 1/6;
 
   // 2D simplex noise
-  module.simplex2 = function(xin, yin) {
+  functions.simplex2 = function(xin, yin) {
     var n0, n1, n2; // Noise contributions from the three corners
     // Skew the input space to determine which simplex cell we're in
     var s = (xin+yin)*F2; // Hairy factor for 2D
@@ -150,7 +151,7 @@
   };
 
   // 3D simplex noise
-  module.simplex3 = function(xin, yin, zin) {
+  functions.simplex3 = function(xin, yin, zin) {
     var n0, n1, n2, n3; // Noise contributions from the four corners
 
     // Skew the input space to determine which simplex cell we're in
@@ -248,7 +249,7 @@
   }
 
   // 2D Perlin Noise
-  module.perlin2 = function(x, y) {
+  functions.perlin2 = function(x, y) {
     // Find unit grid cell containing point
     var X = Math.floor(x), Y = Math.floor(y);
     // Get relative xy coordinates of point within that cell
@@ -273,7 +274,7 @@
   };
 
   // 3D Perlin Noise
-  module.perlin3 = function(x, y, z) {
+  functions.perlin3 = function(x, y, z) {
     // Find unit grid cell containing point
     var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z);
     // Get relative xyz coordinates of point within that cell
@@ -306,5 +307,5 @@
           lerp(n011, n111, u), w),
        v);
   };
-
+  return functions;
 })(this);

tt.js

@@ -0,0 +1 @@
+process.title = "Server"

worldgen.js

@@ -1,4 +1,4 @@
-var noise = require('noisejs');
+var noise = require('./perlin.js');
 const util = require("./util.js")
 
 function generateWorld(gridSize, perlinScale){

www/index.html

@@ -7,10 +7,10 @@
     <link rel="stylesheet" href="style.css">
 </head>
   <body>
+    <!-- Canvas used to generate individual sprites off one sprite atlas -->
+    <canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
     <div class="container" id="container" style="display: none;">
       <h1>No Longer Secret Project</h1>
-
-        <canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
       <div class="wrapper">
         <div class="canvasStack">
           <canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
@@ -27,9 +27,13 @@
     <div class="menu" id="menu">
       <form id="form">
       <input type="text" id="room" value="room">
+      <input type="text" id="name" value="bob">
       <input type="submit" id="join" value="join">
       </form>
     </div>
+    <div class="status">
+      <footer id="status">Connection Status</footer>
+    </div>
   </body>
   <script src='script.js'></script>
 </html>

www/script.js

@@ -1,6 +1,11 @@
 // const perlinScale = 3;
+const IP_ADDRESS = 'http://127.0.0.1:8082/'
+
+
+var SERVER_CONNECTION = "disconnected"
+
 const tileSize = 24;
-var gridSize;
+const gridSize = [18, 18];
 var cash = 99;
 var world
 var tiles = []
@@ -9,17 +14,26 @@ var canvas = document.getElementById('canvas');
 var hud = document.getElementById('hud');
 var ctx = canvas.getContext('2d');
 var hctx = hud.getContext('2d');
-var socket = io.connect('http://127.0.0.1:8082/');
-function joinGame(socket, room, nick){
-		socket.emit('joinGame', {room, nick});
+var socket = io.connect(IP_ADDRESS);
+function joinGame(socket, data){
+		socket.emit('joinGame', data);
 }
 function leaveGame(socket){
 		socket.emit('leaveGame', {});
 }
 
+socket.on('connect', function(data){
+	SERVER_CONNECTION = "connected"
+	updateConnectionStatus();
+})
+socket.on('disconnect', function(data){
+	SERVER_CONNECTION = "disconnected"
+	updateConnectionStatus();
+})
 
-
-
+function updateConnectionStatus() {
+	document.getElementById("status").textContent = `Server Connection: ${SERVER_CONNECTION}`
+}
 
 class Cursor {
 	constructor(){
@@ -40,8 +54,6 @@ window.onbeforeunload = function(){
 socket.on('gameVars', function(tank){
   gridSize = tank.gridSize;
   world = tank.world;
-
-  fill_canvas()
 });
 
 socket.on('playerList', function(data){
@@ -72,49 +84,47 @@ function loadSprites(){
 			}
 		}
 	}
+	spriteJank.remove();
 }
 
 function submit(event) {
+
 	document.getElementById('menu').style = "display: none;"
 	document.getElementById('container').style = ""
 	const room = document.getElementById("room").value
+	const name = document.getElementById("name").value
+	if (room == '' || name == '' || SERVER_CONNECTION == 'disconnected') return
+
+	joinGame(socket, {room: room, name: name})
 	event.preventDefault();
-	joinGame(socket, {room: room, name: "bob"})
 }
 
 
 
 window.onload = function () {
+	// Register Events
 	const form = document.getElementById('form');
-
 	form.addEventListener('submit', submit);
 
-loadSprites()
-
-
-
-}
-
-function fill_canvas() {
-    // CREATE CANVAS CONTEXT.
 	hud.addEventListener('mousemove', e => {
 		mouseMoved(e)
 	});
+
 	hud.addEventListener("mousedown", function(e)
 	{
 			getMousePosition(canvas, e);
 	});
+
+	//Set canvases to be ready
 	canvas.width = tileSize*gridSize[0];
 	canvas.height = tileSize*gridSize[1];
 	hud.width = canvas.width
 	hud.height = canvas.height
 
-
-    updateUI();
-
+	//Load all sprites into memory
+	loadSprites()
 }
 
-
 function randomNumber(min, max) {
     return Math.floor(Math.random() * (max - min) + min);
 }
@@ -170,9 +180,6 @@ function render() {      // DRAW THE IMAGE TO THE CANVAS.
   }
   console.log("image Rendered")
 }
-function updateUI(){
-  document.getElementById("cash").innerHTML = ("$" + cash +socket.id);
-}
 
 function getMousePosition(canvas, event) {
     // Get mouse position on canvas

www/style.css

@@ -14,6 +14,10 @@ canvas {
   /* margin: auto; */
 }
 
+.status{
+  color: green;
+}
+
 .hidden {
   display: none;
 }