diff --git a/www/index.html b/www/index.html index 6c34303..931304c 100644 --- a/www/index.html +++ b/www/index.html @@ -2,7 +2,7 @@ - + @@ -42,5 +42,5 @@ - + diff --git a/www/scripts/display/draw.js b/www/scripts/display/draw.js new file mode 100644 index 0000000..c737cd0 --- /dev/null +++ b/www/scripts/display/draw.js @@ -0,0 +1,61 @@ +import * as main from './../script.js'; +import {tileArray} from './tileRenderer.js'; +import { cursor } from './../mouse.js'; +import { canvas, hud, ctx, hctx } from './html.js'; + +export function renderTiles(tileSize, gridSize, world) { // DRAW THE IMAGE TO THE CANVAS. + let x, y = 0 + for(x = 0; x < gridSize[0]; x++){ + for(y = 0; y < gridSize[1]; y++){ + const xu = x*tileSize; + const yu = y*tileSize; + + // Draw buildings + switch (world[x][y].type) { + case (0): + ctx.drawImage(tileArray[0], xu,yu) + break; + case (1): + ctx.drawImage(tileArray[2], xu,yu) + break; + case (2): + ctx.drawImage(tileArray[1], xu,yu) + break; + } + + // Draw Structures + switch (world[x][y].structure) { + case (1): + ctx.drawImage(tileArray[4], xu,yu) + break; + case (2): + ctx.drawImage(tileArray[32], xu,yu) + break; + case (3): + ctx.drawImage(tileArray[33], xu,yu) + break; + case (4): + ctx.drawImage(tileArray[34], xu,yu) + break; + } + + // Draw Property overlays + if (world[x][y].color != null){ + ctx.beginPath(); + ctx.fillStyle = world[x][y].color; + + ctx.rect(xu, yu, tileSize, tileSize) + ctx.globalAlpha = 0.6; + ctx.fill() + ctx.globalAlpha = 1; + } + + } + } + console.log("image Rendered") +} +export function renderHud(x, y) { + const tileSize = main.game.tileSize; + hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize) + hctx.drawImage(tileArray[80], x*tileSize,y*tileSize) +} diff --git a/www/scripts/display/html.js b/www/scripts/display/html.js new file mode 100644 index 0000000..897d8cf --- /dev/null +++ b/www/scripts/display/html.js @@ -0,0 +1,4 @@ +export var canvas = document.getElementById('canvas'); +export var ctx = canvas.getContext('2d'); +export var hud = document.getElementById('hud'); +export var hctx = hud.getContext('2d'); diff --git a/www/scripts/display/tileRenderer.js b/www/scripts/display/tileRenderer.js new file mode 100644 index 0000000..819c882 --- /dev/null +++ b/www/scripts/display/tileRenderer.js @@ -0,0 +1,24 @@ +export var tileArray = loadSprites(); +export function loadSprites() { + var tiles = []; + var spriteJank = document.getElementById('spriteJank'); + var ctxj = spriteJank.getContext('2d'); + var spriteSheet = new Image(); + + spriteSheet.src = '/sheet.png' + spriteSheet.onload = function() { + + + for (let y = 0; y < 16; y++) { + for (let x = 0; x < 16; x++) { + ctxj.drawImage(spriteSheet, -x*24,-y*24) + var tmp = new Image(); + tmp.src = spriteJank.toDataURL(); + ctxj.clearRect(0, 0, 24, 24); + tiles.push(tmp) + } + } +} + spriteJank.remove(); + return tiles; +} diff --git a/www/scripts/game/game.js b/www/scripts/game/game.js new file mode 100644 index 0000000..e69de29 diff --git a/www/scripts/mouse.js b/www/scripts/mouse.js new file mode 100644 index 0000000..0a60fc5 --- /dev/null +++ b/www/scripts/mouse.js @@ -0,0 +1,27 @@ + +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 +} +} diff --git a/www/scripts/netcode.js b/www/scripts/netcode.js new file mode 100644 index 0000000..e1d280b --- /dev/null +++ b/www/scripts/netcode.js @@ -0,0 +1 @@ +import * as main from './script.js'; diff --git a/www/script.js b/www/scripts/script.js similarity index 54% rename from www/script.js rename to www/scripts/script.js index 98630ee..f16cf53 100644 --- a/www/script.js +++ b/www/scripts/script.js @@ -1,18 +1,35 @@ +import * as draw from './display/draw.js'; +import { cursor } from './mouse.js' +import { tileArray } from './display/tileRenderer.js' // const perlinScale = 3; -const IP_ADDRESS = 'http://127.0.0.1:8082/' +const IP_ADDRESS = 'http://localhost:8082/' var SERVER_CONNECTION = "disconnected" var IN_GAME = false -const tileSize = 24; -const gridSize = [18, 18]; var world -var tiles = [] var button -var canvas = document.getElementById('canvas'); -var hud = document.getElementById('hud'); -var ctx = canvas.getContext('2d'); -var hctx = hud.getContext('2d'); + +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); @@ -65,20 +82,10 @@ function updateConnectionStatus() { } } -class Cursor { - constructor(){ - this.x = 0 - this.y = 0 - this.xold = 0 - this.yold = 0 - } - -} -var cursor = new Cursor(); window.onbeforeunload = function(){ socket.disconnect(); - world = [] + game.world = [] } socket.on('playerList', function(data){ @@ -91,13 +98,14 @@ socket.on('inGame', function(data){ }) socket.on('sync', function (sync){ - world = sync.world; + game.world = sync.world; render() }) + function changeScene() { document.getElementById('menu').style = "display: none;" document.getElementById('container').style = "" - for(i=0;i < 5;i++) { + for(let i=0;i < 5;i++) { let span = document.createElement('span') span.className = "button" let n; @@ -117,7 +125,7 @@ function changeScene() { default: n = 5 } - span.appendChild(tiles[n]); + span.appendChild(tileArray[n]); document.getElementById("buttonBar").appendChild(span); span.no = i; span.addEventListener('click', e => { @@ -128,30 +136,6 @@ function changeScene() { - - -function loadSprites() { - var spriteJank = document.getElementById('spriteJank'); - var ctxj = spriteJank.getContext('2d'); - var spriteSheet = new Image(); - - spriteSheet.src = '/sheet.png' - spriteSheet.onload = function() { - - - for (y = 0; y < 16; y++) { - for (x = 0; x < 16; x++) { - ctxj.drawImage(spriteSheet, -x*24,-y*24) - var tmp = new Image(); - tmp.src = spriteJank.toDataURL(); - ctxj.clearRect(0, 0, 24, 24); - tiles.push(tmp) - } - } -} - spriteJank.remove(); -} - function submit(event) { const room = document.getElementById("room").value const name = document.getElementById("name").value @@ -171,16 +155,13 @@ function clickSelector(e) { } - window.onload = function () { document.getElementById("submit").addEventListener("click", e => { submit(e) }); - hud.addEventListener('mousemove', e => { - mouseMoved(e) - }); + hud.addEventListener("mousedown", function(e) { @@ -188,70 +169,19 @@ document.getElementById("submit").addEventListener("click", e => { }); //Set canvases to be ready - canvas.width = tileSize*gridSize[0]; - canvas.height = tileSize*gridSize[1]; + 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 - loadSprites() } function randomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); } -function render() { // DRAW THE IMAGE TO THE CANVAS. - let x, y = 0 - for(x = 0; x < gridSize[0]; x++){ - for(y = 0; y < gridSize[1]; y++){ - const xu = x*tileSize; - const yu = y*tileSize; - // Draw buildings - switch (world[x][y].type) { - case (0): - ctx.drawImage(tiles[0], xu,yu) - break; - case (1): - ctx.drawImage(tiles[2], xu,yu) - break; - case (2): - ctx.drawImage(tiles[1], xu,yu) - break; - } - - // Draw Structures - switch (world[x][y].structure) { - case (1): - ctx.drawImage(tiles[4], xu,yu) - break; - case (2): - ctx.drawImage(tiles[32], xu,yu) - break; - case (3): - ctx.drawImage(tiles[33], xu,yu) - break; - case (4): - ctx.drawImage(tiles[34], xu,yu) - break; - } - - // Draw Property overlays - if (world[x][y].color != null){ - ctx.beginPath(); - ctx.fillStyle = world[x][y].color; - - ctx.rect(xu, yu, tileSize, tileSize) - ctx.globalAlpha = 0.6; - ctx.fill() - ctx.globalAlpha = 1; - } - - } - } - console.log("image Rendered") -} function getMousePosition(canvas, event) { // Get mouse position on canvas @@ -270,15 +200,3 @@ function getMousePosition(canvas, event) { socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1}); } -function mouseMoved(event) { - const x = Math.floor(event.offsetX/tileSize) - const y = Math.floor(event.offsetY/tileSize) - if (cursor.xold != x || cursor.yold != y) { - cursor.x = x - cursor.y = y - hctx.clearRect(cursor.xold*tileSize, cursor.yold*tileSize, tileSize, tileSize) - hctx.drawImage(tiles[80], x*tileSize,y*tileSize) - cursor.xold = x - cursor.yold = y -} -}