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) {
this.id = id;
this.players = [];
this.oldWorld = []
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 metadata = {players: roomPlayers, roomID: roomID}
io.to(client.game.id).emit('metadata', metadata)
const id = client.game.id
client.emit('message', id)
}
@ -52,25 +49,20 @@ function connected(client) {
client.join(info[0].id)
client.game = info[0];
client.player = info[1]
log.log(`${client.id} joined the game as ${data.name} `, 'FgMagenta');
client.emit('inGame', true)
client.sync()
client.sendMeta()
})
client.on('leaveGame', function(data){
log.log(client.id + ' disconnected.')
client.game.removePlayerByID(client.id)
})
client.on('clickCanvas', function(data){
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.sync()
})
}

View file

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

View file

@ -26,14 +26,26 @@
<div class="menu" id="menu">
<div id="joinType">
<h2>Create Room Or Join with code?</h2>
<button type="button" id="gotoCreate">create game</button>
<button type="button" id="gotoJoin">Join game</button>
<h1>Join Game</h1>
<hr>
<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>
<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;">
<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>
</div>
<div id="createGame" style="display: none;">
@ -44,7 +56,7 @@
<h3>Settings</h3>
<div class="row">
<span>Username</span>
<input type="text" id="createGameUsername" value="">
<input type="text" id="createGameUsername" value="" placeholder="Input Username">
</div>
<u>Color</u>
<div id="createGameSelectColorBar"></div>
@ -64,15 +76,15 @@
</div>
<div class="row">
<span>Number of mines</span>
<input type="number" id="createGameOptionsMines" value="100">
<input type="text" id="createGameOptionsMines" value="100">
</div>
<div class="row">
<span>Minefield Width</span>
<input type="number" id="createGameOptionsWidth" value="32">
<input type="text" id="createGameOptionsWidth" value="32">
</div>
<div class="row">
<span>Minefield Height</span>
<input type="number" id="createGameOptionsHeight" value="32">
<input type="text" id="createGameOptionsHeight" value="32">
</div>

View file

@ -4,19 +4,19 @@ export var canvas = document.getElementById('canvas');
export var ctx = canvas.getContext('2d');
export var wrapper = document.getElementById('game');
scaleEverythingGood()
window.addEventListener('resize', scaleEverythingGood);
function scaleEverythingGood() {
const width = window.innerWidth-2;
const height = window.innerHeight-2;
let canvasWidth
if (canvas.width > canvas.height) {
canvasWidth = Math.max(width, height)
} else {
canvasWidth = width
}
canvasWidth = canvasWidth/4
canvas.style.width = `${canvasWidth}px`;
}
// scaleEverythingGood()
//
// window.addEventListener('resize', scaleEverythingGood);
//
// function scaleEverythingGood() {
// const width = window.innerWidth-2;
// const height = window.innerHeight-2;
// let canvasWidth
// if (canvas.width > canvas.height) {
// canvasWidth = Math.max(width, height)
// } else {
// canvasWidth = width
// }
// canvasWidth = canvasWidth/4
// 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 {Picker} from "./picker.js"
import {tileArray, menuArray} from "/scripts/display/tileRenderer.js"
import * as util from "/scripts/util.js"
import {ID} from "/scripts/util.js"
import * as status from "/scripts/net/status.js"
@ -30,25 +31,36 @@ mineSlider.oninput = function() {
menuPicker.select(3)
}
mineBox.addEventListener("change", function() {
mineBox.addEventListener("input", function() {
updateCount(1)
menuPicker.select(3)
})
heightBox.addEventListener("change", function(){
heightBox.addEventListener("input", function(){
heightBox.value = Math.abs(Math.round(heightBox.value.replace(/\D/g,'')));
updateCount(2)
widthBox.value = Math.abs(Math.round(heightBox.value))
})
heightBox.addEventListener("change", function(){
heightBox.value = util.clamp(heightBox.value, 8, 500)
menuPicker.select(3)
})
widthBox.addEventListener("change", function(){
widthBox.addEventListener("input", function(){
widthBox.value = util.clamp(Math.abs(Math.round(widthBox.value.replace(/\D/g,''))), 8, 500)
updateCount(2)
widthBox.value = Math.abs(Math.round(widthBox.value))
})
widthBox.addEventListener("change", function(){
widthBox.value = util.clamp(widthBox.value, 8, 500)
menuPicker.select(3)
})
var mines = 5;
var mode = 0;
@ -90,10 +102,9 @@ function updateCount(mode) {
const max = maxMines(width, height)
const min = minMines(width, height)
console.log(max, min)
if (mode === 0) {
mines = Math.round((mineSlider.value/10) * (width*height) /100)
console.log(mines, mineBox.value)
updateCount(2)
}
else if (mode === 1) {

View file

@ -10,6 +10,11 @@ function ID(id) {
const joinType = ID("joinType")
const joinGameMenu = ID("joinGame")
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 => {
@ -23,8 +28,6 @@ joinType.style.display = "none"
joinGameMenu.style.display = "";
})
ID("joinGameButton").addEventListener("click", e => {
join(e)
});

View file

@ -5,3 +5,7 @@ export function randomNumber(min, max) {
export function ID(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;
}
h1, h2 {
h1, h2, h3 {
margin: 0px;
}
@ -76,6 +76,36 @@ hr {
/* 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 {
position: absolute;
-webkit-user-select: none;