raphael/Familienduell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: raphael:master
Branches Tags
raphael:master
raphael:2.3
raphael:2.2
raphael:2.1
raphael:2.0
raphael:1.6
raphael:1.5
raphael:1.4
raphael:1.3
raphael:1.2
raphael:1.1
raphael:1.0
..
compare: raphael:2.3
Branches Tags
raphael:master
raphael:2.3
raphael:2.2
raphael:2.1
raphael:2.0
raphael:1.6
raphael:1.5
raphael:1.4
raphael:1.3
raphael:1.2
raphael:1.1
raphael:1.0

No commits in common. "master" and "2.3" have entirely different histories.
master ... 2.3

15 changed files with 107 additions and 211 deletions
Show Stats Expand all files Collapse all files

7
README.md
View File

@ -7,6 +7,7 @@ Familienduell Client / Server (NodeJs Javascript)
### -A- START DES SERVERS! ### -A- START DES SERVERS!
___Windows___ ___Windows___
1. Im Ordner "server" die Datei StartServer.bat doppelklicken. 1. Im Ordner "server" die Datei StartServer.bat doppelklicken.
* Im Fenster das jetzt erscheint sollte: "SERVER IS UP AND RUNNING" stehen. * Im Fenster das jetzt erscheint sollte: "SERVER IS UP AND RUNNING" stehen.
* Falls die Firewall fragt, solltest du die Anfrage zulassen da sonst der Client nicht verbinden kann. * Falls die Firewall fragt, solltest du die Anfrage zulassen da sonst der Client nicht verbinden kann.
@ -43,9 +44,6 @@ Q: Warum ist das Display zu Beginn schwarz, und wie kann ich das ändern?
A: Das Bild ist schwarz damit man die Intromusik starten kann und die Leute (Zuschauer) nicht schon vorher wissen was auf sie zukommt. A: Das Bild ist schwarz damit man die Intromusik starten kann und die Leute (Zuschauer) nicht schon vorher wissen was auf sie zukommt.
Dies kann (Im Controller) über die Checkbox "Blackscreen", im Bereich "Intro" kontrolliert werden. Dies kann (Im Controller) über die Checkbox "Blackscreen", im Bereich "Intro" kontrolliert werden.
Q: Warum bekomm ich die Fehlermeldung "node.exe wurde falsch geschrieben oder konnte nicht gefunden werden"?<br>
A: Die heruntergeladene zip Datei muss zunächst entpack werden. Rechtsklick auf die Datei -> Alles etpacken.
Q: Wie funktioniert das mit 2 oder mehr Geräten? Q: Wie funktioniert das mit 2 oder mehr Geräten?
A: Alle Geräte müssen im gleichen Netzwerk sein. Dann verwende einfach eine Externe IP des Servers (aus dem Serverfenster) zum verbinden von einem anderen Gerät aus. A: Alle Geräte müssen im gleichen Netzwerk sein. Dann verwende einfach eine Externe IP des Servers (aus dem Serverfenster) zum verbinden von einem anderen Gerät aus.
@ -71,5 +69,4 @@ Unterstützt durch: DiggerTigger, Anni & Naseile
Danke auch an: Danke auch an:
* [flbe](https://github.com/flbe) für den Python Server * [flbe](https://github.com/flbe) für den Python Server
* [susgo](https://github.com/susgo) für den Finalmodus * [susgo](https://github.com/susgo) für den Finalmodus
* [ConvalAtGit](https://github.com/ConvalAtGit) für viele Verbesserungen, Redesign und zusätzliche Word und Excel Dokumente * [ConvalAtGit](https://github.com/ConvalAtGit) für viele Verbesserungen, Redesign und zusätzliche Word und Excel Dokumente
* [fruitcoder](https://github.com/fruitcoder/) Design verbesserungen

BIN
dokumente/Ablaufplan.doc
View File

Binary file not shown.

2
server/fragen.txt
View File

File diff suppressed because one or more lines are too long

4
server/server.js
View File

@ -49,7 +49,7 @@ wss.on('connection', function(ws) {
console.log("~~~~~~~~ WELCOME TO SERVER ~~~~~~ s:"+subscribers.length); console.log("~~~~~~~~ WELCOME TO SERVER ~~~~~~ s:"+subscribers.length);
ws.on('message', function(message) { ws.on('message', function(message) {
console.log('msg: ' + message); console.log('msg: ' + message);
var parts = message.toString().split("###"); var parts = message.split("###");
if(parts[0] != "fileOp") { if(parts[0] != "fileOp") {
broadcastMessage(getClientId(), message); broadcastMessage(getClientId(), message);
} else { } else {
@ -89,7 +89,7 @@ wss.on('connection', function(ws) {
}); });
function broadcastMessage(clientId, msg) { function broadcastMessage(clientId, msg) {
console.log("broadcast:", msg.toString().split("###")[0], "length:", subscribers.length); console.log("broadcast:"+msg.split("###")[0]+" length:"+subscribers.length);
for(var i=0;i<subscribers.length;i++) { for(var i=0;i<subscribers.length;i++) {
if(subscribers[i] != null) if(subscribers[i] != null)
subscribers[i].send(msg); subscribers[i].send(msg);

52
web/css/main.css
View File

@ -81,10 +81,8 @@ body {
.mainHeight { .mainHeight {
position: relative; position: relative;
width: 80vw; width: 1020px;
height: 40vw; height: 520px;
min-height: 520px;
min-width: 1020px;
margin: auto; margin: auto;
margin-bottom: 50px; margin-bottom: 50px;
z-index: 5; z-index: 5;
@ -111,46 +109,26 @@ body {
} }
#answers { #answers {
overflow: hidden; font-family: monospace;
font-family: monospace; padding-top: 58px;
font-size: 2.5vw; padding-left: 18px;
font-size: 1.5em;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
} }
.answer { .answer {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
} }
#displayQuestions { #displayQuestions {
position:absolute;
top:10px;
left:20px;
width: 970px;
overflow: hidden; overflow: hidden;
font-size: 2.5vw; white-space: nowrap;
white-space: unset; text-overflow: ellipsis;
text-overflow: unset; }
}
#resultFinal {
font-size: 2.5vw;
}
.questionAnswerContainer {
padding-top: 20px;
padding-left: 20px;
width: calc(100% - 20px);
}
@media (max-width: 1275px) {
#answers {
font-size: 1.5em;
}
#resultFinal {
font-size: 1.5em;
}
#displayQuestions {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 1.5em;
}
}

BIN
web/img/schweinchen.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
web/img/schweinchen1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
web/img/schweinchen1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
web/img/schweinchen2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
web/img/schweinchen2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
web/img/schweinchen3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

72
web/index.html
View File

@ -7,6 +7,7 @@
<script type="text/javascript" src="./js/typed.js"></script> <script type="text/javascript" src="./js/typed.js"></script>
<script type="text/javascript" src="./js/main.js"></script> <script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/components.js"></script> <script type="text/javascript" src="./js/components.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
@ -15,22 +16,19 @@
</head> </head>
<body style="padding:10px;"> <body style="padding:10px;">
<div id="allContent"> <div id="allContent">
<!-- Select between display and controller -->
<div id="startDiv" style="width: 500px; margin: auto;"> <div id="startDiv" style="width: 500px; margin: auto;">
<h1 style="font-size: 5em;">Familienduell</h1> <h1 style="font-size: 5em;">Familienduell</h1>
<button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br> <button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br>
<button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button> <button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button>
</div> </div>
<!-- container with all questions, answers, pigs, countdown, intro image, points--> <div class="bgColor textColor mainHeight" style="display:none" id="display">
<div class="topContainer bgColor textColor mainHeight" style="display:none" id="display"> <img id="schweinchenImg" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen.jpg">
<img id="schweinchen1Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none; overflow: hidden;" src="./img/schweinchen1.png"> <img id="schweinchen1Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen1.jpg">
<img id="schweinchen2Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen2.png"> <img id="schweinchen2Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen2.jpg">
<img id="schweinchen3Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen3.png"> <div id="displayQuestions" class="textColor">
<!-- question text is injected in `loadQuestionToGui(index:)` (server.js) --> </div>
<div id="displayQuestions" class="textColor questionAnswerContainer"> <div id="answers">
</div>
<!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) -->
<div id="answers" class="questionAnswerContainer">
</div> </div>
<div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;"> <div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;">
<div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div> <div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div>
@ -38,13 +36,12 @@
<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes">0</div> <div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes">0</div>
<div style="float:left; font-size: 0.8em; position: relative; top: 12; color: red; cursor:pointer;" class="controller" id="pointsToTheRight"><i class="fa fa-chevron-right"></i></div> <div style="float:left; font-size: 0.8em; position: relative; top: 12; color: red; cursor:pointer;" class="controller" id="pointsToTheRight"><i class="fa fa-chevron-right"></i></div>
</div> </div>
<div id="resultFinal" style="position:absolute; bottom:95px; width:100%; font-size: 1.5em; display: none;"> <div id="resultFinal" style="position:absolute; bottom:95px; right:444px; font-size: 1.5em; display: none;">
<div style="display: flex;justify-content: center;"> <div style="float:left" class="header_summe">SUMME</div>
<div class="noIntro" style="width:6%; float: left; text-align:center;" id="SumRes_player1">0</div> <div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player1"></div>
<div class="noIntro" style="width:6%; float: right; text-align:center;" id="SumRes_player2">0</div> <div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player2"></div>
</div>
</div> </div>
<div id="timer" style="position:absolute; top: 50%; left: 50%; width: 400px; margin-left: -200px; margin-top: -143px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;"> <div id="timer" style="position:absolute; top: 65px; left: 50%; width: 400px; margin-left: -200px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;">
20 20
</div> </div>
<div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;"> <div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;">
@ -55,28 +52,29 @@
<!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>--> <!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>-->
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div> <div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div>
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div> <div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div>
<img style="position: absolute; top: 0px; width: 100%; height: 100%;" class="intro" src="./img/logo.png"> <img style="position: absolute; top: 0px;" class="intro" src="./img/logo.png">
</div> </div>
<!-- controller container -->
<div style="display:none;" class="controller"> <div style="display:none;" class="controller">
<div id="buttonsDownUnder"> <div id="buttonsDownUnder">
<table border="1"> <table border="1">
<tr> <tr>
<!-- <td><b>Global</b></td> <td><b>Global</b></td>
<td><b>Server</b></td> --> <td><b>Server</b></td>
<td><b>Intro</b></td> <td><b>Intro</b></td>
<td><b>Schweinchen</b></td> <td><b>Schweinchen</b></td>
<td><b>Optionen</b></td> <td><b>Optionen</b></td>
<td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td> <td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td>
<td><b>Spielende</b></td>
</tr> </tr>
<tr> <tr>
<!-- <td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> <td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> --> <td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/noSound.png"></td>
<td> <td>
<button style=" display: block" id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br> <button id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
<button id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
<img width="20px;" src="./img/noSound.png">
<input id="introVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
<img width="20px;" src="./img/soundOn.png"><br>
<label for="blackScreenCheck">Blackscreen:</label> <input id="blackScreenCheck" checked="checked" type="checkbox" style="vertical-align: text-bottom" /> <label for="blackScreenCheck">Blackscreen:</label> <input id="blackScreenCheck" checked="checked" type="checkbox" style="vertical-align: text-bottom" />
<button style="margin-top: 12px; display: block" id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
</td> </td>
<td> <td>
Multiplikator: <input id="pointMultiplicator" type="number" name="" value="1" style="width: 50px;"><br> Multiplikator: <input id="pointMultiplicator" type="number" name="" value="1" style="width: 50px;"><br>
@ -84,8 +82,12 @@
<button id="startScheinchenbtn2" value="2"><i class="fa fa-play"></i> Schweinchen (2x)</button><br> <button id="startScheinchenbtn2" value="2"><i class="fa fa-play"></i> Schweinchen (2x)</button><br>
<button id="startScheinchenbtn3" value="3"><i class="fa fa-play"></i> Schweinchen (3x)</button><br> <button id="startScheinchenbtn3" value="3"><i class="fa fa-play"></i> Schweinchen (3x)</button><br>
<button id="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br> <button id="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br>
<img width="20px;" src="./img/noSound.png">
<input id="schweinchenVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
<img width="20px;" src="./img/soundOn.png">
</td> </td>
<td> <td>
<button id="startAnswerFailBtn"><i class="fa fa-play"></i> Antwort nicht vorhanden</button><br>
<button id="clearAllFailsBtn">Clear all Fails!</button><br><br> <button id="clearAllFailsBtn">Clear all Fails!</button><br><br>
<table> <table>
<tr> <tr>
@ -94,16 +96,13 @@
<tr> <tr>
<td>Punkte Rechts: </td> <td><input style="width:50px;" id="mPunkteRight" type="number" value="0"></td><td><button id="newRightPoints">ok</button></td> <td>Punkte Rechts: </td> <td><input style="width:50px;" id="mPunkteRight" type="number" value="0"></td><td><button id="newRightPoints">ok</button></td>
</tr> </tr>
<tr>
<td>Punkte Summe: </td> <td><input style="width:50px;" id="mPunkteSum" type="number" value="0"></td><td><button id="newSumRes">ok</button></td>
</tr>
</table> </table>
</td> </td>
<td> <td>
<!-- <button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</button><br> <button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</button><br>
<img width="20px;" src="./img/noSound.png"> <img width="20px;" src="./img/noSound.png">
<input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10"> <input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
<img width="20px;" src="./img/soundOn.png"> --> <img width="20px;" src="./img/soundOn.png">
<div> <div>
<label for="spieler1">Spieler 1:</label> <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod" id="spieler1" style="vertical-align: text-bottom" /> <button id="showTimerBtn" disabled="true" class="finalElement">Timer anzeigen</button><br> <label for="spieler1">Spieler 1:</label> <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod" id="spieler1" style="vertical-align: text-bottom" /> <button id="showTimerBtn" disabled="true" class="finalElement">Timer anzeigen</button><br>
<label for="spieler2">Spieler 2:</label> <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod" id="spieler2" style="vertical-align: text-bottom" /> <button id="startTimerBtn" disabled="true" class="finalElement"><i class="fa fa-play"></i> Timer starten</button><br> <label for="spieler2">Spieler 2:</label> <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod" id="spieler2" style="vertical-align: text-bottom" /> <button id="startTimerBtn" disabled="true" class="finalElement"><i class="fa fa-play"></i> Timer starten</button><br>
@ -114,12 +113,9 @@
<option value="3"> 4</option> <option value="3"> 4</option>
<option value="4"> 5</option> <option value="4"> 5</option>
</select> <button id="stopTimerBtn" disabled="true" class="finalElement"><i class="fa fa-stop"></i> Timer stoppen</button><br> </select> <button id="stopTimerBtn" disabled="true" class="finalElement"><i class="fa fa-stop"></i> Timer stoppen</button><br>
Alternative Antwort:<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">setzen</button><br><input type="number" class="finalElement" id="altPointsFinal" disabled="true" placeholder="Alt. Punkte" value="0"><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button> Alternative Antwort:<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">setzen</button><br><input type="number" class="finalElement" id="altPointsFinal" disabled="true" placeholder="Alt. Punkte" value=""><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button>
</div> </div>
</td> </td>
<td>
<button id="showFinalScores">Show Final Scores</button><br><br>
</td>
</tr> </tr>
</table> </table>
<table> <table>
@ -154,7 +150,7 @@
<!-- <i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i> --> <!-- <i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i> -->
</div> </div>
</div> </div>
<div id="connected" style="position:fixed; left:0px; top:0px; padding:5px; display:none;"></div> <div id="connected" style="position:absolute; left:0px; top:0px; padding:5px; display:none;"></div>
</div> </div>
<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;"> <div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
<div id="printDiv"></div> <div id="printDiv"></div>

16
web/js/jquery-ui-1.10.4.min.js vendored
View File

File diff suppressed because one or more lines are too long

137
web/js/main.js
View File

@ -5,9 +5,6 @@ var answerFail = null;
var schweinchenVolume = 1; var schweinchenVolume = 1;
var answerFailVolume = 1; var answerFailVolume = 1;
var schweinchen = null; var schweinchen = null;
// when the points for a round are assigned, we still want to show the other answers but no points should be calculated by that time
// reset when changing a question
var currentRoundPointsResolved = false;
$(document).ready(function() { $(document).ready(function() {
$( "#fragenListe" ).sortable(); $( "#fragenListe" ).sortable();
@ -108,15 +105,12 @@ $(document).ready(function() {
var questionSelected = $("#finalFragenSelect").val(); var questionSelected = $("#finalFragenSelect").val();
questionSelected--; questionSelected--;
if (questionSelected < 0) { if (questionSelected < 0) {
// $("#finalFragenSelect").val(0); $("#finalFragenSelect").val(4);
} else { } else {
$("#finalFragenSelect").val(questionSelected) $("#finalFragenSelect").val(questionSelected)
} }
} }
setFrageIndex(index);
if (index > 0) {
setFrageIndex(index);
}
}); });
$("#downQicon").click(function() { $("#downQicon").click(function() {
@ -126,15 +120,12 @@ $(document).ready(function() {
var questionSelected = $("#finalFragenSelect").val(); var questionSelected = $("#finalFragenSelect").val();
questionSelected++; questionSelected++;
if (questionSelected > 4) { if (questionSelected > 4) {
// $("#finalFragenSelect").val(0); $("#finalFragenSelect").val(0);
} else { } else {
$("#finalFragenSelect").val(questionSelected) $("#finalFragenSelect").val(questionSelected)
} }
} }
setFrageIndex(index);
if (index < 8) {
setFrageIndex(index);
}
}); });
$("#questionsSelect").on("change", function() { $("#questionsSelect").on("change", function() {
@ -177,10 +168,6 @@ $(document).ready(function() {
wsSend("setRightPoints", $("#mPunkteRight").val()); wsSend("setRightPoints", $("#mPunkteRight").val());
}); });
$("#newSumRes").click(function() {
wsSend("setSumRes", $("#mPunkteSum").val());
});
$("#alternateAnswerBtn").click(function(){ $("#alternateAnswerBtn").click(function(){
var is = $("#finalFragenSelect").val(); var is = $("#finalFragenSelect").val();
var answer = $("#alternateAnswer").val(); var answer = $("#alternateAnswer").val();
@ -204,24 +191,7 @@ function setFinalMode(status){
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelect>option:selected").index();
index = index > 0 ? index : 0; index = index > 0 ? index : 0;
$("#answers").empty(); $("#answers").empty();
// automatically select first of the final questions (index 3)
if (isFinalMode < 3) {
index = 3;
}
loadQuestionToGui(index); loadQuestionToGui(index);
// manually select option once final mode starts
if (isFinalMode) {
if (index >= 0 && index < $("#questionsSelect").find("option").length) {
$("#questionsSelect").find("option").removeAttr("selected");
$($("#questionsSelect").find("option")[index]).prop("selected", "true");
}
if ($("#questionsSelect>option:selected").index() == -1 && $("#questionsSelect").find("option")[0]) {
$($("#questionsSelect").find("option")[0]).prop("selected", "true");
}
}
} }
function setPlayer2(value){ function setPlayer2(value){
@ -264,12 +234,6 @@ function setRightPoints(newPoints) {
} }
} }
function setSumRes(newSumRes) {
$('#SumRes').text(newSumRes);
$("#mPunkteSum").val(newSumRes);
recalcSum(0);
}
function startAnswerFail() { function startAnswerFail() {
if (sounds && (display || serverSound)) { if (sounds && (display || serverSound)) {
answerFail = new Audio('./sounds/failOriginal.ogg'); answerFail = new Audio('./sounds/failOriginal.ogg');
@ -336,17 +300,15 @@ function stopTimer() {
function startSchweinchen() { function startSchweinchen() {
if (runde == 2){ if (runde == 2){
$("#schweinchen2Img").show("blind", { direction: "left" }, 1500); $("#schweinchen2Img").fadeIn();
} else if (runde == 3){ } else if (runde == 3){
$("#schweinchen3Img").show("blind", { direction: "left" }, 1500); $("#schweinchenImg").fadeIn();
} else { } else {
$("#schweinchen1Img").show("blind", { direction: "left" }, 1500); $("#schweinchen1Img").fadeIn();
} }
$("#answers").hide(); $("#answers").hide();
$("#displayQuestions").hide(); $("#displayQuestions").hide();
$("#result").hide();
$(".footer").hide();
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
schweinchen = new Audio('./sounds/schweinchen.ogg'); schweinchen = new Audio('./sounds/schweinchen.ogg');
@ -360,11 +322,11 @@ function stopSchweinchen() {
$("#questionsSelect").val(index+1); $("#questionsSelect").val(index+1);
changeFrage(); changeFrage();
$("#schweinchen3Img").stop(true, true).hide(); $("#schweinchenImg").hide();
$("#schweinchen1Img").stop(true, true).hide(); $("#schweinchen1Img").hide();
$("#schweinchen2Img").stop(true, true).hide(); $("#schweinchen2Img").hide();
$("#result").show(); $("#answers").show();
$(".footer").show("blind", { direction: "left" }, 1500); $("#displayQuestions").show();
if(schweinchen) { if(schweinchen) {
schweinchen.pause(); schweinchen.pause();
} }
@ -410,11 +372,10 @@ function changeFrage() {
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelect>option:selected").index();
wsSend("loadQuestion", index); wsSend("loadQuestion", index);
wsSend("clearAllFailsBtn", ""); wsSend("clearAllFailsBtn", "");
wsSend("resetPointsResolvedFlag", "false");
} }
function loadQuestionToGui(index) { function loadQuestionToGui(index) {
$("#schweinchen3Img").hide(); $("#schweinchenImg").hide();
$("#schweinchen1Img").hide(); $("#schweinchen1Img").hide();
$("#schweinchen2Img").hide(); $("#schweinchen2Img").hide();
$("#answers").empty(); $("#answers").empty();
@ -425,8 +386,7 @@ function loadQuestionToGui(index) {
$("#ResSum_player1").toggle(isFinalMode); $("#ResSum_player1").toggle(isFinalMode);
$("#ResSum_player2").toggle(isFinalMode); $("#ResSum_player2").toggle(isFinalMode);
if (isFinalMode){ if (isFinalMode){
$("#resultFinal").show(); $("#resultFinal").show();
$(".footer").hide();
} else { } else {
$("#resultFinal").hide(); $("#resultFinal").hide();
} }
@ -434,10 +394,10 @@ function loadQuestionToGui(index) {
if(index > -1) { if(index > -1) {
$("#displayQuestions").html(fragen[index]["frage"]); $("#displayQuestions").html(fragen[index]["frage"]);
if (isFinalMode && display){ if (isFinalMode){
$("#displayQuestions").hide(); $("#displayQuestions").hide();
} else { } else {
$("#displayQuestions").show("blind", { direction: "left" }, 1500); $("#displayQuestions").show();
} }
var anzahlFragen = fragen[index]["antworten"].length; var anzahlFragen = fragen[index]["antworten"].length;
if (isFinalMode) { if (isFinalMode) {
@ -446,26 +406,31 @@ function loadQuestionToGui(index) {
for (var i = 0; i < anzahlFragen; i++) { for (var i = 0; i < anzahlFragen; i++) {
if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") { if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") {
if (isFinalMode) { if (isFinalMode) {
var oneLine = $('<div>' + var oneLine = $('<div style="height:55px">' +
'<div style="width: 44%; float: left; text-align: center" class="answer"></div>' + '<div style="width: 400px; float: left; text-align: right" class="answer"></div>' +
'<div style="width: 6%; float: left; text-align: center" class="points"></div>' + '<div style="width: 40px; float: left; margin-left: 18px; margin-right: 20px; text-align: right" class="points"></div>' +
'<div style="width: 6%; float: left; text-align: center" class="points_player2"></div>' + '<div style="width: 40px; float: left; margin-left: 20px; margin-right: 22px; text-align: right" class="points_player2"></div>' +
'<div style="width: 44%; float: left; text-align: center" class="answer_player2"></div>' + '<div style="width: 400px; float: left;" class="answer_player2"></div>' +
'</div>'); '</div>');
} else { } else {
var oneLine = $('<div>' + var oneLine = $('<div style="height:55px">' +
'<div style="width: 5%; text-align: center; float: left;" class="nr">' + (i + 1) + '.</div>' + '<div style="margin-left: 18px; width: 50px; float: left;" class="nr">' + (i + 1) + '.</div>' +
'<div style="width: 89%; text-align: center; float: left" class="answer"></div>' + '<div style="width: 824px; float: left" class="answer"></div>' +
'<div style="width: 6%; float: left; text-align: right" class="points"></div>' + '<div style="width: 52px; float: left; text-align: right" class="points"></div>' +
'</div>'); '</div>');
} }
if(display && !player2) { if(display && !player2) {
oneLine.find(".answer").text(".............................................................................................................."); if (isFinalMode) {
oneLine.find(".points").text("--"); // oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _");
oneLine.find(".answer").text(".....................");
} else {
// oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _");
oneLine.find(".answer").text("...............................................");
}
oneLine.find(".points").text("--");
if (isFinalMode){ if (isFinalMode){
oneLine.find(".points_player2").text("--"); oneLine.find(".points_player2").text("--");
oneLine.find(".answer_player2").text(".............................................................................................................."); oneLine.find(".answer_player2").text(".....................");
// oneLine.find(".answer_player2").text("_ _ _ _ _ _ _ _ _ _ _"); // oneLine.find(".answer_player2").text("_ _ _ _ _ _ _ _ _ _ _");
} }
} else if (!display) { } else if (!display) {
@ -494,8 +459,7 @@ function loadQuestionToGui(index) {
} }
} }
if (!isFinalMode) { if (!isFinalMode) {
$("#SumRes").text("0"); $("#SumRes").text("0");
$("#answers").show("blind", { direction: "left" }, 1500);
} }
if(!display) if(!display)
$("#resultFinal").hide(); $("#resultFinal").hide();
@ -582,30 +546,17 @@ function recalcSum(s) {
} }
} }
// Add the scores from the final rounds to the current scores from previous rounds
function showFinalScores() {
$("#answers").hide();
$("#displayQuestions").hide();
$("#result").hide();
$("#resultFinal").hide();
$("#pointsCenter").hide();
$(".pointsLeft").show();
$(".pointsRight").show();
const leftFinalScore = parseFloat($("#SumRes_player1").text());
const rightFinalScore = parseFloat($("#SumRes_player2").text());
$(".pointsLeft").text(parseFloat($(".pointsLeft").text()) + leftFinalScore);
$(".pointsRight").text(parseFloat($(".pointsRight").text()) + rightFinalScore);
// show final scores with blinds
$(".footer").show("blind", { direction: "left" }, 1500);
}
function getAnswerString(str) { function getAnswerString(str) {
if (isFinalMode){ if (isFinalMode){
while(str.length < 24) { while(str.length < 21) {
str = " " + str; if (player2){
str += " ";
} else {
str = " " + str;
}
}
if (player2){
str = str.replace(/ /g, "&nbsp;");
} }
} else { } else {
str += " "; str += " ";

28
web/js/websocket.js
View File

@ -8,7 +8,7 @@ var sounds = true;
var ws; var ws;
var display = true; var display = true;
var audio = null; var audio = null;
var serverSound = true; var serverSound = false;
var isFinalMode = false; var isFinalMode = false;
var player2 = false; var player2 = false;
var runde = 1; var runde = 1;
@ -40,23 +40,12 @@ $(document).ready(function() {
$("#display").show(); $("#display").show();
$(".controller").show(); $(".controller").show();
display = false; display = false;
// nice css manipulation 🤢#hack
$(".mainHeight").css("width", 1020);
$(".mainHeight").css("height", 520);
$(".mainHeight").css("padding-top", "");
$("#answers").css("font-size", "1.5em");
$("#displayQuestions").css("font-size", "1.5em");
}); });
$("#clearAllFailsBtn").click(function() { $("#clearAllFailsBtn").click(function() {
wsSend("clearAllFailsBtn", ""); wsSend("clearAllFailsBtn", "");
}); });
$("#showFinalScores").click(function() {
wsSend("showFinalScores", "");
});
$("#toggleSoundImg").click(function() { $("#toggleSoundImg").click(function() {
wsSend("toggleSound", ""); wsSend("toggleSound", "");
}); });
@ -104,14 +93,9 @@ var connectWs = function() {
return null; return null;
} }
ws.onmessage = async function (event) { ws.onmessage = function (event) {
console.log("msg: "+event.data.toString()) console.log("msg: "+event.data)
let tempSt = event.data.toString(); messageParts_a = event.data.split("###");
if(typeof(tempSt) != "string") {
tempSt = await new Response(tempSt).text()
}
messageParts_a = tempSt.split("###");
var key = messageParts_a[0]; var key = messageParts_a[0];
var value = messageParts_a[1]; var value = messageParts_a[1];
if(key =="setFail") { if(key =="setFail") {
@ -138,8 +122,6 @@ var connectWs = function() {
$("#toggleSoundImg").attr("src", "./img/soundOn.png"); $("#toggleSoundImg").attr("src", "./img/soundOn.png");
sounds = true; sounds = true;
} }
} else if(key == "showFinalScores") {
showFinalScores()
} else if(key == "file") { } else if(key == "file") {
if(value == "fragen.txt") { if(value == "fragen.txt") {
try { try {
@ -170,8 +152,6 @@ var connectWs = function() {
setLeftPoints(value); setLeftPoints(value);
} else if(key == "setRightPoints") { } else if(key == "setRightPoints") {
setRightPoints(value); setRightPoints(value);
} else if(key == "setSumRes") {
setSumRes(value);
} else if(key == "startAnswerFail") { } else if(key == "startAnswerFail") {
startAnswerFail(); startAnswerFail();
} else if(key == "startAnswerDuplicate") { } else if(key == "startAnswerDuplicate") {