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

update typed and add alternative answer to finale round

Browse Source
This commit is contained in:
rofl256 2017-09-25 04:10:33 +02:00
parent 776b28bd5e
commit c0e72e10f3
3 changed files with 436 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/duell.html
View File

@ -115,7 +115,15 @@
<img width="20px;" src="./img/soundOn.png"> <img width="20px;" src="./img/soundOn.png">
<div> <div>
<lable>Spieler 1: <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod"></lable><br> <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> <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 (0 Punkte):<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">Setzten</button><button class="finalElement" id="alternateAnswerPBtn" disabled="true">P</button>
</div> </div>
</td> </td>
</tr> </tr>

25
web/js/main.js
View File

@ -132,12 +132,23 @@ $(document).ready(function() {
wsSend("setRightPoints", $("#mPunkteRight").val()); wsSend("setRightPoints", $("#mPunkteRight").val());
}); });
$("#alternateAnswerBtn").click(function(){
var is = $("#finalFragenSelect").val();
var answer = $("#alternateAnswer").val();
wsSend("setAnswer", is+"###"+answer);
});
$("#alternateAnswerPBtn").click(function(){
var is = $("#finalFragenSelect").val();
wsSend("setAnz", is+"###0");
});
}); });
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 = $("#questionsSelcet>option:selected").index(); var index = $("#questionsSelcet>option:selected").index();
index = index > 0 ? index : 0;
loadQuestionToGui(index); loadQuestionToGui(index);
} }
@ -319,12 +330,16 @@ function loadQuestionToGui(index) {
oneLine.find(".points").html('<span class="markOnHover">'+fragen[index]["antworten"][i]["anz"]+'</span>'); oneLine.find(".points").html('<span class="markOnHover">'+fragen[index]["antworten"][i]["anz"]+'</span>');
(function() { (function() {
var is = i; var is = i;
var is2 = i;
if (isFinalMode){
is = $("#finalFragenSelect").val();
}
var frage = fragen[index]; var frage = fragen[index];
oneLine.find(".answer").click(function() { oneLine.find(".answer").click(function() {
wsSend("setAnswer", is+"###"+frage["antworten"][is]["antwort"]); wsSend("setAnswer", is+"###"+frage["antworten"][is2]["antwort"]);
}); });
oneLine.find(".points").click(function() { oneLine.find(".points").click(function() {
wsSend("setAnz", is+"###"+frage["antworten"][is]["anz"]); wsSend("setAnz", is+"###"+frage["antworten"][is2]["anz"]);
}); });
})(); })();
} }
@ -360,7 +375,11 @@ function setAnswer(index, answer) {
} }
el.typed({ el.typed({
strings: [answer], strings: [answer],
typeSpeed: 20 typeSpeed: 50,
showCursor: false,
cursorChar: "",
fadeOut: true,
fadeOutDelay: 0,
}); });
} }

569
web/js/typed.js
View File

@ -1,6 +1,6 @@
// The MIT License (MIT) // The MIT License (MIT)
// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com // Typed.js | Copyright (c) 2016 Matt Boldt | www.mattboldt.com
// Permission is hereby granted, free of charge, to any person obtaining a copy // Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal // of this software and associated documentation files (the "Software"), to deal
@ -23,19 +23,37 @@
!function($){ ! function(window, document, $) {
"use strict"; "use strict";
var Typed = function(el, options){ var Typed = function(el, options) {
var self = this;
// chosen element to manipulate text // chosen element to manipulate text
this.el = $(el); this.el = el;
// options // options
this.options = $.extend({}, $.fn.typed.defaults, options); this.options = {};
Object.keys(defaults).forEach(function(key) {
self.options[key] = defaults[key];
});
Object.keys(options).forEach(function(key) {
self.options[key] = options[key];
});
// attribute to type into
this.isInput = this.el.tagName.toLowerCase() === 'input';
this.attr = this.options.attr;
// show cursor
this.showCursor = this.isInput ? false : this.options.showCursor;
// text content of element // text content of element
this.text = this.el.text(); this.elContent = this.attr ? this.el.getAttribute(this.attr) : this.el.textContent;
// html or plain text
this.contentType = this.options.contentType;
// typing speed // typing speed
this.typeSpeed = this.options.typeSpeed; this.typeSpeed = this.options.typeSpeed;
@ -49,6 +67,18 @@
// amount of time to wait before backspacing // amount of time to wait before backspacing
this.backDelay = this.options.backDelay; this.backDelay = this.options.backDelay;
// Fade out instead of backspace
this.fadeOut = this.options.fadeOut;
this.fadeOutClass = this.options.fadeOutClass;
this.fadeOutDelay = this.options.fadeOutDelay;
// div containing strings
if($ && this.options.stringsElement instanceof $) {
this.stringsElement = this.options.stringsElement[0]
} else {
this.stringsElement = this.options.stringsElement;
}
// input strings of text // input strings of text
this.strings = this.options.strings; this.strings = this.options.strings;
@ -58,9 +88,6 @@
// current array position // current array position
this.arrayPos = 0; this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on. // number to stop backspacing on.
// default 0, can change depending on how many chars // default 0, can change depending on how many chars
// you want to remove at the time // you want to remove at the time
@ -69,209 +96,423 @@
// Looping logic // Looping logic
this.loop = this.options.loop; this.loop = this.options.loop;
this.loopCount = this.options.loopCount; this.loopCount = this.options.loopCount;
this.curLoop = 1; this.curLoop = 0;
if (this.loop === false){
// number in which to stop going through array // for stopping
// set to strings[] array (length - 1) to stop deleting after last string is typed this.stop = false;
this.stopArray = this.strings.length-1;
} // custom cursor
else{ this.cursorChar = this.options.cursorChar;
this.stopArray = this.strings.length;
} // shuffle the strings
this.shuffle = this.options.shuffle;
// the order of strings
this.sequence = [];
// All systems go! // All systems go!
this.build(); this.build();
} };
Typed.prototype = { Typed.prototype = {
constructor: Typed constructor: Typed,
, init: function(){ init: function() {
// begin the loop w/ first current string (global self.string) // begin the loop w/ first current string (global self.strings)
// current string will be passed as an argument each time after this // current string will be passed as an argument each time after this
var self = this; var self = this;
setTimeout(function() { self.timeout = setTimeout(function() {
// Start typing for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
self.typewrite(self.string, self.strPos)
}, self.startDelay); // shuffle the array if true
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
var elContent;
if (self.isInput) {
elContent = self.el.value;
} else if (self.contentType === 'html') {
elContent = self.el.innerHTML;
} else {
elContent = self.el.textContent;
}
// Start typing
// Check if there is some text in the element, if yes start by backspacing the default message
if (elContent.length == 0) {
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
} else {
self.backspace(elContent, elContent.length);
}
}, self.startDelay);
},
build: function() {
var self = this;
// Insert cursor
if (this.showCursor === true) {
this.cursor = document.createElement('span');
this.cursor.className = 'typed-cursor';
this.cursor.innerHTML = this.cursorChar;
this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);
}
if (this.stringsElement) {
this.strings = [];
this.stringsElement.style.display = 'none';
var strings = Array.prototype.slice.apply(this.stringsElement.children);
strings.forEach(function(stringElement){
self.strings.push(stringElement.innerHTML);
});
}
this.init();
},
// pass current string state to each function, types 1 char per call
typewrite: function(curString, curStrPos) {
// exit when stopped
if (this.stop === true) {
return;
} }
, build: function(){ if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
// Insert cursor this.el.classList.remove(this.fadeOutClass);
//this.el.after("<span id=\"typed-cursor\">|</span>"); this.cursor.classList.remove(this.fadeOutClass);
this.init();
} }
// pass current string state to each function // varying values for setTimeout during typing
, typewrite: function(curString, curStrPos){ // can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// varying values for setTimeout during typing // ------------- optional ------------- //
// can't be global since number changes each time loop is executed // backpaces a certain string faster
var humanize = Math.round(Math.random() * (30 - 30)) + this.typeSpeed; // ------------------------------------ //
var self = this; // if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// ------------- optional ------------- // // contain typing function in a timeout humanize'd delay
// backpaces a certain string faster self.timeout = setTimeout(function() {
// ------------------------------------ // // check for an escape character before a pause value
// if (self.arrayPos == 1){ // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
// self.backDelay = 50; // single ^ are removed from string
// } var charPause = 0;
// else{ self.backDelay = 500; } var substr = curString.substr(curStrPos);
if (substr.charAt(0) === '^') {
var skip = 1; // skip atleast 1
if (/^\^\d+/.test(substr)) {
substr = /\d+/.exec(substr)[0];
skip += substr.length;
charPause = parseInt(substr);
}
// contain typing function in a timeout // strip out the escape character and pause value so they're not printed
setTimeout(function() { curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
}
// make sure array position is less than array length if (self.contentType === 'html') {
if (self.arrayPos < self.strings.length){ // skip over html tags while typing
var curChar = curString.substr(curStrPos).charAt(0);
// check for an escape character before a pause value if (curChar === '<' || curChar === '&') {
if (curString.substr(curStrPos, 1) === "^") { var tag = '';
var charPauseEnd = curString.substr(curStrPos + 1).indexOf(" "); var endTag = '';
var charPause = curString.substr(curStrPos + 1, charPauseEnd); if (curChar === '<') {
// strip out the escape character and pause value so they're not printed endTag = '>'
curString = curString.replace("^" + charPause, "");
} }
else { else {
var charPause = 0; endTag = ';'
}
while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
tag += curString.substr(curStrPos).charAt(0);
curStrPos++;
if (curStrPos + 1 > curString.length) { break; }
}
curStrPos++;
tag += endTag;
}
}
// timeout for any pause after a character
self.timeout = setTimeout(function() {
if (curStrPos === curString.length) {
// fires callback function
self.options.onStringTyped(self.arrayPos);
// is this the final string
if (self.arrayPos === self.strings.length - 1) {
// animation that occurs on the last typed string
self.options.callback();
self.curLoop++;
// quit if we wont loop back
if (self.loop === false || self.curLoop === self.loopCount)
return;
} }
// timeout for any pause after a character self.timeout = setTimeout(function() {
setTimeout(function() { self.backspace(curString, curStrPos);
}, self.backDelay);
// start typing each new char into existing string } else {
// curString is function arg
self.el.text(self.text + curString.substr(0, curStrPos));
// check if current character number is the string's length /* call before functions if applicable */
// and if the current array position is less than the stopping point if (curStrPos === 0) {
// if so, backspace after backDelay setting self.options.preStringTyped(self.arrayPos);
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
clearTimeout(clear);
self.options.onStringTyped();
var clear = setTimeout(function(){
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else{
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false){
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
// end of character pause
}, charPause);
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false){
self.arrayPos = 0;
self.init();
}
else if(self.loopCount !== false && self.curLoop < self.loopCount){
self.arrayPos = 0;
self.curLoop = self.curLoop+1;
self.init();
} }
// humanized value for typing // start typing each new char into existing string
}, humanize); // curString: arg, self.el.html: original text inside element
var nextString = curString.substr(0, curStrPos + 1);
if (self.attr) {
self.el.setAttribute(self.attr, nextString);
} else {
if (self.isInput) {
self.el.value = nextString;
} else if (self.contentType === 'html') {
self.el.innerHTML = nextString;
} else {
self.el.textContent = nextString;
}
}
} // add characters one by one
curStrPos++;
, backspace: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
var self = this;
setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
// if (self.arrayPos == 1){
// self.stopNum = 14;
// }
//every other time, delete the whole typed string
// else{
// self.stopNum = 0;
// }
// ----- continue important stuff ----- //
// replace text with current text + typed characters
self.el.text(self.text + curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum){
// subtract characters one by one
curStrPos--;
// loop the function // loop the function
self.backspace(curString, curStrPos); self.typewrite(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum){
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos+1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
} }
// end of character pause
}, charPause);
// humanized value for typing // humanized value for typing
}, humanize); }, humanize);
},
backspace: function(curString, curStrPos) {
var self = this;
// exit when stopped
if (this.stop === true) {
return;
} }
if (this.fadeOut){
this.initFadeOut();
return;
}
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
self.timeout = setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
// if (self.arrayPos == 1){
// self.stopNum = 14;
// }
//every other time, delete the whole typed string
// else{
// self.stopNum = 0;
// }
if (self.contentType === 'html') {
// skip over html tags while backspacing
if (curString.substr(curStrPos).charAt(0) === '>') {
var tag = '';
while (curString.substr(curStrPos - 1).charAt(0) !== '<') {
tag -= curString.substr(curStrPos).charAt(0);
curStrPos--;
if (curStrPos < 0) { break; }
}
curStrPos--;
tag += '<';
}
}
// ----- continue important stuff ----- //
// replace text with base text + typed characters
var nextString = curString.substr(0, curStrPos);
self.replaceText(nextString);
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum) {
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum) {
self.arrayPos++;
if (self.arrayPos === self.strings.length) {
self.arrayPos = 0;
// Shuffle sequence again
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
self.init();
} else
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
}
// humanized value for typing
}, humanize);
},
// Adds a CSS class to fade out current string
initFadeOut: function(){
self = this;
this.el.className += ' ' + this.fadeOutClass;
this.cursor.className += ' ' + this.fadeOutClass;
return setTimeout(function() {
self.arrayPos++;
self.replaceText('');
// Resets current string if end of loop reached
if(self.strings.length > self.arrayPos) {
self.typewrite(self.strings[self.sequence[self.arrayPos]], 0);
} else {
self.typewrite(self.strings[0], 0);
self.arrayPos = 0;
}
}, self.fadeOutDelay);
},
// Replaces current text in the HTML element
replaceText: function(str) {
if (this.attr) {
this.el.setAttribute(this.attr, str);
} else {
if (this.isInput) {
this.el.value = str;
} else if (this.contentType === 'html') {
this.el.innerHTML = str;
} else {
this.el.textContent = str;
}
}
},
// Shuffles the numbers in the given array.
shuffleArray: function(array) {
var tmp, current, top = array.length;
if(top) while(--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
},
// Start & Stop currently not working
// , stop: function() {
// var self = this;
// self.stop = true;
// clearInterval(self.timeout);
// }
// , start: function() {
// var self = this;
// if(self.stop === false)
// return;
// this.stop = false;
// this.init();
// }
// Reset and rebuild the element
reset: function() {
var self = this;
clearInterval(self.timeout);
var id = this.el.getAttribute('id');
this.el.textContent = '';
if (typeof this.cursor !== 'undefined' && typeof this.cursor.parentNode !== 'undefined') {
this.cursor.parentNode.removeChild(this.cursor);
}
this.strPos = 0;
this.arrayPos = 0;
this.curLoop = 0;
// Send the callback
this.options.resetCallback();
} }
$.fn.typed = function (option) { };
return this.each(function () {
var $this = $(this) Typed.new = function(selector, option) {
, data = $this.data('typed') var elements = Array.prototype.slice.apply(document.querySelectorAll(selector));
, options = typeof option == 'object' && option elements.forEach(function(element) {
if (!data) $this.data('typed', (data = new Typed(this, options))) var instance = element._typed,
if (typeof option == 'string') data[option]() options = typeof option == 'object' && option;
if (instance) { instance.reset(); }
element._typed = instance = new Typed(element, options);
if (typeof option == 'string') instance[option]();
}); });
};
if ($) {
$.fn.typed = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('typed'),
options = typeof option == 'object' && option;
if (data) { data.reset(); }
$this.data('typed', (data = new Typed(this, options)));
if (typeof option == 'string') data[option]();
});
};
} }
$.fn.typed.defaults = { window.Typed = Typed;
var defaults = {
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
stringsElement: null,
// typing speed // typing speed
typeSpeed: 0, typeSpeed: 0,
// time before typing starts // time before typing starts
startDelay: 0, startDelay: 0,
// backspacing speed // backspacing speed
backSpeed: 0, backSpeed: 0,
// shuffle the strings
shuffle: false,
// time before backspacing // time before backspacing
backDelay: 500, backDelay: 500,
// Fade out instead of backspace
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500, // milliseconds
// loop // loop
loop: false, loop: false,
// false = infinite // false = infinite
loopCount: false, loopCount: false,
// ending callback function // show cursor
callback: function(){ null }, showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string //callback for every typed string
onStringTyped: function(){ null } onStringTyped: function() {},
} // callback for reset
resetCallback: function() {}
};
}(window.jQuery); }(window, document, window.jQuery);