Skip to content
Browse files

more basic changes

  • Loading branch information...
1 parent 3386dd6 commit 91a138d191632d3b3595533b6423b80d1c02f7a1 @iloire committed
Showing with 66 additions and 42 deletions.
  1. +2 −0 .gitignore
  2. +1 −1 config.js
  3. +7 −8 lib/modules/race.js
  4. +28 −2 public/stylesheets/style.css
  5. +28 −31 views/index.html
View
2 .gitignore
@@ -1,3 +1,5 @@
.monitor
node_modules/
.DS_Store
+math-race.sublime-project*
+math-race.sublime-workspace*
View
2 config.js
@@ -2,7 +2,7 @@ exports.values={
version: '0.0.1',
server : {
production : {
- real_time_server : {port: 8087, host: '192.168.4.52'}
+ real_time_server : {port: 8087, host: '127.0.0.1'}
}
}
,
View
15 lib/modules/race.js
@@ -46,12 +46,12 @@ function createRace(server){
setInterval(function broadcastTime(){
var elapsed = new Date().getTime() - game_started.getTime();
var remaining = Math.floor((game_duration - elapsed) / 1000);
- if (remaining<1){
+ if (remaining<0){
//archive game
if (format_scores(scores).length){
history.push({
timestamp: game_started.getTime(),
- name: game_started.getHours() + ":" + game_started.getMinutes() < 10 ? game_started.getMinutes() : '0' + game_started.getMinutes(),
+ name: game_started.getHours() + ":" + (game_started.getMinutes() > 9 ? game_started.getMinutes() : '0' + game_started.getMinutes()),
scores: format_scores(scores)
});
broadcast (sessions, 'history', history); //broadcast history
@@ -68,15 +68,14 @@ function createRace(server){
socket.on('connection', function (client) {
client.on('join', function (data) {
- util.add (sessions, client.id);
- clients[client.id] = client;
- client.emit ('new_operation', operation.quest);
- broadcast (sessions, 'scores', format_scores(scores)); //broacast scores to new client
+ util.add (sessions, client.id); //add client id to list of sessions
+ clients[client.id] = client; //store specific client object
+ client.emit ('new_operation', operation.quest); //send challenge to new client
+ client.emit ('scores', format_scores(scores)); //broacast scores to new client
});
client.on('solve_operation', function (data) {
- if (data.operation == operation.solution){
-
+ if (data.operation == operation.solution){
//result_operation: 1:you win, 2:other player won, 0: bad operation
client.emit ('result_operation', 1); //msg to winner
broadcast (sessions, 'result_operation', 2, client.id); //msg to rest of players. someone else won!
View
30 public/stylesheets/style.css
@@ -18,23 +18,49 @@ a {
text-align:right;
}
+#time{
+ font-size:3em;
+}
+
+#time.red{
+ color:red;
+}
+
section{
margin-top:20px;
margin-bottom:10px;
}
span.equal{
- font-size:9em;
+ font-size:8em;
height:170px;
}
input.input_player{
font-size:9em;
height:140px;
- width:240px;
+ width:270px;
vertical-align:top;
}
#operations{
font-size:8em;
+}
+
+.msg-error{
+ font-size:2em;
+ position:fixed;
+ background-color:red;
+ color:white;
+ padding:10px;
+ text-align:center;
+}
+
+.msg-success{
+ font-size:2em;
+ position:fixed;
+ background-color:green;
+ color:white;
+ text-align:center;
+ padding:10px;
}
View
59 views/index.html
@@ -1,5 +1,4 @@
<script>
-
//util
function sort (arr, property, desc){
function sorter(aa,bb){
@@ -15,9 +14,9 @@
return arr.sort(sorter);
};
- //print msg --
+ //util, print msgs --
function print_msg (msg, style){
- $('#msg').html('<div class="alert alert-'+ style +'"><a class="close" data-dismiss="alert" href="#">×</a>' + msg + '</div>');
+ $('#msg').html('<div class="msg-'+ style +'">' + msg + '</div>');
$('#msg').fadeIn();
setTimeout(function(){$('#msg').fadeOut()},500);
}
@@ -25,7 +24,7 @@
function show_error(msg){ print_msg(msg, 'error'); }
function show_ok(msg){ print_msg(msg, 'ok'); }
- //end print msg --
+ //end print msgs --
$(document).ready(function() {
@@ -35,16 +34,16 @@
var socket = io.connect(server);
socket.on('connect',function() {
- $('#socketio').html('<span class="label label-success">socket.io connected!</label');
+ $('#socketio').html('<span class="label label-success">socket.io connected!</label>');
socket.emit('join', { id: user_id });
});
socket.on('disconnect',function() {
- $('#socketio').html('<span class="label label-important">socket.io disconnected</label');
+ $('#socketio').html('<span class="label label-important">socket.io disconnected</label>');
});
socket.on('time',function(time) {
- $('#time').html(time);
+ race.time(time);
});
socket.on('new_operation',function(operation) {
@@ -53,11 +52,10 @@
});
socket.on('history',function(history) {
- console.log (history)
- for (var i = 0, l = history.length; i < l ; i++) { //sort scores
+ for (var i = 0, l = history.length; i < l ; i++) { //sort eath item by score
sort(history[i].scores, 'score', true)
}
- race.history(sort(history, 'timestamp', true));
+ race.history(sort(history, 'timestamp', true)); //bind score history (and sort by date)
});
socket.on('scores',function(scores) {
@@ -82,8 +80,9 @@
self.input_player1 = ko.observable();
self.scores = ko.observableArray();
self.history = ko.observableArray();
+ self.time = ko.observableArray();
- self.sendOperationResult = function() {3
+ self.sendOperationResult = function() {
var data = {operation: self.input_player1(), name : self.name()};
socket.emit('solve_operation', data);
}
@@ -115,32 +114,30 @@
<div class="span8 main">
<span id="operations"></span>
<span class="equal">=</span>
- <input class="input_player" maxlength="3" type="text" name="player1" value="" data-bind="value: input_player1, valueUpdate: 'afterkeydown'" />
+ <input class="input_player" maxlength="4" type="text" name="player1" value="" data-bind="value: input_player1, valueUpdate: 'afterkeydown'" />
- <div id="msg" data-bind="visible: name"></div>
+ <div id="msg"></div>
</div>
<div class="span3">
+ next game in: <span id="time" data-bind="text: time, css: { red: time() < 10 }"></span> seconds.
+ <h3>Current game score</h3>
<div class="alert alert-info">
- next game in : <span id="time"></span> seconds.
- </div>
- <div class="well">
- <h2>Current game</h2>
- <ul data-bind="foreach: scores">
+ <ol data-bind="foreach: scores">
<li><span data-bind="text: player"></span>: <span data-bind="text: score"></span></li>
- </ul>
-
- <div data-bind="visible: history().length">
- <h3>History</h3>
- <div data-bind="foreach: history">
- <div class="game_history alert">
- <h4><small>game played at: </small> <span data-bind="text: name"> </span></h4>
- <ul data-bind="foreach: scores">
- <li><span data-bind="text: player"></span>: <span data-bind="text: score"></span></li>
- </ul>
- </div>
- </div>
- </div>
+ </ol>
</div>
+
+ <div data-bind="visible: history().length">
+ <h3>Game history</h3>
+ <div data-bind="foreach: history">
+ <div class="game_history alert alert-warning">
+ <h4><small>game played at: </small> <span data-bind="text: name"> </span></h4>
+ <ol data-bind="foreach: scores">
+ <li><span data-bind="text: player"></span>: <span data-bind="text: score"></span></li>
+ </ol>
+ </div>
+ </div>
+ </div>
</div>
</div>

0 comments on commit 91a138d

Please sign in to comment.
Something went wrong with that request. Please try again.