Adding randomize feature

Readme.md

@@ -16,6 +16,5 @@ This app is intended to be simple, the initial loading of the state is done usin
 
 TODO:
 
-- We need a randomize teams feature
-- Bessere Kontrolle be namechange
-- nicht immer das ganze feld klearen nach nem namechange
+- Need to be able to lock names....
+- nicht immer das ganze feld clearen nach nem namechange

app.js

@@ -7,6 +7,7 @@ bodyParser = require('body-parser'),
 socketio = require('socket.io'),
 session = require('express-session'),
 low = require('lowdb');
+_ = require('lodash');
 
 let config = low('config.json');
 let db = low('db.json');
@@ -30,6 +31,15 @@ let resetState = {
     ]
   }
 
+function doubleArray(input) {
+  var array = [];
+  while(input.length > 0) {
+    array.push([input[0], input[1]]);
+    input = input.splice(2, input.length);
+  }
+  return array;
+}
+
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'hbs');
@@ -98,6 +108,14 @@ io.on('connection', function (socket) {
     io.emit('clientrefresh');
   });
 
+  socket.on('randomizeTeams', function () {
+    console.log("Randomizing teams");
+    state.teams = doubleArray(_.shuffle(_.flatten(state.teams)));
+    db.setState(state);
+    io.emit('stateChange', state); // Push state to all clients
+    console.log("updated state");
+  });
+
   socket.on('editState', function (newState) {
     state = newState;
     db.setState(state);

package.json

@@ -13,6 +13,7 @@
     "express": "~4.13.1",
     "express-session": "^1.15.1",
     "hbs": "~3.1.0",
+    "lodash": "^4.17.11",
     "lowdb": "^0.16.0",
     "morgan": "~1.6.1",
     "serve-favicon": "~2.3.0",

public/js/back_client.js

@@ -2,7 +2,7 @@
 // This is the backend client js
 var iosocket = io.connect();
 
-var tbdLable = 'To be determined',
+var tbdLabel = 'To be determined',
 noTeam = 'Kein Team';
 
 // setup all my handlers
@@ -102,9 +102,12 @@ $(function() {
   // Dom is loaded
   $('#refresh').click(function() {
     iosocket.emit('clientrefresh');
+  });
+    $('#randomize').click(function() {
+    iosocket.emit('randomizeTeams');
   });
   // Reading config (not state) from dom... and after all jquery is a doomed dom lib
-  tbdLable = $('#TBD').val();
+  tbdLabel = $('#TBD').val();
   noTeam = $('#NoT').val();
 
   // get my state

public/js/front_client.js

@@ -1,23 +1,23 @@
-'use strict';
+"use strict";
 
 var iosocket = io.connect();
 
-var tbdLable = 'To be determined',
-noTeam = 'Kein Team';
+var tbdLabel = "To be determined",
+  noTeam = "Kein Team";
 
 // setup all my handlers
-iosocket.on('clientrefresh', function(){
+iosocket.on("clientrefresh", function() {
   location.reload();
 });
 
-iosocket.on('stateChange', function(state){
+iosocket.on("stateChange", function(state) {
   console.log(state);
   // basically the server tracks the state since it is the same for al clients
   // So we know that we HAVE to update at this point
-  $('#team-container').bracket({
+  $("#team-container").bracket({
     init: state,
     decorator: {
-      edit: function(){},
+      edit: function() {},
       render: render_fn
     },
     teamWidth: 130,
@@ -30,26 +30,25 @@ iosocket.on('stateChange', function(state){
 function render_fn(container, data, score, state) {
   switch (state) {
     case "empty-bye":
-      container.append(noTeam)
+      container.append(noTeam);
       return;
     case "empty-tbd":
-      container.append(tbdLable)
+      container.append(tbdLabel);
       return;
     case "entry-no-score":
-      console.log('no score');// no return
+      console.log("no score"); // no return
     case "entry-default-win":
-      console.log('default win');// no return
+      console.log("default win"); // no return
     case "entry-complete":
       container.append(data);
       return;
   }
 }
 
-
-  $( document ).ready(function() {
-    tbdLable = $('#TBD').val();
-    noTeam = $('#NoT').val();
-    // get my state
-    var context = 'main';
-    iosocket.emit('loadState',context);
-  });
+$(document).ready(function() {
+  tbdLabel = $("#TBD").val();
+  noTeam = $("#NoT").val();
+  // get my state
+  var context = "main";
+  iosocket.emit("loadState", context);
+});

views/admin.hbs

@@ -1,34 +1,39 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Admin Interface</title>
-    <link rel='stylesheet' href='/css/bootstrap.min.css' />
-    <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
-    <link rel='stylesheet' href='/css/style.css' />
 
-    <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
-    <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
-    <script type='text/javascript' src='/js/bootstrap.min.js'></script>
-    <script type='text/javascript' src='/socket.io/socket.io.js'></script>
+<head>
+  <meta charset="utf-8">
+  <title>Admin Interface</title>
+  <link rel='stylesheet' href='/css/bootstrap.min.css' />
+  <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
+  <link rel='stylesheet' href='/css/style.css' />
 
-    <script type='text/javascript' src='/js/back_client.js'></script>
-  </head>
-  <body>
+  <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
+  <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
+  <script type='text/javascript' src='/js/bootstrap.min.js'></script>
+  <script type='text/javascript' src='/socket.io/socket.io.js'></script>
 
-    <h1>{{mainHeader}}</h1>
-    <div class="main-content">
-      <div id="team-container">
+  <script type='text/javascript' src='/js/back_client.js'></script>
+</head>
+
+<body>
+
+  <h1>{{mainHeader}}</h1>
+  <div class="main-content">
+    <div id="team-container">
 
-      </div>
-      <br>
-      <div class="controls">
-        <button id="refresh" class="btn btn-warning"> Refresh Clients!</button>
-      </div>
     </div>
+    <br>
+    <div class="controls">
+      <br> <br> <br> <br>
+      <button id="refresh" class="btn btn-warning"> Refresh Clients!</button><br><br>
+      <button id="randomize" class="btn btn-warning"> Randomize Teams!</button><br>
+    </div>
+  </div>
 
 
-<input id="TBD" type="hidden" value="{{TBD}}">
-<input id="NoT" type="hidden" value="{{NoTeam}}">
-  </body>
+  <input id="TBD" type="hidden" value="{{TBD}}">
+  <input id="NoT" type="hidden" value="{{NoTeam}}">
+</body>
+
 </html>