Before starting work on only sending changes in world

Doing this to allow for stupidly big worlds (also better network usage)
This commit is contained in:
Alexander Bass 2022-06-24 08:10:06 -04:00
parent c86a82ab63
commit fe794b69a9
9 changed files with 99 additions and 47 deletions

View file

@ -7,6 +7,7 @@ export class Game {
constructor(id, options) { constructor(id, options) {
this.id = id; this.id = id;
this.players = []; this.players = [];
this.oldWorld = []
this.world = new World(options) this.world = new World(options)
} }

View file

@ -19,9 +19,6 @@ function connected(client) {
const roomPlayers = client.game.players; // Dont send client id's to everyone, TODO const roomPlayers = client.game.players; // Dont send client id's to everyone, TODO
const metadata = {players: roomPlayers, roomID: roomID} const metadata = {players: roomPlayers, roomID: roomID}
io.to(client.game.id).emit('metadata', metadata) io.to(client.game.id).emit('metadata', metadata)
const id = client.game.id const id = client.game.id
client.emit('message', id) client.emit('message', id)
} }
@ -52,25 +49,20 @@ function connected(client) {
client.join(info[0].id) client.join(info[0].id)
client.game = info[0]; client.game = info[0];
client.player = info[1] client.player = info[1]
log.log(`${client.id} joined the game as ${data.name} `, 'FgMagenta'); log.log(`${client.id} joined the game as ${data.name} `, 'FgMagenta');
client.emit('inGame', true) client.emit('inGame', true)
client.sync() client.sync()
client.sendMeta() client.sendMeta()
}) })
client.on('leaveGame', function(data){ client.on('leaveGame', function(data){
log.log(client.id + ' disconnected.') log.log(client.id + ' disconnected.')
client.game.removePlayerByID(client.id) client.game.removePlayerByID(client.id)
}) })
client.on('clickCanvas', function(data){ client.on('clickCanvas', function(data){
if (!roomManager.getAllPlayerIDs().includes(client.id)) return new IllegalAction(client.id, 1) if (!roomManager.getAllPlayerIDs().includes(client.id)) return new IllegalAction(client.id, 1)
client.game.world.click(data.tilePosition[0],data.tilePosition[1], data.mode, client.player) client.game.world.click(data.tilePosition[0],data.tilePosition[1], data.mode, client.player)
client.sync() client.sync()
}) })
} }

View file

@ -15,7 +15,6 @@ export function reveal(x, y, data) {
if (data[x][y].type === 1) { if (data[x][y].type === 1) {
while (toSearch.length > 0) { while (toSearch.length > 0) {
console.log("LoopReveal")
const x = toSearch[0][0] const x = toSearch[0][0]
const y = toSearch[0][1] const y = toSearch[0][1]
searchedLocations.push(toSearch[0]) searchedLocations.push(toSearch[0])

View file

@ -26,14 +26,26 @@
<div class="menu" id="menu"> <div class="menu" id="menu">
<div id="joinType"> <div id="joinType">
<h2>Create Room Or Join with code?</h2> <h1>Join Game</h1>
<button type="button" id="gotoCreate">create game</button> <hr>
<button type="button" id="gotoJoin">Join game</button> <div class="codeContainer">
<h3>Invited to a game? Enter the code into the box below and click 'join'</h3>
<input type="text" class="codeInput" id="joinGameCode" value="" placeholder="Enter Game Code"> <br>
<button type="button" class="codeButton" id="gotoJoin">Join Game</button>
</div> </div>
<hr>
<br><br>
<h1>Create New Game</h1>
<hr>
<div class="codeContainer">
<h3>To create a new game to play with your friends, click the 'Create Game' button below</h3>
<button type="button" id="gotoCreate">Create Game</button>
</div>
<hr>
</div>
<div id="joinGame" style="display: none;"> <div id="joinGame" style="display: none;">
<input type="text" id="joinGameCode" value=""> <input type="text" id="joinGameCode" value="">
<input type="text" id="joinGameUsername" value="bob"> <input type="text" id="joinGameUsername" value="">
<button type="button" id="joinGameButton">Join</button> <button type="button" id="joinGameButton">Join</button>
</div> </div>
<div id="createGame" style="display: none;"> <div id="createGame" style="display: none;">
@ -44,7 +56,7 @@
<h3>Settings</h3> <h3>Settings</h3>
<div class="row"> <div class="row">
<span>Username</span> <span>Username</span>
<input type="text" id="createGameUsername" value=""> <input type="text" id="createGameUsername" value="" placeholder="Input Username">
</div> </div>
<u>Color</u> <u>Color</u>
<div id="createGameSelectColorBar"></div> <div id="createGameSelectColorBar"></div>
@ -64,15 +76,15 @@
</div> </div>
<div class="row"> <div class="row">
<span>Number of mines</span> <span>Number of mines</span>
<input type="number" id="createGameOptionsMines" value="100"> <input type="text" id="createGameOptionsMines" value="100">
</div> </div>
<div class="row"> <div class="row">
<span>Minefield Width</span> <span>Minefield Width</span>
<input type="number" id="createGameOptionsWidth" value="32"> <input type="text" id="createGameOptionsWidth" value="32">
</div> </div>
<div class="row"> <div class="row">
<span>Minefield Height</span> <span>Minefield Height</span>
<input type="number" id="createGameOptionsHeight" value="32"> <input type="text" id="createGameOptionsHeight" value="32">
</div> </div>

View file

@ -4,19 +4,19 @@ export var canvas = document.getElementById('canvas');
export var ctx = canvas.getContext('2d'); export var ctx = canvas.getContext('2d');
export var wrapper = document.getElementById('game'); export var wrapper = document.getElementById('game');
scaleEverythingGood() // scaleEverythingGood()
//
window.addEventListener('resize', scaleEverythingGood); // window.addEventListener('resize', scaleEverythingGood);
//
function scaleEverythingGood() { // function scaleEverythingGood() {
const width = window.innerWidth-2; // const width = window.innerWidth-2;
const height = window.innerHeight-2; // const height = window.innerHeight-2;
let canvasWidth // let canvasWidth
if (canvas.width > canvas.height) { // if (canvas.width > canvas.height) {
canvasWidth = Math.max(width, height) // canvasWidth = Math.max(width, height)
} else { // } else {
canvasWidth = width // canvasWidth = width
} // }
canvasWidth = canvasWidth/4 // canvasWidth = canvasWidth/4
canvas.style.width = `${canvasWidth}px`; // canvas.style.width = `${canvasWidth}px`;
} // }

View file

@ -2,6 +2,7 @@ import {joinGame, createGame} from "/scripts/net/netcode.js"
import { changeScene } from "/scripts/interface/scene.js" import { changeScene } from "/scripts/interface/scene.js"
import {Picker} from "./picker.js" import {Picker} from "./picker.js"
import {tileArray, menuArray} from "/scripts/display/tileRenderer.js" import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
import * as util from "/scripts/util.js"
import {ID} from "/scripts/util.js" import {ID} from "/scripts/util.js"
import * as status from "/scripts/net/status.js" import * as status from "/scripts/net/status.js"
@ -30,25 +31,36 @@ mineSlider.oninput = function() {
menuPicker.select(3) menuPicker.select(3)
} }
mineBox.addEventListener("change", function() { mineBox.addEventListener("input", function() {
updateCount(1) updateCount(1)
menuPicker.select(3) menuPicker.select(3)
}) })
heightBox.addEventListener("change", function(){ heightBox.addEventListener("input", function(){
heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
updateCount(2) updateCount(2)
widthBox.value = Math.abs(Math.round(heightBox.value))
menuPicker.select(3) })
heightBox.addEventListener("change", function(){
heightBox.value = util.clamp(heightBox.value, 8, 500)
menuPicker.select(3)
})
widthBox.addEventListener("input", function(){
widthBox.value = util.clamp(Math.abs(Math.round(widthBox.value.replace(/\D/g,''))), 8, 500)
updateCount(2)
}) })
widthBox.addEventListener("change", function(){ widthBox.addEventListener("change", function(){
updateCount(2) widthBox.value = util.clamp(widthBox.value, 8, 500)
widthBox.value = Math.abs(Math.round(widthBox.value)) menuPicker.select(3)
menuPicker.select(3)
}) })
var mines = 5; var mines = 5;
var mode = 0; var mode = 0;
@ -90,10 +102,9 @@ function updateCount(mode) {
const max = maxMines(width, height) const max = maxMines(width, height)
const min = minMines(width, height) const min = minMines(width, height)
console.log(max, min)
if (mode === 0) { if (mode === 0) {
mines = Math.round((mineSlider.value/10) * (width*height) /100) mines = Math.round((mineSlider.value/10) * (width*height) /100)
console.log(mines, mineBox.value)
updateCount(2) updateCount(2)
} }
else if (mode === 1) { else if (mode === 1) {

View file

@ -10,6 +10,11 @@ function ID(id) {
const joinType = ID("joinType") const joinType = ID("joinType")
const joinGameMenu = ID("joinGame") const joinGameMenu = ID("joinGame")
const createGameMenu = ID("createGame") const createGameMenu = ID("createGame")
const codeInput = ID("joinGameCode")
codeInput.addEventListener("input", e => {
e.target.value = e.target.value.toUpperCase().replace(/[^0-9a-z]/gi, '')
})
ID("gotoCreate").addEventListener("click", e => { ID("gotoCreate").addEventListener("click", e => {
@ -23,8 +28,6 @@ joinType.style.display = "none"
joinGameMenu.style.display = ""; joinGameMenu.style.display = "";
}) })
ID("joinGameButton").addEventListener("click", e => { ID("joinGameButton").addEventListener("click", e => {
join(e) join(e)
}); });

View file

@ -5,3 +5,7 @@ export function randomNumber(min, max) {
export function ID(id) { export function ID(id) {
return document.getElementById(id) return document.getElementById(id)
} }
export function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}

View file

@ -9,7 +9,7 @@
font-family: moderndos; font-family: moderndos;
} }
h1, h2 { h1, h2, h3 {
margin: 0px; margin: 0px;
} }
@ -76,6 +76,36 @@ hr {
/* background: red; */ /* background: red; */
} }
.codeContainer {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 20px;
display: block;
position: relative;
/* background: red; */
width: 700px;
}
input {
text-align: center;
}
input.codeInput {
width: inherit !important;
text-align: center;
padding-top: 20px !important;
padding-bottom: 20px !important;
border-radius: 2px;
outline: solid gray 2px;
font-size: 4.8em;
}
.codeContainer > button {
max-width: auto !important;
width: inherit !important;
}
.sliderNumber { .sliderNumber {
position: absolute; position: absolute;
-webkit-user-select: none; -webkit-user-select: none;