2022-06-19 21:54:34 +00:00
|
|
|
import * as draw from './display/draw.js';
|
|
|
|
import { cursor } from './mouse.js'
|
|
|
|
import { tileArray } from './display/tileRenderer.js'
|
2022-06-19 20:21:33 +00:00
|
|
|
// const perlinScale = 3;
|
2022-06-19 21:54:34 +00:00
|
|
|
const IP_ADDRESS = 'http://localhost:8082/'
|
2022-06-19 20:21:33 +00:00
|
|
|
var SERVER_CONNECTION = "disconnected"
|
|
|
|
var IN_GAME = false
|
|
|
|
|
|
|
|
var world
|
|
|
|
var button
|
|
|
|
|
2022-06-19 21:54:34 +00:00
|
|
|
|
|
|
|
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)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-06-19 20:21:33 +00:00
|
|
|
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();
|
2022-06-19 21:54:34 +00:00
|
|
|
game.world = []
|
2022-06-19 20:21:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
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){
|
2022-06-19 21:54:34 +00:00
|
|
|
game.world = sync.world;
|
2022-06-19 20:21:33 +00:00
|
|
|
render()
|
|
|
|
})
|
2022-06-19 21:54:34 +00:00
|
|
|
|
2022-06-19 20:21:33 +00:00
|
|
|
function changeScene() {
|
|
|
|
document.getElementById('menu').style = "display: none;"
|
|
|
|
document.getElementById('container').style = ""
|
2022-06-19 21:54:34 +00:00
|
|
|
for(let i=0;i < 5;i++) {
|
2022-06-19 20:21:33 +00:00
|
|
|
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
|
|
|
|
}
|
2022-06-19 21:54:34 +00:00
|
|
|
span.appendChild(tileArray[n]);
|
2022-06-19 20:21:33 +00:00
|
|
|
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)
|
|
|
|
});
|
|
|
|
|
2022-06-19 21:54:34 +00:00
|
|
|
|
2022-06-19 20:21:33 +00:00
|
|
|
|
|
|
|
hud.addEventListener("mousedown", function(e)
|
|
|
|
{
|
|
|
|
getMousePosition(canvas, e);
|
|
|
|
});
|
|
|
|
|
|
|
|
//Set canvases to be ready
|
2022-06-19 21:54:34 +00:00
|
|
|
canvas.width = game.tileSize*game.gridSize[0];
|
|
|
|
canvas.height = game.tileSize*game.gridSize[1];
|
2022-06-19 20:21:33 +00:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2022-06-19 21:54:34 +00:00
|
|
|
|
2022-06-19 20:21:33 +00:00
|
|
|
|
|
|
|
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});
|
|
|
|
|
|
|
|
}
|