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

Commit before I destroy the server code

Browse source
This commit is contained in:
Alexander Bass 2022-06-22 21:14:51 -04:00
parent 23fddbe799
commit 1f49b1b9bf
9 changed files with 212 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scripts/game.mjs
View file

@ -7,7 +7,7 @@ export class Game {
constructor(name) { constructor(name) {
this.name = name; this.name = name;
this.players = []; this.players = [];
this.world = new World([16,9]) this.world = new World([16,16])
} }
addPlayer(id, name) { addPlayer(id, name) {

2
scripts/server/netcode.mjs
View file

@ -39,6 +39,8 @@ function connected(client) {
client.emit('inGame', true) client.emit('inGame', true)
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)

33
www/index.html
View file

@ -5,14 +5,15 @@
<script src="http://localhost:35729/livereload.js" charset="utf-8"></script> <script src="http://localhost:35729/livereload.js" charset="utf-8"></script>
<script type="text/javascript" src="socket.io.min.js"></script> <script type="text/javascript" src="socket.io.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src='scripts/script.js' type="module"></script>
</head> </head>
<body> <body>
<!-- Canvas used to generate individual sprites off one sprite atlas --> <!-- Canvas used to generate individual sprites off one sprite atlas -->
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas> <canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
<main> <main>
<p id="message"></p>
<div id="game"> <div id="game" style="display: none;">
<span id="leftBar"> <span id="leftBar">
<p id="status">Connection Status</p> <p id="status">Connection Status</p>
</span> </span>
@ -23,12 +24,30 @@
</span> </span>
</div> </div>
<div class="menu" id="menu" style="display: none;"> <div class="menu" id="menu">
<input type="text" id="room" value="room"> <div id="joinType">
<input type="text" id="name" value="bob"> <h2>Create Room Or Join with code?</h2>
<input type="submit" id="submit" value="join"> <button type="button" id="gotoCreate">create game</button>
<button type="button" id="gotoJoin">Join game</button>
</div>
<div id="joinGame" style="display: none;">
<input type="text" id="joinGameCode" value="">
<input type="text" id="joinGameUsername" value="bob">
<button type="button" id="joinGameButton">Join</button>
</div>
<div id="createGame" style="display: none;">
<input type="text" id="createGameUsername" value="bob">
<button type="button" id="createRoomButton">create Room</button>
<div id="createGameOptions">
<h3>Options:</h3>
<input type="number" id="createGameOptionsMines" value="100">
<input type="number" id="createGameOptionsWidth" value="32">
<input type="number" id="createGameOptionsHeight" value="32">
</div>
</div>
</div> </div>
</main> </main>
</body> </body>
<script src='scripts/script.js' type="module"></script>
</html> </html>

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

@ -3,8 +3,6 @@ import {game} from "../game/game.js"
export var canvas = document.getElementById('canvas'); 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');
export var rightBar = document.getElementById('rightBar');
export var leftBar = document.getElementById('leftBar');
canvas.width = game.tileSize*game.gridSize[0]; canvas.width = game.tileSize*game.gridSize[0];
canvas.height = game.tileSize*game.gridSize[1]; canvas.height = game.tileSize*game.gridSize[1];
scaleEverythingGood() scaleEverythingGood()
@ -22,9 +20,4 @@ function scaleEverythingGood() {
} }
canvasWidth = canvasWidth/4 canvasWidth = canvasWidth/4
canvas.style.width = `${canvasWidth}px`; canvas.style.width = `${canvasWidth}px`;
rightBar.style.width = `${canvasWidth}px`
leftBar.style.width = `${canvasWidth/2}px`
const wrapperWidth = rightBar.style.width + leftBar.style.width;
wrapper.style.width = `${wrapperWidth}px`
wrapper.style.height = `${height}px`
} }

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

@ -6,8 +6,8 @@ class Game {
this.status = status; this.status = status;
} }
reset() { reset() {
game = new Game(16, [16, 9], null, false); game = new Game(16, [16, 16], null, false);
} }
} }
export var game = new Game(16, [16, 9]) export var game = new Game(16, [16, 16])

63
www/scripts/interface/mainmenu/menu.js
View file

@ -1,23 +1,58 @@
import * as status from "../../net/status.js" import * as status from "../../net/status.js"
import {joinGame} from "/scripts/net/netcode.js" import {joinGame, createGame} from "/scripts/net/netcode.js"
import { changeScene } from "/scripts/interface/scene.js" import { changeScene } from "/scripts/interface/scene.js"
document.getElementById("submit").addEventListener("click", e => { function ID(id) {
submit(e) return document.getElementById(id)
}
const joinType = ID("joinType")
const joinGameMenu = ID("joinGame")
const createGameMenu = ID("createGame")
ID("gotoCreate").addEventListener("click", e => {
joinType.style.display = "none"
createGameMenu.style.display = ""
})
ID("gotoJoin").addEventListener("click", e => {
joinType.style.display = "none"
joinGameMenu.style.display = "";
})
ID("joinGameButton").addEventListener("click", e => {
join(e)
}); });
function submit(event) { function join(event) {
const room = document.getElementById("room").value const roomCode = ID("joinGameCode").value
const name = document.getElementById("name").value const name = ID("joinGameUsername").value
if (room == '' || name == '' || status.get() == 'disconnected') return if (room == '' || name == '' || status.get() == 'disconnected') return
joinGame({room: room, name: name}) joinGame({room: roomCode, name: name})
event.preventDefault();
} }
window.addEventListener('load',
function() { ID("createRoomButton").addEventListener("click", e => {
const room = document.getElementById("room").value create(e)
const name = document.getElementById("name").value });
joinGame({room: room, name: name})
}, false); function create(event) {
const name = ID("createGameUsername").value
const mines = ID("createGameOptionsMines").value
const width = ID("createGameOptionsWidth").value
const height = ID("createGameOptionsHeight").value
if (name == '' || mines == '' || width == '' || height == '' || status.get() == 'disconnected') return
const data =
{
name: name,
mines: mines,
width: width,
height: height
}
createGame(data)
}

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

@ -2,13 +2,13 @@ import * as picker from "/scripts/interface/game/picker.js"
export function changeScene(scene) { export function changeScene(scene) {
if (scene == "game") { if (scene == "game") {
// document.getElementById('menu').style = "display: none;" document.getElementById('menu').style = "display: none;"
// document.getElementById('container').style = "" document.getElementById('game').style = ""
// picker.create(); // picker.create();
} }
if (scene == "mainmenu") { if (scene == "mainmenu") {
// document.getElementById('menu').style = "" document.getElementById('menu').style = ""
// document.getElementById('container').style = "display: none;" document.getElementById('game').style = "display: none;"
// picker.destroy(); // picker.destroy();
} }
}; };

11
www/scripts/net/netcode.js
View file

@ -11,6 +11,10 @@ export function joinGame(data){
socket.emit('joinGame', data); socket.emit('joinGame', data);
} }
export function createGame(data){
socket.emit('createGame', data);
}
export function clickCanvas(data) { export function clickCanvas(data) {
socket.emit('clickCanvas', data); socket.emit('clickCanvas', data);
} }
@ -26,6 +30,13 @@ socket.on('disconnect', function(data){
status.disconnected() status.disconnected()
}) })
socket.on('message', function(data) {
const mess = document.getElementById("message")
mess.textContent = `Server Connection: ${connection}`
})
socket.on('illegalAction', function(data){ socket.on('illegalAction', function(data){
let action let action
illegalAction(data) illegalAction(data)

150
www/style.css
View file

@ -1,3 +1,95 @@
/* #mydiv {
position: absolute;
cursor: move;
z-index: 10;
background: coral;
width: 30px;
height: 30px;
border: 1px solid #d3d3d3;
} */
span.button > img {
pointer-events: none;
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
width: 70px;
height: 70px;
transform: translate(0, 8px);
border: 2px solid darkgray;
border-radius: 4px;
background: lightgray;
}
span.button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
background: tan;
width:90px;
height:90px;
margin: 5px 5px 5px 5px;
vertical-align: middle;
border-radius: 3px;
white-space: normal;
align-items: center;
cursor: pointer;
}
span.button:hover {
background: gray;
}
.canvas1{
z-index: 0;
}
.canvas3 {
z-index: 2;
}
.canvasStack {
/* top: 50px; */
background: darkslategray;
}
#wrapper {
/* display: flex; */
/* justify-content: right; */
/* left: 50%; */
/* transform: translate(-50%, 0); */
/* position: absolute; */
background: khaki;
width: 750px;
height: 750px;
}
#wrapwrap {
display: block;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}
main {
margin-left: auto;
margin-right: auto;
}
canvas { canvas {
-webkit-user-select: none; /* Chrome all / Safari all */ -webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */ -moz-user-select: none; /* Firefox all */
@ -8,44 +100,36 @@ canvas {
image-rendering: -webkit-crisp-edges; image-rendering: -webkit-crisp-edges;
image-rendering: pixelated; image-rendering: pixelated;
image-rendering: crisp-edges; image-rendering: crisp-edges;
cursor: pointer; }
width: inherit;
height: inherit;
.hidden {
display: none;
} }
body { body {
margin: 0px; text-align: center;
background-color: #2c2f33;
color: white;
font-variant: normal;
font-family: verdana;
} }
#status { h1 {
position: absolute; font-size: 25pt;
display: block;
}
#game {
margin: 0px;
padding: 0px;
background: tan;
width: 100%;
height: 100px;
display: flex;
}
#leftBar {
margin: 0px;
padding: 0px;
display: inline-flex;
background: red;
height: inherit;
}
#rightBar {
margin: 0px;
padding: 0px;
display: inline-flex;
background: orange;
height: inherit;
align-items: center;
} }
.canvasContainer { h2 {
font-size: 20pt;
}
p{
/* font-size: 12pt; */
/* text-align: left; */
margin: 0;
}
h4 {
font-size: 12pt;
padding: 0;
margin: 0;
} }