Alexander/MultiplayerMinesweeper
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Everything that worked before works now as modules.

Browse source 
More cleanup needed.
This commit is contained in:
Alexander Bass 2022-06-19 20:18:47 -04:00
parent 1c032c40b2
commit e755f4bed3
17 changed files with 257 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
www/scripts/display/canvas.js Normal file
View file

27
www/scripts/display/draw.js
View file

@ -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 { canvas, hud, ctx, hctx } from './html.js';
import { cursor } from '../interface/game/mouse.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)
}

7
www/scripts/display/html.js
View file

@ -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

0
www/scripts/display/hud.js Normal file
View file

1
www/scripts/env.js Normal file
View file

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

10
www/scripts/game/game.js
View file

@ -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])

13
www/scripts/interface/game/connection.js Normal file
View file

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

52
www/scripts/interface/game/mouse.js Normal file
View file

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

46
www/scripts/interface/game/picker.js Normal file
View file

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

16
www/scripts/interface/mainmenu/menu.js Normal file
View file

@ -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()
}

8
www/scripts/interface/scene.js Normal file
View file

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

27
www/scripts/mouse.js
View file

@ -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
}
}

63
www/scripts/net/netcode.js Normal file
View file

@ -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 = []
}

17
www/scripts/net/status.js Normal file
View file

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

1
www/scripts/netcode.js
View file

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

204
www/scripts/script.js
View file

@ -1,202 +1,6 @@
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
import { render } from './display/draw.js';
import { game } from './game/game.js'
import * as menu from './interface/mainmenu/menu.js'
import * as net from "/scripts/net/netcode.js"
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});
}

3
www/scripts/util.js Normal file
View file

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