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

Somewhat responsive

Browse Source
This commit is contained in:
Alexander Hüllmandel 2019-08-24 23:52:56 +02:00
parent c6bbeb2b46
commit f703856b59
No known key found for this signature in database
GPG Key ID: E9C3846E172253C4
5 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/fragen.txt
View File

File diff suppressed because one or more lines are too long

36
web/css/main.css
View File

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

16
web/index.html
View File

@ -28,10 +28,10 @@
<img id="schweinchen2Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen2.png"> <img id="schweinchen2Img" style="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"> <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) --> <!-- question text is injected in `loadQuestionToGui(index:)` (server.js) -->
<div id="displayQuestions" class="textColor"> <div id="displayQuestions" class="textColor questionAnswerContainer">
</div> </div>
<!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) --> <!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) -->
<div id="answers"> <div id="answers" class="questionAnswerContainer">
</div> </div>
<div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;"> <div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;">
<div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div> <div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div>
@ -44,7 +44,7 @@
<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player1"></div> <div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player1"></div>
<div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player2"></div> <div class="noIntro" style="width:80px; float: left; text-align:right;" id="SumRes_player2"></div>
</div> </div>
<div id="timer" style="position:absolute; top: 65px; left: 50%; width: 400px; margin-left: -200px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;"> <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 20
</div> </div>
<div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;"> <div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;">
@ -55,23 +55,23 @@
<!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>--> <!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>-->
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div> <div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div>
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div> <div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div>
<img style="position: absolute; top: 0px;" class="intro" src="./img/logo.png"> <img style="position: absolute; top: 0px; width: 100%; height: 100%;" class="intro" src="./img/logo.png">
</div> </div>
<!-- controller container --> <!-- controller container -->
<div style="display:none;" class="controller"> <div style="display:none;" class="controller">
<div id="buttonsDownUnder"> <div id="buttonsDownUnder">
<table border="1"> <table border="1">
<tr> <tr>
<td><b>Global</b></td> <!-- <td><b>Global</b></td>
<td><b>Server</b></td> <td><b>Server</b></td> -->
<td><b>Intro</b></td> <td><b>Intro</b></td>
<td><b>Schweinchen</b></td> <td><b>Schweinchen</b></td>
<td><b>Optionen</b></td> <td><b>Optionen</b></td>
<td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td> <td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td>
</tr> </tr>
<tr> <tr>
<td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> <!-- <td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/noSound.png"></td> <td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> -->
<td> <td>
<button id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br> <button id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
<button id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br> <button id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>

29
web/js/main.js
View File

@ -409,31 +409,26 @@ function loadQuestionToGui(index) {
for (var i = 0; i < anzahlFragen; i++) { for (var i = 0; i < anzahlFragen; i++) {
if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") { if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") {
if (isFinalMode) { if (isFinalMode) {
var oneLine = $('<div style="height:55px">' + var oneLine = $('<div>' +
'<div style="width: 400px; float: left; text-align: right" class="answer"></div>' + '<div style="width: 44%; float: left; text-align: center" class="answer"></div>' +
'<div style="width: 40px; float: left; margin-left: 18px; margin-right: 20px; text-align: right" class="points"></div>' + '<div style="width: 6%; float: left; text-align: center" class="points"></div>' +
'<div style="width: 40px; float: left; margin-left: 20px; margin-right: 22px; text-align: right" class="points_player2"></div>' + '<div style="width: 6%; float: left; text-align: center" class="points_player2"></div>' +
'<div style="width: 400px; float: left;" class="answer_player2"></div>' + '<div style="width: 44%; float: left; text-align: center" class="answer_player2"></div>' +
'</div>'); '</div>');
} else { } else {
var oneLine = $('<div style="height:55px">' + var oneLine = $('<div>' +
'<div style="margin-left: 18px; width: 50px; float: left;" class="nr">' + (i + 1) + '.</div>' + '<div style="width: 5%; text-align: center; float: left;" class="nr">' + (i + 1) + '.</div>' +
'<div style="width: 824px; float: left" class="answer"></div>' + '<div style="width: 89%; text-align: center; float: left" class="answer"></div>' +
'<div style="width: 52px; float: left; text-align: right" class="points"></div>' + '<div style="width: 6%; float: left; text-align: right" class="points"></div>' +
'</div>'); '</div>');
} }
if(display && !player2) { if(display && !player2) {
if (isFinalMode) { oneLine.find(".answer").text("..............................................................................................................");
// oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _");
oneLine.find(".answer").text(".....................");
} else {
// oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _");
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("_ _ _ _ _ _ _ _ _ _ _"); // oneLine.find(".answer_player2").text("_ _ _ _ _ _ _ _ _ _ _");
} }
} else if (!display) { } else if (!display) {

9
web/js/websocket.js
View File

@ -8,7 +8,7 @@ var sounds = true;
var ws; var ws;
var display = true; var display = true;
var audio = null; var audio = null;
var serverSound = false; var serverSound = true;
var isFinalMode = false; var isFinalMode = false;
var player2 = false; var player2 = false;
var runde = 1; var runde = 1;
@ -40,6 +40,13 @@ $(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() {