From 6269c3abc5f45b1b2785170610d622d653151cb9 Mon Sep 17 00:00:00 2001 From: Simon Giesel Date: Fri, 27 Apr 2018 14:24:19 +0200 Subject: [PATCH] Add Scoreboard and splashscreen --- .gitignore | 3 +- assets/SuperMario256.ttf | Bin 0 -> 16312 bytes server.js | 33 ++++- src/views/client.hbs | 20 ++- src/views/server.hbs | 259 +++++++++++++++++++++++++++++---------- 5 files changed, 241 insertions(+), 74 deletions(-) create mode 100644 assets/SuperMario256.ttf diff --git a/.gitignore b/.gitignore index 40b878d..f90a3f4 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules/ \ No newline at end of file +node_modules/ +scores.json \ No newline at end of file diff --git a/assets/SuperMario256.ttf b/assets/SuperMario256.ttf new file mode 100644 index 0000000000000000000000000000000000000000..5e1ccd4be8420a81cee7dc6cca16dc95aa5ca5a8 GIT binary patch literal 16312 zcmeHu2b@$zw)d&JefxIKak^)^dwP0$a%857!w?2gK$0SZ5+zFx0xB-1MG^CwFyJn@ zYuXh=5YaWP*)`_?t}7@Y#$824=Jxlm>K^d(&D-z&-uk`wzVE%7>Hj_V-nysGIaPJ4 z>fE}-h{yvlP<-&n5o6w7z5fcLzNg~q_+clG8FG63o|U+1!ubUw#?&@k&|3H~5xX7d zlgADmK5o(amECZE9g+IMY4fHmymjvPS-4=_ zt?a`2G@O^rnzwYt;NNtBH-~(jPM^MbK22oHiF$p2`$cmXoHk`w@^whiQ#`}xO3@8_aOL79 z)JpOAz?=+_4Kj;$P3!*0szbY*rQ+eVC`rExE=4M2JQ#B

?9uE!g8u1`!TwCt%pv?1 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 literal 0 HcmV?d00001 diff --git a/server.js b/server.js index 435eea1..b9f9441 100644 --- a/server.js +++ b/server.js @@ -6,7 +6,10 @@ const express = require('express'), // wsEngine: 'ws' }), exphbs = require('express-handlebars'), - qrCode = require('branded-qr-code'); + qrCode = require('branded-qr-code'), + fs = require('fs'); + +const scores = JSON.parse(fs.readFileSync('scores.json', 'utf8')); /** CONSTANTS */ const HOST = 'http://100.119.37.224:8080/client/'; @@ -14,11 +17,13 @@ const HOST = 'http://100.119.37.224:8080/client/'; const players = [ { type: 'mario', + name: 'Mario', id: guid(), score: 0 }, { type: 'luigi', + name: 'Luigi', id: guid(), score: 0 }, @@ -95,6 +100,8 @@ clientNSP.on('connection', socket => { setTimeout(() => monitorNSP.emit('updateGameState', 1), 2000); let pl = getPlayerFromId(socket.request.headers.referer.split('/').slice(-1)[0]); + socket.on('changeName', name => pl.name = name); + socket.on('moveStart_left', () => { console.log('moveStart_left: ' + pl.type); monitorNSP.emit('moveStart_left', pl.type); @@ -125,17 +132,37 @@ clientNSP.on('connection', socket => { console.log('moveEnd_crouch: ' + pl.type); }); - socket.on('disconnect', () => { console.log('Client disconnected.'); + count--; monitorNSP.emit('clientDisconnect', getPlayerFromId(id).type); }); }); - +let playerDeaths = 0; monitorNSP.on('connection', socket => { console.log('Monitor connected.'); + socket.emit('handshake', { + scores, + marioId: players[0].id, + luigiId: players[1].id, + }); + socket.on('playerDie', options => { + console.log(options.score) + playerDeaths++; + let pl = players.filter(el => el.type == options.player)[0]; + pl.score = options.score; + if (pl.score > 0) { + scores.push({ name: pl.name, score: pl.score }); + fs.writeFile('scores.json', JSON.stringify(scores)); + } + if (playerDeaths === 2) { + setTimeout(() => { + monitorNSP.emit('handshake', { scores, marioId: players[0].id, luigiId: players[1].id, }); + }, 4000); + } + }); socket.on('disconnect', () => { console.log('Monitor disconnected.'); }); diff --git a/src/views/client.hbs b/src/views/client.hbs index 3c93ae7..e895c05 100644 --- a/src/views/client.hbs +++ b/src/views/client.hbs @@ -48,7 +48,7 @@ background-color: #2196F3; } - button#crouch, + button#name, button#jump { right: 5%; } @@ -58,7 +58,7 @@ background-color: #4CAF50; } - button#crouch { + button#name { bottom: calc(40% / 3); background-color: #E53935; } @@ -100,7 +100,7 @@ - + \ No newline at end of file diff --git a/src/views/server.hbs b/src/views/server.hbs index 6d74c55..9385a28 100644 --- a/src/views/server.hbs +++ b/src/views/server.hbs @@ -7,8 +7,67 @@ padding: 0; } + @font-face { + font-family: Mario; + src: url('/assets/SuperMario256.ttf'); + } + body { overflow-x: hidden; + font-family: Mario; + cursor: none; + } + + h1, + h2, + h3 { + color: #FFC107; + padding: 5%; + text-align: center; + opacity: 1; + transition: opacity .1s ease-in; + text-shadow: -3px -3px #FAFAFA, + 1px 1px #757575, + 2px 2px #757575, + 3px 3px #757575, + 4px 4px #757575, + 5px 5px #757575, + 6px 6px #757575; + } + + h1 { + font-size: 600%; + padding-bottom: 0; + } + + h2 { + padding-top: .5%; + padding-bottom: 0; + font-size: 400%; + } + + h3 { + font-size: 300%; + text-shadow: none; + padding-top: 0; + padding-bottom: 1%; + } + + ol { + padding: 0 5%; + list-style-type: decimal-leading-zero; + width: 90%; + padding-bottom: 2%; + } + + ol li { + font-size: 140%; + text-align: center; + } + + flexbox { + display: flex; + justify-content: space-around; } img.check { @@ -16,20 +75,15 @@ } img.checkmark { - content: ""; display: block; position: absolute; width: 200px; - top: 180px; - left: 680px; + margin-top: 180px; + margin-left: 130px; height: 200px; z-index: 1; } - img.checkmark.left { - left: 140px; - } - img.checkmark.hidden { display: none; } @@ -41,18 +95,31 @@ - - - - Mario - - - - - Luigi - +

Super + MARIO

+

QR-Code scannen um zu spielen

+ + + + + + + + + + + + + + +

Highscores

+ +
    +
      +
        +         @@ -68,18 +135,17 @@