Skip to content

Commit

Permalink
NEXT-27 Introduce bootstrap to replace dat.gui
Browse files Browse the repository at this point in the history
  • Loading branch information
@kscc25
kscc25 committed Mar 19, 2016
1 parent b25a390 commit 96a91f6
Show file tree
Hide file tree
Showing 7 changed files with 237 additions and 82 deletions.
74 changes: 70 additions & 4 deletions client/css/layout.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
71 changes: 71 additions & 0 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,81 @@
<base href="http://localhost:8080/" target="_blank" />
<meta charset="utf-8">
<title>NEXT</title>
<link rel="stylesheet" href="https://bootswatch.com/darkly/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/layout.bundle.css">
</head>
<body>
<div id="viewer"></div>

<div id="leaderboard">
<h4><a href="https://github.com/SNSA/NEXT" target="_blank">NEXT</a></h4>
<div></div>
</div>
<div id="status-box">Score: 0</div>
<div class="overlay">
<div class="main-panel container">
<h4>NEXT <small>by SNSA</small></h4>
<hr />
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-8">
<input type="text" class="form-control" id="nick" placeholder="Nick">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-success" id="playBtn">PLAY</button>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group form-group-sm">
<div class="col-sm-4">
<input type="text" class="form-control" id="token" placeholder="PARTY CODE">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-primary">JOIN</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-info">CREATE</button>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-info">SERVER LIST</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-danger">LOGIN</button>
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-sm btn-block btn-warning">SPECTATE</button>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-sm-8">
<select class="form-control" id="region">
<option selected disabled value="" data-itr="region_select"> -- Select a Region -- </option>
<option value="US-Atlanta" data-itr="region_north_america">North America</option>
<option value="BR-Brazil" data-itr="region_south_america">South America</option>
<option value="EU-London" data-itr="region_europe">Europe</option>
<option value="RU-Russia" data-itr="region_russia">Russia</option>
<option value="TK-Turkey" data-itr="region_turkey">Turkey</option>
<option value="JP-Tokyo" data-itr="region_east_asia">East Asia</option>
<option value="CN-China" data-itr="region_china">China</option>
<option value="SG-Singapore" data-itr="region_oceania">Oceania</option>
</select>
</div>
<div class="col-sm-4">
<select class="form-control" id="gameMode">
<option value="" data-itr="gamemode_ffa">FFA</option>
<option value=":teams" data-itr="gamemode_teams">TEAM</option>
<option value=":experimental" data-itr="gamemode_experimental">EXP</option>
<option value=":party" data-itr="party">PARTY</option>
</select>
</div>
</div>
</form>
</div>
</div>

<script src="js/main.bundle.js"></script>
</body>
</html>
94 changes: 33 additions & 61 deletions client/js/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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('<br />'));
});

this.connector.onconnect = (...args) => this.connect(...args);
setTimeout(() => this.findParty(), 2000);
}

togglePanel() {
dom.overlay.toggle();
}

findFfa() {
Expand All @@ -110,18 +89,11 @@ 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);
}

spawn() {
this.client.spawn(this.nick);
}

resetLeader() {
for (let i = 1; i <= 10; i++) {
this.leaders[i] = '---';
}
}
}
23 changes: 23 additions & 0 deletions client/js/dom.js
View file
Original file line number Diff line number Diff line change
@@ -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
};
1 change: 1 addition & 0 deletions client/js/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit 96a91f6

Please sign in to comment.