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://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}); }