/% -------------------------------------------------------------------------------------- % TYPED.JS LIBRARY AND HELPER MODULE. % -------------------------------------------------------------------------------------%/ :: typedjs [script] /********************************************************************* * TYPEDJS INTEGRATION MODULE FOR SUGARCUBE *********************************************************************/ ! function() { "use strict"; function getInlineOptions(classNames) { var match, options = {}, typedRe = /^typed(?:-(\w+))+\b$/, parseRe = /-(speed|delay)(\d+)\b/g; if ("typed" !== classNames) { classNames = classNames.toLowerCase().split(/\s+/); for (var i = 0; i < classNames.length; i++) if (typedRe.test(classNames[i])) { for (; null !== (match = parseRe.exec(classNames[i]));) switch (match[1]) { case "speed": options.typeSpeed = +match[2]; break; case "delay": options.startDelay = +match[2] } break } } return options } function typedCallbackFactory(el, callback) { return function() { // Add a unique class ID to the calling passage, so that we can fade out this specific instance via auto-fade callback if desired. var callingPassage = State.passage; var divID = getDivID(callingPassage); var uniqueID = idGenerator(); $('#' + divID).addClass(uniqueID); var $outer = jQuery(el), $inner = jQuery('
'), $source = $outer.children('[class|="typed"]'), // Edit these options to tweak typedjs settings. options = jQuery.extend({ typeSpeed: 20, // Proper value: 20 startDelay: 500, // Proper value: 500 showCursor: false, callback: function() { if (State.variables['next_passage'] && tags().contains('auto-advance')) { // Display the "next passage" (custom set variable) when typings ends (after a delay). setTimeout(function() { State.play(State.variables['next_passage']); }, 1000); } if (tags().contains('auto-fade')) { console.log(uniqueID); $('.' + uniqueID).fadeOut(3000); } if (callingPassage == 'Story End') { // Last line of the game has finished in Story End passage. setTimeout(function() { $('.passage').fadeOut(10000); }, 5000); setTimeout(function() { initializeStory(); State.play('title'); }, 16000); } //if (tags().contains('end-story')) { // $('#the-choice').fadeIn(3000); //} } }, getInlineOptions($source.attr("class")), { strings: [$source.html()] }); "function" == typeof callback && (options.callback = callback), $outer.append($inner), $inner.children().typed(options) } } postrender.typedSetupHandler = function(content) { jQuery('[class|="typed"]', content).addClass("typed").css("visibility", "hidden").wrap('
') }, postdisplay.typedAnimationHandler = function() { for (var $elements = jQuery("#passages .typedjs-outer-wrapper"), callback = null, i = $elements.length - 1; i >= 0; --i) callback = typedCallbackFactory($elements[i], callback); "function" == typeof callback && callback() } }(); /********************************************************************* * TYPEDJS LIBRARY ITSELF (WITH HACKS) *********************************************************************/ // The MIT License (MIT) // Typed.js | Copyright (c) 2016 Matt Boldt | www.mattboldt.com // 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. ! function($) { "use strict"; var Typed = function(el, options) { // chosen element to manipulate text this.el = $(el); // options this.options = $.extend({}, $.fn.typed.defaults, options); // attribute to type into this.isInput = this.el.is('input'); this.attr = this.options.attr; // show cursor this.showCursor = this.isInput ? false : this.options.showCursor; // text content of element this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(); // html or plain text this.contentType = this.options.contentType; // typing speed this.typeSpeed = this.options.typeSpeed; // add a delay before typing starts this.startDelay = this.options.startDelay; // backspacing speed this.backSpeed = this.options.backSpeed; // amount of time to wait before backspacing this.backDelay = this.options.backDelay; // div containing strings this.stringsElement = this.options.stringsElement; // input strings of text this.strings = this.options.strings; // character number position of current string this.strPos = 0; // current array position this.arrayPos = 0; // number to stop backspacing on. // default 0, can change depending on how many chars // you want to remove at the time this.stopNum = 0; // Looping logic this.loop = this.options.loop; this.loopCount = this.options.loopCount; this.curLoop = 0; // for stopping this.stop = false; // custom cursor this.cursorChar = this.options.cursorChar; // shuffle the strings this.shuffle = this.options.shuffle; // the order of strings this.sequence = []; // All systems go! this.build(); }; Typed.prototype = { constructor: Typed, init: function() { // begin the loop w/ first current string (global self.strings) // current string will be passed as an argument each time after this var self = this; self.timeout = setTimeout(function() { for (var i=0;i" + this.cursorChar + ""); this.el.after(this.cursor); } if (this.stringsElement) { this.strings = []; this.stringsElement.hide(); console.log(this.stringsElement.children()); var strings = this.stringsElement.children(); $.each(strings, function(key, value){ self.strings.push($(value).html()); }); } 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; } // 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.typeSpeed; var self = this; // ------------- optional ------------- // // backpaces a certain string faster // ------------------------------------ // // if (self.arrayPos == 1){ // self.backDelay = 50; // } // else{ self.backDelay = 500; } // contain typing function in a timeout humanize'd delay self.timeout = setTimeout(function() { // check for an escape character before a pause value // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^ // single ^ are removed from string var charPause = 0; 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); } // strip out the escape character and pause value so they're not printed curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip); } // ------------- BEGIN HACK ------------- // // Auto pause for punctuation. // -------------------------------------- // var multiplier = Math.random() * (1.2 - 0.5) + 0.5; // Create some varation with random multiplier between 0.5 and 1.5. if (curString.charAt(curStrPos - 1) === '.') { if (curString.charAt(curStrPos) !== '.') { // For multiple periods in a row only pause for the last one. charPause = 1000; // Default pause for this character. } } else if (curString.charAt(curStrPos - 1) === '?') { charPause = 1000; // Default pause for this character. } else if (curString.charAt(curStrPos - 1) === '…') { charPause = 1000; // Default pause for this character. } else if (curString.charAt(curStrPos - 1) === '—') { charPause = 1000; // Default pause for this character. } else if (curString.charAt(curStrPos - 1) === ':') { charPause = 1000; // Default pause for this character. } else if (curString.charAt(curStrPos - 1) === ';') { charPause = 700; // Default pause for this character. } else if (curString.charAt(curStrPos - 1) === ',') { charPause = 100; // Default pause for this character. } charPause = Math.round(charPause * multiplier); // ------------- ADDED HACK ------------- // // Fade certain images in with specific timings. // (^ is regex for "starts with") // -------------------------------------- // /**if (State.passage == 'Lojka') { if (substr.match("^tower")) { $('#bgmask2').fadeIn(0).fadeOut(100).fadeIn(0).fadeOut(100).delay(200).fadeIn(0); } }**/ /* if (true) { // Do everything up to passage x (for testing). $("#puppet-boy").show(); $("#puppet-house").show(); $("#puppet-father").show(); $("#puppet-mother").show(); //$("#puppet-hospital").fadeIn(3000); //$("#puppet-wire").fadeIn(3000); //$("#puppet-hospital").fadeOut(3000); //$("#puppet-wire").fadeOut(3000); $("#puppet-bulldozer").show(); $("#puppet-soldier").show(); } */ if (State.passage == 'puppet_1') { if (substr.match("^Ishmael")) { $("#puppet-boy").fadeIn(3000); } if (substr.match("^lived")) { $("#puppet-house").fadeIn(3000); } } else if (State.passage == 'puppet_2') { if (substr.match("^fathe")) { $("#puppet-father").fadeIn(3000); } if (substr.match("^mothe")) { $("#puppet-mother").fadeIn(3000); } if (substr.match("^becoming")) { $("#puppet-hospital").fadeIn(3000); } } else if (State.passage == 'puppet_3') { if (substr.match("^barred")) { playMurmur(5000, 0.2); //if (!window.sndBackgroundChatter03.playing()) { // window.sndBackgroundChatter03.play(); //} $("#puppet-wire").fadeIn(3000); } if (substr.match("^travel")) { window.sndYell02.play(); } } else if (State.passage == 'puppet_4') { if (substr.match("^disappointed")) { $("#puppet-hospital").fadeOut(3000); $("#puppet-wire").fadeOut(3000); } } else if (State.passage == 'puppet_5') { if (substr.match("^how")) { $("#puppet-question").fadeIn(3000); } if (substr.match("^answer")) { $("#puppet-question").fadeOut(3000); } if (substr.match("^came")) { playMurmur(5000, 0.3); $("#puppet-bulldozer").fadeIn(3000); $("#puppet-soldier").fadeIn(3000); } if (substr.match("^mother")) { $("#puppet-mother").animate({ right : "-15%" }, 1000, 'swing'); } if (substr.match("^ground")) { window.sndBackgroundMurmur.fade(0.1, 0.3, 1000); // Animate the bulldozer bulldozing mother and house. $("#puppet-bulldozer") .animate({ right : "-30%" }, 1000, 'swing') .animate({ right : "-70%" }, 500, 'swing', function() { // Callback function: kill mother. $("#puppet-mother").animateRotate(-90); $("#puppet-mother").css("margin-bottom", "-8%"); } ) .animate({ right : "-30%" }, 1000, 'swing') .animate({ right : "-70%" }, 500, 'swing', function() { // Callback function: kill house. $("#puppet-house").animateRotate(-90); } ); } if (substr.match("^h the ho")) { window.sndYell01.play(); } } else if (State.passage == 'puppet_6') { if (substr.match("^mother")) { $("#puppet-mother").fadeOut(3000); window.sndYell01B.play(); } if (substr.match("^house")) { $("#puppet-house").fadeOut(3000); } if (substr.match("^houses")) { window.sndYell01C.play(); } } else if (State.passage == 'puppet_7') { if (substr.match("^determined")) { window.sndYell01C.play(); } if (substr.match("^threw")) { $("#puppet-boy").hide(); $("#puppet-boy-rock").show(); $("#puppet-boy-rock").animate({ right : "25%" }, 1000, 'swing'); } if (substr.match("^shot")) { $("#puppet-soldier").hide(); $("#puppet-soldier-shooting").show(); $("#puppet-boy-rock").animateRotate(-90); $("#puppet-boy-rock").css("margin-bottom", "-10%"); } if (substr.match("^die")) { window.sndBackgroundMurmur.fade(0.3, 0.4, 1000); window.sndYell01B.play(); $("#puppet-boy-rock").fadeOut(3000); } } // -------------- END HACKS -------------- // // --------------------------------------- // if (self.contentType === 'html') { // skip over html tags while typing var curChar = curString.substr(curStrPos).charAt(0) if (curChar === '<' || curChar === '&') { var tag = ''; var endTag = ''; if (curChar === '<') { endTag = '>' } else { 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; } self.timeout = setTimeout(function() { self.backspace(curString, curStrPos); }, self.backDelay); } else { /* call before functions if applicable */ if (curStrPos === 0) { self.options.preStringTyped(self.arrayPos); } // start typing each new char into existing string // curString: arg, self.el.html: original text inside element var nextString = curString.substr(0, curStrPos + 1); if (self.attr) { self.el.attr(self.attr, nextString); } else { if (self.isInput) { self.el.val(nextString); } else if (self.contentType === 'html') { self.el.html(nextString); } else { self.el.text(nextString); } } // add characters one by one curStrPos++; // loop the function self.typewrite(curString, curStrPos); } // end of character pause }, charPause); // humanized value for typing }, humanize); }, backspace: function(curString, curStrPos) { // exit when stopped if (this.stop === true) { 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; var self = this; 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); if (self.attr) { self.el.attr(self.attr, nextString); } else { if (self.isInput) { self.el.val(nextString); } else if (self.contentType === 'html') { self.el.html(nextString); } else { self.el.text(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); }, /** * Shuffles the numbers in the given array. * @param {Array} array * @returns {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.attr('id'); this.el.empty(); if (typeof this.cursor !== 'undefined') { this.cursor.remove(); } 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), 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 = { strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], stringsElement: null, // typing speed typeSpeed: 0, // time before typing starts startDelay: 0, // backspacing speed backSpeed: 0, // shuffle the strings shuffle: false, // time before backspacing backDelay: 500, // loop loop: false, // false = infinite loopCount: false, // show cursor 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 onStringTyped: function() {}, // callback for reset resetCallback: function() {} }; }(window.jQuery);