MultiplayerMinesweeper/www/scripts/script.js

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

}