Idk Linux now

index.js

@@ -3,16 +3,13 @@ const util = require("./util.js")
 const log = require("./log.js")
 const gridSize = [18, 18];
 const perlinScale = 3;
-
 var express = require('express');
-
+log.setMode(0)
 process.title = "Server"
 setInterval(function(){ updateInfo()},5000)
 
 function updateInfo() {
-  const players = game.players;
+  log.setInfo(server.games)
-
-  log.setInfo(players)
 }
 
 class Player {
@@ -23,9 +20,58 @@ class Player {
   }
 }
 
+class Server {
+  constructor(){
+    this.games = [];
+  }
+  getGameByName(name, create) {
+    const game = this.games.filter(obj => obj.name == name)[0]
+    if (game === undefined && create) {
+      this.addGame(name);
+      // Oh no.... This cant be good code.
+      return this.getGameByName(name);
+    }
+    return game
+  }
+
+  addGame(name) {
+    const game = new Game(name);
+    this.games.push(game);
+    return game
+  }
+  removeGame(name) {
+    this.games = this.games.filter(obj => obj.name != name);
+    log.log("removed game - " + name)
+  }
+
+  getAllIDs() {
+    let ids = []
+    for (let i = 0; i < this.games.length; i++) {
+      for (let j = 0; j < this.games[i].players.length; j++) {
+        ids.push(this.games[i].players[j].id)
+      }
+    }
+    return ids
+  }
+
+  joinClientToGame(room, nick, id, client) {
+    const game = this.getGameByName(room, true);
+    if (game.addPlayer(id, nick) == false) {
+      this.removeGame(game)
+      return client.illegalAction(20)
+    }
+    client.join(game.name)
+    client.game = game;
+    return true
+  }
+
+
+}
+
 class Game {
-  constructor() {
+  constructor(name) {
-    this.players = [{id: "adfhad", name: "bobbert"}];
+    this.name = name;
+    this.players = [];
     this.world = worldgen.generateWorld(gridSize, perlinScale);
   }
 
@@ -40,6 +86,9 @@ class Game {
   removePlayer(id) {
     this.players = this.players.filter(obj => obj.id != id);
     log.log("removed player - " + id)
+    if (this.players.length < 1) {
+      server.removeGame(this.name);
+    }
   }
 
   getPlayerByID(id) {
@@ -62,16 +111,17 @@ class Game {
     return names
   }
 }
-var game = new Game();
+var server = new Server();
 
 
 var app = express() //Static resources server
-app.use(express.static(__dirname + '/www/'));var server = app.listen(8082, function () {
+app.use(express.static(__dirname + '/www/'));
-    var port = server.address().port;
+var webServer = app.listen(8082, function () {
-    log.log(`Server running at port ${port}`, "bright");
+  var port = webServer.address().port;
+  log.log(`Server running at port ${port}`, "bright");
 });
 
-var io = require('socket.io')(server);/* Connection events */
+var io = require('socket.io')(webServer);/* Connection events */
 io.on('connection', function(client) {
 
     client.illegalAction = function(action) {
@@ -81,41 +131,36 @@ io.on('connection', function(client) {
     log.log('User connected', 'FgGreen');
 
     client.on('disconnect', function(){
+      if (!server.getAllIDs().includes(client.id)) return client.illegalAction(22)
       log.log(client.id + ' disconnected.', 'FgCyan')
-      game.removePlayer(client.id)
+      client.game.removePlayer(client.id)
-      client.broadcast.emit('playerList', game.players)
     })
 
     client.on('joinGame', function(data){
-        if (game.addPlayer(client.id, data.name) == false) return client.illegalAction(20)
+        if(!server.joinClientToGame(data.room, data.name, client.id, client)) return
-        sendMap(client)
+        io.to(client.game.name).emit('sync',{world: client.game.world})
         log.log(`${client.id} joined the game as ${data.name} requesting to join room: ${data.room}`, 'FgMagenta');
-        client.broadcast.emit('playerList', game.players)
+        client.emit('inGame', true)
-        client.emit('playerList', game.players)
     })
     client.on('leaveGame', function(tank){
-      log.log(client.id + ' disconnected.')
+      log.log(celient.id + ' disconnected.')
-      game.removePlayer(client.id)
+      client.game.removePlayer(client.id)
-      client.broadcast.emit('playerList', game.players)
+      io.to(client.game.name).emit('playerList', client.game.players)
     })
 
 
-      client.on('clickCanvas', function(data){
+    client.on('clickCanvas', function(data){
-        if (!game.getAllIDs().includes(client.id)) return client.illegalAction(1)
+      if (!server.getAllIDs().includes(client.id)) return client.illegalAction(1)
-        const xu = data.tilePosition[0]
+      const room = client.game.name
-        const yu = data.tilePosition[1]
+      const xu = util.clamp(data.tilePosition[0], 0, gridSize[0])
-        game.world[xu][yu].structure = data.structure
+      const yu = util.clamp(data.tilePosition[1], 0, gridSize[1])
-        game.world[xu][yu].owner = game.getPlayerByID(client.id).color;
+      if (!Number.isInteger(xu) || !Number.isInteger(yu)) return client.illegalAction(23)
-        // log.log(world[xu][yu].owner = game.getPlayerbyID(client.id))
 
-        client.broadcast.emit('sync',{world: game.world})
+      client.game.world[xu][yu].structure = data.structure
-        client.emit('sync',{world: game.world})
+      client.game.world[xu][yu].owner = client.game.getPlayerByID(client.id).color;
-      })
+      io.to(client.game.name).emit('sync',{world: client.game.world})
+      // client.emit('sync',{world: client.game.world})
+    })
 
 
   });
-
-  function sendMap(client) {
-    client.broadcast.emit('sync',{world: game.world.map})
-    client.emit('sync',{world: game.world.map})
-  }

log.js

@@ -1,9 +1,16 @@
 const os = require("os")
-
+var mode = 0
 var logs = []
 var info = [[],[]]
 
+function setMode(type) {
+  mode = type
+}
+
 function updateLog() {
+if (mode) return
+let templogs = logs;
+
 console.clear()
 const columns = process.stdout.columns;
 const rows = process.stdout.rows;
@@ -21,18 +28,31 @@ for (var i = 0; i < columns; i++) {
 
 process.stdout.cursorTo(0,0)
 process.stdout.write("Players:")
-const players = info[0]
+const games = info[0]
-for (var i = 0; i < players.length; i++) {
+var pointer = 0
-process.stdout.cursorTo(0,i+1)
+for (i = 0; i < games.length; i++) {
-process.stdout.write(`Name: \x1b[1m${players[i].name}\x1b[0m -\x1b[1m ID:${players[i].id}\x1b[0m`)
+  process.stdout.cursorTo(0,pointer+1)
+
+  process.stdout.write(`\x1b[46mGameName: \x1b[1m${games[i].name}\x1b[0m`)
+  const players = games[i].players;
+  for (var j = 0; j < players.length; j++) {
+    process.stdout.cursorTo(0,pointer+2)
+    process.stdout.write(`--Name: \x1b[1m${players[j].name}\x1b[0m -\x1b[1m ID:${players[j].id}\x1b[0m`)
+    pointer++;
+  }
+  pointer++;
 }
-for (var i = 0; i < logs.length; i++ ) {
+if (templogs.length > Math.round(3*rows/4)-3) {
+templogs.splice(0, logs.length-Math.round(3*rows/4)+2);
+}
+for (var i = 0; i < templogs.length; i++ ) {
   process.stdout.cursorTo(0,vertSplit+1+i)
-  process.stdout.write(`${logs[i]}${os.EOL}` )
+  process.stdout.write(`${templogs[i]}${os.EOL}` )
 }
 
 }
 function log(string, color) {
+  if (mode) return console.log(string)
   if (string == undefined) return;
   var prefix = '';
   switch (color) {
@@ -87,10 +107,12 @@ function log(string, color) {
   // BgWhite = "\x1b[47m"
  const newString = prefix + string + "\x1b[0m"
 logs.push(newString)
+
 updateLog();
 }
 
 function setInfo (players){
+  if (mode) return false
 if (players != undefined) {
   info[0] = players;
   updateLog()
@@ -98,4 +120,4 @@ if (players != undefined) {
 
 }
 
-module.exports = {log, updateLog, setInfo}
+module.exports = {log, updateLog, setInfo, setMode}

www/index.html

@@ -10,25 +10,36 @@
     <!-- 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>
+      <h1>Project</h1>
-      <div class="wrapper">
+
-        <div class="canvasStack">
+      <div class="wrapper" id="wrapper">
+        <div class="top">
+          <h4 id="status">Connection Status</h4>
+        </div>
+        <span class ="left"><p>left</p></span>
+        <span class="canvasStack">
           <canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
           <canvas oncontextmenu="return false;" class="canvas2" id="hud" width="0" height="0"></canvas>
+        </span>
+        <span class ="right"><p>right</p></span>
+
+        <div class="bottom">
+          <div class="buttonBar" id="buttonBar">
+            <!-- <span class="button" no="1"></span>
+            <span class="button" no="2"></span>
+            <span class="button" no="3"></span>
+            <span class="button" no="4"></span>
+            <span class="button" no="null"></span> -->
+          </div>
         </div>
 
       </div>
     </div>
 
     <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">
+      <input type="submit" id="submit" value="join">
-      </form>
-    </div>
-    <div class="status">
-      <footer id="status">Connection Status</footer>
     </div>
   </body>
   <script src='script.js'></script>

www/script.js

@@ -1,14 +1,13 @@
 // const perlinScale = 3;
 const IP_ADDRESS = 'http://127.0.0.1:8082/'
-
-
 var SERVER_CONNECTION = "disconnected"
+var IN_GAME = false
 
 const tileSize = 24;
 const gridSize = [18, 18];
-var cash = 99;
 var world
 var tiles = []
+var button
 
 var canvas = document.getElementById('canvas');
 var hud = document.getElementById('hud');
@@ -27,6 +26,7 @@ socket.on('connect', function(data){
 	updateConnectionStatus();
 })
 socket.on('disconnect', function(data){
+
 	SERVER_CONNECTION = "disconnected"
 	updateConnectionStatus();
 })
@@ -40,6 +40,9 @@ socket.on('illegalAction', function(data){
 		case 20:
 			action = "That name is already taken."
 			break;
+		case 23:
+			action = "Invalid Placement location."
+			break;
 		default:
 			action = "Unknown action."
 
@@ -49,7 +52,17 @@ alert(`Illegal Action, ${action}`)
 })
 
 function updateConnectionStatus() {
-	document.getElementById("status").textContent = `Server Connection: ${SERVER_CONNECTION}`
+	let obj = document.getElementById("status")
+	obj.textContent = `Server Connection: ${SERVER_CONNECTION}`
+	switch (SERVER_CONNECTION) {
+		case "connected":
+		obj.style.color = "green";
+			break;
+		case "disconnected":
+			obj.style.color = "red";
+			break;
+
+	}
 }
 
 class Cursor {
@@ -72,12 +85,52 @@ socket.on('playerList', function(data){
 	console.log(data)
 });
 
+socket.on('inGame', function(data){
+	if (!IN_GAME) {changeScene()}
+	IN_GAME = true;
+})
+
 socket.on('sync', function (sync){
   world = sync.world;
   render()
 })
+function changeScene() {
+	document.getElementById('menu').style = "display: none;"
+	document.getElementById('container').style = ""
+	for(i=0;i < 5;i++) {
+		let span = document.createElement('span')
+		span.className = "button"
+		let n;
+		switch (i) {
+		case (1):
+			n = 4
+		break;
+		case (2):
+			n = 32
+		break;
+		case (3):
+			n = 33
+		break;
+		case (4):
+			n = 34
+		break;
+		default:
+		n = 5
+		}
+		span.appendChild(tiles[n]);
+		document.getElementById("buttonBar").appendChild(span);
+		span.no = i;
+		span.addEventListener('click', e => {
+				clickSelector(e)
+			})
+}
+}
 
-function loadSprites(){
+
+
+
+
+function loadSprites() {
 	var spriteJank = document.getElementById('spriteJank');
 	var ctxj = spriteJank.getContext('2d');
 		var spriteSheet = new Image();
@@ -95,28 +148,35 @@ function loadSprites(){
 				tiles.push(tmp)
 			}
 		}
-	}
+}
 	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();
 }
 
+function clickSelector(e) {
+	document.querySelectorAll('.button').forEach(item => {
+		item.style ="";
+	})
+	event.target.style = "background: lightslategray;"
+	button = event.target.no
+
+
+
+}
 
 
 window.onload = function () {
-	// Register Events
+
-	const form = document.getElementById('form');
+document.getElementById("submit").addEventListener("click", e => {
-	form.addEventListener('submit', submit);
+	submit(e)
+});
 
 	hud.addEventListener('mousemove', e => {
 		mouseMoved(e)
@@ -207,7 +267,7 @@ function getMousePosition(canvas, event) {
 
     console.log("Click!")
 		console.log(xu,yu)
-		socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});
+		socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1});
 
 }
 function mouseMoved(event) {

www/style.css

@@ -10,36 +10,127 @@ canvas {
   image-rendering: crisp-edges;
   border: solid white;
   border-radius: 6px;
-  /* display: inline-block; */
+  border-width: 3px;
-  /* margin: auto; */
 }
 
-.status{
+.left{
-  color: green;
+  display: block;
+  transform: translate(0, 50px);
+  float:left;
+  width: 100px;
+  height: 437px;
+  background: darkolivegreen;
 }
 
-.hidden {
+.right{
-  display: none;
+  display: block;
+  transform: translate(0, 50px);
+  float:right;
+  width: 100px;
+  height: 437px;
+  background: darkolivegreen;
+}
+
+.top {
+position: absolute;
+background: salmon;
+width: 632px;
+height: 50px;
+}
+
+.bottom{
+  position: absolute;
+  background: coral;
+  width:632px;
+  height:100px;
+  transform: translate(0, 486px);
+}
+
+
+#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;
-  position: fixed;
+  position: absolute;
-  left: 50%;
   transform: translate(-50%, 0);
 }
 
 .canvas2 {
   z-index: 1;
-  position: fixed;
+  position: absolute;
-  left: 50%;
   transform: translate(-50%, 0);
+
+
 }
 
 .canvasStack {
-  position: fixed;
+  position: absolute;
-  top: 150px;
+  top: 50px;
+  background: darkslategray;
+  /* display: block; */
+  /* position: relative; */
+  /* top: 150px; */
+}
 
+.wrapper {
+  left: 50%;
+  transform: translate(-50%, 0);
+  position: absolute;
+  background: khaki;
+  width: 632px;
+  height: 586px;
+}
+
+.hidden {
+  display: none;
 }
 
 body {