Idk Linux now
This commit is contained in:
parent
165366c2b7
commit
80a21f626a
111
index.js
111
index.js
|
|
@ -3,16 +3,13 @@ const util = require("./util.js")
|
|||
const log = require("./log.js")
|
||||
const gridSize = [18, 18];
|
||||
const perlinScale = 3;
|
||||
|
||||
var express = require('express');
|
||||
|
||||
log.setMode(0)
|
||||
process.title = "Server"
|
||||
setInterval(function(){ updateInfo()},5000)
|
||||
|
||||
function updateInfo() {
|
||||
const players = game.players;
|
||||
|
||||
log.setInfo(players)
|
||||
log.setInfo(server.games)
|
||||
}
|
||||
|
||||
class Player {
|
||||
|
|
@ -23,9 +20,58 @@ class Player {
|
|||
}
|
||||
}
|
||||
|
||||
class Game {
|
||||
class Server {
|
||||
constructor(){
|
||||
this.players = [{id: "adfhad", name: "bobbert"}];
|
||||
this.games = [];
|
||||
}
|
||||
getGameByName(name, create) {
|
||||
const game = this.games.filter(obj => obj.name == name)[0]
|
||||
if (game === undefined && create) {
|
||||
this.addGame(name);
|
||||
// Oh no.... This cant be good code.
|
||||
return this.getGameByName(name);
|
||||
}
|
||||
return game
|
||||
}
|
||||
|
||||
addGame(name) {
|
||||
const game = new Game(name);
|
||||
this.games.push(game);
|
||||
return game
|
||||
}
|
||||
removeGame(name) {
|
||||
this.games = this.games.filter(obj => obj.name != name);
|
||||
log.log("removed game - " + name)
|
||||
}
|
||||
|
||||
getAllIDs() {
|
||||
let ids = []
|
||||
for (let i = 0; i < this.games.length; i++) {
|
||||
for (let j = 0; j < this.games[i].players.length; j++) {
|
||||
ids.push(this.games[i].players[j].id)
|
||||
}
|
||||
}
|
||||
return ids
|
||||
}
|
||||
|
||||
joinClientToGame(room, nick, id, client) {
|
||||
const game = this.getGameByName(room, true);
|
||||
if (game.addPlayer(id, nick) == false) {
|
||||
this.removeGame(game)
|
||||
return client.illegalAction(20)
|
||||
}
|
||||
client.join(game.name)
|
||||
client.game = game;
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
class Game {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
this.players = [];
|
||||
this.world = worldgen.generateWorld(gridSize, perlinScale);
|
||||
}
|
||||
|
||||
|
|
@ -40,6 +86,9 @@ class Game {
|
|||
removePlayer(id) {
|
||||
this.players = this.players.filter(obj => obj.id != id);
|
||||
log.log("removed player - " + id)
|
||||
if (this.players.length < 1) {
|
||||
server.removeGame(this.name);
|
||||
}
|
||||
}
|
||||
|
||||
getPlayerByID(id) {
|
||||
|
|
@ -62,16 +111,17 @@ class Game {
|
|||
return names
|
||||
}
|
||||
}
|
||||
var game = new Game();
|
||||
var server = new Server();
|
||||
|
||||
|
||||
var app = express() //Static resources server
|
||||
app.use(express.static(__dirname + '/www/'));var server = app.listen(8082, function () {
|
||||
var port = server.address().port;
|
||||
app.use(express.static(__dirname + '/www/'));
|
||||
var webServer = app.listen(8082, function () {
|
||||
var port = webServer.address().port;
|
||||
log.log(`Server running at port ${port}`, "bright");
|
||||
});
|
||||
|
||||
var io = require('socket.io')(server);/* Connection events */
|
||||
var io = require('socket.io')(webServer);/* Connection events */
|
||||
io.on('connection', function(client) {
|
||||
|
||||
client.illegalAction = function(action) {
|
||||
|
|
@ -81,41 +131,36 @@ io.on('connection', function(client) {
|
|||
log.log('User connected', 'FgGreen');
|
||||
|
||||
client.on('disconnect', function(){
|
||||
if (!server.getAllIDs().includes(client.id)) return client.illegalAction(22)
|
||||
log.log(client.id + ' disconnected.', 'FgCyan')
|
||||
game.removePlayer(client.id)
|
||||
client.broadcast.emit('playerList', game.players)
|
||||
client.game.removePlayer(client.id)
|
||||
})
|
||||
|
||||
client.on('joinGame', function(data){
|
||||
if (game.addPlayer(client.id, data.name) == false) return client.illegalAction(20)
|
||||
sendMap(client)
|
||||
if(!server.joinClientToGame(data.room, data.name, client.id, client)) return
|
||||
io.to(client.game.name).emit('sync',{world: client.game.world})
|
||||
log.log(`${client.id} joined the game as ${data.name} requesting to join room: ${data.room}`, 'FgMagenta');
|
||||
client.broadcast.emit('playerList', game.players)
|
||||
client.emit('playerList', game.players)
|
||||
client.emit('inGame', true)
|
||||
})
|
||||
client.on('leaveGame', function(tank){
|
||||
log.log(client.id + ' disconnected.')
|
||||
game.removePlayer(client.id)
|
||||
client.broadcast.emit('playerList', game.players)
|
||||
log.log(celient.id + ' disconnected.')
|
||||
client.game.removePlayer(client.id)
|
||||
io.to(client.game.name).emit('playerList', client.game.players)
|
||||
})
|
||||
|
||||
|
||||
client.on('clickCanvas', function(data){
|
||||
if (!game.getAllIDs().includes(client.id)) return client.illegalAction(1)
|
||||
const xu = data.tilePosition[0]
|
||||
const yu = data.tilePosition[1]
|
||||
game.world[xu][yu].structure = data.structure
|
||||
game.world[xu][yu].owner = game.getPlayerByID(client.id).color;
|
||||
// log.log(world[xu][yu].owner = game.getPlayerbyID(client.id))
|
||||
if (!server.getAllIDs().includes(client.id)) return client.illegalAction(1)
|
||||
const room = client.game.name
|
||||
const xu = util.clamp(data.tilePosition[0], 0, gridSize[0])
|
||||
const yu = util.clamp(data.tilePosition[1], 0, gridSize[1])
|
||||
if (!Number.isInteger(xu) || !Number.isInteger(yu)) return client.illegalAction(23)
|
||||
|
||||
client.broadcast.emit('sync',{world: game.world})
|
||||
client.emit('sync',{world: game.world})
|
||||
client.game.world[xu][yu].structure = data.structure
|
||||
client.game.world[xu][yu].owner = client.game.getPlayerByID(client.id).color;
|
||||
io.to(client.game.name).emit('sync',{world: client.game.world})
|
||||
// client.emit('sync',{world: client.game.world})
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
function sendMap(client) {
|
||||
client.broadcast.emit('sync',{world: game.world.map})
|
||||
client.emit('sync',{world: game.world.map})
|
||||
}
|
||||
|
|
|
|||
38
log.js
38
log.js
|
|
@ -1,9 +1,16 @@
|
|||
const os = require("os")
|
||||
|
||||
var mode = 0
|
||||
var logs = []
|
||||
var info = [[],[]]
|
||||
|
||||
function setMode(type) {
|
||||
mode = type
|
||||
}
|
||||
|
||||
function updateLog() {
|
||||
if (mode) return
|
||||
let templogs = logs;
|
||||
|
||||
console.clear()
|
||||
const columns = process.stdout.columns;
|
||||
const rows = process.stdout.rows;
|
||||
|
|
@ -21,18 +28,31 @@ for (var i = 0; i < columns; i++) {
|
|||
|
||||
process.stdout.cursorTo(0,0)
|
||||
process.stdout.write("Players:")
|
||||
const players = info[0]
|
||||
for (var i = 0; i < players.length; i++) {
|
||||
process.stdout.cursorTo(0,i+1)
|
||||
process.stdout.write(`Name: \x1b[1m${players[i].name}\x1b[0m -\x1b[1m ID:${players[i].id}\x1b[0m`)
|
||||
const games = info[0]
|
||||
var pointer = 0
|
||||
for (i = 0; i < games.length; i++) {
|
||||
process.stdout.cursorTo(0,pointer+1)
|
||||
|
||||
process.stdout.write(`\x1b[46mGameName: \x1b[1m${games[i].name}\x1b[0m`)
|
||||
const players = games[i].players;
|
||||
for (var j = 0; j < players.length; j++) {
|
||||
process.stdout.cursorTo(0,pointer+2)
|
||||
process.stdout.write(`--Name: \x1b[1m${players[j].name}\x1b[0m -\x1b[1m ID:${players[j].id}\x1b[0m`)
|
||||
pointer++;
|
||||
}
|
||||
for (var i = 0; i < logs.length; i++ ) {
|
||||
pointer++;
|
||||
}
|
||||
if (templogs.length > Math.round(3*rows/4)-3) {
|
||||
templogs.splice(0, logs.length-Math.round(3*rows/4)+2);
|
||||
}
|
||||
for (var i = 0; i < templogs.length; i++ ) {
|
||||
process.stdout.cursorTo(0,vertSplit+1+i)
|
||||
process.stdout.write(`${logs[i]}${os.EOL}` )
|
||||
process.stdout.write(`${templogs[i]}${os.EOL}` )
|
||||
}
|
||||
|
||||
}
|
||||
function log(string, color) {
|
||||
if (mode) return console.log(string)
|
||||
if (string == undefined) return;
|
||||
var prefix = '';
|
||||
switch (color) {
|
||||
|
|
@ -87,10 +107,12 @@ function log(string, color) {
|
|||
// BgWhite = "\x1b[47m"
|
||||
const newString = prefix + string + "\x1b[0m"
|
||||
logs.push(newString)
|
||||
|
||||
updateLog();
|
||||
}
|
||||
|
||||
function setInfo (players){
|
||||
if (mode) return false
|
||||
if (players != undefined) {
|
||||
info[0] = players;
|
||||
updateLog()
|
||||
|
|
@ -98,4 +120,4 @@ if (players != undefined) {
|
|||
|
||||
}
|
||||
|
||||
module.exports = {log, updateLog, setInfo}
|
||||
module.exports = {log, updateLog, setInfo, setMode}
|
||||
|
|
|
|||
|
|
@ -10,25 +10,36 @@
|
|||
<!-- Canvas used to generate individual sprites off one sprite atlas -->
|
||||
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
|
||||
<div class="container" id="container" style="display: none;">
|
||||
<h1>No Longer Secret Project</h1>
|
||||
<div class="wrapper">
|
||||
<div class="canvasStack">
|
||||
<h1>Project</h1>
|
||||
|
||||
<div class="wrapper" id="wrapper">
|
||||
<div class="top">
|
||||
<h4 id="status">Connection Status</h4>
|
||||
</div>
|
||||
<span class ="left"><p>left</p></span>
|
||||
<span class="canvasStack">
|
||||
<canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
|
||||
<canvas oncontextmenu="return false;" class="canvas2" id="hud" width="0" height="0"></canvas>
|
||||
</span>
|
||||
<span class ="right"><p>right</p></span>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="buttonBar" id="buttonBar">
|
||||
<!-- <span class="button" no="1"></span>
|
||||
<span class="button" no="2"></span>
|
||||
<span class="button" no="3"></span>
|
||||
<span class="button" no="4"></span>
|
||||
<span class="button" no="null"></span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu" id="menu">
|
||||
<form id="form">
|
||||
<input type="text" id="room" value="room">
|
||||
<input type="text" id="name" value="bob">
|
||||
<input type="submit" id="join" value="join">
|
||||
</form>
|
||||
</div>
|
||||
<div class="status">
|
||||
<footer id="status">Connection Status</footer>
|
||||
<input type="submit" id="submit" value="join">
|
||||
</div>
|
||||
</body>
|
||||
<script src='script.js'></script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
// const perlinScale = 3;
|
||||
const IP_ADDRESS = 'http://127.0.0.1:8082/'
|
||||
|
||||
|
||||
var SERVER_CONNECTION = "disconnected"
|
||||
var IN_GAME = false
|
||||
|
||||
const tileSize = 24;
|
||||
const gridSize = [18, 18];
|
||||
var cash = 99;
|
||||
var world
|
||||
var tiles = []
|
||||
var button
|
||||
|
||||
var canvas = document.getElementById('canvas');
|
||||
var hud = document.getElementById('hud');
|
||||
|
|
@ -27,6 +26,7 @@ socket.on('connect', function(data){
|
|||
updateConnectionStatus();
|
||||
})
|
||||
socket.on('disconnect', function(data){
|
||||
|
||||
SERVER_CONNECTION = "disconnected"
|
||||
updateConnectionStatus();
|
||||
})
|
||||
|
|
@ -40,6 +40,9 @@ socket.on('illegalAction', function(data){
|
|||
case 20:
|
||||
action = "That name is already taken."
|
||||
break;
|
||||
case 23:
|
||||
action = "Invalid Placement location."
|
||||
break;
|
||||
default:
|
||||
action = "Unknown action."
|
||||
|
||||
|
|
@ -49,7 +52,17 @@ alert(`Illegal Action, ${action}`)
|
|||
})
|
||||
|
||||
function updateConnectionStatus() {
|
||||
document.getElementById("status").textContent = `Server Connection: ${SERVER_CONNECTION}`
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
class Cursor {
|
||||
|
|
@ -72,10 +85,50 @@ 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){
|
||||
world = sync.world;
|
||||
render()
|
||||
})
|
||||
function changeScene() {
|
||||
document.getElementById('menu').style = "display: none;"
|
||||
document.getElementById('container').style = ""
|
||||
for(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(tiles[n]);
|
||||
document.getElementById("buttonBar").appendChild(span);
|
||||
span.no = i;
|
||||
span.addEventListener('click', e => {
|
||||
clickSelector(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function loadSprites() {
|
||||
var spriteJank = document.getElementById('spriteJank');
|
||||
|
|
@ -100,23 +153,30 @@ function loadSprites(){
|
|||
}
|
||||
|
||||
function submit(event) {
|
||||
|
||||
document.getElementById('menu').style = "display: none;"
|
||||
document.getElementById('container').style = ""
|
||||
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 () {
|
||||
// Register Events
|
||||
const form = document.getElementById('form');
|
||||
form.addEventListener('submit', submit);
|
||||
|
||||
document.getElementById("submit").addEventListener("click", e => {
|
||||
submit(e)
|
||||
});
|
||||
|
||||
hud.addEventListener('mousemove', e => {
|
||||
mouseMoved(e)
|
||||
|
|
@ -207,7 +267,7 @@ function getMousePosition(canvas, event) {
|
|||
|
||||
console.log("Click!")
|
||||
console.log(xu,yu)
|
||||
socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: 2});
|
||||
socket.emit('clickCanvas', {tilePosition: [xu,yu], structure: button*1});
|
||||
|
||||
}
|
||||
function mouseMoved(event) {
|
||||
|
|
|
|||
115
www/style.css
115
www/style.css
|
|
@ -10,36 +10,127 @@ canvas {
|
|||
image-rendering: crisp-edges;
|
||||
border: solid white;
|
||||
border-radius: 6px;
|
||||
/* display: inline-block; */
|
||||
/* margin: auto; */
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.status{
|
||||
color: green;
|
||||
.left{
|
||||
display: block;
|
||||
transform: translate(0, 50px);
|
||||
float:left;
|
||||
width: 100px;
|
||||
height: 437px;
|
||||
background: darkolivegreen;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
.right{
|
||||
display: block;
|
||||
transform: translate(0, 50px);
|
||||
float:right;
|
||||
width: 100px;
|
||||
height: 437px;
|
||||
background: darkolivegreen;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
background: salmon;
|
||||
width: 632px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.bottom{
|
||||
position: absolute;
|
||||
background: coral;
|
||||
width:632px;
|
||||
height:100px;
|
||||
transform: translate(0, 486px);
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.canvas2 {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.canvasStack {
|
||||
position: fixed;
|
||||
top: 150px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
background: darkslategray;
|
||||
/* display: block; */
|
||||
/* position: relative; */
|
||||
/* top: 150px; */
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
position: absolute;
|
||||
background: khaki;
|
||||
width: 632px;
|
||||
height: 586px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
Loading…
Reference in a new issue