add http server
This commit is contained in:
rofl256
parent
d41029845d
commit
4cc5bc3b98
25
README.md
25
README.md
@ -11,7 +11,7 @@ Familienduell Client / Server (NodeJs Javascript)
|
||||
___Windows___
|
||||
|
||||
1. Im Ordner "server" die Datei StartServer.bat doppelklicken.
|
||||
* Im Fenster das jetzt erscheint sollte: "Websocket Server running at ws://127.0.0.1:8080" 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.
|
||||
|
||||
___Mac___
|
||||
@ -26,21 +26,17 @@ ___Mac___
|
||||
4. Starte den Server
|
||||
`node server.js`
|
||||
|
||||
5. In der Console erscheint: "Websocket Server running at ws://127.0.0.1:8080"
|
||||
5. In der Console erscheint: "SERVER IS UP AND RUNNING"
|
||||
|
||||
### -B- START DES CONTROLLERS!
|
||||
|
||||
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.)
|
||||
1. Browser öffnen und zur Adresse: http://127.0.0.1:8080 surfen
|
||||
|
||||
* 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.
|
||||
2. Auf den Controller Button klicken.
|
||||
|
||||
### -C- Start des Displays
|
||||
|
||||
1. Alle Schirtte aus "START DES CONTROLLERS!" in einem neuen Browserfenster ausführen. Dann bei Punkt 4. auf display klicken.
|
||||
1. In einem neuen Browserfenster verbinden und auf display klicken.
|
||||
|
||||
|
||||
---------------------------
|
||||
@ -51,20 +47,13 @@ A: Das Bild ist schwarz damit man die Intromusik starten kann und die Leute (Zus
|
||||
Dies kann (Im Controller) über die Checkbox "Blackscreen", im Bereich "Intro" kontrolliert werden.
|
||||
|
||||
Q: Wie funktioniert das mit 2 oder mehr Geräten?
|
||||
A: Step by Step:
|
||||
A: Verwende dazu einfach eine Externe IP des Servers (aus dem Serverfenster) zum Verbinden von einem anderen Gerät aus
|
||||
|
||||
1. Alle Geräte müssen sich im selben Netzwerk (LAN/W-Lan) befinden
|
||||
2. Kopiere alle Dateien auf alle Geräte
|
||||
3. Starte den Server
|
||||
4. Die IP Adresse des Servers wird nach dem Start im Serverfenster unter "From different networks" angezeigt. (sollt mit 192.168. beginnen)
|
||||
5. Starte den Controller & Displays auf beliebigen Geräten, aber verwende beim verbinden jetzt die Server IP (Nicht 127.0.0.1)
|
||||
6. Los gehts :)
|
||||
|
||||
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.
|
||||
|
||||
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!)
|
||||
A: Ja. Der Link lautet: http://SERVERURL/PFAD/index.html?viewonly=true (SERVERURL und PFAD anpassen!)
|
||||
|
||||
Q: Ich habe sonstige Fehler bei (Anzeige, Verbindungsaufbau, Anwendungsverhalten)
|
||||
A: Falls du einen anderen Browser als Google Chrome verwendest, installiere Chrome.
|
||||
|
||||
@ -1,9 +1,41 @@
|
||||
//Websocket Server <<<<<<<<<<<<<<
|
||||
var wsPort = 8080;
|
||||
var wsPort = 8081;
|
||||
var webPort = 8080;
|
||||
var subscribers = [];
|
||||
var WebSocketServer = require('ws').Server
|
||||
, wss = new WebSocketServer({port: wsPort});
|
||||
var WebSocketServer = require('ws').Server;
|
||||
var wss = new WebSocketServer({port: wsPort});
|
||||
var http = require('http');
|
||||
var url = require('url');
|
||||
var path = require('path');
|
||||
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) {
|
||||
subscribers.push(ws);
|
||||
@ -64,11 +96,15 @@ function broadcastMessage(clientId, msg) {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("\nWebsocket Server on Port:"+wsPort);
|
||||
console.log("\nYou have this IPs to connect to:");
|
||||
console.log("From this PC: 127.0.0.1 or localhost");
|
||||
console.log("\n---From different networks---");
|
||||
console.log("\nWebsocket server running on Port:"+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------------------------------");
|
||||
@ -114,10 +150,10 @@ Object.keys(ifaces).forEach(function (ifname) {
|
||||
|
||||
if (alias >= 1) {
|
||||
// this single interface has multiple ipv4 addresses
|
||||
console.log(ifname + ':' + alias, iface.address);
|
||||
console.log(" http://"+iface.address+":"+webPort);
|
||||
} else {
|
||||
// this interface has only one ipv4 adress
|
||||
console.log(ifname, iface.address);
|
||||
console.log(" "+ifname+": ", "http://"+iface.address+":"+webPort);
|
||||
}
|
||||
++alias;
|
||||
});
|
||||
|
||||
157
web/duell.html
157
web/duell.html
@ -1,157 +0,0 @@
|
||||
<?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>Optionen</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>
|
||||
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>
|
||||
<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><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>
|
||||
</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>
|
||||
183
web/index.html
183
web/index.html
@ -1,42 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Familienduell</title>
|
||||
<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">
|
||||
<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!");
|
||||
}
|
||||
</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">
|
||||
|
||||
$("#startButton").click(function() {
|
||||
localStorage.setItem("ip", $("#ip").val());
|
||||
window.location.href = "duell.html";
|
||||
$("#not").show();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="startDiv" style="width: 500px; margin: auto;">
|
||||
<h1 style="font-size: 5em;">Familien Duell</h1>
|
||||
Server IP-Adresse: <input id="ip" type="text"> <button id="startButton">Start</button>
|
||||
<div style="display:none" id="not">
|
||||
<a href="duell.html">Falls die Weiterleitung nicht funktioniert, bitte hier klicken!</a>
|
||||
</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>Optionen</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>
|
||||
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>
|
||||
<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><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>
|
||||
</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>
|
||||
</body>
|
||||
<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>
|
||||
@ -1,13 +1,7 @@
|
||||
var retrys = 0;
|
||||
var ip = localStorage.getItem("ip");
|
||||
var viewOnly = false;
|
||||
|
||||
if(window.location.href.indexOf("ip")!==-1) {
|
||||
ip = window.location.href.split("ip=")[1];
|
||||
viewOnly = true;
|
||||
}
|
||||
|
||||
var WSPort = 8080;
|
||||
var WSPort = 8081;
|
||||
var IP = (location.host +"").split(":")[0];
|
||||
var isWebsocketConnected = false;
|
||||
var connTimer = null;
|
||||
var sounds = true;
|
||||
@ -19,6 +13,12 @@ var isFinalMode = false;
|
||||
var player2 = false;
|
||||
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() {
|
||||
$("#displayBtn").click(function() {
|
||||
$("#startDiv").hide();
|
||||
@ -66,12 +66,12 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
var connectWs = function() {
|
||||
ws = new WebSocket('ws://'+ip+':'+WSPort);
|
||||
ws = new WebSocket('ws://'+IP+':'+WSPort);
|
||||
|
||||
ws.onopen = function()
|
||||
{
|
||||
$("#notConnected").hide();
|
||||
$("#connected").text("Verbunden mit: "+'ws://'+ip+':'+WSPort);
|
||||
$("#connected").text("Verbunden mit: "+'ws://'+IP+':'+WSPort);
|
||||
$("#connected").show();
|
||||
isWebsocketConnected = true;
|
||||
loadQuestions();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user