Everything that worked before works now as modules.

More cleanup needed.

www/scripts/display/draw.js

@@ -1,17 +1,24 @@
-import * as main from './../script.js';
+import * as main from '../script.js';
 import {tileArray} from './tileRenderer.js';
-import { cursor } from './../mouse.js';
+import { cursor } from '../interface/game/mouse.js'
-import { canvas, hud, ctx, hctx } from './html.js';
+import { ctx, hctx } from './html.js';
+import { game } from '../game/game.js'
 
-export function renderTiles(tileSize, gridSize, world) {      // DRAW THE IMAGE TO THE CANVAS.
+export function render() {
+renderTiles()
+}
+
+export function renderTiles() {      // DRAW THE IMAGE TO THE CANVAS.
   let x, y = 0
+  const gridSize = game.gridSize;
+  const tileSize = game.tileSize;
   for(x = 0; x < gridSize[0]; x++){
     for(y = 0; y < gridSize[1]; y++){
       const xu = x*tileSize;
       const yu = y*tileSize;
-
+      const tempWorld = game.world;
 			// Draw buildings
-			switch (world[x][y].type) {
+			switch (tempWorld[x][y].type) {
 				case (0):
 	        ctx.drawImage(tileArray[0], xu,yu)
 				break;
@@ -24,7 +31,7 @@ export function renderTiles(tileSize, gridSize, world) {      // DRAW THE IMAGE
 			}
 
 			// Draw Structures
-			switch (world[x][y].structure) {
+			switch (tempWorld[x][y].structure) {
 				case (1):
 		      ctx.drawImage(tileArray[4], xu,yu)
 				break;
@@ -40,9 +47,9 @@ export function renderTiles(tileSize, gridSize, world) {      // DRAW THE IMAGE
 			}
 
 			// Draw Property overlays
-			if (world[x][y].color != null){
+			if (tempWorld[x][y].color != null){
 				ctx.beginPath();
-				ctx.fillStyle = world[x][y].color;
+				ctx.fillStyle = tempWorld[x][y].color;
 
 				ctx.rect(xu, yu, tileSize, tileSize)
 				ctx.globalAlpha = 0.6;
@@ -55,7 +62,7 @@ export function renderTiles(tileSize, gridSize, world) {      // DRAW THE IMAGE
   console.log("image Rendered")
 }
 export function renderHud(x, y) {
-  const tileSize = main.game.tileSize;
+  const tileSize = game.tileSize;
   hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize)
   hctx.drawImage(tileArray[80], x*tileSize,y*tileSize)
 }

www/scripts/display/html.js

@@ -1,4 +1,11 @@
+import {game} from "../game/game.js"
+
 export var canvas = document.getElementById('canvas');
 export var ctx = canvas.getContext('2d');
 export var hud = document.getElementById('hud');
 export var hctx = hud.getContext('2d');
+
+canvas.width = game.tileSize*game.gridSize[0];
+canvas.height = game.tileSize*game.gridSize[1];
+hud.width = canvas.width
+hud.height = canvas.height

www/scripts/env.js

@@ -0,0 +1 @@
+export const IP_ADDRESS = 'http://localhost:8082/'

www/scripts/game/game.js

@@ -0,0 +1,10 @@
+class Game {
+	constructor(tileSize, gridSize, world) {
+		this.tileSize = tileSize;
+		this.gridSize = gridSize;
+		this.world = world;
+		this.status = "none";
+	}
+}
+
+export var game = new Game(24, [18, 18])

www/scripts/interface/game/connection.js

@@ -0,0 +1,13 @@
+export function updateConnectionStatus(connection) {
+	let obj = document.getElementById("status")
+	obj.textContent = `Server Connection: ${connection}`
+	switch (connection) {
+		case "connected":
+		obj.style.color = "green";
+			break;
+		case "disconnected":
+			obj.style.color = "red";
+			break;
+
+	}
+}

www/scripts/interface/game/mouse.js

@@ -0,0 +1,52 @@
+import {game} from "../../game/game.js";
+import {renderHud } from '../../display/draw.js';
+import { clickCanvas } from "/scripts/net/netcode.js";
+import { getButton } from "/scripts/interface/game/picker.js";
+
+class Cursor {
+	constructor(){
+		this.x = 0
+		this.y = 0
+		this.xold = 0
+		this.yold = 0
+	}
+
+}
+export var cursor = new Cursor();
+
+hud.addEventListener('mousemove', e => {
+  mouseMoved(e)
+});
+
+hud.addEventListener("mousedown", function(e)
+{
+    getMousePosition(canvas, e);
+});
+
+function mouseMoved(event) {
+	const x = Math.floor(event.offsetX/game.tileSize)
+	const y = Math.floor(event.offsetY/game.tileSize)
+	if (cursor.xold != x || cursor.yold != y) {
+		cursor.x = x
+		cursor.y = y
+    renderHud(x, y)
+	cursor.xold = x
+	cursor.yold = y
+}
+}
+
+function getMousePosition(canvas, event) {
+    // Get mouse position on canvas
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    // const xu = Math.floor(x/tileSize)
+    // const yu = Math.floor(y/tileSize)
+		const xu = cursor.x
+		const yu = cursor.y
+
+    console.log("Click!")
+		console.log(xu,yu)
+		clickCanvas({tilePosition: [xu,yu], structure: getButton()*1})
+
+}

www/scripts/interface/game/picker.js

@@ -0,0 +1,46 @@
+import {tileArray} from "/scripts/display/tileRenderer.js"
+
+var button = 0;
+
+function clickSelector(e) {
+	document.querySelectorAll('.button').forEach(item => {
+		item.style ="";
+	})
+	event.target.style = "background: lightslategray;"
+	button = event.target.no
+
+}
+
+export function create() {
+for(let 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(tileArray[n]);
+	document.getElementById("buttonBar").appendChild(span);
+	span.no = i;
+	span.addEventListener('click', e => {
+			clickSelector(e);
+		});
+};
+};
+
+export function getButton() {
+	return button;
+}

www/scripts/interface/mainmenu/menu.js

@@ -0,0 +1,16 @@
+import * as status from "../../net/status.js"
+import {joinGame} from "/scripts/net/netcode.js"
+import { changeScene } from "/scripts/interface/scene.js"
+
+document.getElementById("submit").addEventListener("click", e => {
+	submit(e)
+});
+
+function submit(event) {
+	const room = document.getElementById("room").value
+	const name = document.getElementById("name").value
+	if (room == '' || name == '' || status.get() == 'disconnected') return
+	joinGame({room: room, name: name})
+	event.preventDefault();
+	changeScene()
+}

www/scripts/interface/scene.js

@@ -0,0 +1,8 @@
+
+import { create } from "/scripts/interface/game/picker.js"
+
+export function changeScene() {
+	document.getElementById('menu').style = "display: none;"
+	document.getElementById('container').style = ""
+  create();
+};

www/scripts/mouse.js

@@ -1,27 +0,0 @@
-
-class Cursor {
-	constructor(){
-		this.x = 0
-		this.y = 0
-		this.xold = 0
-		this.yold = 0
-	}
-
-}
-export var cursor = new Cursor();
-
-hud.addEventListener('mousemove', e => {
-  mouseMoved(e)
-});
-
-function mouseMoved(event) {
-	const x = Math.floor(event.offsetX/main.game.tileSize)
-	const y = Math.floor(event.offsetY/main.game.tileSize)
-	if (cursor.xold != x || cursor.yold != y) {
-		cursor.x = x
-		cursor.y = y
-    renderHud(x, y)
-	cursor.xold = x
-	cursor.yold = y
-}
-}

www/scripts/net/netcode.js

@@ -0,0 +1,63 @@
+import * as env from "/scripts/env.js"
+import * as status from "/scripts/net/status.js"
+import {game} from "/scripts/game/game.js"
+import {render} from "/scripts/display/draw.js"
+export var socket = io.connect(env.IP_ADDRESS);
+
+export function joinGame(data){
+		socket.emit('joinGame', data);
+}
+
+export function clickCanvas(data) {
+	socket.emit('clickCanvas', data);
+}
+
+function leaveGame(socket){
+		socket.emit('leaveGame', {});
+}
+
+socket.on('connect', function(data){
+	status.connected()
+})
+socket.on('disconnect', function(data){
+	status.disconnected()
+})
+
+socket.on('illegalAction', function(data){
+	let action
+	switch (data) {
+		case 1:
+			action = "You must be in game to do this."
+			break;
+		case 20:
+			action = "That name is already taken."
+			break;
+		case 23:
+			action = "Invalid Placement location."
+			break;
+		default:
+			action = "Unknown action."
+
+	}
+console.log(`Illegal Action. ${action}`)
+alert(`Illegal Action, ${action}`)
+})
+
+socket.on('playerList', function(data){
+	console.log(data)
+});
+
+socket.on('inGame', function(data){
+	if (!game.status) {changeScene()}
+	game.status = true;
+})
+
+socket.on('sync', function (sync){
+  game.world = sync.world;
+  render()
+})
+
+window.onbeforeunload = function(){
+   socket.disconnect();
+	 game.world = []
+}

www/scripts/net/status.js

@@ -0,0 +1,17 @@
+import {updateConnectionStatus} from "/scripts/interface/game/connection.js"
+
+var SERVER_CONNECTION = "disconnected"
+
+export function get() {
+return SERVER_CONNECTION;
+}
+
+export function connected() {
+ SERVER_CONNECTION = "connected";
+ updateConnectionStatus(SERVER_CONNECTION);
+}
+
+export function disconnected() {
+  SERVER_CONNECTION = "disconnected";
+  updateConnectionStatus(SERVER_CONNECTION);
+}

www/scripts/netcode.js

@@ -1 +0,0 @@
-import * as main from './script.js';

www/scripts/script.js

@@ -1,202 +1,6 @@
-import * as draw from './display/draw.js';
+import { render } from './display/draw.js';
-import { cursor } from './mouse.js'
+import { game } from './game/game.js'
-import { tileArray } from './display/tileRenderer.js'
+import * as menu from './interface/mainmenu/menu.js'
-// const perlinScale = 3;
+import * as net from "/scripts/net/netcode.js"
-const IP_ADDRESS = 'http://localhost:8082/'
-var SERVER_CONNECTION = "disconnected"
-var IN_GAME = false
 
-var world
 var button
-
-
-class Game {
-	constructor(tileSize, gridSize, world) {
-		this.tileSize = tileSize;
-		this.gridSize = gridSize;
-		this.world = world;
-	}
-
-}
-
-export var game = new Game(24, [18, 18])
-
-function render() {
-draw.renderTiles(game.tileSize, game.gridSize, game.world)
-}
-
-
-
-
-
-
-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();
-})
-
-socket.on('illegalAction', function(data){
-	let action
-	switch (data) {
-		case 1:
-			action = "You must be in game to do this."
-			break;
-		case 20:
-			action = "That name is already taken."
-			break;
-		case 23:
-			action = "Invalid Placement location."
-			break;
-		default:
-			action = "Unknown action."
-
-	}
-console.log(`Illegal Action. ${action}`)
-alert(`Illegal Action, ${action}`)
-})
-
-function updateConnectionStatus() {
-	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;
-
-	}
-}
-
-
-window.onbeforeunload = function(){
-   socket.disconnect();
-	 game.world = []
-}
-
-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){
-  game.world = sync.world;
-  render()
-})
-
-function changeScene() {
-	document.getElementById('menu').style = "display: none;"
-	document.getElementById('container').style = ""
-	for(let 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(tileArray[n]);
-		document.getElementById("buttonBar").appendChild(span);
-		span.no = i;
-		span.addEventListener('click', e => {
-				clickSelector(e)
-			})
-}
-}
-
-
-
-function submit(event) {
-	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 () {
-
-document.getElementById("submit").addEventListener("click", e => {
-	submit(e)
-});
-
-
-
-	hud.addEventListener("mousedown", function(e)
-	{
-			getMousePosition(canvas, e);
-	});
-
-	//Set canvases to be ready
-	canvas.width = game.tileSize*game.gridSize[0];
-	canvas.height = game.tileSize*game.gridSize[1];
-	hud.width = canvas.width
-	hud.height = canvas.height
-
-	//Load all sprites into memory
-}
-
-function randomNumber(min, max) {
-    return Math.floor(Math.random() * (max - min) + min);
-}
-
-
-
-function getMousePosition(canvas, event) {
-    // Get mouse position on canvas
-    const rect = canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    // const xu = Math.floor(x/tileSize)
-    // const yu = Math.floor(y/tileSize)
-		const xu = cursor.x
-		const yu = cursor.y
-    // Convert canvas coordinates to usable coordinates within the coordinate system
-
-
-    console.log("Click!")
-		console.log(xu,yu)
-		socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1});
-
-}

www/scripts/util.js

@@ -0,0 +1,3 @@
+export function randomNumber(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+}