Adding randomize feature

This commit is contained in:
Lukas Bachschwell 2018-11-24 18:57:48 +01:00
parent f4e631f972
commit 488a9e08c1
7 changed files with 3269 additions and 48 deletions

View File

@ -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

18
app.js
View File

@ -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);

3196
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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

View File

@ -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);
});

View File

@ -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>