Compare commits

..

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

44 changed files with 369 additions and 730 deletions

21
LICENSE
View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2018 Cracker
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -7,9 +7,10 @@ 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: "Websocket Server running at ws://127.0.0.1:8080" 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.
___Mac___ ___Mac___
@ -23,17 +24,21 @@ ___Mac___
4. Starte den Server 4. Starte den Server
`node server.js` `node server.js`
5. In der Console erscheint: "SERVER IS UP AND RUNNING" 5. In der Console erscheint: "Websocket Server running at ws://127.0.0.1:8080"
### -B- START DES CONTROLLERS! ### -B- START DES CONTROLLERS!
1. Browser öffnen und zur Adresse: http://127.0.0.1:8080 surfen 1. in den Ordner "web" wechseln und die datei "index.html" mit dem Browser (Chrome / Firefox) öffnen! (Dieses Programm wurde für Chrome entwickelt und wird nur dort getestet.)
2. Auf den Controller Button klicken. * Wenn der Browser auf dem gleichen PC läuft wie der Server einfach start klicken, ansonsten die IP-Adresse anpassen.
* (Oben links, in der Ecke des Browsers, sollte nun entwas in der Art "Verbunden mit: ws://127.0.0.1:8080" stehen.)
4. Auf den Controller Button klicken.
### -C- Start des Displays ### -C- Start des Displays
1. In einem neuen Browserfenster/tab verbinden und auf "Display" klicken. 1. Alle Schirtte aus "START DES CONTROLLERS!" in einem neuen Browserfenster ausführen. Dann bei Punkt 4. auf display klicken.
--------------------------- ---------------------------
@ -43,33 +48,41 @@ 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> Q: Wie funktioniert das mit 2 Rechnern?
A: Die heruntergeladene zip Datei muss zunächst entpack werden. Rechtsklick auf die Datei -> Alles etpacken. A: Step by Step:
PC1 = controller und Server
PC2 = display
Q: Wie funktioniert das mit 2 oder mehr Geräten? 1. PC 1 muss im gleichen Netztwerk (Wlan / LAN) sein wie PC 2.
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. 2. Kopiere alle Dateien auf beide PCs
3. starte den Server auf PC1
4. Starte den controller auf PC1 (So wie sonst auch immer mit IP: 127.0.0.1)
5. Nun musst du die LAN IP-Adresse von PC1 herrausfinden. Anleitung hier: http://www.tippscout.de/windows-xp-ip-adresse-des-computers-ermitteln-und-herausfinden_tipp_2676.html
6. Nun startest du das Display auf pc2 trägst aber statt "127.0.0.1" die IP-Adresse von pc1 ein (Die Adresse sollte mit "192.168." beginnen)
7. Los gehts :)
Q: Läuft der Server mit nodeJs auch unter Linux / Läuft der Python Server auch unter Windows? Q: Läuft der Server mit nodeJs auch unter Linux / Läuft der Python Server auch unter Windows?
A: Ja, dafür müssen jedoch zunächst die etsprechenden Abhänigkeiten installiert werden. A: Ja, dafür müssen jedoch zunächst die etsprechenden Abhänigkeiten installiert werden.
Q: Gibt es eine Funktion um Leuten über einen Link direkt das Zuschauen zu ermöglichen? Q: In der letzten Version waren die Fragen in der Fragen.txt noch im Klartext gespeichert, was ist passiert?
A: Ja. Der Link lautet: http://SERVERURL/PFAD/index.html?viewonly=true (SERVERURL und PFAD anpassen!) A: Da Linux mit Umlauten nicht umgehen kann werden die Fragen Base64 encoded abgelegt.
Q: Ich erhalten im Serverfenster den Fehler: Error: listen EADDRINUSE Q: Wie kann ich meine Alten Fragen (Klartext) in das neue System (Base64) übertragen?
A: Eine andere Anwendung blockiert bereits den Port. Beende diese und starte den Server erneut A: Wandle den Inhalt deiner fragen.txt in Base64. Dies geht einfach online: https://www.base64encode.org/ . Überschreibe anschließend deine Fragen.txt mit dem neuen Inhalt. Fertig.
Q: Gibt es eine Funktion um Leuten über einen Link direkt das Zuschauen zu ermöglichen?
A: Ja. Der Link lautet: http://SERVERURL/PFAD/duell.html?ip=SERVERIP (SERVERURL, PFAD und SERVERIP anpassen!)
Q: Ich habe sonstige Fehler bei (Anzeige, Verbindungsaufbau, Anwendungsverhalten) Q: Ich habe sonstige Fehler bei (Anzeige, Verbindungsaufbau, Anwendungsverhalten)
A: Falls du einen anderen Browser als Google Chrome verwendest, installiere Chrome. A: Falls du einen anderen Browser als Google Chrome verwendest, installiere Chrome.
Sonstige Fragen, Fehlermeldungen, Beschwerden oder auch Spenden (Paypal) per Mail an: raphael.fritsch@gmx.de Q: Ich habe sonstige Probleme oder Fragen...
A: Fragen, Fehlermeldungen, Beschwerden per Mail an: rofl256@googlemail.com
--------------------------- ---------------------------
Programmierung: cracker Programmierung: cracker aka rofl256
Unterstützt durch: DiggerTigger, Anni & Naseile 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
* [fruitcoder](https://github.com/fruitcoder/) Design verbesserungen

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -1,2 +0,0 @@
[InternetShortcut]
URL=http://127.0.0.1:8080/

File diff suppressed because one or more lines are too long

View File

@ -1,41 +1,9 @@
//Websocket Server <<<<<<<<<<<<<< //Websocket Server <<<<<<<<<<<<<<
var wsPort = 8081; var wsPort = 8080;
var webPort = 8080;
var subscribers = []; var subscribers = [];
var WebSocketServer = require('ws').Server; var WebSocketServer = require('ws').Server
var wss = new WebSocketServer({port: wsPort}); , wss = new WebSocketServer({port: wsPort});
var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs'); var fs = require('fs');
var baseDirectory = '../web/'
http.createServer(function (request, response) {
try {
var rurl = request.url;
if(rurl=="/") {
rurl = "/index.html";
}
var requestUrl = url.parse(rurl)
// need to use path.normalize so people can't access directories underneath baseDirectory
var fsPath = baseDirectory+path.normalize(requestUrl.pathname);
var fileStream = fs.createReadStream(fsPath)
fileStream.pipe(response)
fileStream.on('open', function() {
response.writeHead(200)
})
fileStream.on('error',function(e) {
response.writeHead(404) // assume the file doesn't exist
response.end()
})
} catch(e) {
response.writeHead(500)
response.end() // end the response so browsers don't hang
console.log(e.stack)
}
}).listen(webPort)
wss.on('connection', function(ws) { wss.on('connection', function(ws) {
subscribers.push(ws); subscribers.push(ws);
@ -49,7 +17,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,25 +57,14 @@ 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);
} }
} }
console.log("\nWebsocket server running on Port:"+wsPort); console.log("Websocket Server running at ws://127.0.0.1:"+wsPort);
console.log("Webserver running on Port:"+webPort);
console.log("\n---Verbinden von diesem PC---");
console.log(" Browser öffnen und zu Adresse: http://127.0.0.1:"+webPort+" surfen!");
console.log("\n---Adressen zum verbinden von anderen Geräten---");
getLocalIp()
console.log("\n\n------------------------------");
console.log("\n---SERVER IS UP AND RUNNING---");
console.log("\n------------------------------");
function writeInFile(filename, content, callback) { function writeInFile(filename, content, callback) {
console.log("going to read file:"+filename); console.log("going to read file:"+filename);
@ -135,27 +92,4 @@ function readFile(filename, callback) {
}); });
} }
function getLocalIp() {
var os = require('os');
var ifaces = os.networkInterfaces();
Object.keys(ifaces).forEach(function (ifname) {
var alias = 0;
ifaces[ifname].forEach(function (iface) {
if ('IPv4' !== iface.family || iface.internal !== false) {
// skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
return;
}
if (alias >= 1) {
// this single interface has multiple ipv4 addresses
console.log(" http://"+iface.address+":"+webPort);
} else {
// this interface has only one ipv4 adress
console.log(" "+ifname+": ", "http://"+iface.address+":"+webPort);
}
++alias;
});
});
}

View File

@ -1,27 +1,11 @@
body {
font-family: monospace;
background: url(../img/background.jpg) no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: flex;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
}
#allContent {
position: relative;
}
.textColor { .textColor {
color:#ddff06; color:#aeb130;
font-weight:bold; font-weight:bold;
font-size: 1.5em; font-size: 1.5em;
} }
.bgColor{ .bgColor{
background:#000000; background:#525463;
} }
.antwortInp, .questionIn, .questionKIn { .antwortInp, .questionIn, .questionKIn {
@ -42,115 +26,28 @@ body {
color:gray; color:gray;
} }
.xmarker {
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
z-index: 3;
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
border: 2px #595959 solid;
border-radius: 2px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.15), 1px 1px 1px rgba(255, 255, 255, 0.20);
font-size: 2em;
background: #595959;
height: 56px;
padding-left: 12px;
padding-right: 12px;
color: rgb(66, 66, 66);
/* box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.65), 0 5px 5px -5px rgba(0, 0, 0, 0.65); */
}
.noIntro { .noIntro {
display:none; display:none;
} }
.footer { .footer {
background:#ddff06; background:#aeb130;
color: #000000; color:rgb(100, 100, 100);
} }
#buttonsDownUnder { .mainHight {
background: #ffffff; height: 530px;
padding: 20px;
margin-top: 70px;
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
}
#buttonsDownUnder td{
padding: 5px;
}
.mainHeight {
position: relative;
width: 80vw;
height: 40vw;
min-height: 520px;
min-width: 1020px;
margin: auto;
margin-bottom: 50px;
z-index: 5;
border: 10px #c0c0c0 ridge;
border-radius: 2px;
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
}
#timer {
background: #000000;
z-index: 5;
border: 10px #c0c0c0 ridge;
border-radius: 2px;
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
}
#blackScreen {
z-index: 6;
}
#editQuestionsDiv {
border-radius: 2px;
z-index: 7;
} }
#answers { #answers {
overflow: hidden;
font-family: monospace; font-family: monospace;
font-size: 2.5vw; padding-top: 55px;
white-space: nowrap; padding-left: 18px;
}
.answer {
overflow: hidden;
white-space: nowrap;
}
#displayQuestions {
overflow: hidden;
font-size: 2.5vw;
white-space: unset;
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; font-size: 1.5em;
} }
#displayQuestions { #displayQuestions {
white-space: nowrap; position:absolute;
text-overflow: ellipsis; top:15px;
font-size: 1.5em; left:15px;
}
} }

159
web/duell.html Normal file
View File

@ -0,0 +1,159 @@
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Familien Duell</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="./js/websocket.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/components.js"></script>
<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/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body style="padding:10px;">
<div id="allContent">
<div id="startDiv" style="width: 500px; margin: auto;">
<h1 style="font-size: 5em;">Familien Duell</h1>
<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>
<hr id="DHR" style="margin:0px; width:100%; position:relative; top:3px; border-top:1px solid black;">
</div>
<div class="bgColor textColor mainHight" style="display:none; position:relative; width: 1000px; margin: auto;" id="display">
<img id="schweinchenImg" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen.jpg">
<img id="schweinchen1Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen1.jpg">
<img id="schweinchen2Img" style="margin-left: 200px; margin-top: 70px; display: none;" src="./img/schweinchen2.jpg">
<div id="displayQuestions" class="textColor">
</div>
<div id="answers">
</div>
<div class="noIntro" id="result" style="position:absolute; bottom:115px; right:38px; font-size: 1.5em;">
<div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div>
<div style="float:left; font-size: 0.8em; position: relative; top: 12; left:14px; color: red; cursor:pointer;" class="controller" id="pointsToTheLeft"><i class="fa fa-chevron-left"></i></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>
<div class="noIntro" id="resultFinal" style="position:absolute; bottom:115px; right:465px; font-size: 1.5em; display: none;">
<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes_player1"></div>
<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes_player2"></div>
</div>
<div class="noIntro footer" id="footer1" style="position:absolute; bottom:50px; width:100%; height:50px; font-size: 2em;">
<div style="position:absolute; left:5px; top: -5px;" class="pointsLeft">0</div>
<div style="position:absolute; right:5px; top: -5px;" class="pointsRight">0</div>
</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: 0px; left: 34; font-size: 2em; background: #525463; height: 50px; padding-left: 12px; padding-right: 12px; color: rgb(127, 115, 115);" ></div>
<div class="xmarker noIntro" style="position: absolute; bottom: 0px; right: 34; font-size: 2em; background: #525463; height: 50px; padding-left: 12px; padding-right: 12px; color: rgb(127, 115, 115);" ></div>
<img style="position: absolute; top: 0px;" class="intro mainHight" src="./img/logo.png">
</div>
<div style="display:none;" class="controller">
<div id="editQuestionsDiv" style="display:none; background: rgba(214, 205, 205, 0.95); padding-left:20px; position: absolute; top: 0px; width: 99%; min-height: 100%;">
<i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i>
<h1 style="margin-left:50px;">Frageneditor</h1>
<div>
<ul id="fragenListe">
</ul>
</div>
<div >
<button style="margin-left:50px;" id="addNewQuestionBtn">Neue Frage hinzufügen!</button>
<button style="margin-left:50px; position:fixed; top: 10px; right: 100; font-size: 2em;" id="saveNewQuestions">Speichern!</button>
</div>
</div><br><br><br>
<div id="buttonsDownUnder">
<table border="1">
<tr>
<td><b>Global</b></td>
<td><b>Server</b></td>
<td><b>Intro</b></td>
<td><b>Schweinchen</b></td>
<td><b>Clear Fails</b></td>
<td><b>Punkte</b></td>
<td><b>Finalmodus</b> <input id="modeFinal" type="checkbox"> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td>
</tr>
<tr>
<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/noSound.png"></td>
<td>
<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>
Blackscreen: <input id="blackScreenCheck" checked="checked" type="checkbox">
</td>
<td>
<button id="startScheinchenbtn" value="1"><i class="fa fa-play"></i> Schweinchen</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="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>
<button id="clearAllFailsBtn">Clear all Fails!</button>
</td>
<td>
<table>
<tr>
<td>Punkte Links: </td> <td><input style="width:50px;" id="mPunkteLeft" type="number" value="0"></td><td><button id="newLeftPoints">ok</button></td>
</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>
</tr>
</table>
</td>
<td>
<button id="startAnswerFailBtn"><i class="fa fa-play"></i> Antwort falsch</button><br>
<img width="20px;" src="./img/noSound.png">
<input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
<img width="20px;" src="./img/soundOn.png">
<div>
<lable>Spieler 1: <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod"></lable><br>
<lable>Spieler 2: <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod"></lable><br>
Frage: <select class="finalElement" disabled="true" id="finalFragenSelect">
<option value="0"> 1</option>
<option value="1"> 2</option>
<option value="2"> 3</option>
<option value="3"> 4</option>
<option value="4"> 5</option>
</select><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=""><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button>
</div>
</td>
</tr>
</table>
<br>
<table>
<tr>
<td><b>Fragenliste:</b><br>
<select style="min-width: 400px;" size="5" id="questionsSelcet">
</select>
</td>
<td style="font-size:3em; padding-top: 25px;">
<i id="upQicon" class="fa fa-sort-desc upDownArrow"></i><br>
<i id="downQicon" class="fa fa-sort-asc upDownArrow"></i>
</td>
</tr>
</table>
<button id="openFragenEditorBtn"><i class="fa fa-tasks"></i> Frageneditor</button>
<button id="printQuestions"><i class="fa fa-print"></i></button>
</div>
</div>
<div id="notConnected" style="position:absolute; left:0px; top:0px; padding:5px;"><img width="50px" src="./img/notConnected.png"></div>
<div id="connected" style="position:absolute; left:0px; top:0px; padding:5px; display:none;"></div>
<div id="blackScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:black;"></div>
</div>
<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
<div id="printDiv"></div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
web/img/schweinchen.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

BIN
web/img/schweinchen1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
web/img/schweinchen2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

View File

@ -1,165 +1,42 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de"> <!DOCTYPE html>
<html>
<head> <head>
<title>Familien Duell</title> <title>Familienduell</title>
<script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.10.4.min.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="./js/websocket.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/components.js"></script>
<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/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/main.css"> <link rel="stylesheet" type="text/css" href="./css/main.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript">
var ip = null;
$(document).ready(function() {
if(typeof(Storage) !== "undefined") {
if(window.location.href.indexOf("ip")!==-1) {
var ip = window.location.href.split("ip=")[1];
$("#ip").val(ip);
} else if(localStorage.getItem("ip") == null) {
$("#ip").val("127.0.0.1");
} else {
$("#ip").val(localStorage.getItem("ip"));
}
} else {
alert("Bitte einen neueren Browser verwenden!");
}
$("#startButton").click(function() {
localStorage.setItem("ip", $("#ip").val());
window.location.href = "duell.html";
$("#not").show();
});
});
</script>
</head> </head>
<body style="padding:10px;"> <body>
<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;">Familien Duell</h1>
<button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br> Server IP-Adresse: <input id="ip" type="text"> <button id="startButton">Start</button>
<button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button> <div style="display:none" id="not">
</div> <a href="duell.html">Falls die Weiterleitung nicht funktioniert, bitte hier klicken!</a>
<!-- container with all questions, answers, pigs, countdown, intro image, points-->
<div class="topContainer bgColor textColor mainHeight" style="display:none" id="display">
<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="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="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">
<!-- question text is injected in `loadQuestionToGui(index:)` (server.js) -->
<div id="displayQuestions" class="textColor questionAnswerContainer">
</div>
<!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) -->
<div id="answers" class="questionAnswerContainer">
</div>
<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; font-size: 0.8em; position: relative; top: 12; left:14px; color: red; cursor:pointer;" class="controller" id="pointsToTheLeft"><i class="fa fa-chevron-left"></i></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>
<div id="resultFinal" style="position:absolute; bottom:95px; width:100%; font-size: 1.5em; display: none;">
<div style="display: flex;justify-content: center;">
<div class="noIntro" style="width:6%; float: left; text-align:center;" id="SumRes_player1">0</div>
<div class="noIntro" style="width:6%; float: right; text-align:center;" id="SumRes_player2">0</div>
</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;">
20
</div>
<div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;">
<div style="position:absolute; left:35px; top: -5px;" class="pointsLeft">0</div>
<div style="position:absolute; left:50%; width: 80px; margin-left: -40px; top: -5px; text-align: center" id="pointsCenter">0</div>
<div style="position:absolute; right:35px; top: -5px;" class="pointsRight">0</div>
</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; right: 34px" ></div>
<img style="position: absolute; top: 0px; width: 100%; height: 100%;" class="intro" src="./img/logo.png">
</div>
<!-- controller container -->
<div style="display:none;" class="controller">
<div id="buttonsDownUnder">
<table border="1">
<tr>
<!-- <td><b>Global</b></td>
<td><b>Server</b></td> -->
<td><b>Intro</b></td>
<td><b>Schweinchen</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>Spielende</b></td>
</tr>
<tr>
<!-- <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>
<button style=" display: block" id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
<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>
Multiplikator: <input id="pointMultiplicator" type="number" name="" value="1" style="width: 50px;"><br>
<button id="startScheinchenbtn" value="1"><i class="fa fa-play"></i> Schweinchen</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="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br>
</td>
<td>
<button id="clearAllFailsBtn">Clear all Fails!</button><br><br>
<table>
<tr>
<td>Punkte Links: </td> <td><input style="width:50px;" id="mPunkteLeft" type="number" value="0"></td><td><button id="newLeftPoints">ok</button></td>
</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>
</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>
</td>
<td>
<!-- <button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</button><br>
<img width="20px;" src="./img/noSound.png">
<input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
<img width="20px;" src="./img/soundOn.png"> -->
<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="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="finalFragenSelect">Frage:</label> <select class="finalElement" disabled="true" id="finalFragenSelect">
<option value="0"> 1</option>
<option value="1"> 2</option>
<option value="2"> 3</option>
<option value="3"> 4</option>
<option value="4"> 5</option>
</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>
</div>
</td>
<td>
<button id="showFinalScores">Show Final Scores</button><br><br>
</td>
</tr>
</table>
<table>
<tr>
<td><b>Fragenliste:</b><br>
<select style="min-width: 400px;" size="5" id="questionsSelect">
</select>
</td>
<td style="font-size:3em; padding-top: 25px;">
<i id="upQicon" class="fa fa-sort-desc upDownArrow"></i><br>
<i id="downQicon" class="fa fa-sort-asc upDownArrow"></i>
</td>
</tr>
</table>
<button id="openFragenEditorBtn"><i class="fa fa-tasks"></i> Frageneditor</button>
<button id="printQuestions"><i class="fa fa-print"></i></button>
</div>
</div>
<div id="editQuestionsDiv" style="display:none; background: rgba(205, 205, 205, 0.95); padding-left:20px; position: absolute; top: 0px; width: 100%; min-height: 100%;">
<h1 style="margin-left:50px;">Frageneditor</h1>
<div>
<ul id="fragenListe">
</ul>
</div>
<div >
<button style="margin-left:50px; margin-bottom: 50px;" id="addNewQuestionBtn">Neue Frage hinzufügen!</button>
<button style="margin-left:50px; position:fixed; top: 20px; right: 200px; font-size: 2em;" id="saveNewQuestions">Speichern!</button>
<button id="closeFragenEditorIcon" style="margin-left:50px; position:fixed; top: 20px; right: 30px; font-size: 2em;" id="saveNewQuestions">Schließen</button>
<!-- <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 id="connected" style="position:fixed; left:0px; top:0px; padding:5px; display:none;"></div>
</div>
<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
<div id="printDiv"></div>
</div>
<div id="blackScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:black;"></div>
<div id="notConnected" style="position:absolute; left:0px; top:0px; padding:5px;"><img width="50px" src="./img/notConnected.png"></div>
</body> </body>
</html> </html>

View File

@ -2,8 +2,7 @@ function init_xmarker() {
var c =0; var c =0;
$.each($(".xmarker"), function() { $.each($(".xmarker"), function() {
for(var i=0; i<3;i++) { for(var i=0; i<3;i++) {
var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-left: 4px; padding-right: 4px">X</span>'); var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-right: 5px;">X</span>');
var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-left: 4px; padding-right: 4px">X</span>');
console.log("sow"+i); console.log("sow"+i);
(function() { (function() {

File diff suppressed because one or more lines are too long

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();
@ -40,22 +37,6 @@ $(document).ready(function() {
wsSend("startAnswerFail", ""); wsSend("startAnswerFail", "");
}); });
$("#startAnswerDuplicateBtn").click(function() {
wsSend("startAnswerDuplicate", "");
});
$("#showTimerBtn").click(function() {
wsSend("showTimer", "");
});
$("#startTimerBtn").click(function() {
wsSend("startTimer", "");
});
$("#stopTimerBtn").click(function() {
wsSend("stopTimer", "");
});
$("#answerFailVolume").on("input", function() { $("#answerFailVolume").on("input", function() {
var v = parseFloat($(this).val()) / 10; var v = parseFloat($(this).val()) / 10;
wsSend("setAnswerFailVolume", v); wsSend("setAnswerFailVolume", v);
@ -64,7 +45,6 @@ $(document).ready(function() {
$("button[id^='startScheinchenbtn']").each(function(){ $("button[id^='startScheinchenbtn']").each(function(){
$(this).click(function() { $(this).click(function() {
var status = $(this).attr('value'); var status = $(this).attr('value');
$("#pointMultiplicator").val(status)
console.log('status' + status); console.log('status' + status);
wsSend("setRunde", status); wsSend("setRunde", status);
$(this).attr("disabled", "disabled"); $(this).attr("disabled", "disabled");
@ -102,42 +82,18 @@ $(document).ready(function() {
}); });
$("#upQicon").click(function() { $("#upQicon").click(function() {
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelcet>option:selected").index();
index--; index--;
if (isFinalMode) {
var questionSelected = $("#finalFragenSelect").val();
questionSelected--;
if (questionSelected < 0) {
// $("#finalFragenSelect").val(0);
} else {
$("#finalFragenSelect").val(questionSelected)
}
}
if (index > 0) {
setFrageIndex(index); setFrageIndex(index);
}
}); });
$("#downQicon").click(function() { $("#downQicon").click(function() {
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelcet>option:selected").index();
index++; index++;
if (isFinalMode) {
var questionSelected = $("#finalFragenSelect").val();
questionSelected++;
if (questionSelected > 4) {
// $("#finalFragenSelect").val(0);
} else {
$("#finalFragenSelect").val(questionSelected)
}
}
if (index < 8) {
setFrageIndex(index); setFrageIndex(index);
}
}); });
$("#questionsSelect").on("change", function() { $("#questionsSelcet").on("change", function() {
changeFrage(); changeFrage();
}); });
@ -157,16 +113,15 @@ $(document).ready(function() {
}); });
$("#pointsToTheLeft").click(function() { $("#pointsToTheLeft").click(function() {
var points = parseFloat($(".pointsLeft").text()) + parseFloat($("#SumRes").text())*$("#pointMultiplicator").val(); var points = parseFloat($(".pointsLeft").text()) + parseFloat($("#SumRes").text());
wsSend("setLeftPoints", points); wsSend("setLeftPoints", points);
$("#SumRes").text("0"); $("#SumRes").text("0");
}); });
$("#pointsToTheRight").click(function() { $("#pointsToTheRight").click(function() {
var points = parseFloat($(".pointsRight").text()) + parseFloat($("#SumRes").text())*$("#pointMultiplicator").val(); var points = parseFloat($(".pointsRight").text()) + parseFloat($("#SumRes").text());
wsSend("setRightPoints", points); wsSend("setRightPoints", points);
$("#SumRes").text("0"); $("#SumRes").text("0");
$("#pointsCenter").text("0");
}); });
$("#newLeftPoints").click(function() { $("#newLeftPoints").click(function() {
@ -177,10 +132,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();
@ -201,27 +152,10 @@ $(document).ready(function() {
function setFinalMode(status){ function setFinalMode(status){
isFinalMode = status == "true" ? true : false; isFinalMode = status == "true" ? true : false;
$(".finalElement").attr("disabled", !isFinalMode); $(".finalElement").attr("disabled", !isFinalMode);
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelcet>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){
@ -245,10 +179,8 @@ function showQuestionsAsPrint() {
function setLeftPoints(newPoints) { function setLeftPoints(newPoints) {
$(".pointsLeft").text(newPoints); $(".pointsLeft").text(newPoints);
$("#mPunkteLeft").val(newPoints); $("#mPunkteLeft").val(newPoints);
$("#sumRes").text("0");
$("#pointsCenter").text("0");
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
audio = new Audio('./sounds/zahlRichtig.ogg'); audio = new Audio('./sounds/zahlRichtig.mp3');
audio.play(); audio.play();
} }
} }
@ -256,115 +188,49 @@ function setLeftPoints(newPoints) {
function setRightPoints(newPoints) { function setRightPoints(newPoints) {
$(".pointsRight").text(newPoints); $(".pointsRight").text(newPoints);
$("#mPunkteRight").val(newPoints); $("#mPunkteRight").val(newPoints);
$("#sumRes").text("0");
$("#pointsCenter").text("0");
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
audio = new Audio('./sounds/zahlRichtig.ogg'); audio = new Audio('./sounds/zahlRichtig.mp3');
audio.play(); audio.play();
} }
} }
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/failFinal.mp3');
answerFail.volume = answerFailVolume; answerFail.volume = answerFailVolume;
answerFail.play(); answerFail.play();
} }
} }
function startAnswerDuplicate() {
if (sounds && (display || serverSound)) {
answerDuplicate = new Audio('./sounds/failFinal.ogg');
answerDuplicate.volume = answerFailVolume;
answerDuplicate.play();
}
}
function showTimer() {
if (display) {
if (player2) {
$("#timer").text("25");
} else {
$("#timer").text("20");
}
$("#timer").fadeIn();
}
}
function startTimer() {
if (display) {
var timer = parseInt($("#timer").text());
if ((timer == 20 && !player2) || (player2 && timer == 25)) {
if (sounds && (display || serverSound)) {
// window.document.timerTick = new Audio('./sounds/tick.ogg');
// window.document.timerTick.volume = answerFailVolume;
// window.document.timerTick.play();
}
window.document.timerId = setInterval(function() { startTimer(); }, 1000);
}
timer--;
if (timer > 0) {
$("#timer").text(timer);
} else {
clearInterval(window.document.timerId);
// window.document.timerTick.pause();
// window.document.timerTick.currentTime = 0;
$("#timer").fadeOut();
if (sounds && (display || serverSound)) {
timerEnd = new Audio('./sounds/failOriginal.ogg');
timerEnd.volume = answerFailVolume;
timerEnd.play();
}
}
}
}
function stopTimer() {
if (display) {
clearInterval(window.document.timerId);
// window.document.timerTick.pause();
// window.document.timerTick.currentTime = 0;
$("#timer").fadeOut();
}
}
function startSchweinchen() { function startSchweinchen() {
if (runde == 2){ if (runde == 2){
$("#schweinchen2Img").show("blind", { direction: "left" }, 1500); $("#schweinchen2Img").show();
} else if (runde == 3){ } else if (runde == 3){
$("#schweinchen3Img").show("blind", { direction: "left" }, 1500); $("#schweinchenImg").show();
} else { } else {
$("#schweinchen1Img").show("blind", { direction: "left" }, 1500); $("#schweinchen1Img").show();
} }
$("#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.wav');
schweinchen.volume = schweinchenVolume; schweinchen.volume = schweinchenVolume;
schweinchen.play(); schweinchen.play();
} }
} }
function stopSchweinchen() { function stopSchweinchen() {
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelcet>option:selected").index();
$("#questionsSelect").val(index+1); $("#questionsSelcet").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();
} }
@ -372,7 +238,7 @@ function stopSchweinchen() {
function hideIntro() { function hideIntro() {
$(".noIntro").show(); $(".noIntro").show();
$(".intro").fadeOut(); $(".intro").hide();
if(intro) { if(intro) {
intro.pause(); intro.pause();
} }
@ -380,93 +246,88 @@ function hideIntro() {
function showIntro() { function showIntro() {
$(".noIntro").hide(); $(".noIntro").hide();
$(".intro").fadeIn(); $(".intro").show();
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
intro = new Audio('./sounds/intro.ogg'); intro = new Audio('./sounds/intro.mp3');
intro.volume = introVolume; intro.volume = introVolume;
intro.play(); intro.play();
} }
} }
function fillFragenSelect() { function fillFragenSelect() {
$("#questionsSelect").empty(); $("#questionsSelcet").empty();
for(var i=0;i<fragen.length;i++) { for(var i=0;i<fragen.length;i++) {
$("#questionsSelect").append('<option value="'+i+'">'+fragen[i]["kuerzel"]+'</option>'); $("#questionsSelcet").append('<option value="'+i+'">'+fragen[i]["kuerzel"]+'</option>');
} }
} }
function setFrageIndex(index) { function setFrageIndex(index) {
if (index >= 0 && index < $("#questionsSelect").find("option").length) { if(index >= 0 && index < $("#questionsSelcet").find("option").length) {
$("#questionsSelect").find("option").removeAttr("selected"); $("#questionsSelcet").find("option").removeAttr("selected");
$($("#questionsSelect").find("option")[index]).prop("selected", "true"); $($("#questionsSelcet").find("option")[index]).prop("selected", "true");
}
if ($("#questionsSelect>option:selected").index() == -1 && $("#questionsSelect").find("option")[0]) {
$($("#questionsSelect").find("option")[0]).prop("selected", "true");
} }
if($("#questionsSelcet>option:selected").index() == -1 && $("#questionsSelcet").find("option")[0] )
$($("#questionsSelcet").find("option")[0]).prop("selected", "true");
changeFrage(); changeFrage();
} }
function changeFrage() { function changeFrage() {
var index = $("#questionsSelect>option:selected").index(); var index = $("#questionsSelcet>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();
$(".pointsLeft").toggle(!isFinalMode); $('.footer').toggle(!isFinalMode);
$(".pointsRight").toggle(!isFinalMode); $('.xmarker').toggle(!isFinalMode);
$(".xmarker").toggle(!isFinalMode);
$("#ResSum_player1").toggle(isFinalMode); $("#ResSum_player1").toggle(isFinalMode);
$("#ResSum_player2").toggle(isFinalMode); $("#ResSum_player2").toggle(isFinalMode);
if (isFinalMode){ if (!isFinalMode){
$("#resultFinal").show();
$(".footer").hide();
} else {
$("#resultFinal").hide(); $("#resultFinal").hide();
} else {
$("#resultFinal").show();
} }
$("#result").toggle(!isFinalMode); $("#result").toggle(!isFinalMode);
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; for(var i=0;i<fragen[index]["antworten"].length;i++) {
if (isFinalMode) { if(fragen[index]["antworten"][i]["antwort"] != "") {
anzahlFragen = 5; if (!isFinalMode) {
} var oneLine = $('<div style="height:55px">' +
for (var i = 0; i < anzahlFragen; i++) { '<div style="width: 52px; float: left;" class="nr">' + (i + 1) + '.</div>' +
if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") { '<div style="width: 860px; float: left;" class="answer"></div>' +
if (isFinalMode) { '<div style="width: 52px; float: left;" class="points"></div>' +
var oneLine = $('<div>' +
'<div style="width: 44%; float: left; text-align: center" class="answer"></div>' +
'<div style="width: 6%; float: left; text-align: center" class="points"></div>' +
'<div style="width: 6%; float: left; text-align: center" class="points_player2"></div>' +
'<div style="width: 44%; float: left; text-align: center" class="answer_player2"></div>' +
'</div>'); '</div>');
} else { } else {
var oneLine = $('<div>' + var oneLine = $('<div style="margin-left: 20px; height:55px">' +
'<div style="width: 5%; text-align: center; float: left;" class="nr">' + (i + 1) + '.</div>' + '<div style="margin-left: 15px; width: 400px; float: left;" class="answer"></div>' +
'<div style="width: 89%; text-align: center; float: left" class="answer"></div>' + '<div style="width: 52px; float: left;" class="points"></div>' +
'<div style="width: 6%; float: left; text-align: right" class="points"></div>' + '<div style="width: 65px; float: left;" class="points_player2"></div>' +
'<div style="width: 400px; float: left;" class="answer_player2"></div>' +
'</div>'); '</div>');
} }
if(display && !player2) { if(display && !player2) {
oneLine.find(".answer").text(".............................................................................................................."); if (isFinalMode) {
oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _");
} else {
oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _");
}
oneLine.find(".points").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("_ _ _ _ _ _ _ _ _ _ _");
} }
} else if (!display) { } else if (!display) {
oneLine.find(".answer").html('<span class="markOnHover">'+getAnswerString(fragen[index]["antworten"][i]["antwort"])+'</span>'); oneLine.find(".answer").html('<span class="markOnHover">'+getAnswerString(fragen[index]["antworten"][i]["antwort"])+'</span>');
@ -495,7 +356,6 @@ 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();
@ -519,18 +379,17 @@ function setAnswer(index, answer) {
} }
answer = getAnswerString(answer); answer = getAnswerString(answer);
var el = $($("#answers").find(answer_select)[index]); var el = $($("#answers").find(answer_select)[index]);
//el.empty(); el.empty();
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
audio = new Audio('./sounds/textRichtig.ogg'); audio = new Audio('./sounds/textRichtig.mp3');
audio.play(); audio.play();
} }
el.typed({ el.typed({
strings: [answer], strings: [answer],
typeSpeed: 10, typeSpeed: 10,
overwrite: true,
showCursor: false, showCursor: false,
cursorChar: "", cursorChar: "",
fadeOut: false, fadeOut: true,
fadeOutDelay: 0, fadeOutDelay: 0,
}); });
} }
@ -545,7 +404,7 @@ function setAnz(index, nr) {
var el = $($("#answers").find(points_select)[index]); var el = $($("#answers").find(points_select)[index]);
el.text(nr); el.text(nr);
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
audio = new Audio('./sounds/zahlRichtig.ogg'); audio = new Audio('./sounds/zahlRichtig.mp3');
audio.play(); audio.play();
} }
recalcSum(nr); recalcSum(nr);
@ -571,47 +430,23 @@ function recalcSum(s) {
}); });
$("#SumRes_player1").text(p1p); $("#SumRes_player1").text(p1p);
$("#SumRes_player2").text(p2p); $("#SumRes_player2").text(p2p);
if (display) {
$("#pointsCenter").text(p1p + p2p);
} else {
$("#pointsCenter").text("");
}
} else { } else {
$(sum_selector).text(parseFloat($(sum_selector).text())+parseFloat(s)); $(sum_selector).text(parseFloat($(sum_selector).text())+parseFloat(s));
$("#pointsCenter").text(parseFloat($(sum_selector).text())*runde);
} }
} }
// 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) {
var anz = str.length;
if(anz%2==0) {
str+="_";
}
anz = str.length;
var maxLength = 40;
if (isFinalMode){ if (isFinalMode){
while(str.length < 24) { maxLength = 20;
str = " " + str;
}
} else {
str += " ";
while(str.length < 47) {
str += ".";
} }
while(str.length < maxLength) {
str+= " _";
} }
return str; return str;
} }
@ -654,11 +489,20 @@ function addNewQuestion(frage) {
'<td>Frage:</td><td><input class="questionIn" type="text"></td>'+ '<td>Frage:</td><td><input class="questionIn" type="text"></td>'+
'</tr><tr>'+ '</tr><tr>'+
'<td>Kürzel:</td><td><input class="questionKIn" type="text"></td>'+ '<td>Kürzel:</td><td><input class="questionKIn" type="text"></td>'+
'</tr>'+ '</tr><tr class="antTr">'+
'<td>Antwort 1:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr class="antTr">'+
'<td>Antwort 2:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr class="antTr">'+
'<td>Antwort 3:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr class="antTr">'+
'<td>Antwort 4:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr class="antTr">'+
'<td>Antwort 5:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr class="antTr">'+
'<td>Antwort 6:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
'</tr><tr>'+
'</table></li>'); '</table></li>');
for(var i=1;i<7;i++) {
newQHtml.find("table").append('<tr class="antTr"><td>Antwort '+i+':</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td></tr>');
}
if(frage != null) { if(frage != null) {
newQHtml.find(".questionIn").val(frage["frage"]); newQHtml.find(".questionIn").val(frage["frage"]);
newQHtml.find(".questionKIn").val(frage["kuerzel"]); newQHtml.find(".questionKIn").val(frage["kuerzel"]);

View File

@ -139,8 +139,6 @@
// Check if there is some text in the element, if yes start by backspacing the default message // Check if there is some text in the element, if yes start by backspacing the default message
if (elContent.length == 0) { if (elContent.length == 0) {
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos); self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
} else if (self.options && self.options.overwrite) {
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
} else { } else {
self.backspace(elContent, elContent.length); self.backspace(elContent, elContent.length);
} }
@ -167,17 +165,13 @@
this.init(); this.init();
}, },
// pass current string state to each function, types 1 char per call, if overwrite is true the existing string will be replaced char by char // pass current string state to each function, types 1 char per call
typewrite: function(curString, curStrPos, curOverwritePos) { typewrite: function(curString, curStrPos) {
// exit when stopped // exit when stopped
if (this.stop === true) { if (this.stop === true) {
return; return;
} }
if (!curOverwritePos) {
curOverwritePos = curStrPos;
}
if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) { if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
this.el.classList.remove(this.fadeOutClass); this.el.classList.remove(this.fadeOutClass);
this.cursor.classList.remove(this.fadeOutClass); this.cursor.classList.remove(this.fadeOutClass);
@ -269,9 +263,6 @@
// start typing each new char into existing string // start typing each new char into existing string
// curString: arg, self.el.html: original text inside element // curString: arg, self.el.html: original text inside element
var nextString = curString.substr(0, curStrPos + 1); var nextString = curString.substr(0, curStrPos + 1);
if (self.options && self.options.overwrite) {
nextString += self.el.textContent.substr(curOverwritePos + 1);
}
if (self.attr) { if (self.attr) {
self.el.setAttribute(self.attr, nextString); self.el.setAttribute(self.attr, nextString);
} else { } else {
@ -286,9 +277,8 @@
// add characters one by one // add characters one by one
curStrPos++; curStrPos++;
curOverwritePos++;
// loop the function // loop the function
self.typewrite(curString, curStrPos, curOverwritePos); self.typewrite(curString, curStrPos);
} }
// end of character pause // end of character pause
}, charPause); }, charPause);
@ -446,9 +436,7 @@
var self = this; var self = this;
clearInterval(self.timeout); clearInterval(self.timeout);
var id = this.el.getAttribute('id'); var id = this.el.getAttribute('id');
if (!self.options || !self.options.overwrite) {
this.el.textContent = ''; this.el.textContent = '';
}
if (typeof this.cursor !== 'undefined' && typeof this.cursor.parentNode !== 'undefined') { if (typeof this.cursor !== 'undefined' && typeof this.cursor.parentNode !== 'undefined') {
this.cursor.parentNode.removeChild(this.cursor); this.cursor.parentNode.removeChild(this.cursor);
} }
@ -498,8 +486,6 @@
backSpeed: 0, backSpeed: 0,
// shuffle the strings // shuffle the strings
shuffle: false, shuffle: false,
// existing text will be overwritten instead of removing it first
overwrite: false,
// time before backspacing // time before backspacing
backDelay: 500, backDelay: 500,
// Fade out instead of backspace // Fade out instead of backspace

View File

@ -1,33 +1,26 @@
var retrys = 0; var retrys = 0;
var ip = localStorage.getItem("ip");
var viewOnly = false;
var WSPort = 8081; if(window.location.href.indexOf("ip")!==-1) {
var IP = (location.host +"").split(":")[0]; ip = window.location.href.split("ip=")[1];
viewOnly = true;
}
var WSPort = 8080;
var isWebsocketConnected = false; var isWebsocketConnected = false;
var connTimer = null; var connTimer = null;
var sounds = true; 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;
var viewOnly = false;
if(window.location.href.indexOf("viewonly")!==-1) {
ip = window.location.href.split("ip=")[1];
viewOnly = true;
}
$(document).ready(function() { $(document).ready(function() {
$("#displayBtn").click(function() { $("#displayBtn").click(function() {
if (this.requestFullScreen) {
this.requestFullScreen();
} else if (this.mozRequestFullScreen) {
this.mozRequestFullScreen();
} else if (this.webkitRequestFullScreen) {
this.webkitRequestFullScreen();
}
$("#startDiv").hide(); $("#startDiv").hide();
$("#display").show(); $("#display").show();
$(".controller").hide(); $(".controller").hide();
@ -40,23 +33,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", "");
}); });
@ -84,12 +66,12 @@ $(document).ready(function() {
var connectWs = function() { var connectWs = function() {
ws = new WebSocket('ws://'+IP+':'+WSPort); ws = new WebSocket('ws://'+ip+':'+WSPort);
ws.onopen = function() ws.onopen = function()
{ {
$("#notConnected").hide(); $("#notConnected").hide();
$("#connected").text("Verbunden mit: "+'ws://'+IP+':'+WSPort); $("#connected").text("Verbunden mit: "+'ws://'+ip+':'+WSPort);
$("#connected").show(); $("#connected").show();
isWebsocketConnected = true; isWebsocketConnected = true;
loadQuestions(); loadQuestions();
@ -104,29 +86,24 @@ 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") {
if($(".marker"+value).css("color") == "rgb(66, 66, 66)") { if($(".marker"+value).css("color") == "rgb(127, 115, 115)") {
$(".marker"+value).css("color","rgb(211, 16, 16)"); $(".marker"+value).css("color","rgb(211, 16, 16)");
if(sounds && (display || serverSound)) { if(sounds && (display || serverSound)) {
audio = new Audio('./sounds/fail.ogg'); audio = new Audio('./sounds/fail.mp3');
audio.play(); audio.play();
} }
} else { } else {
$(".marker"+value).css("color","rgb(66, 66, 66)"); $(".marker"+value).css("color","rgb(127, 115, 115)");
} }
} else if(key == "clearAllFailsBtn") { } else if(key == "clearAllFailsBtn") {
$.each($(".xmarker").find("span"), function() { $.each($(".xmarker").find("span"), function() {
$(this).css("color","rgb(66, 66, 66)"); $(this).css("color","rgb(127, 115, 115)");
}); });
} else if(key == "toggleSound") { } else if(key == "toggleSound") {
if(sounds) { if(sounds) {
@ -138,8 +115,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,18 +145,8 @@ 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") {
startAnswerDuplicate();
} else if(key == "showTimer") {
showTimer();
} else if(key == "startTimer") {
startTimer();
} else if(key == "stopTimer") {
stopTimer();
} else if(key == "setAnswerFailVolume") { } else if(key == "setAnswerFailVolume") {
answerFailVolume = value; answerFailVolume = value;
if(answerFail != null) if(answerFail != null)
@ -196,12 +161,7 @@ var connectWs = function() {
schweinchen.volume = schweinchenVolume; schweinchen.volume = schweinchenVolume;
} else if(key == "toggleBlackScreen") { } else if(key == "toggleBlackScreen") {
if(display) { if(display) {
if ($("#blackScreen").css("display") === "none") { $("#blackScreen").toggle();
$("#blackScreen").fadeIn(500);
} else {
$("#blackScreen").fadeOut(6000);
}
// $("#blackScreen").toggle();
} }
} else if (key == "toggleFinalMode"){ } else if (key == "toggleFinalMode"){
setFinalMode(value); setFinalMode(value);

BIN
web/sounds/fail.mp3 Normal file

Binary file not shown.

Binary file not shown.

BIN
web/sounds/failOrginal.mp3 Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
web/sounds/fail_old.mp3 Normal file

Binary file not shown.

BIN
web/sounds/failfinal.mp3 Executable file

Binary file not shown.

Binary file not shown.

BIN
web/sounds/intro.mp3 Normal file

Binary file not shown.

Binary file not shown.

BIN
web/sounds/jeopardy.mp3 Normal file

Binary file not shown.

Binary file not shown.

BIN
web/sounds/schweinchen.wav Normal file

Binary file not shown.

BIN
web/sounds/textRichtig.mp3 Normal file

Binary file not shown.

Binary file not shown.

BIN
web/sounds/zahlRichtig.mp3 Normal file

Binary file not shown.

Binary file not shown.