diff --git a/client/css/layout.css b/client/css/layout.css index 7446dba..c464695 100644 --- a/client/css/layout.css +++ b/client/css/layout.css @@ -1,9 +1,75 @@ -body, +@import url(https://fonts.googleapis.com/css?family=Ubuntu:700); + +body { + margin: 0; + overflow: auto; +} + #viewer, canvas { - margin: 0; + margin: 0; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: -100; } -body { - overflow: hidden; +.overlay { + width: 100%; + height: 100vh; + background-color: transparent; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} + +.main-panel { + background-color: rgba(0, 0, 0, 0.8); + color: #ccc; + width: 400px; + height: 300px; + padding: 20px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +#status-box, #leaderboard { + position: fixed; + display: block; + background-color: rgba(0, 0, 0, 0.3); + color: white; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + font-family: 'Ubuntu', sans-serif; +} + +#status-box { + left: 10px; + bottom: 10px; + padding: 10px; + font-weight: bold; +} + +#leaderboard { + top: 10px; + right: 10px; + width: 200px; + height: 280px; + +} + +#leaderboard { + text-align: center; +} + +#leaderboard h4 a { + text-decoration: none; + color: #FFC107 !important; } diff --git a/client/index.html b/client/index.html index 978cb7d..dffe905 100644 --- a/client/index.html +++ b/client/index.html @@ -4,10 +4,81 @@ NEXT +
+ +
+

NEXT

+
+
+
Score: 0
+
+
+

NEXT by SNSA

+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ diff --git a/client/js/controller.js b/client/js/controller.js index f9a10c6..95e32e4 100644 --- a/client/js/controller.js +++ b/client/js/controller.js @@ -4,9 +4,12 @@ import Dat from 'dat-gui'; import Connector from './connector'; import constants from './constants'; import AgarioClient from './agario-client/client'; +import dom from './dom'; +import * as bootstrap from 'bootstrap'; export default class Controller { constructor(client) { + const _this = this; this.client = client; this.connector = new Connector(); @@ -18,73 +21,49 @@ export default class Controller { this.nick = constants.DEFAULT_NICKNAME; this.autoRespawn = false; - this.gui = new Dat.GUI(); - - this.servgui = this.gui.addFolder('Server'); - - this.servgui.add( - this.server, - 'region', - ['US-Fremont', 'US-Atlanta', 'BR-Brazil', 'EU-London', 'RU-Russia', 'JP-Tokyo', 'CN-China', 'SG-Singapore', 'TK-Turkey'] - ); - this.servgui.add(this, 'findFfa'); - this.servgui.add(this, 'findParty'); - - this.servgui.add(this.server, 'token'); - this.servgui.add(this, 'connectParty'); + window.addEventListener('keydown', (e) => { + if (e.keyCode === 27) { // ESC + this.togglePanel(); + } + }); - this.servgui.add(this.server, 'ws'); - this.servgui.add(this, 'directConnect'); + dom.playBtn.click(() => { + client.spawn(dom.nick.val()); + dom.overlay.hide(); + }); - this.servgui.add(this, 'disconnect'); + dom.region.change(() => { + client.disconnect(); + _this.connector.findParty(dom.region.val()); + }); - this.servgui.open(); - this.cellgui = this.gui.addFolder('Cell'); - this.cellgui.add(this, 'nick'); - this.cellgui.add(this, 'spawn'); - this.cellgui.add(this, 'autoRespawn'); - const scoreGui = this.cellgui.add(this.client, 'score').listen(); - this.client.on('scoreUpdate', () => { - scoreGui.updateDisplay(); + client.on('scoreUpdate', () => { + dom.statusBox.html(`Score: ${client.score}`); }); - this.leadergui = this.gui.addFolder('Leaderboard'); - this.leaders = {}; - this.resetLeader(); - for (let i = 1; i <= 10; i++) { - this.leadergui.add(this.leaders, i); - } - - client.on('connected', () => { - this.servgui.close(); - this.cellgui.open(); - this.leadergui.open(); - if (this.autoRespawn) { - this.spawn(); - } - }); client.on('reset', () => { - this.servgui.open(); - this.cellgui.close(); - this.leadergui.close(); - this.resetLeader(); + dom.leaderBoard.html(''); + dom.overlay.show(); }); client.on('lostMyBalls', () => { - if (this.autoRespawn) { - this.spawn(); - } + dom.overlay.show(); }); client.on('leaderBoardUpdate', (old, leaders) => { - for (const i in leaders) { - let rank = parseInt(i) + 1; - this.leaders[rank] = client.balls[leaders[i]].name || 'An unnamed cell'; - for (const j in this.leadergui.__controllers) { - this.leadergui.__controllers[j].updateDisplay(); - } - } + var leaderBoards = []; + leaders.forEach((id, index) => { + leaderBoards.push(`${index + 1}. ` + client.balls[id].name || 'An unnamed cell'); + }); + console.log(old, leaders); + dom.leaderBoard.html(leaderBoards.join('
')); }); + this.connector.onconnect = (...args) => this.connect(...args); + setTimeout(() => this.findParty(), 2000); + } + + togglePanel() { + dom.overlay.toggle(); } findFfa() { @@ -110,8 +89,6 @@ export default class Controller { connect(ws, token) { this.server.ws = ws; this.server.token = token; - for (const i in this.servgui.__controllers) - this.servgui.__controllers[i].updateDisplay(); this.client.connect(`ws://${ws}`, token); } @@ -119,9 +96,4 @@ export default class Controller { this.client.spawn(this.nick); } - resetLeader() { - for (let i = 1; i <= 10; i++) { - this.leaders[i] = '---'; - } - } } diff --git a/client/js/dom.js b/client/js/dom.js new file mode 100644 index 0000000..001be60 --- /dev/null +++ b/client/js/dom.js @@ -0,0 +1,23 @@ +'use strict'; + +import $ from 'jquery'; + +const overlay = $('.overlay'); +const mainPanel = overlay.find('.main-panel'); +const leaderBoard = $('#leaderboard div'); +const statusBox = $('#status-box'); +const nick = mainPanel.find('input#nick'); +const playBtn = mainPanel.find('button#playBtn'); +const region = mainPanel.find('#region'); +const gameMode = mainPanel.find('#gameMode'); + +export default { + overlay: overlay, + mainPanel: mainPanel, + leaderBoard: leaderBoard, + statusBox: statusBox, + nick: nick, + playBtn: playBtn, + region: region, + gameMode: gameMode +}; diff --git a/client/js/viewer.js b/client/js/viewer.js index a4252df..f961e31 100644 --- a/client/js/viewer.js +++ b/client/js/viewer.js @@ -45,6 +45,7 @@ class Viewer extends EventEmitter { this.getSize(); this.renderer = PIXI.autoDetectRenderer(this.width, this.height, { antialias: true, + backgroundColor: 0x111111, }); this.container.appendChild(this.renderer.view); } diff --git a/config.js b/config.js index 035d469..0151b9e 100644 --- a/config.js +++ b/config.js @@ -16,13 +16,15 @@ System.config({ map: { "babel": "npm:babel-core@5.8.35", "babel-runtime": "npm:babel-runtime@5.8.35", + "bootstrap": "github:twbs/bootstrap@3.3.6", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "core-js": "npm:core-js@1.2.6", - "dat-gui": "npm:dat-gui@0.5.0", + "css": "github:systemjs/plugin-css@0.1.20", "events": "npm:events@1.1.0", "http": "github:jspm/nodelibs-http@1.7.1", "https": "github:jspm/nodelibs-https@0.1.0", - "pixi.js": "npm:pixi.js@3.0.9", + "jquery": "npm:jquery@2.2.2", + "pixi.js": "npm:pixi.js@3.0.10", "stats.js": "npm:stats.js@0.0.14-master", "github:jspm/nodelibs-assert@0.1.0": { "assert": "npm:assert@1.3.0" @@ -65,6 +67,9 @@ System.config({ "github:jspm/nodelibs-util@0.1.0": { "util": "npm:util@0.10.3" }, + "github:twbs/bootstrap@3.3.6": { + "jquery": "github:components/jquery@2.2.1" + }, "npm:acorn@1.2.2": { "fs": "github:jspm/nodelibs-fs@0.1.2", "path": "github:jspm/nodelibs-path@0.1.0", @@ -99,7 +104,12 @@ System.config({ "resolve": "npm:resolve@1.1.7", "static-module": "npm:static-module@1.3.0", "systemjs-json": "github:systemjs/plugin-json@0.1.0", - "through2": "npm:through2@2.0.0" + "through2": "npm:through2@2.0.1" + }, + "npm:browserify-versionify@1.0.6": { + "find-root": "npm:find-root@0.1.2", + "path": "github:jspm/nodelibs-path@0.1.0", + "through2": "npm:through2@0.6.3" }, "npm:buffer-equal@0.0.1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" @@ -131,7 +141,7 @@ System.config({ "readable-stream": "npm:readable-stream@1.1.13", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, - "npm:earcut@2.0.8": { + "npm:earcut@2.1.1": { "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:escodegen@0.0.28": { @@ -168,8 +178,12 @@ System.config({ "isarray": "npm:isarray@0.0.1", "object-keys": "npm:object-keys@1.0.9" }, + "npm:find-root@0.1.2": { + "fs": "github:jspm/nodelibs-fs@0.1.2", + "path": "github:jspm/nodelibs-path@0.1.0" + }, "npm:has@1.0.1": { - "function-bind": "npm:function-bind@1.0.2" + "function-bind": "npm:function-bind@1.1.0" }, "npm:https-browserify@0.0.0": { "http": "github:jspm/nodelibs-http@1.7.1" @@ -186,11 +200,12 @@ System.config({ "npm:path-browserify@0.0.0": { "process": "github:jspm/nodelibs-process@0.1.2" }, - "npm:pixi.js@3.0.9": { + "npm:pixi.js@3.0.10": { "async": "npm:async@1.5.2", "brfs": "npm:brfs@1.4.3", - "earcut": "npm:earcut@2.0.8", - "eventemitter3": "npm:eventemitter3@1.1.1", + "browserify-versionify": "npm:browserify-versionify@1.0.6", + "earcut": "npm:earcut@2.1.1", + "eventemitter3": "npm:eventemitter3@1.2.0", "fs": "github:jspm/nodelibs-fs@0.1.2", "object-assign": "npm:object-assign@4.0.1", "path": "github:jspm/nodelibs-path@0.1.0", @@ -198,7 +213,6 @@ System.config({ "punycode": "github:jspm/nodelibs-punycode@0.1.0", "querystring": "github:jspm/nodelibs-querystring@0.1.0", "resource-loader": "npm:resource-loader@1.6.4", - "systemjs-json": "github:systemjs/plugin-json@0.1.0", "url": "github:jspm/nodelibs-url@0.1.0" }, "npm:process-nextick-args@1.0.6": { @@ -224,7 +238,7 @@ System.config({ "fs": "github:jspm/nodelibs-fs@0.1.2", "minimist": "npm:minimist@1.2.0", "process": "github:jspm/nodelibs-process@0.1.2", - "through2": "npm:through2@2.0.0" + "through2": "npm:through2@2.0.1" }, "npm:readable-stream@1.0.33": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", @@ -246,12 +260,12 @@ System.config({ "stream-browserify": "npm:stream-browserify@1.0.0", "string_decoder": "npm:string_decoder@0.10.31" }, - "npm:readable-stream@2.0.5": { + "npm:readable-stream@2.0.6": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "core-util-is": "npm:core-util-is@1.0.2", "events": "github:jspm/nodelibs-events@0.1.1", "inherits": "npm:inherits@2.0.1", - "isarray": "npm:isarray@0.0.1", + "isarray": "npm:isarray@1.0.0", "process": "github:jspm/nodelibs-process@0.1.2", "process-nextick-args": "npm:process-nextick-args@1.0.6", "string_decoder": "npm:string_decoder@0.10.31", @@ -266,7 +280,7 @@ System.config({ "npm:resource-loader@1.6.4": { "async": "npm:async@0.9.2", "child_process": "github:jspm/nodelibs-child_process@0.1.0", - "eventemitter3": "npm:eventemitter3@1.1.1", + "eventemitter3": "npm:eventemitter3@1.2.0", "path": "github:jspm/nodelibs-path@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2", "url": "github:jspm/nodelibs-url@0.1.0" @@ -308,9 +322,15 @@ System.config({ "util": "github:jspm/nodelibs-util@0.1.0", "xtend": "npm:xtend@2.1.2" }, - "npm:through2@2.0.0": { + "npm:through2@0.6.3": { + "process": "github:jspm/nodelibs-process@0.1.2", + "readable-stream": "npm:readable-stream@1.0.33", + "util": "github:jspm/nodelibs-util@0.1.0", + "xtend": "npm:xtend@4.0.1" + }, + "npm:through2@2.0.1": { "process": "github:jspm/nodelibs-process@0.1.2", - "readable-stream": "npm:readable-stream@2.0.5", + "readable-stream": "npm:readable-stream@2.0.6", "util": "github:jspm/nodelibs-util@0.1.0", "xtend": "npm:xtend@4.0.1" }, diff --git a/package.json b/package.json index 966e8e7..851f0cf 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,14 @@ }, "jspm": { "dependencies": { + "bootstrap": "github:twbs/bootstrap@3.3.6", "buffer": "github:jspm/nodelibs-buffer@^0.1.0", - "dat-gui": "npm:dat-gui@0.5.0", + "css": "github:systemjs/plugin-css@0.1.20", "events": "npm:events@1.1.0", "http": "github:jspm/nodelibs-http@1.7.1", "https": "github:jspm/nodelibs-https@0.1.0", - "pixi.js": "npm:pixi.js@3.0.9", + "jquery": "npm:jquery@2.2.2", + "pixi.js": "npm:pixi.js@^3.0.10", "stats.js": "npm:stats.js@0.0.14-master" }, "devDependencies": {