Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Memory Card Game
ID	5648647542833152
Created	7 years ago, 1519952108081
Updated	6 years ago, 1535389198674
Code	/** _ _ * / \| / \| ___ __ _ ___ _ _ _ __ * / \|/ \|/ -_)/ ' \/ _ \\| `_\\| \|/ / * /_/\|_/\|_/\___\|_/_/_/\___/\|_\| \| / * /_/ * (BETA VERSION) * "A card game to test your memory skills" * * * >> FEATURES <<: * • [NEW] Deferred Task Handler: * My game is now completely free of EB stopping * it with the "taking too long" errors. * * • Tooltip: * If you need any information about something in the * game, hold your cursor over the item for a second * and it will describe what the item is for or does. * Note that this may only work on desktop browsers. * * • Scroll Wheel: * Your mouse wheel or touchpad can be used in scenes * with an overflow area without the event moving the * entire webpage. I fixed this event problem using * "event.preventDefault()". * * • Multiplayer Modes: * You can play with a friend or against the CPU. * * • Flexible Canvas Sizes: * Any size you wish (or are able to) * can be set for my game. * * * • My catch phrase is: * "The only way to get it right is to get it wrong" * (in this case a lot of times) - KWC * * * I've been scripting for 29 months and have finished * all of KA's scripting courses on JavaScript. * Most of what I have learned has been from * MDN's documentation and forums. * Thank you Mozilla Developer Network * and MDN contributors! * * I'd like to thank Bob Lyon for helping me understand * core basics of scripting and for answering * questions for me on various occasions. I would not * be this far along if not for him and his projects. * Thank you! * * I would also like to thank @fuegopolar (Fuego) and * @EOC...ChessKing (Trevor) for being helpful * with BETA testing and making it possible for * my game to run in IE. * * * This is a functioning game but is a BETA version. * Bugs or errors may occur. * Please leave a comment if you experience any * trouble playing 'Memory'. :-) * * * It has been a two and a half year effort * to code this game. * Enjoy! * * * If you have a question about scripting or game * structure please check the my FAQ column below. * If your answer isn't there please leave a post under * KA's questions column. * * Game Developed by KWC * (c) 2015-2018 KOOSH ENGINE * Created and Developed by KWC * * (c) 2016-2018, KWC Interactive * All rights reserved. * * Hours invested in development: 1600+ hrs * Release Date: 3/01/2018 * Last Updated: 8/27/2018 **************************************************** 🔷 Frequently Asked Questions: { If you have a question, please check below first to see if your answer is here before asking. • ❓QUESTION: Why is your game engine named KOOSH? • ❗ANSWER: KOOSH is short for: Key Organized Objects Simulating Hierarchy • ❓QUESTION: Isn't using the "externals" property violating KA guidelines? • ❗ANSWER: // { Some might say accessing the "externals" property violates KA's guidelines. This is not the case. If KA did not want users getting to canvases and their properties, then they would not offer the "externals" property. For more advance users, KA offers the "externals" property on all instances of the Processing class to get to the canvas that the instance uses, the canvas's drawing context, and a Sketch object instance for even more options. NOTE: Due to unresolved legacy API there are two types of "externals" properties in KA's environment. One is a useless getter that throws an error that you're trying to access banned material. This error is not referring to KA's current state but what "externals" use to offer which was direct access to bring in material from other websites. Here is the code to get the useless getter: println(this.externals); // error Here is the code to get the actual "externals" property from the main/output Processing instance: setup = function () { var canvas = this.externals.canvas; }; setup(); // no error Here is the code to get the "externals" property from another instance of Processing: var pInstance = createGraphics(400,400,P2D); var canvas = pInstance.externals.canvas; // also no error The material that KA does not want students using are deep contexts like the top window object i.e. "window.top", external links, and system dialog posting like "alert". The "externals" property has no connection to any of that material. // } ********************************* } 🔶 Suggestions Corner: { If there is anything you think I should add, please leave a comment. :-) • ********************************* } ⛎ Browser Compatibility: { In order to fill in this chart below I need your feedback as I only have tested this game in Firefox Desktop. If you don't see your browser listed below please leave a comment with your browser's name and if it was able to run this game. // ⬟ DESKTOP ****** • FIREFOX (SPIDERMONKEY): ✅COMPATIBLE • OPREA: ❓UNKNOWN • SAFARI: ✅COMPATIBLE • NETSCAPE: ❓UNKNOWN • EDGE: ✅COMPATIBLE • IE: ✅COMPATIBLE • CHROME: ✅COMPATIBLE // ⬟ MOBILE ****** • FIREFOX/GECKO: ❓UNKNOWN • OPREA: ❓UNKNOWN • SAFARI: ❓UNKNOWN • SILK: ❓UNKNOWN • EDGE: ❓UNKNOWN • IE: ❓UNKNOWN • CHROME: ❓UNKNOWN ********************************* } 🔴 Bugs: { FOR BETA TESTERS: If you come across any exceptions, please leave a comment and I will try to correct it. Please really scrutinize on functionality as it means a lot to me to have every possible event handled. :-) • To use debug mode, have the third argument of "main" be true when "main" is invoked. // KNOWN BUGS: • Sometimes the cursor disappears: after the cursor is set to another cursor from being set to "wait" or "progress". NOTE: If this does occur don't panic, just click off the browser window and it should reset. • In mobile browsers, two of the card's symbols are interpreted as a huge square: I do not own a mobile device so I can't test my game to see which characters the culprits are - KWC • Sometimes one of the cards disappears in-game: Currently I do not know what is causing this... It might be from a size animating component not being revoked properly - KWC • "When the cards are dealing, there is a little rectangular projection from the bottom right corner (it looks like its coming from all of the cards stacked on top of each other, because the less cards there are to deal, the smaller it gets)": I can't get this bug to occur for me - KWC Bug find submitted by "ѕнєяℓσ¢к нσℓмєѕ" ********************************* } 🔷 Further Development: { TODO: • Add more card back designs ********************************* } ✅ TODO: { • Add game rules in dialog box } 🔵 Programming Notes: { • NOTE: If you want me to go into more detail on any of these topics below post a question under KA's question column. • IMPORTANT: It is very important to know how to write code to accommodate memory allocation and deallocation. It is smart to have all the objects you are going to need during the runtime of your application already instantiated before the launch of the application. Object pools help with this and allow the flexibility of customizing used objects during runtime. While object creation might not affect frame performance that much, having Garbage Collection step in to remove dereferenced data is by far the WORST for performance. Affected performance can vary depending on the data type and form of holding being recycled by Garbage Collection. If Number or Boolean data types are collected the performance is affected slightly. If an object of any type is collected it can majorly affect frame speed. It doesn't matter the size of the object. All are very bad if de-referenced. This, however, doesn't seem to include arrays. Manys arrays can be let go and don't appear to cause hitches in animations. The same goes for anonymous functions. Not all functions can be let go without problems. If a method is de-referenced there are recycling hitches. Which brings up the forms of holding data. Properties being de-referenced with "null" don't cause problems as long as the property isn't an object that has no other references of itself elsewhere. Using the "delete" operator can cause hitches if used in a area of frequent use. It is better to use "null" to de-reference than use the "delete" operator. Variables... a formidable challenge on KA. For some reason, de-referencing variables of any type or size causes Garbage Collection to hurt performance just as much if not more than objects being deallocated. Why? I don't know. If you care about performance for your application NEVER let any variable be deallocated (if you can help it). It's a heavy burden to code a script to forcibly hold every variable you declare even if you don't need it any more after it's used. • WARNING!!!: Avoid de-referencing any object with no other references to it during runtime as this causes skips in the main thread. This includes image data objects, and canvases too. Try using pools to avoid this problem. • WARNING!!!: Beware of defining a temporary variable of any type or memory size during runtime as they drastically affect animation performance within the main thread when they are recycled by Garbage Collection. This includes defined variables used to control loops. It doesn't matter how large the data is that is assigned to a variable that is being let go, only that the variable is being recycled. You have no control over Garbage Collection when it decides to deallocate memory. What you CAN control is the creation of variables. ONLY create variables you intend to never let go during the span of the program. It took me two years to figure this out. • WARNING!!!: Avoid stating object initializations in function parameters as they might be immediately collected by Garbage Collection and drastically affect animation performance. e.g. fn({prop: true}); • IMPORTANT: It is always better to have a method operate on a object instead of passing it as an argument into an outside function. • NOTE: Something very strange but useful to note: When setting the cursor to an animated image like "wait" or "progress" it forces the "mousemove" event to fire even if no user mouse input occurs. My guess is that these cursors need the power from events to cause their animations. • NOTE: The value "null" should only be used on de-referencing reference variables. A reference variable in JavaScript is any variable that equals a class instance. • IMPORTANT: Avoid using the "PVector" class to hold coordinates for visual components or the mouse as it's bad for performance. A lot of unnecessary method calls and instantiation are carried out for what could be handled in custom objects with simple operators. • IMPORTANT: Do NOT cache images in event threads! Handle caching in the main update thread. ********************************* } **************************************************/ var main = function () { // ￭ Hoist built-in declarations { var Object, Array, String, RegExp, Math, HTMLCanvasElement, CanvasRenderingContext2D, ImageData, CanvasGradient; // } // ￭ Define initialize function { var init = function (pjs, output, debugging) { // ⬟ Set output canvas size { pjs.size(pjs.width, pjs.height, pjs.PConstants.P2D); // } // ⬟ Define "now()" { var now = this.Date && this.Date.now ? this.Date.now : pjs.millis; // } // ⬟ Get debugging time stamp { var initTime = now(); // } // ⬟ Confirm output drawing context definition { if (!output.context) { output.context = output.canvas.getContext("2d"); } // } // ⬟ Get "no-operation" function { var noop = typeof pjs.noop === "function" ? pjs.noop : typeof pjs.draw === "function" ? pjs.noop = pjs.draw : pjs.noop = function () {}; // } // ⬟ Reset Processing members { pjs.main = noop; pjs.draw = noop; pjs.launch = noop; pjs.setMainLoop = noop; pjs.getMainLoop = noop; pjs.cancelMainLoop = noop; pjs.assignEventCallbacks = noop; pjs.clearEventCallbacks = noop; pjs.windowStorage = null; // } // ⬟ Define DOM event utility package { /NOTE: This utility package is only to be * used on DOM events or HTML elements! / var DOMEventUtil = { getTarget: function (evt) { return evt.target \|\| /* W3 Interface / evt.srcElement; /* IE's Interface / }, stopPropagation: function (evt) { if (typeof evt.stopPropagation === "function") { /* W3 Interface / evt.stopPropagation(); } else { /* IE's Interface / evt.cancelBubble = !0; } }, preventDefault: function (evt) { /⬇ "preventDefault" cancels the event if it is cancelable, without stopping * further propagation of the event. / if (typeof evt.preventDefault === "function") { /* W3 Interface / evt.preventDefault(); } else { /* IE's Interface / evt.returnValue = !1; } }, stopEvent: function (evt) { DOMEventUtil.preventDefault(evt); DOMEventUtil.stopPropagation(evt); }, addHandler: function (ele, type, fn) { if (typeof ele.addEventListener === "function") { /* W3 Interface / ele.addEventListener(type, fn, !1); } else if(typeof ele.attachEvent === "function") { /* IE's Interface / ele.attachEvent("on" + type, fn); } else { ele["on" + type] = fn; } }, removeHandler: function (ele, type, fn) { if (typeof ele.removeEventListener === "function") { /* W3 Interface / ele.removeEventListener(type, fn, !1); } else if (typeof ele.detachEvent === "function") { /* IE's Interface / ele.detachEvent("on" + type, fn); } else { delete ele["on" + type]; } }, dispatch: function (ele, evt) { return typeof ele.dispatchEvent === "function" ? /* W3 Interface / ele.dispatchEvent(evt) : typeof ele.fireEvent === "function" ? /* IE's Interface / ele.fireEvent("on" + evt.type, evt) : typeof ele["on" + evt.type] === "function" ? /* 3rd Party Interface / ele["on" + evt.type]() : !1; } }; // } // ⬟ Define and invoke callback reset function { pjs.clearEventCallbacks = function () { pjs.mouseMoved = noop; pjs.mouseDragged = noop; pjs.mousePressed = noop; pjs.mouseReleased = noop; pjs.mouseOver = noop; pjs.mouseOut = noop; //pjs.mouseScrolled = noop; pjs.keyPressed = noop; pjs.keyReleased = noop; pjs.keyTyped = noop; if (typeof pjs.wheelEventHandler === "function") { DOMEventUtil.removeHandler(output.canvas, "onwheel" in output.canvas ? "wheel" : "DOMMouseScroll", pjs.wheelEventHandler); pjs.wheelEventHandler = null; } }; pjs.clearEventCallbacks(); // } // ⬟ Confirm built-ins { if (!Object) { Object = this.Object \|\| pjs.Object; } if (!Array) { Array = this.Array \|\| pjs.Array; } if (!String) { String = this.String \|\| pjs.String; } if (!RegExp) { RegExp = this.RegExp \|\| pjs.RegExp; } if (!Math) { Math = this.Math \|\| pjs.Math; } if (!HTMLCanvasElement) { HTMLCanvasElement = output.canvas.constructor; } if (!CanvasRenderingContext2D) { CanvasRenderingContext2D = output.context .constructor; } if (!ImageData) { ImageData = output.context .getImageData(0, 0, 2, 2).constructor; } if (!CanvasGradient) { CanvasGradient = output.context .createLinearGradient(0, 0, 2, 0).constructor; } // } // ⬟ Define clone function { var clone = typeof Object.create === "function" ? Object.create : function (proto, descs) { if (typeof proto !== "object") { throw "TypeError: Argument must be " + "an object, or null"; } var obj = {}; Object.setPrototypeOf(obj, proto); if (typeof descs === "object") { Object.defineProperties(obj, descs); } return obj; }; // } // ⬟ Define top dictionaries { var activeCache = clone(null), configs = clone(null), info = { appName: "Memory", appVersion: "Version 0.98 BETA", releaseYear: "2018", lastModified: "8-27-18", developerName: "ᏦᏔᏟ", publisherName: "KWC Interactive", developerURL: "https://www.khanacademy.org/" + "profile/MKaelin368/projects" }; // } // ⬟ Define top constants { /⬇ Rect modes / var CENTER = pjs.PConstants.CENTER, CORNER = pjs.PConstants.CORNER, /*⬇ Size of the output canvas / OUTPUT_WIDTH = pjs.width, OUTPUT_HEIGHT = pjs.height, /*⬇ Viewport drawing context natural size / NATURAL_WIDTH = 600, NATURAL_HEIGHT = 450, /*⬇ Region shape types / RECTANGLE = 1, ELLIPSE = 2, TRIANGLE = 3, /*⬇ Region shape directions / LEFT = pjs.PConstants.LEFT, RIGHT = pjs.PConstants.RIGHT, /*⬇ CSS cursors / DEFAULT_CURSOR = "default", POINTER_CURSOR = "pointer", ALL_SCROLL_CURSOR = "all-scroll", GRAB_CURSOR = "grab", GRABBING_CURSOR = "grabbing", NOT_ALLOWED_CURSOR = "not-allowed", ALIAS_CURSOR = "alias", TEXT_CURSOR = "text", ZOOM_IN_CURSOR = "zoom-in", WAIT_CURSOR = "progress", CARD_RESIZE_CURSOR = "nwse-resize", /*⬇ Animation mapping speed / FPS = 60, /*⬇ Frame duration threshold / MAX_FRAME_TIME = 1000 / FPS \| 0, /*⬇ User event constants / LEFT_BUTTON = 0, CENTER_BUTTON = 1, RIGHT_BUTTON = 2, /*⬇ Event phases / EVENT_NONE = 0, EVENT_CAPTURING_PHASE = 1, EVENT_AT_TARGET = 2, EVENT_BUBBLING_PHASE = 3, /*⬇ Math constants / RAD_TO_DEG = 180 / Math.PI, DEG_TO_RAD = Math.PI / 180, /*⬇ CSS colors / BLACK = "#000000", WHITE = "#FFFFFF", /*⬇ This converts a CSS string with either the "rgb" or "rgba" function to an * array of number strings using * "String.prototype.match". / CSS_COLOR_COMPS = /\d\.\d+\|\d{1,3}/g, /* Created by KWC (C) 2016 * It took me many months to * create this regular expression * to sort text for tooltips. / TOOLTIP_LINE_LENGTH = /(?:[^]+\s\[[^]?\]\.?\s?[^\[\]]{0,9}\|\[[^]?\]\.?\s?[^\[\]]{0,13}\|[^\[\]]{0,19})\.?\s?[^\[\]\s]\.?(?:\s\|$)?/ig; // } // ⬟ Declare top pointers { /*⬇ This variable holds a CSS selector property to set the output canvas cursor * at the end of a user event. / var cursorStyle, /⬇ The canvas that is used as a viewport / viewport, /*⬇ The composite tree base / root, /*⬇ The mouse/touch event catch component / overlay, /*⬇ The tooltip component / tooltip, /*⬇ The current card game being played / game, /*⬇ The player who's turn it is / player; // } // ⬟ Hoist top declarations { /*NOTE: These declarations will be defined later on in asynchronously handled tasks. / // ▲ variables { /⬇ These are viewport metric fields. / var viewport_scale, viewport_x, viewport_y, /*⬇ These are setting libraries. / card_back_colors, card_face_colors, button_colors, card_decks, /*⬇ These are configure dictionaries. / faders, emitters, announcements, /*⬇ This is an object that transfer game data to and from storage. / storage, /⬇ This is a canvas manager package. / CanvasContent; // } // ▲ functions { /*⬇ Misc global functions / var asap, bind, inherit, allocate, isArray, isNumber, isInteger, mapColor, applyMask, toSelected, toTimerFormat, /*⬇ This is a helper function to assemble nested configs. / assembleConfig, /⬇ These are to toggle whether mouse/touch events are active * for the client or not. / enableUI, disableUI, /⬇ Collision testing functions / isPointInsideRect, isPointInsidePolygon, /*⬇ These are scene manager methods. / setCurrentScene, setCurrentRules, beginSceneExitTo, showPauseTray, showRulesDialog, showMessageDialog, beginExitToPrevScene; // } // ▲ component classes { var Component, Timer, AppEventTarget, Branch, Transform, Region, Drag, Button, Easel, Graphic, Label, Scene, Timeout, Immediate, Updater, Frequency, PropertyAnimator, PositionAnimator, SizeAnimator, Fader, Emitter, Particle, MenuBar, MenuButton, Card, InputFieldLabel, InputField, ScrollTab, ScrollBar, ScrollScene, SelectionPanel, InputFieldPanel, ListDialog, ScoreLabel, FadeLabel, TimerLabel, StatusBar, TimerBar, GameBar, PlayerBar, CardGame, Tooltip, AppEventHandler, /*⬇ component event classes / AppEvent, AppFocusEvent, AppKeyboardEvent, AppMouseEvent, AppDragEvent, AppWheelEvent; // } // } // ________________________________________________ // ⬟ Define startup tasks { configs.startupTasks = [ // ▲ Define built-in additions { // • Define "Object.setProperty()" { (function () { /** IMPORTANT: "Object.defineProperty" * can only define properties on objects * inheriting from the "Object" class. * In some browsers, HTML and CSS classes * do NOT inherit from the "Object" class! / var desc = { /* This method is a concise * alternative to using * "Object.defineProperty()". / value: function (mask, obj, k) { return mask & 8 ? (arguments[3] ? /⬇ accessor descriptor / desc.get = arguments[3] : delete desc.get, arguments[4] ? desc.set = arguments[4] : delete desc.set, delete desc.value, delete desc.writable) : (arguments.length > 3 ? /*⬇ data descriptor / desc.value = arguments[3] : delete desc.value, desc.writable = (mask & 4) !== 0, delete desc.get, delete desc.set), desc.enumerable = (mask & 1) !== 0, desc.configurable = (mask & 2) !== 0, Object.defineProperty(obj, k, desc), obj; }, writable: !0, enumerable: !1, configurable: !0 }; Object.defineProperty(Object, "setProperty", desc); }), // } // • Define "String" class methods { (function () { Object.setProperty(0x6, String.prototype, "toCamelCase", function (is_ctor) { return this.replace(/-[a-z]\|^[a-z]\|-[0-9]/g, function (match, offset, s) { return offset <= 0 ? is_ctor ? s[offset].toUpperCase() : s[offset] : s[offset+1].toUpperCase(); }); }); Object.setProperty(0x6, String.prototype, "toRegularCase", function (all_first_cap) { /** formally "fromHyphenCase" / return this.replace( /(?:-[a-z\d])\|(?:^[a-z\d])/g, function (match, offset, s) { return offset <= 0 ? s[offset].toUpperCase() : all_first_cap ? " " + s[offset+1].toUpperCase() : " " + s[offset+1]; }); }); Object.setProperty(0x6, String.prototype, "toProperCase", function () { return this.toLowerCase() .replace(/^(.)\|\s(.)/g, function (match) { return match.toUpperCase(); }); }); }), // } // • Confirm built-in definitions { (function () { // Confirm "String.prototype.padStart()" { if (!String.prototype.padStart) { Object.setProperty(0x6, String.prototype, "padStart", function (l, s) { l = l >> 0; s = String((s !== void 0) ? s : " "); return this.length > l ? String(this) : l -= this.length, l > s.length && (s += s.repeat(Math.round(l/s.length))), s.slice(0, l) + String(this); }); } // } }), // } // • Define 2D drawing context additions { (function () { // Define shape paint methods { (function () { var THIRD_TAU = Math.PI 2 / 3, half_rad, C = 0.5522847498307933, c_x, c_y; Array.prototype.forEach.call(arguments, function (style) { this[style + "BeveledRect" ] = function (x, y, w, h, r) { this.beginPath(); this.moveTo(x, (y+h) - r); this.arcTo(x, y, x+w, y, r); this.arcTo(x+w, y, x+w, y+h, r); this.arcTo(x+w, y+h, x, y+h, r); this.arcTo(x, y+h, x, y, r); this[style](); this.closePath(); }; this[style + "BeveledTri" ] = function (x, y, r, p_r, a) { half_rad = r / 2; this.save(); this.translate(x, y); if (isNumber(a)) { this.rotate(a * DEG_TO_RAD); } this.beginPath(); this.moveTo(-half_rad , 0); this.arcTo( Math.cos(2 * THIRD_TAU) * r, Math.sin(2 * THIRD_TAU) * r, r, 0, p_r); this.arcTo(r, 0, 0, r/1.75, p_r); this.arcTo( Math.cos(THIRD_TAU) * r, Math.sin(THIRD_TAU) * r, -half_rad, 0, p_r); this.lineTo(-half_rad, 0); this[style](); this.closePath(); this.restore(); }; this[style + "Ellipse" ] = function (x, y, w, h) { this.beginPath(); if (w === h) { this.arc(x, y, w/2, 0, Math.PI2, !0); } else { w /= 2; h /= 2; c_x = C w; c_y = C * h; this.moveTo(x + w, y); this.bezierCurveTo(x + w, y - c_y, x + c_x, y - h, x, y - h); this.bezierCurveTo(x - c_x, y - h, x - w, y - c_y, x - w, y); this.bezierCurveTo(x - w, y + c_y, x - c_x, y + h, x, y + h); this.bezierCurveTo(x + c_x, y + h, x + w, y + c_y, x + w, y); } this[style](); this.closePath(); }; this[style + "Star" ] = function (x, y, w, h) { this.beginPath(); w /= 2; h /= 2; this.moveTo(x, y-h); this.bezierCurveTo(x, y, x+w, y, x+w, y); this.bezierCurveTo(x, y, x, y+h, x, y+h); this.bezierCurveTo(x, y, x-w, y, x-w, y); this.bezierCurveTo(x-w, y, x, y, x, y-h); this[style](); this.closePath(); }; }, CanvasRenderingContext2D.prototype); }) ("fill", "stroke"); // } // Define style setters { (function () { Array.prototype.forEach.call(arguments, function (style) { this["set" + style.toRegularCase() ] = function (r, g, b, a) { this[style] = (typeof r === "string" \|\| r instanceof CanvasGradient) ? r : ((a \|\| a === 0) ? (a = a <= 0 ? 0 : a > 1 ? 1 : (a * 1000 \| 0) / 1000, r \|= 0, g \|= 0, b \|= 0, "rgba("+r+","+g+","+b+","+a+")") : (b \|\| b === 0) ? ( r \|= 0, g \|= 0, b \|= 0, "rgb("+r+","+g+","+b+")") : (g \|\| g === 0) ? (r \|= 0, g = g <= 0 ? 0 : g > 1 ? 1 : (g * 1000 \| 0) / 1000, "rgba("+r+","+r+","+r+","+g+")") : (r \|\| r === 0) && (r \|= 0, "rgb("+r+","+r+","+r+")")); }; }, CanvasRenderingContext2D.prototype); }) ("fillStyle", "strokeStyle", "shadowColor"); // } }), // } // • Define anti-aliasing disable function { (function () { /** NOTE: Because the name of the * "HTMLCanvasElement" drawing context property * "imageSmoothingEnabled" differs between * browsers, this approach is required to set * it to false without failure. * Certain properties get a vendor prefix * between browsers because of different * background OS processes. * This can be annoying to set when multiple * browsers might run the script. / var style = null, k = typeof output.context .mozImageSmoothingEnabled === "boolean" ? /* Mozilla Interface / "mozImageSmoothingEnabled" : typeof output.context .webkitImageSmoothingEnabled === "boolean" ? "webkitImageSmoothingEnabled" : typeof output.context .msImageSmoothingEnabled === "boolean" ? /* IE Interface / "msImageSmoothingEnabled" : /* 3rd Party Interface / "imageSmoothingEnabled"; CanvasRenderingContext2D.prototype .disableImageSmoothing = function () { /* IMPORTANT: Do NOT set the output * canvas's drawing context property * "imageSmoothingEnabled" within * the main loop as it will be * discarded at the end of the * main loop's callback because * of "pushMatrix" and "popMatrix". * Also make sure to set it right * before the definition of the main loop * to ensure nothing else interfered. / this[k] = !1; style = this.canvas.style; style.setProperty("image-rendering", "pixelated", "important"); style.setProperty("image-rendering", "optimizeSpeed", "important"); style.setProperty("image-rendering", "-moz-crisp-edges", "important"); style.setProperty("image-rendering", "crisp-edges", "important"); style.setProperty("image-rendering", "-webkit-optimize-contrast", "important"); style.setProperty("image-rendering", "optimize-contrast", "important"); style.setProperty("-ms-interpolation-mode", "nearest-neighbor", "important"); style = null; }; }), // } // } // ▲ Define top utilities { // • Define function utilities { (function () { bind = function (fn, context, args) { return function () { return fn.apply(context, args); }; }; inherit = function (subc, superc, mixin) { if ( typeof mixin === "object" && mixin !== null ) { subc.prototype = clone(superc.prototype, Object.getOwnPropertyNames(mixin) .reduce(function (acc, k) { acc[k]=Object.getOwnPropertyDescriptor( mixin, k); return acc; }, {})); } else { Object.setPrototypeOf( subc.prototype, superc.prototype); } subc.prototype.constructor = subc; if (superc.prototype.constructor === Object) { superc.prototype.constructor = superc; } }; allocate = function (ctor, init_size, nt, dup) { if (ctor._usingPool) { return ctor.expandPool(init_size); } if (typeof nt !== "function") { nt = ctor; // new target } if (typeof dup !== "function") { dup = function () { return clone(ctor.prototype); }; } var pool = [], pool_size = 0, idx = 0, obj, l, n, end_ele, end_index; ctor.expandPool = function (new_size) { n = 0; l = new_size - pool_size; while (n < l) { pool.push(dup()); n++; } pool_size = new_size; }; ctor.create = function () { return idx >= pool_size && (debugging && pjs.println("Alert: Memory " + "allocation request for an " + ctor.name + " object!"), ctor.expandPool(idx + 1)), obj = pool[idx], obj._poolIndex = idx++, obj.invalid = !1, nt.apply(obj, arguments), obj; }; ctor.prototype.revoke = function () { if (this.invalid) { if (debugging) { pjs.println("InvalidationError: " + this.toString() + " instance " + "has already been revoked!"); } pjs.clearEventCallbacks(); pjs.cancelMainLoop(); } if (typeof this._finalize === "function") { this._finalize(); } this.invalid = !0; end_ele = pool[--idx]; end_index = end_ele._poolIndex; pool[idx] = this; pool[this._poolIndex] = end_ele; end_ele._poolIndex = this._poolIndex; this._poolIndex = end_index; end_ele = null; }; ctor.expandPool(init_size); return ctor._usingPool = !0, ctor; }; }), // } // • Bind pool to canvas constructor { (function () { var ARGB = pjs.PConstants.ARGB, obj = clone(pjs.PImage.prototype); HTMLCanvasElement._usingPool = !1; allocate(HTMLCanvasElement, 320, function (w, h) { this.width = w; this.height = h; }, function () { pjs.PImage.call(obj, 2, 2, ARGB); return obj.sourceImg; }); }), // } // • Define value testing functions { (function () { isArray = typeof Array.isArray === "function" ? Array.isArray : function (value) { return Object.prototype.toString .call(value) === "[object Array]"; }; isNumber = function (value) { return typeof value === "number" && value !== (1/0) && value !== -(1/0) && value === value; }; isInteger = function (value) { return typeof value === "number" && value === value && (value \| 0) === value; }; }), // } // • Define color mapping function { (function () { var s, arr, arr2; mapColor = function (v, lo, hi, c1, c2) { arr = c1.match(CSS_COLOR_COMPS); arr2 = c2.match(CSS_COLOR_COMPS); arr.forEach(function (ele, idx) { arr[idx] = (+ele + (+arr2[idx] - +ele) ((v - lo) / (hi - lo))); }); s = c1.startsWith("rgba") ? "rgba(" + (arr[0] \| 0) + "," + (arr[1] \| 0) + "," + (arr[2] \| 0) + "," + ((arr[3] * 1000 \| 0) / 1000) + ")" : "rgb(" + (arr[0] \| 0) + "," + (arr[1] \| 0) + "," + (arr[2] \| 0) + ")"; arr2 = arr = null; return s; }; }), // } // • Define image data mask function { (function () { applyMask = function (target, mask) { var n = 0, data = target.data, data2 = mask.data, l = target.width * target.height << 2; asap(function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } data[n+3] = data2[n]; n += 4; } }); }; }), // } // • Define millisecond formating function { (function () { toTimerFormat = function (num) { return (((num / 60000 \| 0) % 60) .toString().padStart(2, 0)) + ":" + (((num / 1000 \| 0) % 60) .toString().padStart(2, 0)) + "." + (((num / 10 \| 0) % 100) .toString().padStart(2, 0)); }; }), // } // • Define selection returning function { (function () { toSelected = function (arr) { /** This is a helper function to get * the selected element from an array * of an index number and another * array containing selection values. / return arr[1][arr[0]]; }; }), // } // • Define user interface toggle methods { (function () { enableUI = function () { overlay.setTangible(!1); cursorStyle = DEFAULT_CURSOR; }; disableUI = function () { overlay.setTangible(!0); tooltip.prevent(); cursorStyle = WAIT_CURSOR; }; }), // } // • Define collision testing functions { (function () { isPointInsideRect = function (x,y,rx,ry,w,h) { return (rx - x) ((rx + w) - x) <= 0 && (ry - y) * ((ry + h) - y) <= 0; }; var i, j, b, ix, iy, jx, jy; isPointInsidePolygon = function (x, y, arr) { b = !1; j = arr.length - 1; for (i = 0; i < arr.length; j = i++) { ix = arr[i].x; iy = arr[i].y; jx = arr[j].x; jy = arr[j].y; if ( ((iy > y) !== (jy > y)) && (x < (jx - ix)(y - iy) / (jy - iy) + ix) ) { b = !b; } } return b; }; }), // } // } // ▲ Define "viewport" { (function () { viewport_scale = OUTPUT_WIDTH / NATURAL_WIDTH; viewport_x = 0; viewport_y = Math.round((OUTPUT_HEIGHT / 2) - ((NATURAL_HEIGHT viewport_scale) / 2)); viewport = HTMLCanvasElement.create( Math.round(NATURAL_WIDTH * viewport_scale), Math.round(NATURAL_HEIGHT * viewport_scale)); if (viewport_y < 0) { viewport_scale = OUTPUT_HEIGHT/NATURAL_HEIGHT; viewport.width = Math.round( NATURAL_WIDTH * viewport_scale); viewport.height = Math.round( NATURAL_HEIGHT * viewport_scale); viewport_x = Math.round((OUTPUT_WIDTH / 2) - ((NATURAL_WIDTH * viewport_scale) / 2)); viewport_y = 0; } if (viewport_scale !== 1) { viewport.getContext("2d").scale( viewport_scale, viewport_scale); } }), // } // ▲ Define setting libraries { (function () { card_back_colors = { red: "rgb(235, 12, 0)", orange: "rgb(250, 122, 0)", yellow: "rgb(250, 218, 0)", green: "rgb( 20, 174, 0)", cyan: "rgb( 0, 145, 179)", blue: "rgb( 10, 16, 189)", purple: "rgb(141, 35, 194)", pink: "rgb(217, 18, 176)", gray: "rgb(127, 127, 127)" }; card_face_colors = { red: "rgb(250, 23 , 23)", orange: "rgb(255, 133, 0)", yellow: "rgb(239, 234, 23)", green: "rgb( 0, 184, 20)", cyan: "rgb( 10, 219, 214)", blue: "rgb( 32, 52, 255)", purple: "rgb(145, 5, 222)", pink: "rgb(255, 33, 235)", gray: "rgb(137, 137, 137)" }; button_colors = { red: [ "rgb(205, 27, 11)", "rgb(255, 57, 41)" ], yellow: [ "rgb(205, 175, 16)", "rgb(255, 215, 66)" ], purple: [ "rgb(155, 83, 171)", "rgb(205, 133, 211)" ], orange: [ "rgb(209, 94, 16)", "rgb(249, 134, 36)" ], blue: [ "rgb(56, 76, 191)", "rgb(76, 96, 251)" ], green: [ "rgb(58, 167, 36)", "rgb(78, 217, 56)" ], "light-blue": [ "rgb(26, 118, 204)", "rgb(66, 158, 255)" ], /*⬇ For back and close button colors. / cyan: [ "rgb(56, 185, 204)", "rgb(96, 225, 244)" ], /*⬇ For OK and save button colors. / pink: [ "rgb(193, 74, 147)", "rgb(243, 124, 197)" ], /*⬇ For deactivated buttons. / gray: [ "rgb(69, 69, 74)", "rgb(109, 109, 114)" ] }; }), // CSS colors (function () { card_decks = { /*⬇ Card face character symbols. / geometry: [ '⊙','⊟','⊡','⌓','⌔','⌬','⌲','⎄', '⎊','⎔','□','⏢','⏥','▣','▲','▷', '○','●','◖','◫','◬','❖','◊','⟁', '⟐','⟠','⦶','⦺','⦾','⧇','⧈','⧉', '⬠','⬡','⬢','⬣' ], // 36 stars: [ '※','⁜','⌑','⍟','★','☆','☾','✢', '✦','✧','✩','✪','✫','✰','✲','✴', '✶','✷','✸','✹','✺','✻','✾','✿', '❀','❂','❄','❅','❇','❈','❉','❊', '❋','❖','⭑','⭒' ], // 36 letters: [ 'A','B','C','D','E','F','G', 'H','I','J','K','L','M','N', 'O','P','Q','R','S','T','U', 'V','W','X','Y','Z', 'a','b','c','d','e','f','g', 'h','i','j','k','l','m','n', 'o','p','q','r','s','t','u', 'v','w','x','y','z' ], // 52 greek: [ 'Γ','Δ','Θ','Λ','Ξ','Π','Σ','Φ', 'Ψ','Ω','Ϸ','Є','Љ','Њ','Ћ','Б', 'Д','Ж','З','И','Л','У','Ч','Ш', 'Ъ','Ы','Ю','Я','Ѥ','Ѧ','Ѫ','Ѳ', 'Ѵ','Ҁ','Ҕ','Ҡ' ], // 36 numbers: [ '⓪','①','②','③','④', '⑤','⑥','⑦','⑧','⑨', '⑩','⑪','⑫','⑬','⑭', '⑮','⑯','⑰','⑱','⑲', '⑳','㉑','㉒','㉓','㉔', '㉕','㉖','㉗','㉘','㉙', '㉚','㉛','㉜','㉝','㉞', '㉟','㊱','㊲','㊳','㊴', '㊵','㊶','㊷','㊸','㊹', '㊺','㊻','㊼','㊽','㊾', '㊿','⨷' ], // 52 sticks: [ '᚛','ᚠ','ᚢ','ᚣ','ᚥ','ᚦ','ᚨ','ᚩ', 'ᚪ','ᚫ','ᚬ','ᚭ','ᚰ','ᚱ','ᚳ','ᚴ', 'ᚸ','ᚹ','ᚺ','ᚻ','ᚼ','ᚾ','ᚿ','ᛃ', 'ᛄ','ᛇ','ᛈ','ᛊ','ᛋ','ᛏ','ᛐ','ᛒ', 'ᛕ','ᛖ','ᛗ','ᛘ','ᛚ','ᛝ','ᛞ','ᛣ', 'ᛤ','ᛥ','ᛨ','ᛩ','ᛪ','ᛮ','ᛯ','ᛰ' ], // 48 cryptic: [ 'ᐯ','ᐲ','ᐳ','ᐴ','ᐷ','ᐹ','ᐼ','ᐽ', 'ᐾ','ᐿ','ᑀ','ᑁ','ᑂ','ᑃ','ᑆ','ᑇ', 'ᑌ','ᑏ','ᑐ','ᑑ','ᑔ','ᑖ','ᑙ','ᑚ', 'ᑛ','ᑜ','ᑝ','ᑞ','ᑟ','ᑠ','ᑣ','ᑤ', 'ᒣ','ᒥ','ᒦ','ᒨ','ᒫ','ᒬ','ᒭ','ᒮ', 'ᒯ','ᒰ','ᒱ','ᒴ','ᒵ','ᒸ','ᒹ', 'ᓬ', 'ᓭ','ᓯ','ᓰ','ᓲ','ᓵ','ᓶ','ᓷ','ᓸ', 'ᓹ','ᓺ','ᓻ','ᓾ','ᓿ','ᔂ','ᔃ','ᔄ', 'ᔐ','ᔑ','ᔒ','ᔓ','ᔔ','ᔕ','ᔖ','ᔗ', 'ᔙ','ᔛ','ᔜ','ᔝ','ᔟ','ᔠ','ᔡ','ᔣ','ᔤ', 'ᔦ','ᔨ','ᔩ','ᔫ','ᔮ','ᔯ','ᔰ', 'ᔱ','ᔲ','ᔳ','ᔴ','ᔷ','ᔸ','ᔻ','ᔼ' ], // 96 all: null // 356 total }; /** Flatten card decks for one deck. / card_decks.all = Object.keys(card_decks) .reduce(function (acc, k) { return acc.push(card_decks[k]), acc; }, []) .reduce(function (acc, val) { return val ? acc.concat(val) : acc; }, []); }), // card characters // } // ▲ Define canvas content package { (function () { /NOTE: The content here is mostly built async. If a visual (once returned from one * of these methods below) is needed to * be immediately painted on another * visual, then also defer painting the * returned visual. / CanvasContent = { makeMenubar: function (header, h) { if (!h) { // 32 h = 42; } var ctx = HTMLCanvasElement.create( NATURAL_WIDTH, h).getContext("2d"), pf, n = 0, l = h - 4; asap(function () { pf = pjs.loadFont("serif", 35); ctx.save(); ctx.setFillStyle(171); ctx.fillRect(0, 0, NATURAL_WIDTH, ctx.canvas.height); }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.setFillStyle(179 + Math.sin((n + 6) (200 / l) * DEG_TO_RAD) * 72); ctx.fillRect(0, 2 + n, NATURAL_WIDTH, 1); n++; } ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.setShadowColor(255, 0.8); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.fillText(header, NATURAL_WIDTH >> 1, Math.round(h/2 + pf.ascent/2)); ctx.restore(); }); return ctx.canvas; }, makeDialog: function (w, h, vh, ln, s) { var ctx = HTMLCanvasElement.create(w, h) .getContext("2d"), pf, q, x = s ? -28 : 0, n = 0, l = h - 7; asap(function () { pf = pjs.loadFont("serif", 30); ctx.save(); ctx.lineWidth = 1; ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 10); ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect( 9, 40, w-18 + x, h-48, 6); ctx.lineWidth = 1; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n * 180 / 120 + 120) * DEG_TO_RAD) * 66; ctx.setFillStyle(189+q, 189+q, 194+q); ctx.fillRect(3, 3 + n, w-6, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.setFillStyle(20); ctx.fillRect(10, 41, w - 20 + x, vh + 4); ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, w-2, h-2, 10); ctx.strokeBeveledRect( 8, 39, w-16 + x, vh + 8, 6); ctx.setStrokeStyle(189, 189, 194); ctx.strokeBeveledRect(3, 3, w-6, h-6, 8); ctx.strokeBeveledRect( 9, 40, w-18 + x,vh + 6, 5); }); if (s) { // does this need to scroll? asap(function () { n = 0; l = 15; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n-2) * 9 * DEG_TO_RAD * 2) * 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(n+w-26, 41, 1, vh+4); n++; } ctx.setStrokeStyle(83); ctx.strokeBeveledRect( w-27, 40, 16, vh + 6, 8); ctx.strokeStyle = WHITE; ctx.setFillStyle(127); ctx.fillRect(w-21, 49, 4, vh-12); ctx.fillStyle = BLACK; ctx.fillRect(w-20, 50, 2, vh-14); }); } asap(function () { ctx.setFillStyle(10); ctx.fillBeveledRect( 10, 41, w - 20 + x, vh + 4, 4); ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.shadowColor = WHITE; ctx.shadowOffsetY = 1; ctx.shadowOffsetX = 1; ctx.fillText(ln, w >> 1 , 20+pf.ascent/2); ctx.restore(); }); return ctx.canvas; }, makeButton: function (comp, num, f) { var canvas, pf, y, l = 16, w = comp.width, h = comp.height, ctx = HTMLCanvasElement.create( w + comp.widthShadowOffset, h + comp.heightShadowOffset ).getContext("2d"); asap(function () { pf = pjs.loadFont( comp.fontFamily, comp.fontSize); y = h/2 + pf.ascent/2.4; ctx.save(); ctx.shadowColor = comp.shadowColor; ctx.shadowOffsetX = comp.shadowOffsetX; ctx.shadowOffsetY = comp.shadowOffsetY; ctx.shadowBlur = comp.shadowBlur; ctx.fillStyle = mapColor(num, 0, l, button_colors[comp.color][0], button_colors[comp.color][1]); }); switch (comp.shape) { case TRIANGLE: asap(function () { ctx.translate(w >> 1, h >> 1); if (comp.direction === LEFT) { ctx.save(); ctx.rotate(180 * DEG_TO_RAD); ctx.fillBeveledTri( 0, 0, Math.ceil(w)/2 + 2, 5, 0); ctx.restore(); } else { ctx.fillBeveledTri( 0, 0, Math.ceil(w)/2 + 2, 5, 0); } ctx.translate(-(w >> 1), -(h >> 1)); ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; }); canvas = CanvasContent.get( (comp.direction === LEFT ? "left":"right") + "-small-tri-btn-" + "overlay-" + (!f ? 'B':'A')); break; case ELLIPSE: break; default: // RECTANGLE asap(function () { ctx.fillBeveledRect( 0,0, w, h, 16 * (w / 228) \| 0); ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; }); canvas = CanvasContent.get((w > 246 ? "large": w > 228 ? "medium":"small") + "-rect-btn-overlay-" + (!f ? 'B':'A')); } asap(function () { asap(function () { ctx.drawImage(canvas, 0, 0, w, h); ctx.textAlign = "center"; ctx.font = pf.css; ctx.lineWidth = 4; ctx.setStrokeStyle(0, 0.4); ctx.strokeText(comp.textContent, w>>1, y); ctx.fillStyle = mapColor(num, 0, l, "rgb(208,208,208)","rgb(255,255,255)"); ctx.shadowColor = "rgba(0,0,0,0.7)"; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 3; ctx.shadowBlur = 2; ctx.fillText(comp.textContent, w>>1, y); ctx.shadowColor = BLACK; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; ctx.restore(); }); }); return ctx.canvas; }, makeCardFace: function (chr, clr) { var pf, y, w = 160, h = 232, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 148); y = h/2 + pf.ascent/2; ctx.fillStyle = WHITE; ctx.fillBeveledRect(0, 0, w, h, 16); ctx.textAlign = "center"; ctx.font = pf.css; ctx.fillStyle = BLACK; ctx.lineWidth = 1; ctx.strokeText(chr, 80, y); ctx.setShadowColor(0); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 4; ctx.shadowBlur = 2; }, function () { var arr = card_face_colors[clr] .match(CSS_COLOR_COMPS), clr1 = "rgb(" + (arr[0] - 45) + "," + (arr[1] - 45) + "," + (arr[2] - 45) + ")", clr2 = "rgb(" + (+arr[0] + 45) + "," + (+arr[1] + 45) + "," + (+arr[2] + 45) + ")", grad = ctx.createLinearGradient(0, 0, 0, h); grad.addColorStop(0, clr1); grad.addColorStop(0.17, clr1); grad.addColorStop(0.5, clr2); grad.addColorStop(0.93, clr1); grad.addColorStop(1.0, clr1); ctx.fillStyle = grad; ctx.fillText(chr, 80, y); ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; var img = CanvasContent.get("card-shading"); asap(function () { asap(function () { ctx.drawImage(img, 0, 0); }); }); }); return ctx.canvas; }, makeCardBack: (function () { var getPattern = function (k, c1, c2) { var ctx = HTMLCanvasElement.create(128, 200) .getContext("2d"), q = 2, n, m; ctx.save(); switch (k) { case 1: // { asap(function (lastTime) { while (q > 0) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.fillStyle = c1; if (q === 1) { ctx.translate(16, -25); ctx.fillStyle = c2; } for (n = 0; n < 5; n++) { for (m = 0; m < 5; m++) { ctx.beginPath(); ctx.moveTo( 0 + (32 * n), 2 + (50 * m)); ctx.lineTo( 14.5 + (32 * n), 24.5 + (50 * m)); ctx.lineTo( 0 + (32 * n), 47 + (50* m)); ctx.lineTo( -14.5 + (32 * n), 24.5 + (50 * m)); ctx.fill(); ctx.closePath(); } } q--; } ctx.restore(); }); break; // } case 2: // { asap(function (lastTime) { while (q > 0) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.fillStyle = c1; if (q === 1) { ctx.translate(-32, 0); ctx.fillStyle = c1 === c2 ? WHITE : c2; } for (n = 0; n < 5; n++) { for (m = 0; m < 5; m++) { if ((n + m) % 2 === 0) { ctx.fillRect(1 + (32n), 1 + (40m), 30, 38); } } } q--; } ctx.restore(); }); break; // } default: throw "ReferenceError: card back " + "pattern " + k + " does not exist!"; } return ctx.canvas; }; return function (patt, c1, c2) { /*NOTE: Have temporary game round cache hold card back so it is * only created once per round. / var ctx = HTMLCanvasElement.create(160,232) .getContext("2d"); c1 = card_back_colors[c1]; c2 = card_back_colors[c2]; patt = getPattern(patt, c1, c2); asap(function () { ctx.fillStyle = WHITE; ctx.fillBeveledRect(0, 0, 160, 232, 16); ctx.fillStyle = c1; ctx.fillBeveledRect(12, 12, 136, 208, 6); ctx.fillStyle = WHITE; ctx.fillBeveledRect(14, 14, 132, 204, 4); ctx.drawImage(patt, 16, 16); patt.revoke(); var img=CanvasContent.get("card-shading"); asap(function () { asap(function () { ctx.drawImage(img, 0, 0); }); }); }); return ctx.canvas; }; })(), makeText: function (w, t_size, s_or_arr) { var ctx = HTMLCanvasElement .create(w, NATURAL_HEIGHT).getContext("2d"), pf, n = 0, m, l, t, sz, x, y, y_start, arr, canvas = HTMLCanvasElement.create( w, NATURAL_HEIGHT), s, q; asap(function () { pf = pjs.loadFont("serif", t_size); sz = pf.ascent + pf.descent; ctx.save(); ctx.font = pf.css; }); if (typeof s_or_arr === "string") { asap(function () { l = ((w-28) / sz) << 1; arr = s_or_arr.match(RegExp( "(?:[^ ]+ \\[[^]?\\]\\.? " + "?[^\\[\\] ]{0," + (l - 11) + "}\|\\[[^]?\\]\\.? ?[^\\[\\] ]{0," + (l - 7)+"}\|[^\\[\\] ]{0,"+(l - 1) + "})\\.? ?[^\\[\\] ]\\.?(?: \|$)", "gi")); ctx.setFillStyle(10); ctx.fillRect(0, 0, w, ctx.canvas.height); t = sz * 1.35; // textLead x = sz/3; y_start = sz; y = 0; ctx.shadowColor = BLACK; ctx.textAlign = "left"; ctx.setFillStyle(255); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; l = arr.length; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.fillText(arr[n], x, y_start + y); y += t; n++; } }); } else { asap(function () { t = sz * 1.35; // textLead x = Math.max.apply(null, s_or_arr.reduce( function (acc, ele, idx) { acc.push(ctx.measureText(ele[0]).width); return acc; }, [])); ctx.setFillStyle(10); ctx.fillRect(0, 0, w, ctx.canvas.height); y_start = sz; y = 0; ctx.shadowColor = BLACK; s = (w-x + t2) / s_or_arr[0].length - 1; n = 0; l = s_or_arr.length; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; /* If even or zero. / ctx.setFillStyle(n%2 === 0 ? 10 : 60); ctx.fillRect(0, y, w, t); ctx.setFillStyle(255); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; q = y_start + y; ctx.fillEllipse(sz/2,q-sz/3,sz/2,sz/2); ctx.textAlign = "left"; ctx.fillText(s_or_arr[n][0], sz, q); if (s_or_arr[n].length === 2) { ctx.fillText(s_or_arr[n][1], x + t + sz/3, q); } else { ctx.textAlign = "center"; m = 0; while (++m < s_or_arr[n].length) { ctx.fillText(s_or_arr[n][m], x + sm - t/2, q); } } y += t; n++; } }); } asap(function () { ctx.restore(); canvas.height = y; canvas.getContext("2d") .drawImage(ctx.canvas, 0, 0); ctx.canvas.revoke(); ctx = null; }); /** NOTE: The height is NOT determined * for the canvas when it's returned. * The height is finally set when all the * tasked created here are executed. / return canvas; }, makeShaded: function (src, x, y, c, b) { var ctx = HTMLCanvasElement.create( src.width + (x<<3), src.height + (y<<3) ).getContext("2d"); ctx.shadowColor = c \|\| "rgba(0,0,0,0.6)"; ctx.shadowOffsetX = x; ctx.shadowOffsetY = y; ctx.shadowBlur = (b !== void 0) ? b : 0; ctx.drawImage(src, 0, 0); ctx.shadowColor = BLACK; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; return ctx.canvas; } }; }), // methods (function () { var makeBkgd = function (r, g, b, lr, lg, lb) { var ctx = HTMLCanvasElement.create( NATURAL_WIDTH, NATURAL_HEIGHT ).getContext("2d"); if (arguments.length === 0) { ctx.fillStyle = BLACK; ctx.fillRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); return ctx.canvas; } var x = 0, y = 0, q, dx, dy, l; asap(function () { pjs.noiseDetail(2, 0.6); //pjs.noiseSeed(24745898); }, function (lastTime) { while (y < NATURAL_HEIGHT){ if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } if (x >= NATURAL_WIDTH) { x = 0; y += 2; } q = pjs.noise((480 + x) 8.1 / 6, (2662 + y) * 8.1 / 1.5); dx = (NATURAL_WIDTH >> 1) - x; dy = -y; l = 255 * ((Math.sqrt( dxdx + dydy) - 165) / 90); ctx.fillStyle = "rgb(" + ((q * r - l * lr) \| 0) + "," + ((q * g - l * lg) \| 0) + "," + ((q * b - l * lb) \| 0) + ")"; ctx.fillRect(x, y, 2, 2); x += 2; } }); return ctx.canvas; }, makeViewportFrame = function () { var ctx = HTMLCanvasElement.create( NATURAL_WIDTH, NATURAL_HEIGHT ).getContext("2d"), data; asap(function () { ctx.fillStyle = BLACK; ctx.fillRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); data = ctx.getImageData(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillStyle = WHITE; ctx.fillRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillStyle = BLACK; ctx.beginPath(); ctx.moveTo(0, NATURAL_HEIGHT); ctx.arcTo(0, 0, NATURAL_WIDTH, 0 ,10); ctx.arcTo(NATURAL_WIDTH, 0, NATURAL_WIDTH, NATURAL_HEIGHT, 10); ctx.arcTo(NATURAL_WIDTH, NATURAL_HEIGHT, 0, NATURAL_HEIGHT, 10); ctx.arcTo(0, NATURAL_HEIGHT, 0, 0, 10); ctx.fill(); ctx.closePath(); }, function () { applyMask(data, ctx.getImageData(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT)); asap(function () { ctx.clearRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.putImageData(data, 0, 0); }); }); return ctx.canvas; }, makeCardShading = function () { var w = 160, h = 232, n = 0, data, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { ctx.fillStyle = BLACK; ctx.fillRect(0, 0, w, h); data = ctx.getImageData(0, 0, w, h); ctx.fillStyle = WHITE; ctx.fillBeveledRect(0, 0, w, h, 16); ctx.setFillStyle(41); ctx.fillBeveledRect(2, 2, 156, 228, 14); }, function (lastTime) { while (n < 125) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.setFillStyle(33 - Math.sin(n0.001)255); ctx.fillBeveledRect(6, 6, 148, 220-n, 12); n++; } }, function () { applyMask(data, ctx.getImageData(0, 0, w, h)); asap(function () { ctx.clearRect(0, 0, w, h); ctx.putImageData(data, 0, 0); }); }); return ctx.canvas; }, makePromptHightlight = function (clr) { var w = 444, h = 88, n = 0, data, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { ctx.save(); ctx.lineWidth = 1; ctx.fillStyle = clr; ctx.fillRect(0, 0, w, h); data = ctx.getImageData(0, 0, w, h); // 2X ctx.fillStyle = BLACK; ctx.fillRect(0, 0, w, h); ctx.fillStyle = WHITE; ctx.fillBeveledRect(0, 0, w, h, 22); ctx.setFillStyle(0, 0.1); }, function (lastTime) { while (n < 75) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.fillBeveledRect(n, n, w-n2, h-n2, 22); n++; } ctx.restore(); }, function () { applyMask(data,ctx.getImageData(0, 0, w, h)); asap(function () { ctx.clearRect(0, 0, w, h); ctx.putImageData(data, 0, 0); }); }); return ctx.canvas; }, makeRectBtnOverlay = function (w, h, b) { var ctx = HTMLCanvasElement.create(w, h) .getContext("2d"), data, n = 0; asap(function () { ctx.save(); ctx.fillStyle = BLACK; ctx.fillRect(0, 0, w, h); data = ctx.getImageData(0, 0, w, h); ctx.setFillStyle(191, 187, 191); ctx.fillBeveledRect(0, 0, w, h, 14); ctx.setFillStyle(43); ctx.fillBeveledRect(3, 3, w-6, h-6, 12); if (b) { // flip over? ctx.translate(w, h); ctx.rotate(Math.PI, 0); } }, function (lastTime) { while (n < 27) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.setFillStyle( 72 - (Math.sin(n * 0.011) * 255)); ctx.fillBeveledRect( 5 + (n * 0.125), 5 + (n * 0.125), (w-10) - (n0.25), (h-10) - (n1.5), 10); n++; } ctx.restore(); }, function () { applyMask(data, ctx.getImageData(0, 0, w, h)); asap(function () { ctx.clearRect(0, 0, w, h); ctx.putImageData(data, 0, 0); }); }); return ctx.canvas; }, makeTriBtnOverlay = function (r, p_r, a, b) { var w = 90, h = 90, n = 0, data, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { ctx.save(); ctx.fillStyle = BLACK; ctx.fillRect(0, 0, w, h); data = ctx.getImageData(0, 0, w, h); ctx.lineWidth = 1; if (b) { // flip over? ctx.translate(w, h); ctx.rotate(Math.PI); } }, function (lastTime) { while (n <= h) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.setFillStyle(89 - (Math.sin(( (n * 2.25) - 36) * DEG_TO_RAD) * 96)); ctx.fillRect(0, h-n, w, 1); n++; } }, function () { ctx.translate(w >> 1, h >> 1); ctx.rotate(a * DEG_TO_RAD); ctx.lineWidth = 3; ctx.strokeStyle = WHITE; ctx.strokeBeveledTri(0, 0, r>>1, p_r, 0); ctx.setStrokeStyle(166); ctx.strokeBeveledTri( 0, 0, (r>>1) - 2, p_r - 1, 0); ctx.lineWidth = 36; ctx.strokeStyle = BLACK; ctx.strokeBeveledTri(0, 0, w, 31, 0); ctx.restore(); }, function () { applyMask(data,ctx.getImageData(0, 0, w, h)); asap(function () { ctx.clearRect(0, 0, w, h); ctx.putImageData(data, 0, 0); }); }); return ctx.canvas; }; // ____________________________________________ var makeAnnouncement = function ( k, arr, w, h, c1, c2, text_size, text_desc ) { if (text_desc === void 0) { text_desc = text_size; } var pf, y, q, grad, offset, l = arr.length, x = w/2, n = 0, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", text_size); offset = Math.ceil(h/2 / l + ( ((pf.ascent - pf.descent) + ((pf.ascent - pf.descent) / 6.452)) / 2 )); ctx.save(); ctx.textAlign = "center"; ctx.font = pf.css; }); switch (k.charAt(k.length-1)) { case 'A': // { asap(function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = arr[n]; grad = ctx.createLinearGradient( 0, text_desc n + 1, 0, text_desc * n + (pf.ascent + pf.descent) + 1); grad.addColorStop(0, c1); grad.addColorStop(0.34, c1); grad.addColorStop(0.64, c2); grad.addColorStop(0.83, c1); grad.addColorStop(1.0, c1); y = text_desc * n + offset; ctx.strokeStyle = BLACK; ctx.lineWidth = text_size / 6.45; ctx.strokeText(q, x, y); ctx.setStrokeStyle(240); ctx.lineWidth = text_size / 6.45 / 2; ctx.strokeText(q, x, y); ctx.fillStyle = grad; ctx.fillText(q, x, y); n++; } ctx.restore(); arr.length = 0; }); break; // } case 'B': // { ctx.fillStyle = WHITE; asap(function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.fillText(arr[n], w >> 1, text_desc * n + offset); n++; } ctx.restore(); arr.length = 0; }); break; // } } return ctx.canvas; }, makeTray = function (w, h, msg, b) { var ctx = HTMLCanvasElement.create(w, h) .getContext("2d"), pf, l, n, q; asap(function () { pf = pjs.loadFont("serif", 32); ctx.save(); ctx.lineWidth = 1; ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 12); n = 0; l = h - 5; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = (Math.sin((n + 25) * Math.PI / (l + 10)) * 86) \| 0; ctx.setFillStyle(169+q, 169+q, 174+q); ctx.fillRect(0 + 3, n + 3, w - 6, 1); n++; } l = h - 50; n = 0; }); if (b) { // has a viewport? asap(function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = (Math.sin(n * Math.PI/l) * 130) \| 0; ctx.setFillStyle(109-q, 109-q, 114-q); ctx.fillRect(10, 41 + n, w-20, 1); n++; } }); } asap(function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(0, 0, w, h, 11); ctx.strokeBeveledRect(1, 1, w-2, h-2, 10); ctx.strokeBeveledRect(8, 40, w-16, h-46, 6); ctx.setStrokeStyle(189, 189, 194); ctx.strokeBeveledRect(3, 3, w-6, h-6, 8); ctx.strokeBeveledRect(9, 41, w-18, h-48, 5); ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.shadowColor = WHITE; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.fillText(msg, w>>1, 21 + pf.ascent/2); ctx.restore(); }); return ctx.canvas; }, makeSettingsTray = function () { var w = 360, h = 420, pf, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 38); ctx.save(); ctx.lineWidth = 2; n = 0; }, function (lastTime) { while (n < 46) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n+10) * 3 * DEG_TO_RAD) * 66; ctx.setStrokeStyle(179+q, 179+q, 184+q); ctx.strokeBeveledRect( 5 + (n * 0.5), 5 + (n * 1.1), (w-10)-(n * 1.08), (h-10)-(n * 2.20), 5); n++; } }, function () { ctx.setFillStyle(209); ctx.fillRect(32, 58, 294, 305); ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, w-2, h-2, 10); ctx.strokeBeveledRect(29, 56, 300, 308, 3); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(3, 3, w-6, h-6, 8); ctx.strokeBeveledRect(31, 58, 296, 304, 1); ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.shadowColor = WHITE; ctx.shadowOffsetY = 1.5; ctx.shadowOffsetX = 1.5; ctx.fillText("Settings Menu", w >> 1, 29 + pf.ascent/2); ctx.restore(); }); return ctx.canvas; }, makeSmallTray = function () { var w = 226, h = 90, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { ctx.save(); ctx.lineWidth = 1; ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 10); n = 0; }, function (lastTime) { while (n < h-6) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin( (n * 180 / h + 16) * DEG_TO_RAD) * 66; ctx.setFillStyle(189+q, 189+q, 194+q); ctx.fillRect(3, 3 + n, w - 6, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, w-2, h-2, 10); ctx.strokeBeveledRect(8, 35, w-16, 47, 6); ctx.setStrokeStyle(189, 189, 194); ctx.strokeBeveledRect(2.5, 2.5, w-5, h-5, 8); ctx.strokeBeveledRect(9, 36, w-18, 45, 5); ctx.restore(); }); return ctx.canvas; }, makeDeveloperBar = function () { var h = 26, pf, y, n, ctx = HTMLCanvasElement.create( NATURAL_WIDTH, h).getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 19); y = h/2 + pf.ascent/2.1; ctx.save(); ctx.setFillStyle(171); ctx.fillRect(0, 0, NATURAL_WIDTH, 26); n = 0; }, function (lastTime) { while (n < 22) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } ctx.setFillStyle(179 + Math.sin( (n + 15) * 6.5 * DEG_TO_RAD) * 72); ctx.fillRect(0, 2 + n, NATURAL_WIDTH, 1); n++; } }, function () { ctx.fillStyle = BLACK; ctx.setShadowColor(255, 0.5); ctx.shadowOffsetY = 1; ctx.shadowOffsetX = 1; ctx.font = pf.css; ctx.textAlign = "left"; ctx.fillText("Updated: "+ info.lastModified, 8, y); ctx.textAlign = "center"; ctx.fillText("Developed by "+ info.developerName, NATURAL_WIDTH >> 1, y); ctx.textAlign = "right"; ctx.fillText(info.appVersion, NATURAL_WIDTH - 8, y); ctx.restore(); }); return ctx.canvas; }, makePublisherBar = function () { var w = 228, h = 36, pf, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 19); ctx.save(); ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, 228, 36, 8); ctx.strokeStyle = WHITE; ctx.lineWidth = 1.5; ctx.strokeBeveledRect(5, 5, 218, 26, 4); ctx.fillStyle = WHITE; ctx.textAlign = "center"; ctx.font = pf.css; ctx.fillText(info.publisherName + " - © " + info.releaseYear, 114, h/2 + pf.ascent/2.25); ctx.restore(); }); return ctx.canvas; }, makeStatusBar = function () { var w = 136, h = 64, pf, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 22); ctx.save(); ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 8); n = 0; }, function (lastTime) { while (n < 56) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n + 12) * 3DEG_TO_RAD) 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(4, 4 + n, w - 8, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.setStrokeStyle(209, 209, 214); ctx.strokeBeveledRect(3, 3, w - 6, 58, 5); n = 0; }, function (lastTime) { while (n < 20) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(19 + n * 9DEG_TO_RAD) 96; ctx.setFillStyle(109-q, 109-q, 114-q); ctx.fillRect(70, 36 + n, 58, 1); ctx.fillRect(70, 8 + n, 58, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(67, 5, h, 26, 5); ctx.strokeBeveledRect(67, 33, h, 26, 5); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(69, 7, 60, 22, 3); ctx.strokeBeveledRect(69, 35, 60, 22, 3); ctx.font = pf.css; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.textAlign = "center"; ctx.fillStyle = BLACK; ctx.shadowColor = WHITE; ctx.fillText("Match", 36, 33-pf.ascent/2); ctx.fillText("Type", 41, 59-pf.ascent/2); ctx.restore(); }); return ctx.canvas; }, makeTimerBar = function () { var w = 150, h = 64, pf, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 22); ctx.save(); ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 9); n = 0; }, function (lastTime) { while (n < 56) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n+12) * 3DEG_TO_RAD) 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(4 , 4 + n, w - 8, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.setStrokeStyle(209, 209, 214); ctx.strokeBeveledRect(3, 3, w - 6, 58, 5); n = 0; }, function (lastTime) { while (n < 20) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(19 + n * 9DEG_TO_RAD) 96; ctx.setFillStyle(109-q, 109-q, 114-q); ctx.fillRect(57, 20 + n, 85, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(54, 17, 91, 26, 5); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(56 ,19, 87, 22, 3); ctx.font = pf.css; ctx.textAlign = "center"; ctx.fillStyle = BLACK; ctx.shadowColor = WHITE; ctx.shadowOffsetY = 1; ctx.shadowOffsetX = 1; ctx.fillText("Time", 28, h/2+pf.descent); ctx.restore(); }); return ctx.canvas; }, makeScrollBar = function () { var w = 18, h = 360, n, q, ctx = HTMLCanvasElement.create(30, h) .getContext("2d"); asap(function () { ctx.save(); ctx.translate(6, 0); ctx.setFillStyle(205, 25, 205); ctx.fillBeveledRect(0, 0, w, h, 9); ctx.lineWidth = 2; n = 0; }, function (lastTime) { while (n < 23) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(n * 9 * DEG_TO_RAD) * 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(n * 0.5 + 4, 4, 1, h-8); n++; } }, function () { ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, w-2, h-2, 8); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(3, 3, w-6, h-6, 6); ctx.setFillStyle(127); ctx.fillRect(7, 10, 4, h-20); ctx.fillStyle = BLACK; ctx.fillRect(8, 11, 2, h-22); ctx.restore(); }); return ctx.canvas; }, makeScrollTab = function () { var w = 30, h = 22, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { ctx.save(); ctx.setFillStyle(205, 25, 205); ctx.fillBeveledRect(0, 0, 30, 22, 5); ctx.lineWidth = 2; n = 0; }, function (lastTime) { while (n < 43) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(n * 4 * DEG_TO_RAD) * 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(4 + (n * 0.5), 4, 1, 14); n++; } }, function () { ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, 28, 20, 4); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(3, 3, 24, 16, 2); ctx.fillStyle = BLACK; ctx.fillRect(6, 6, 18, 2); ctx.fillRect(6, 10, 18, 2); ctx.fillRect(6, 14, 18, 2); ctx.restore(); }); return ctx.canvas; }, makeNodeView = function (w, h) { var ctx = HTMLCanvasElement.create(w, h) .getContext("2d"), n, q; asap(function () { ctx.save(); ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 11); ctx.lineWidth = 1; n = 0; }, function (lastTime) { while (n < (h - 6)) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(n * 4 * DEG_TO_RAD) * 86; ctx.setFillStyle(109-q, 109-q, 114-q); ctx.fillRect(3, (h-4) - n, w - 6, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(1, 1, w-2, h-2, 10); ctx.lineWidth = 1; ctx.setStrokeStyle(127); ctx.strokeBeveledRect(2, 2, w-4, h-4, 8); ctx.setStrokeStyle(209, 209, 214); ctx.strokeBeveledRect(3, 3, w-6, h-6, 7); ctx.restore(); }); return ctx.canvas; }, makePlayerBar = function (clr) { var w = 270, h = 64, a, pf, n, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); asap(function () { pf = pjs.loadFont("serif", 22); a = pf.ascent / 2; ctx.save(); ctx.fillStyle = BLACK; ctx.fillBeveledRect(0, 0, w, h, 8); n = 0; }, function (lastTime) { while (n < 56) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin((n+12)3 DEG_TO_RAD) * 66; ctx.setFillStyle(179+q, 179+q, 184+q); ctx.fillRect(4, 4 + n, w - 8, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.setStrokeStyle(209, 209, 214); ctx.strokeBeveledRect(3, 3, w - 6, 58, 5); ctx.lineWidth = 1; ctx.fillStyle = clr; ctx.fillRect(6, 6, 138, 22); n = 0; }, function (lastTime) { while (n < 20) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(19 + n * 9 * DEG_TO_RAD) * 96; ctx.setFillStyle(109-q, 109-q, 114-q); ctx.fillRect(66, 36 + n, 77, 1); ctx.fillRect(204 , 36 + n, 58, 1); ctx.fillRect(204, 8 + n, 58, 1); n++; } n = 0; }, function (lastTime) { while (n < 22) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.sin(nMath.PIDEG_TO_RAD) * 0.5; ctx.setFillStyle(0, 0.4 - q); ctx.fillRect(6, 6 + n, 138, 1); n++; } }, function () { ctx.lineWidth = 2; ctx.strokeStyle = BLACK; ctx.strokeBeveledRect(5, 5, 140, 24, 4); ctx.strokeBeveledRect(63, 33, 82, 26, 5); ctx.strokeBeveledRect(201, 33, h, 26, 5); ctx.strokeBeveledRect(201, 5, h, 26, 5); ctx.strokeStyle = WHITE; ctx.strokeBeveledRect(65 ,35, 78, 22, 3); ctx.strokeBeveledRect(203, 35, 60, 22, 3); ctx.strokeBeveledRect(203, 7, 60, 22, 3); ctx.fillStyle = WHITE; ctx.font = pf.css; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.textAlign = "center"; ctx.fillStyle = BLACK; ctx.shadowColor = WHITE; ctx.fillText("Points", 33, 60 - a); ctx.fillText("Wins", 175, 33 - a); ctx.fillText("Trys", 178, 59 - a); ctx.restore(); }); return ctx.canvas; }, makeSpark = function (r, g, b) { var w = 128, h = 128, n = 0, q, ctx = HTMLCanvasElement.create(w, h) .getContext("2d"); ctx.save(); asap(function (lastTime) { while (n < 16) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = w - n * 8; ctx.setFillStyle(rn, gn, bn, 0.25); ctx.fillStar(64, 64, q, q); n++; } ctx.restore(); }); return ctx.canvas; }; var cache = clone(null); CanvasContent.get = function (k) { if (k in cache) { /* NOTE: Even if the content has already * been cached, it doesn't necessarily mean * the content has finished being created! / return cache[k]; } switch (k) { case "green-background": // { return (cache[k] = makeBkgd( 105, 250, 93, 0.04, 0.075, 0.04)); // } case "blue-background": // { return (cache[k] = makeBkgd( 200, 210, 250, 0.06, 0.075, 0.075)); // } case "yellow-background": // { return (cache[k] = makeBkgd( 255, 207, 80, 0.065, 0.07, 0.06)); // } case "red-background": // { return (cache[k] = makeBkgd( 255, 132, 115, 0.065, 0.04, 0.05)); // } case "purple-background": // { return (cache[k] = makeBkgd( 255, 177, 235, 0.075, 0.06, 0.075)); // } case "orange-background": // { return (cache[k] = makeBkgd( 255, 157, 90, 0.07, 0.06, 0.05)); // } case "black-background": // { return (cache[k] = makeBkgd()); // } //----------------------------- case "viewport-frame": // { return (cache[k] = makeViewportFrame()); // } case "card-shading": // { return (cache[k] = makeCardShading()); // } //----------------------------- case "cyan-highlight": // { return (cache[k] = makePromptHightlight( "rgb(0,125,200)")); // } case "red-highlight": // { return (cache[k] = makePromptHightlight( "rgb(255,12,20)")); // } //----------------------------- case "large-rect-btn-overlay-A": // { return (cache[k] = makeRectBtnOverlay( 360, 80, !0)); // } case "large-rect-btn-overlay-B": // { return (cache[k] = makeRectBtnOverlay( 360, 80, !1)); // } case "medium-rect-btn-overlay-A": // { return (cache[k] = makeRectBtnOverlay( 246, 72, !0)); // } case "medium-rect-btn-overlay-B": // { return (cache[k] = makeRectBtnOverlay( 246, 72, !1)); // } case "small-rect-btn-overlay-A": // { return (cache[k] = makeRectBtnOverlay( 228, 76, !0)); // } case "small-rect-btn-overlay-B": // { return (cache[k] = makeRectBtnOverlay( 228, 76, !1)); // } //----------------------------- case "left-small-tri-btn-overlay-A": // { return (cache[k] = makeTriBtnOverlay( 104, 12, 0, !0)); // } case "left-small-tri-btn-overlay-B": // { return (cache[k] = makeTriBtnOverlay( 104, 12, 180, !1)); // } case "right-small-tri-btn-overlay-A": // { return (cache[k] = makeTriBtnOverlay( 104, 12, 180, !0)); // } case "right-small-tri-btn-overlay-B": // { return (cache[k] = makeTriBtnOverlay( 104, 12, 0, !1)); // } //----------------------------- case "start-text-A": case "start-text-B": // { return (cache[k] = makeAnnouncement( k, ["Start"], 242, 104, "rgb(0,205,25)", "rgb(25,105,25)", 116)); // } case "round-over-text-A": case "round-over-text-B": // { return (cache[k] = makeAnnouncement( k, ["Round","Over"], 276, 172, "rgb(0,185,205)", "rgb(25,25,105)", 98, 78)); // } case "next-round-text-A": case "next-round-text-B": // { return (cache[k] = makeAnnouncement( k, ["Next","Round"], 276, 172, "rgb(0,185,205)", "rgb(25,25,105)", 98, 78)); // } case "last-round-text-A": case "last-round-text-B": // { return (cache[k] = makeAnnouncement( k, ["Last","Round"], 276, 172, "rgb(255,235,0)", "rgb(255,65,0)", 98, 78)); // } case "game-over-text-A": case "game-over-text-B": // { return (cache[k] = makeAnnouncement( k, ["Game","Over"], 276, 172, "rgb(0,185,205)", "rgb(25,25,105)", 98, 78)); // } case "you-win-text-A": case "you-win-text-B": // { return (cache[k] = makeAnnouncement( k, ["You Win!"], 468, 100, "rgb(255,235,0)", "rgb(255,65,0)", 116)); // } case "you-lose-text-A": case "you-lose-text-B": // { return (cache[k] = makeAnnouncement( k, ["You Lose"], 460, 100, "rgb(0,180,240)", "rgb(135,0,255)", 116)); // } case "success-text-A": case "success-text-B": // { return (cache[k] = makeAnnouncement( k, ["Success!"], 420, 100, "rgb(255,235,0)", "rgb(255,65,0)", 116)); // } case "too-bad-text-A": case "too-bad-text-B": // { return (cache[k] = makeAnnouncement( k, ["Too","Bad"], 204, 196, "rgb(0,180,240)", "rgb(135,0,255)", 116, 96)); // } case "out-of-time-text-A": case "out-of-time-text-B": // { return (cache[k] = makeAnnouncement( k, ["Out of","Time"], 286, 170, "rgb(0,185,205)", "rgb(25,25,105)", 98, 84)); // } case "tie-text-A": case "tie-text-B": // { return (cache[k] = makeAnnouncement( k, ["Tie"], 142, 84, "rgb(0,185,20)", "rgb(215,215,10)", 98)); // } case "p1-wins-text-A": case "p1-wins-text-B": // { return (cache[k] = makeAnnouncement( k, ["Player 1", "Wins!"], 338, 188, "rgb(255,235,0)", "rgb(255,65,0)", 98, 100)); // } case "p2-wins-text-A": case "p2-wins-text-B": // { return (cache[k] = makeAnnouncement( k, ["Player 2", "Wins!"], 338, 188, "rgb(255,235,0)", "rgb(255,65,0)", 98, 100)); // } case "p3-wins-text-A": case "p3-wins-text-B": // { return (cache[k] = makeAnnouncement( k, ["Player 3", "Wins!"], 338, 188, "rgb(255,235,0)", "rgb(255,65,0)", 98, 100)); // } case "p4-wins-text-A": case "p4-wins-text-B": // { return (cache[k] = makeAnnouncement( k, ["Player 4", "Wins!"], 338, 188, "rgb(255,235,0)", "rgb(255,65,0)", 98, 100)); // } //----------------------------- case "pause-tray": // { return (cache[k] = makeTray( 312, 274, "Pause Menu", !1)); // } case "rules-tray": // { return (cache[k] = makeTray( 312, 274, "Game Rules", !1)); // } //----------------------------- case "settings-tray": // { return (cache[k] = makeSettingsTray()); // } case "small-tray": // { return (cache[k] = makeSmallTray()); // } //----------------------------- case "developer-bar": // { return (cache[k] = makeDeveloperBar()); // } case "publisher-bar": // { return (cache[k] = makePublisherBar()); // } case "status-bar": // { return (cache[k] = makeStatusBar()); // } case "timer-bar": // { return (cache[k] = makeTimerBar()); // } //----------------------------- case "scroll-bar": // { return (cache[k] = makeScrollBar()); // } case "scroll-tab": // { return (cache[k] = makeScrollTab()); // } //----------------------------- case "status-view": // { return (cache[k] = makeNodeView(120,40)); // } case "field-view": // { return (cache[k] = makeNodeView(202,40)); // } //----------------------------- case "red-player-bar": // { return (cache[k] = makePlayerBar( "rgb(255,0,0)")); // } case "blue-player-bar": // { return (cache[k] = makePlayerBar( "rgb(25,75,255)")); // } case "green-player-bar": // { return (cache[k] = makePlayerBar( "rgb(40,214,20)")); // } case "yellow-player-bar": // { return (cache[k] = makePlayerBar( "rgb(250,218,0)")); // } case "orange-player-bar": // { return (cache[k] = makePlayerBar( "rgb(251,130,26)")); // } case "purple-player-bar": // { return (cache[k] = makePlayerBar( "rgb(225,113,221)")); // } case "pink-player-bar": // { return (cache[k] = makePlayerBar( "rgb(243,104,167)")); // } case "cyan-player-bar": // { return (cache[k] = makePlayerBar( "rgb(76,245,234)")); // } case "gray-player-bar": // { return (cache[k] = makePlayerBar( "rgb(127,127,127)")); // } //----------------------------- case "red-spark": // { return (cache[k] = makeSpark( 148 + 255/3, 11 + 255/10, 255/12)); // } case "orange-spark": // { return (cache[k] = makeSpark( 255, 90 + 255 / 8, 255 / 11)); // } case "yellow-spark": // { return (cache[k] = makeSpark( 157 + 255/8, 127 + 255/8, 255/11)); // } case "green-spark": // { return (cache[k] = makeSpark( 47 + 255/16, 127 + 255/8, 255/11)); // } case "cyan-spark": // { return (cache[k] = makeSpark( 47 + 255/16, 127 + 255/8, 127 + 255/11)); // } case "blue-spark": // { return (cache[k] = makeSpark( 255/14, 255/11, 187 + 255/3)); // } case "purple-spark": // { return (cache[k] = makeSpark( 115 + 255/8, 255/11, 227 + 255/40)); // } case "pink-spark": // { return (cache[k] = makeSpark( 157 + 255/8, 255/11, 104 + 255/11)); // } case "gray-spark": // { return (cache[k] = makeSpark( 17 + 255/10, 23 + 255/10, 18 + 255/11)); // } //----------------------------- default: throw "ReferenceError: canvas " + "content \"" + k + "\" does not exist!"; } }; }), // get method // } // ▲ Setup storage and save data { (function () { // • Get storage { /* NOTE: KA discourages the use of window * storage in Processing.js projects. * This script doesn't use your browser * storage, but uses an emulation to show * how a storage structure can greatly help * keep track of complex forms of data. / if (!pjs.windowStorage) { pjs.windowStorage = (function (type) { switch (type) { case "local": //{ /* "localStorage" saves your * data and stays saved even * after you quit your browser. / //return window.localStorage; break; //} case "session": //{ /* "sessionStorage" saves your * data, but drops it after * you quit your browser. / //return window.sessionStorage; break; //} default: //{ /* This pseudo-storage drops * the save data if this * webpage is refreshed. / return (function () { var idx, val, data = {}; return { get length () { return Object.keys(data).length; }, key: function (index) { return idx = 0, Object.keys(data).find( function (k) { return index === idx++; }); }, getItem: function (k) { return data[k]; }, setItem: function (k, val) { return (data[k] = val); }, removeItem: function (k) { return val = data[k], delete data[k], val; }, clear: function () { Object.keys(data).forEach( function (k) { delete data[k]; }); } }; })(); //} } }) ("pseudo"); } // } // • Setup game setting save data { var KEY = "memoryUserData"; if (!pjs.windowStorage.getItem(KEY)) { pjs.windowStorage.setItem(KEY, { "player-1-name": "Player 1", "player-1-color": [0, ["Red", "Orange", "Yellow", "Green", "Blue", "Cyan", "Purple", "Pink"]], "player-1-cpu-controlled": [0, ["Off","Easy","Normal","Hard","Expert"]], "player-2-name": "Player 2", "player-2-color": [4, ["Red", "Orange", "Yellow", "Green", "Blue", "Cyan", "Purple", "Pink"]], "player-2-cpu-controlled": [0, ["Off","Easy","Normal","Hard","Expert"]], "player-3-name": "Player 3", "player-3-color": [3, ["Red", "Orange", "Yellow", "Green", "Blue", "Cyan", "Purple", "Pink"]], "player-3-cpu-controlled": [0, ["Off","Easy","Normal","Hard","Expert"]], "player-4-name": "Player 4", "player-4-color": [2, ["Red", "Orange", "Yellow", "Green", "Blue", "Cyan", "Purple", "Pink"]], "player-4-cpu-controlled": [0, ["Off","Easy","Normal","Hard","Expert"]], "menu-background": [0, ["Green", "Blue", "Yellow", "Red", "Purple", "Orange"]], "game-background": [0, ["Green", "Blue", "Yellow", "Red", "Purple", "Orange"]], "use-tooltip-display": [1, ["Off", "On"]], "use-special-FX": [1, ["Off", "On"]], "number-of-players": [0, ['1','2','3','4']], "use-auto-end-round": [0, ["Off", "On"]], "use-auto-continue": [0, ["Off", "On"]], "use-auto-finish": [1, ["Off", "On"]], "use-extra-turn": [1, ["Off", "On"]], "order-of-turns": [1, ["Number", "Wins", "Random"]], "rounds-each-game": '3', "cards-each-round": [0, ["12","24","36","Random A","Random B"]], "wins-to-win-game": '2', "match-style": [3, ["Shape", "Color", "Any", "Random A", "Random B"]], "point-difficulty": [1, ["Easy", "Normal", "Hard", "Expert"]], "cards-for-match": [0, ['2','3','4',"Random A","Random B"]], "deal-style": [5, ["Default", "Same Shp", "Same Clr", "Diff Shps", "Diff Clrs", "Random A", "Random B"]], "time-countdown": [0, ["Off","Easy","Normal","Hard","Expert"]], "deck-category": [8, ["Geometry", "Stars", "Letters", "Greek", "Numbers", "Sticks", "Cryptic","All","Random A","Random B"]], "card-back-pattern": [0, ["Diamonds", "Squares", "Random A", "Random B"]], "card-back-color-1": [8, ["Red", "Orange", "Yellow", "Green", "Cyan", "Blue", "Purple", "Pink", "Random A", "Random B"]], "card-back-color-2": [8, ["Red", "Orange", "Yellow", "Green", "Cyan", "Blue", "Purple", "Pink", "Random A", "Random B"]], "use-upside-down": [0, ["Off", "On"]], "use-sloppy-deal": [0, ["Off", "On"]] }); } // } // • Define storage utility object { storage = (function () { var data = null; return { "get": function (k) { return !data[k] ? (data[k] = pjs.windowStorage .getItem(KEY)[k]) : data[k]; }, "set": function (k, value) { data[k] = value; }, "sync": function () { if (!data) { data = pjs.windowStorage.getItem(KEY); } else { pjs.windowStorage.setItem(KEY, data); } }, "each": function (fn, thisArg) { thisArg = thisArg \|\| data; Object.keys(data).forEach( function (k) { fn.call(thisArg, data[k], k, data); }); }, "any": function (fn, thisArg) { thisArg = thisArg \|\| data; return Object.keys(data).some( function (k) { return fn.call(thisArg,data[k],k,data); }); } }; })(); storage.sync(); // } }), // } // ____________________________ // ▲ Define component classes { // • Define abstract classes { (function () { Component = function (conf) { this.parent = conf.parent \|\| null; this.localName = conf.localName \|\| ""; this.groupName = conf.groupName \|\| ""; this.invalidated = !1; this.setActive(conf.active); this.setUpdatable(conf.updatable); this.setVisible(conf.visible); this.setTangible(conf.tangible); }; Component.prototype = { _finalize: function () { /* NOTE: Only the pool method "revoke" * should call "_finalize" methods. / this.parent = null; }, end: function () { this.invalidated = !0; }, setActive: function (b) { /* "active" acts as a kill switch * property that when false prevents * any traversal over it, except for * asserting removal. / delete this.active; this.active = typeof b==="boolean" ? b : !0; }, setUpdatable: function () { delete this.updatable; this.updatable = !1; }, setVisible: function () { delete this.visible; this.visible = !1; }, setTangible: function () { delete this.tangible; this.tangible = !1; }, toString: function () { return "[object "+this.constructor.name+"]"; } }; Object.setPrototypeOf(Component.prototype, null); }), // Component (function () { Timer = function (conf) { Component.call(this, conf); this.duration = typeof conf .duration === "number" ? conf.duration (1000 / FPS) \| 0 : 0; this.iterations = typeof conf .iterations === "number" ? conf.iterations : 0; /this.fill = conf.fill \|\| "none"; // backwards, forwards, both this.direction = conf.direction \|\| "normal"; // reverse, alternate, alternate-reverse / this.startTime = 0; this.elapsedTime = 0; }; Timer.prototype = { setUpdatable: function (b) { delete this.updatable; this.updatable = typeof b==="boolean"? b : !0; }, cancel: Component.prototype.end, restart: function () { this.elapsedTime = this.startTime = 0; }, pause: function () { this.paused = !0; this.setUpdatable(!1); }, resume: function () { this.startTime = 0; this.setUpdatable(!0); }, update: function (time) { if (this.startTime === 0) { this.startTime = time - this.elapsedTime; } else { this.elapsedTime = time - this.startTime; } if (this.elapsedTime > this.duration) { if (this.iterations > 0) { this.iterations--; this.restart(); } else { this.end(); } } } }; inherit(Timer, Component); }), // Timer (function () { AppEventHandler = function (t, f, c, o) { this.callback = f; this.capture = c !== void 0 ? c : !1; this.once = o !== void 0 ? o : !1; }; AppEventHandler.prototype = { equals: function (other) { return this.callback === other.callback && this.capture === other.capture && this.once === other.once; }, toString: Component.prototype.toString }; Object.setPrototypeOf( AppEventHandler.prototype, null); allocate(AppEventHandler, 13); var handler, arr, idx, equalsHandler = function (ele) { return ele.equals(handler); }, invokeRevoke = function (ele) { ele.revoke(); }, buildPath = function (target, path) { path.length = 0; do { path.unshift(target); target = target.parent; } while (target); }, propagateEvent = function (evt) { if (evt.currentTarget === evt.target) { evt.phase = EVENT_AT_TARGET; if ( typeof evt.currentTarget[ "on" + evt.type] === "function" ) { evt.currentTarget["on" + evt.type](evt); } if (evt.immediatePropagationStopped) { return; } } if ( evt.currentTarget instanceof AppEventTarget&& evt.type in evt.currentTarget.handlers ) { /** NOTE: Once the enumeration has begun, * any modification to the handlers * isn't recognized after until * the enumeration has ended. / switch (evt.phase) { case EVENT_CAPTURING_PHASE: // { if (evt.capturingPrevented) { break; } evt.currentTarget.handlers[evt.type] .concat().findIndex(function (ele) { if (ele.capture) { if (evt.immediatePropagationStopped) { return !0; } ele.callback(evt); if (ele.once) { evt.currentTarget .removeEventHandler( ele.type, ele.callback, ele.capture, ele.once); } } }); break; // } case EVENT_AT_TARGET: case EVENT_BUBBLING_PHASE: // { if ( evt.bubblingPrevented && evt.phase === EVENT_BUBBLING_PHASE ) { break; } evt.currentTarget.handlers[evt.type] .concat().findIndex(function (ele) { if (evt.immediatePropagationStopped) { return !0; } ele.callback(evt); if (ele.once) { evt.currentTarget .removeEventHandler( ele.type, ele.callback, ele.capture, ele.once); } }); break; // } } if (evt.immediatePropagationStopped) { return; } } if (evt.propagationStopped) { return; } if (evt.phase === EVENT_AT_TARGET) { evt.phase = EVENT_BUBBLING_PHASE; } switch (evt.phase) { case EVENT_CAPTURING_PHASE: // { evt.depth++; if ( evt.currentTarget instanceof Branch && evt.currentTarget.children .findIndex(function (comp) { if ( comp.active && comp === evt.path[evt.depth] ) { evt.currentTarget = comp; propagateEvent(evt); return !0; } }) !== -1 ) { return; } /* If all else fails, call the * target's event handler directly. / if ( !evt.target.invalid && evt.target.active && typeof evt.target[ "on" + evt.type] === "function" ) { evt.target["on" + evt.type](evt); } break; // } case EVENT_BUBBLING_PHASE: // { /if (evt.bubblePrevented) { return; } if (evt.bubbles) { evt.depth--; if ( evt.currentTarget !== root && evt.path[evt.depth] ) { evt.currentTarget=evt.path[evt.depth]; propagateEvent(evt); } }/ break; // } } }; AppEventTarget = function (conf) { Component.call(this, conf); if (!this.handlers) { this.handlers = {}; } }; AppEventTarget.prototype = { _finalize: function () { this.clearEventHandlers(); this.parent = null; }, addEventHandler: function (type, fn) { if (type === void 0 \|\| type === "") { return !1; } arr = this.handlers[type]; if (!arr) { arr = (this.handlers[type] = []); } handler = AppEventHandler.create .apply(null, arguments); idx = arr.findIndex(equalsHandler); if (idx < 0) { arr.push(handler); handler = arr = null; /* Handler was successfully added. / return !0; } handler.revoke(); handler = arr = null; /* Handler failed to attach * because it already exists. / return !1; }, removeEventHandler: function (type, fn) { arr = this.handlers[type]; if (!arr) { return !1; } handler = AppEventHandler.create .apply(null, arguments); idx = arr.findIndex(equalsHandler); handler.revoke(); handler = null; if (idx >= 0) { arr[idx].revoke(); arr.splice(idx, 1); arr = null; /* Handler was successfully removed. / return !0; } arr = null; /* Handler failed to detached * because it doesn't exist. / return !1; }, /getEventHandler: function (type) { return this["on" + type]; }, setEventHandler: function (type, fn) { return this["on" + type] = fn, this; },/ clearEventHandlers: function () { Object.keys(this.handlers) .forEach(function (k) { this[k].forEach(invokeRevoke); this[k].length = 0; }, this.handlers); }, deliverEvent: function (evt) { if (this.invalid) { return !1; } if (evt._init && !evt._init(this)) { return !1; } evt.timeStamp = now(); evt.phase = EVENT_CAPTURING_PHASE; evt.originalTarget = this; evt.target = this; buildPath(this, evt.path); evt.currentTarget = root; propagateEvent(evt); evt.path.length = 0; evt.phase = EVENT_NONE; return !evt.defaultPrevented; } }; inherit(AppEventTarget, Component); }), // AppEventTarget (function () { Branch = function (conf) { AppEventTarget.call(this, conf); if (!this.children) { this.children = []; } }; var child_count, countChildren = function (comp) { if (comp.children && comp.children.length) { comp.children.forEach(countChildren); } child_count++; }; var found, prop_key, value, ctor, target, arr; var oneByEntry = function (comp) { if (comp.children && comp.children.length) { found = comp.children.find(oneByEntry); } if (ctor && !(comp instanceof ctor)) { return; } if (comp[prop_key] === value) { return !0; } }, combByEntry = function (comp) { if (comp.children && comp.children.length) { comp.children.forEach(combByEntry); } if (ctor && !(comp instanceof ctor)) { return; } if (comp[prop_key] === value) { arr.push(comp); } }, combByKey = function (comp) { if (comp.children && comp.children.length) { comp.children.forEach(combByKey); } if (ctor && !(comp instanceof ctor)) { return; } if (prop_key in comp) { arr.push(comp); } }; var idx, comp, conf1 = {}; Branch.prototype = { get firstChild() { return this.children[0] \|\| null; }, get lastChild() { return this.children.length ? this.children[this.children .length - 1] \|\| null : null; }, get nextSibling() { return this.parent ? ( idx = this.parent.children.indexOf(this), idx < 0 ? null : this.parent.children[idx+1] \|\| null ) : null; }, get previousSibling() { return this.parent ? ( idx = this.parent.children.indexOf(this), idx <= 0 ? null : this.parent.children[idx-1] \|\| null ) : null; }, get childCount() { child_count = 0; if (this.children.length) { this.children.forEach(countChildren); } return child_count; }, getChildByEntry: function (k, val, c) { prop_key = k; value = val; ctor = c; if (this.children.length) { found = this.children.find(oneByEntry); } ctor = value = null; return found \|\| null; }, getChildrenByEntry: function (k, val, c) { arr = []; prop_key = k; value = val; ctor = c; if (this.children.length) { this.children.forEach(combByEntry); } ctor = value = null; return arr.length ? arr : null; }, getChildrenByKey: function (k, c) { arr = []; prop_key = k; ctor = c; if (this.children.length) { this.children.forEach(combByKey); } return arr.length ? arr : null; }, /* HTML Node-like modify methods / appendChild: function (comp) { if (comp instanceof Component) { comp.parent = this; return this.children.push(comp), comp; } else { throw "Error: Only created " + "components can be appended."; } }, prependChild: function (comp) { if (comp instanceof Component) { comp.parent = this; return this.children.unshift(comp), comp; } else { throw "Error: Only created components " + "can be preappended."; } }, insertBefore: function (comp, ref) { if (comp instanceof Component) { idx = -1; if (ref instanceof Component) { idx = this.children.indexOf(ref); } /* If "idx" is -1 then push * it in at top of stack. / idx = idx < 0 ? this.children.length : idx; return comp.parent = this, this.children.splice(idx, 0, comp), comp; } else { throw "Error: Only created components " + "can be inserted."; } }, removeChild: function (comp) { return idx = this.children.indexOf(comp), idx >= 0 ? (comp.parent = null, this.children.splice(idx, 1), comp ) : null; }, / insertAfter: function (comp, ref) { return ref ? this.insertBefore(comp, ref.nextSibling) : this.insertBefore(comp); }, replaceChild: function (comp, ref) { if (comp.parent) { idx = comp.parent.children.indexOf(comp); if (idx >= 0) { comp.parent.children.splice(idx, 1); } } comp.parent = this; idx = this.children.indexOf(ref); if (idx < 0) { pjs._clearLogs(); pjs.println( "ReferenceError: cannot " + "find component to swap!" ); pjs.clearEventCallbacks(); pjs.cancelMainLoop(); } this.children.splice(idx, 1, comp); return ref.parent = null, ref; } / /* Timer creating methods / addTimeout: function (fn, delay) { conf1.parent = this; conf1.duration = delay; conf1.callback = fn; conf1.iterations = 0; comp = Timeout.create(conf1); if (arguments.length > 2) { /* Bind extra arguments * to the callback. / comp.callback = bind(fn, comp, Array.prototype.slice.call(arguments,2)); } return this.children.push(comp), comp; }, addUpdater: function (fn, dur, iter) { conf1.parent = this; conf1.duration = dur; conf1.callback = fn; conf1.iterations = iter \|\| 0; comp = Updater.create(conf1); return this.children.push(comp), comp; }, addImmediate: function (fn) { conf1.parent = this; conf1.callback = fn; comp = Immediate.create(conf1); conf1.parent = conf1.callback = null; return this.children.push(comp), comp; }, addFrequency: function (fn, d, dur, iter) { conf1.parent = this; conf1.duration = dur; conf1.delay = d; conf1.callback = fn; conf1.iterations = iter \|\| 1/0; comp = Frequency.create(conf1); return this.children.push(comp), comp; } }; inherit(Branch, AppEventTarget); }), // Branch // } // • Define transformation classes { (function () { Transform = function (conf) { Branch.call(this, conf); this.globalX = 0; this.globalY = 0; this.globalRotation = 0; this.globalXScale = 1; this.globalYScale = 1; this.y = conf.position ? (this.x = conf.position[0] \|\| 0, conf.position[1] \|\| 0) : (this.x = 0, 0); this.rotation = conf.rotation ? conf.rotation : 0; this.yScale = conf.scale ? (this.xScale = conf.scale[0] \|\| 1, conf.scale[1] \|\| 1) : (this.xScale = 1, 1); this.localX = this.x + 0; this.localY = this.y + 0; this.localRotation = this.rotation + 0; this.localXScale = this.xScale 1; this.localYScale = this.yScale * 1; this.positionHeritable = typeof conf .positionHeritable === "boolean" ? conf.positionHeritable : !0; this.rotationHeritable = typeof conf .rotationHeritable === "boolean" ? conf.rotationHeritable : !0; this.scaleHeritable = typeof conf .scaleHeritable === "boolean" ? conf.scaleHeritable : !0; }; var comp, conf1 = {}, conf2 = { end: [0, 0] }; Transform.prototype = { animatePropertyTo: function (d,k,e,c,t) { conf1.target = t \|\| this; conf1.parent = this; conf1.key = k; conf1.end = e; conf1.easing = c; conf1.duration = d; comp = PropertyAnimator.create(conf1); conf1.target = conf1.parent = null; return this.children.push(comp), comp; }, animateOpacityTo: function (d, e, c, t) { conf1.target = t \|\| this; conf1.parent = this; conf1.key = "opacity"; conf1.end = e>0.0001 ? e>1 ? 1 : e : 0.0001; conf1.easing = c; conf1.duration = d; comp = PropertyAnimator.create(conf1); conf1.target = conf1.parent = null; return this.children.push(comp), comp; }, animatePositionTo: function (d,x,y,c,t) { conf2.target = t \|\| this; conf2.parent = this; conf2.end[0] = x; conf2.end[1] = y; conf2.easing = c; conf2.duration = d; comp = PositionAnimator.create(conf2); conf2.target = conf2.parent = null; return this.children.push(comp), comp; }, animateSizeTo: function (d, w, h, c, t) { conf2.target = t \|\| this; conf2.parent = this; conf2.end[0] = w; conf2.end[1] = h; conf2.easing = c; conf2.duration = d; comp = SizeAnimator.create(conf2); conf2.target = conf2.parent = null; return this.children.push(comp), comp; }, addEmitter: function (which, target) { if (storage.get("use-special-FX")[0] === 0) { return; } if (!emitters[which]) { throw "ReferenceError: " + "requested emitter \"" + which + "\" doesn\'t exist!"; } comp = Emitter.create(emitters[which]); comp.target = target \|\| this; comp.parent = this; return this.children.push(comp), comp; } }; inherit(Transform, Branch); allocate(Transform, 8); }), // Transform (function () { Region = function (conf) { Transform.call(this, conf); this.setTooltipText(conf.tooltipText); this.cursor = conf.cursor\|\|DEFAULT_CURSOR; this.setSize(conf.width, conf.height, conf.rectMode); this.setShape(conf.shape); this.setFocusable(conf.focusable); this.setClickable(conf.clickable); this.setDraggable(conf.draggable); }; var toTriangleArray = (function () { var THIRD_TAU = Math.PI * 2 / 3, tri = [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ]; return function (x, y, rad) { tri[0].x = Math.cos(2THIRD_TAU)rad + x; tri[0].y = Math.sin(2THIRD_TAU)rad + y; tri[1].x = rad + x; tri[1].y = y; tri[2].x = Math.cos(THIRD_TAU)rad + x; tri[2].y = Math.sin(THIRD_TAU)rad + y; return tri; }; })(); var c, s, t, lx, ly, temp; Region.prototype = { isPointInside: function (x, y) { lx = this.localX; ly = this.localY; t = this.localRotation + (this.direction === LEFT ? 180 : 0); if (t !== 0) { c = Math.cos(t * DEG_TO_RAD); s = Math.sin(t * DEG_TO_RAD); temp = x; x = (c * (temp-lx) + s * (y-ly)) + lx; y = (-s* (temp-lx) + c * (y-ly)) + ly; } switch (this.shape) { case TRIANGLE: return isPointInsidePolygon(x, y, toTriangleArray(lx, ly, (this.widththis.localXScale) >> 1)); default: // RECTANGLE return isPointInsideRect(x, y, lx + this.offsetX, ly + this.offsetY, this.width, this.height); } }, _finalize: function () { Transform.prototype._finalize.call(this); delete this.tooltipText; }, setTangible: function (b) { delete this.tangible; this.tangible = typeof b==="boolean" ? b:!0; }, setTooltipText: function (v) { /NOTE: "tooltipText" can be set as an absolute value or getter function. / delete this.tooltipText; Object.setProperty(typeof v === "function" ? 0xA : 0x7, this, "tooltipText", v \|\| ""); }, setSize: function (w, h) { this.width = typeof w === "number" ? w : NATURAL_WIDTH; this.height = typeof h === "number" ? h : NATURAL_HEIGHT; if (arguments.length > 2) { this.setOffset(arguments[2]); } }, setOffset: function (mode) { switch (mode) { // rectangle offset mode case CENTER: this.offsetX = -this.width >> 1; this.offsetY = -this.height >> 1; break; default: // CORNER this.offsetX = 0; this.offsetY = 0; break; } if (arguments.length > 1) { this.offsetY += arguments[1]; } }, setShape: function (type) { this.shape = type \|\| RECTANGLE; }, setFocusable: function (b) { delete this.focusable; this.focusable=typeof b==="boolean"? b : !0; }, setClickable: function (b) { delete this.clickable; this.clickable=typeof b==="boolean"? b : !0; }, setDraggable: function (b) { delete this.draggable; this.draggable = !!b; } }; inherit(Region, Transform); allocate(Region, 26); }), // Region (function () { Drag = function (conf) { Region.call(this, conf); }; Drag.prototype = { setDraggable: function (b) { delete this.draggable; this.draggable=typeof b==="boolean"? b : !0; }, onmousedown: function (evt) { if ( this.draggable && evt.button === LEFT_BUTTON ) { cursorStyle = GRABBING_CURSOR; } }, onmousemove: function (evt) { if (this.draggable && !this.isSelected()) { cursorStyle = GRAB_CURSOR; } }, onmouseup: function (evt) { if (this.draggable) { cursorStyle = GRAB_CURSOR; } }, ondrag: function (evt) { if ( evt.buttons > 0 && evt.button === LEFT_BUTTON ) { this.parent.x += evt.movementX; this.parent.y += evt.movementY; } } }; inherit(Drag, Region); allocate(Drag, 2); }), // Drag // } // • Define simple visual classes { (function () { Easel = function (conf) { Region.call(this, conf); this.opacity = typeof conf .opacity === "number" ? conf.opacity : 1; if (conf.shaded) { this.setShadow( conf.shadowOffsetX, conf.shadowOffsetY, conf.shadowColor, conf.shadowBlur); } else { this.setShadow(0, 0, BLACK, 0); } if (conf.src) { var canvas = CanvasContent.get(conf.src), that = this; asap(function () { that.setCanvas(canvas); }); } else if (conf.canvas) { this.setCanvas(conf.canvas); } }; var isVisible = function () { return (this.localY + this.offsetY + this.height) >= 0 && (this.localY + this.offsetY) <= NATURAL_HEIGHT && (this.localX + this.offsetX + this.width) >= 0 && (this.localX + this.offsetX) <= NATURAL_WIDTH; }; Easel.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.canvas.revoke(); this.canvas = this.context = null; }, setVisible: function (b) { delete this.visible; if (typeof b === "boolean") { this.visible = b; } else { /NOTE: The getter below (that decides whether to make this * component renderable) only * works correctly on components * that are NOT rotated. / Object.setProperty(0xA, this, "visible", isVisible); } }, setShadow: function (x, y) { this.shadowOffsetX=typeof x==="number" ? x : 2; this.shadowOffsetY=typeof y==="number" ? y : 6; this.shadowColor = arguments[2] \|\| "rgba(0,0,0,0.6)"; this.shadowBlur = arguments[3]; if (typeof this.shadowBlur !== "number") { this.shadowBlur = 6; } this.widthShadowOffset=this.shadowOffsetX<<3; this.heightShadowOffset=this.shadowOffsetY<<3; }, setCanvas: function (src) { if (this.canvas) { this.canvas.revoke(); this.canvas = null; } if ( this.shadowOffsetX === 0 && this.shadowOffsetY === 0 ) { this.canvas = HTMLCanvasElement .create(src.width, src.height); this.context = this.canvas.getContext("2d"); this.context.clearRect( 0, 0, src.width, src.height); this.context.disableImageSmoothing(); if (src instanceof HTMLCanvasElement) { this.context.drawImage(src, 0, 0); } else if (src instanceof ImageData) { this.context.putImageData(src, 0, 0); } } else if (src instanceof HTMLCanvasElement) { this.canvas = CanvasContent.makeShaded( src,this.shadowOffsetX,this.shadowOffsetY, this.shadowColor, this.shadowBlur); this.context = this.canvas.getContext("2d"); } else { throw "Error: Could not set canvas on " + "instance of "+this.constructor.name+"!"; } }, paint: function (ctx) { if (this.localRotation === 0) { ctx.translate(this.localX\|0,this.localY\|0); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX, this.offsetY, this.width + this.widthShadowOffset, this.height + this.heightShadowOffset); ctx.globalAlpha = 1; ctx.translate(-this.localX\|0,-this.localY\|0); } else { ctx.save(); ctx.translate(this.localX\|0,this.localY\|0); ctx.rotate(this.localRotationDEG_TO_RAD); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX, this.offsetY, this.width + this.widthShadowOffset, this.height + this.heightShadowOffset); ctx.restore(); } } }; inherit(Easel, Region); allocate(Easel, 8); }), // Easel (function () { Graphic = function (conf) { Region.call(this, conf); this.opacity = typeof conf.opacity==="number" ? conf.opacity : 1; if (conf.src) { this.source = CanvasContent.get(conf.src); } else if (conf.source) { this.source = conf.source; } }; Graphic.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.source = null; }, setVisible: Easel.prototype.setVisible, paint: function (ctx) { if (this.localRotation === 0) { ctx.translate(this.localX\|0,this.localY\|0); ctx.globalAlpha = this.opacity; ctx.drawImage(this.source, this.offsetX, this.offsetY, this.width, this.height); ctx.globalAlpha = 1; ctx.translate(-this.localX\|0,-this.localY\|0); } else { ctx.save(); ctx.translate(this.localX\|0,this.localY\|0); ctx.rotate(this.localRotationDEG_TO_RAD); ctx.globalAlpha = this.opacity; ctx.drawImage(this.source, this.offsetX, this.offsetY, this.width, this.height); ctx.restore(); } } }; inherit(Graphic, Region); allocate(Graphic, 8); }), // Graphic (function () { Scene = function (conf) { Region.call(this, conf); this.setBackground(conf.src ? CanvasContent.get(conf.src) : null); }; Scene.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.background = null; }, setVisible: function (b) { this.visible=typeof b === "boolean"? b : !0; }, paint: function (ctx) { ctx.drawImage(this.background, 0, 0); }, setBackground: function (ele) { this.background = ele \|\| CanvasContent.get( toSelected(storage.get("menu-background")) .toLowerCase() + "-background"); }, addFader: function (which) { return this.appendChild( Fader.create(faders[which])); }, addAnnouncement: function (which) { return this.appendChild( assembleConfig(announcements[which])); } }; inherit(Scene, Region); allocate(Scene, 2); }), // Scene (function () { /* NOTE: The "textBaseline" property * of "CanvasRenderingContext2D" is * interpreted a little differently between * desktop and mobile browsers. * Use "loadFont" instead to get font * ascent and descent values. / Label = function (conf) { Transform.call(this, conf); this.setFont(conf.fontFamily, conf.fontSize); this.textAlign = conf.textAlign \|\| "center"; this.color = conf.color \|\| WHITE; this.opacity = typeof conf.opacity==="number"? conf.opacity : 1; if (!conf.shaded) { this.setShadow(0, 0, BLACK, 0); } else { this.setShadow( conf.shadowOffsetX, conf.shadowOffsetY, conf.shadowColor, conf.shadowBlur); } delete this.textContent; this.textContent = conf.textContent ? conf.textContent : ""; }; Label.prototype = { setVisible: Scene.prototype.setVisible, setFont: function (k, s) { k = k \|\| "serif"; s = s \|\| 24; if (this.fontFamily === k) { this.fontSize = s; return; } var pf = pjs.loadFont(k, s); this.fontFamily = k; this.fontSize = s; this._normalizedAscent = pf.ascent / s; this._normalizedDescent = pf.descent / s; }, setShadow: function (x, y) { this.shadowOffsetX=typeof x==="number"? x : 1; this.shadowOffsetY=typeof y==="number"? y : 1; this.shadowColor = arguments[2] \|\| "black"; //this.shadowBlur = arguments[3] \|\| 0; }, paint: function (ctx) { if (this.localRotation === 0) { ctx.translate(this.localX\|0,this.localY\|0); ctx.font = this.fontSize + "px " + this.fontFamily; ctx.globalAlpha = this.opacity; ctx.textAlign = this.textAlign; ctx.shadowColor = this.shadowColor; ctx.shadowOffsetX = this.shadowOffsetX; ctx.shadowOffsetY = this.shadowOffsetY; //ctx.shadowBlur = this.shadowBlur; ctx.fillStyle = this.color; ctx.fillText(this.textContent, 0, this._normalizedAscentthis.fontSize >> 1); ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.globalAlpha = 1; ctx.translate(-this.localX\|0,-this.localY\|0); } else { ctx.save(); ctx.translate(this.localX\|0,this.localY\|0); ctx.rotate(this.localRotationDEG_TO_RAD); ctx.font = this.fontSize + "px " + this.fontFamily; ctx.globalAlpha = this.opacity; ctx.textAlign = this.textAlign; ctx.shadowColor = this.shadowColor; ctx.shadowOffsetX = this.shadowOffsetX; ctx.shadowOffsetY = this.shadowOffsetY; //ctx.shadowBlur = this.shadowBlur; ctx.fillStyle = this.color; ctx.fillText(this.textContent, 0, this._normalizedAscentthis.fontSize>>1); ctx.restore(); } } }; inherit(Label, Transform); allocate(Label, 10); }), // Label // } // • Define timer classes { (function () { Timeout = function (conf) { Timer.call(this, conf); this.callback = conf.callback; }; Timeout.prototype = { _finalize: function () { this.callback = this.parent = null; }, end: function () { if (!this.invalidated) { this.callback(); } this.invalidated = !0; } }; inherit(Timeout, Timer); allocate(Timeout, 42); Immediate = function (conf) { Component.call(this, conf); this.callback = conf.callback; }; Immediate.prototype = { _finalize: Timeout.prototype._finalize, setUpdatable: Timer.prototype.setUpdatable, update: function (time) { this.callback(); this.end(); } }; inherit(Immediate, Component); allocate(Immediate, 4); Updater = function (conf) { Timer.call(this, conf); this.callback = conf.callback; }; Updater.prototype = { _finalize: Timeout.prototype._finalize, update: function (time) { Timer.prototype.update.call(this, time); this.callback( this.duration > 0 && this.elapsedTime > 0 ? this.elapsedTime < this.duration ? this.elapsedTime / this.duration : 1 : 0 ); } }; inherit(Updater, Timer); allocate(Updater, 9); Frequency = function (conf) { Timer.call(this, conf); this.callback = conf.callback; this.latency = typeof conf.delay === "number" ? conf.delay * (1000 / FPS) \| 0 : 0; this.latencyStartTime = 0; }; Frequency.prototype = { _finalize: Timeout.prototype._finalize, restart: function () { this.elapsedTime = this.startTime = 0; this.latencyStartTime = 0; }, update: function (time) { if (!this.latencyStartTime) { this.latencyStartTime = time; } this.elapsedLatency = time - this.latencyStartTime; if (this.elapsedLatency > this.latency) { if (this.startTime === 0) { this.startTime = time - this.elapsedTime; } else { this.elapsedTime = time - this.startTime; } this.callback(); if (this.elapsedTime > this.duration) { this.restart(); } } } }; inherit(Frequency, Timer); allocate(Frequency, 2); }), // } // • Define animator classes { (function () { var cubic_beziers = { /*In CSS: "cubic-bezier(0.42, 0, 0.58, 1)" / "linear": [0, 0, 1, 1], "ease": [0.25, 0.1, 0.25, 1], "ease-in": [0.42, 0, 1, 1], "ease-out": [0, 0, 0.58, 1], "ease-in-out": [0.42, 0, 0.58, 1], "start": [0, 0.1, 0.8, 1], "stop": [0, 0.333, 1, 1], "card-stop": [0, 0.4, 1, 1] }, getCubicBezierPoint = (function () { var u, m; return function (arr, n) { /** This method returns a zero to one * fraction derived from cubic bezier * point values contained within the * array instance. / return u = n n, m = u * n, arr[0] * (-1 * m + 3 * u - 3 * n + 1) + arr[3] * m + arr[1] * (3 * m - 6 * u + 3 * n) + arr[2] * (-3 * m + 3 * u); }; })(); PropertyAnimator = function (conf) { Timer.call(this, conf); this.target = conf.target; this.key = conf.key; this.startValue = conf.start \|\| this.target[this.key]; this.endValue = conf.end; this.curve=cubic_beziers[conf.easing\|\|"linear"]; }; PropertyAnimator.prototype = { _finalize: function () { this.target = this.parent = null; }, update: function (time) { Timer.prototype.update.call(this,time); this.setProgress( getCubicBezierPoint(this.curve, this.elapsedTime > 0 ? this.elapsedTime < this.duration ? this.elapsedTime/this.duration : 1 : 0)); }, end: function () { this.target[this.key] = this.endValue; this.invalidated = !0; }, setProgress: function (n) { this.target[this.key] = this.startValue + ((this.endValue - this.startValue) * n); } }; inherit(PropertyAnimator, Timer); allocate(PropertyAnimator, 13); PositionAnimator = function (conf) { Timer.call(this, conf); this.target = conf.target; if (conf.start) { this.startX = conf.start[0]; this.startY = conf.start[1]; this.target.x = this.startX; this.target.y = this.startY; } else { this.startX = this.target.x; this.startY = this.target.y; } this.endX = conf.end[0]; this.endY = conf.end[1]; this.distX = this.endX - this.startX; this.distY = this.endY - this.startY; this.curve=cubic_beziers[conf.easing\|\|"linear"]; }; PositionAnimator.prototype = { _finalize: PropertyAnimator.prototype._finalize, update: PropertyAnimator.prototype.update, end: function () { this.target.x = this.endX; this.target.y = this.endY; this.invalidated = !0; }, setProgress: function (n) { this.target.x = this.startX+this.distXn \| 0; this.target.y = this.startY+this.distYn \| 0; } }; inherit(PositionAnimator, Timer); allocate(PositionAnimator, 8); SizeAnimator = function (conf) { Timer.call(this, conf); this.target = conf.target; if (conf.start) { this.startWidth = conf.start[0]; this.startHeight = conf.start[1]; this.target.width = this.startWidth; this.target.height = this.startHeight; } else { this.startWidth = this.target.width; this.startHeight = this.target.height; } this.endWidth = conf.end[0]; this.endHeight = conf.end[1]; this.distWidth = this.endWidth-this.startWidth; this.distHeight=this.endHeight-this.startHeight; this.curve=cubic_beziers[conf.easing\|\|"linear"]; }; SizeAnimator.prototype = { _finalize: PropertyAnimator.prototype._finalize, update: PropertyAnimator.prototype.update, end: function () { this.target.width = this.endWidth; this.target.height = this.endHeight; this.target.offsetX = -this.endWidth >> 1; this.target.offsetY = -this.endHeight >> 1; this.invalidated = !0; }, setProgress: function (n) { this.target.width = this.startWidth + this.distWidth * n \| 0; this.target.height = this.startHeight + this.distHeight * n \| 0; this.target.offsetX = -this.target.width>>1; this.target.offsetY = -this.target.height>>1; } }; inherit(SizeAnimator, Timer); allocate(SizeAnimator, 13); }), // } // • Define fader class { (function () { var q, u, v, a, prop_dist = NATURAL_WIDTH / 7 >> 1, x_space = NATURAL_WIDTH / 7 \| 0, y_space = Math.ceil(NATURAL_HEIGHT / 4), x_half = x_space >> 1, y_half = y_space >> 1; Fader = function (conf) { Timer.call(this, conf); this.paint = conf.paint; this.progress = 0; }; Fader.prototype = { _finalize: function () { Timer.prototype._finalize.call(this); this.render = null; }, setVisible: Scene.prototype.setVisible, update: function (time) { Timer.prototype.update.call(this, time); this.progress = this.elapsedTime > 0 ? this.elapsedTime < this.duration ? this.elapsedTime / this.duration : 1 : 0; } }; inherit(Fader, Timer); allocate(Fader, 1); faders = { "ease-out": { duration: 20, paint: function (ctx) { a = this.progress; ctx.setFillStyle(0, a); ctx.fillRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "ease-in": { duration: 20, paint: function (ctx) { a = this.progress; ctx.setFillStyle(0, 1 - a); ctx.fillRect(0, 0, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "horizontal-swipe-out": { duration: 20, paint: function (ctx) { a = this.progress; q = NATURAL_WIDTH - NATURAL_WIDTH * a \| 0; ctx.setFillStyle(0, a); ctx.fillRect(-q, 0, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillRect(q, 0, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "horizontal-swipe-in": { duration: 20, paint: function (ctx) { a = this.progress; q = NATURAL_WIDTH * a \| 0; ctx.setFillStyle(0, 1 - a); ctx.fillRect(-q, 0, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillRect(q, 0, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "vertical-swipe-out": { duration: 20, paint: function (ctx) { a = this.progress; q = NATURAL_HEIGHT - NATURAL_HEIGHT * a \| 0; ctx.setFillStyle(0, a); ctx.fillRect(0, -q, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillRect(0, q, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "vertical-swipe-in": { duration: 20, paint: function (ctx) { a = this.progress; q = NATURAL_HEIGHT * a \| 0; ctx.setFillStyle(0, 1 - a); ctx.fillRect(0, -q, NATURAL_WIDTH, NATURAL_HEIGHT); ctx.fillRect(0, q, NATURAL_WIDTH, NATURAL_HEIGHT); } }, "diamond-out": { duration: 40, paint: function (ctx) { a = this.progress; q = (prop_dist - 1) * a; ctx.setFillStyle(0, a); u = 0; while (u < 7) { v = 0; while (v < 4) { ctx.beginPath(); ctx.moveTo(u * x_space, v * y_space); ctx.lineTo(x_space + u * x_space, v * y_space); ctx.lineTo(x_half + q + u * x_space, y_half + v * y_space); ctx.lineTo(x_space + u * x_space, y_space + v * y_space); ctx.lineTo(u * x_space, y_space + v * y_space); ctx.lineTo(x_half + -q + u * x_space, y_half + v * y_space); ctx.fill(); ctx.closePath(); v++; } u++; } } }, "diamond-in": { duration: 40, paint: function (ctx) { a = this.progress; q = prop_dist - (prop_dist - 1) * a; ctx.setFillStyle(0, 1 - a); u = 0; while (u < 7) { v = 0; while (v < 4) { ctx.beginPath(); ctx.moveTo(u * x_space, v * y_space); ctx.lineTo(x_space + u * x_space, v * y_space); ctx.lineTo(x_half + q + u * x_space, y_half + v * y_space); ctx.lineTo(x_space + u * x_space, y_space + v * y_space); ctx.lineTo(u * x_space, y_space + v * y_space); ctx.lineTo(x_half + -q + u * x_space, y_half + v * y_space); ctx.fill(); ctx.closePath(); v++; } u++; } } } }; }), // } // • Define special effects classes { (function () { Emitter = function (conf) { Transform.call(this, conf); this.emitCount = 0; this.totalToEmit = conf.totalToEmit; this.emitLatency = conf.emitLatency * (1000 / FPS) \| 0; this.waitStart = 0; this.addParticle = conf.addParticle; this.startTime = 0; this.elapsedTime = 0; }; Emitter.prototype = { _finalize: function () { Transform.prototype._finalize.call(this); this.target = this.addParticle = null; }, setUpdatable: Timer.prototype.setUpdatable, pause: Timer.prototype.pause, resume: Timer.prototype.resume, update: function (time) { if (this.startTime === 0) { this.startTime = time - this.elapsedTime; } else { this.elapsedTime = time - this.startTime; } if (this.emitCount <= this.totalToEmit) { if (this.waitStart === 0) { this.waitStart = this.elapsedTime; } if ( (this.elapsedTime - this.waitStart) > this.emitLatency ) { this.prependChild(this.addParticle()); this.emitCount++; this.waitStart = 0; } } else if (this.children.length === 0) { this.end(); } } }; inherit(Emitter, Transform); allocate(Emitter, 6); Particle = function (conf) { /*NOTE: This component is a cross between an updater component and * an image component. / Graphic.call(this, conf); this.duration=typeof conf.duration==="number"? conf.duration (1000 / 60) \| 0 : 0; this.iterations = 0; this.startTime = 0; this.elapsedTime = 0; this.callback = conf.callback; }; Particle.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.callback = this.source = null; }, setTangible: function (b) { delete this.tangible; this.tangible = !1; }, setVisible: Scene.prototype.setVisible, setUpdatable: Timer.prototype.setUpdatable, pause: Timer.prototype.pause, resume: Timer.prototype.resume, cancel: Timer.prototype.cancel, end: function () { if (!this.invalidated) { this.callback(1); } this.invalidated = !0; }, update: function (time) { Timer.prototype.update.call(this,time); this.callback(this.elapsedTime > 0 ? this.elapsedTime < this.duration ? this.elapsedTime / this.duration : 1 : 0); } }; inherit(Particle, Graphic); allocate(Particle, 32); var x, y, n, rate, veloX, veloY, accelX, accelY, generatePositions = function (comp,dur,l) { if (!comp.xPositions) { comp.xPositions = []; } if (!comp.yPositions) { comp.yPositions = []; } comp.xPositions.length = 0; comp.yPositions.length = 0; comp.xPositions.length = l; comp.yPositions.length = l; rate = dur / l; veloX = (-0.5 + Math.random() * 1) * rate; veloY = (-1 + Math.random() * 2) * rate; accelX = -6 + Math.random() * 10; accelY = -8; x = comp.x; y = comp.y; n = 0; while (n < l) { accelX += 0; // force accelY += (24 / (comp.width * 1.2) * rate); veloX += accelX; veloY += accelY; accelY = accelX = 0; comp.xPositions[n] = (x += veloX * rate); comp.yPositions[n] = (y += veloY * rate); n++; } }; var conf1 = { position: [0, 0], scaleHeritable: !1, rectMode: CENTER, callback: function (progress) { this.x = this.xPositions[ (this.xPositions.length-1)progress \| 0]; this.y = this.yPositions[ (this.yPositions.length-1)progress \| 0]; this.rotation=this.rotationDistanceprogress; this.yScale = this.xScale = (1 - progress); if (progress > 0.3) { this.opacity = 1 - ((progress-0.3)1.42); } } }, comp, arr; emitters = { "card-sparks": { totalToEmit: 6, emitLatency: 4, addParticle: function () { conf1.duration = 32 + Math.random()8 \| 0; conf1.width = 30 + Math.random() 30 \| 0; conf1.height = conf1.width; conf1.position[0] = this.target.x + ((-this.target.width >> 1) + Math.random()this.target.width>>1)\|0; conf1.position[1] = this.target.y + ((-this.target.height >> 1) + Math.random()this.target.height>>1)\|0; conf1.src = this.target.faceColor+"-spark"; comp = Particle.create(conf1); comp.rotationDistance = (-6 + Math.random() * 12) * conf1.duration; comp.opacity = 1; generatePositions(comp,conf1.duration,250); return comp; } }, "announcement-sparks": { totalToEmit: 28, emitLatency: 3, addParticle: function () { conf1.duration = 32 + Math.random()8 \| 0; conf1.width = 36 + Math.random() 36 \| 0; conf1.height = conf1.width; conf1.position[0] = this.target.x + ((-this.target.width >> 1) + Math.random() * this.target.width) \| 0; conf1.position[1] = this.target.y + ((-this.target.height >> 1) + Math.random() * this.target.height) \| 0; arr = Object.keys(card_face_colors); conf1.src = arr[ Math.random()arr.length \| 0]+"-spark"; arr = null; comp = Particle.create(conf1); comp.rotationDistance = (-6 + Math.random() 12) * conf1.duration; comp.opacity = 1; generatePositions(comp,conf1.duration,250); return comp; } } }; }), // } // • Define abstract interaction classes { (function () { Button = function (conf) { Region.call(this, conf); this.down = !1; this.unclickableCursor = conf .unclickableCursor \|\| "not-allowed"; this.clickableTooltipText = conf .clickableTooltipText; this.unclickableTooltipText = conf .unclickableTooltipText \|\| "This button is not active."; this.direction = this.shape === RECTANGLE ? null : conf.direction \|\| RIGHT; }; Button.prototype = { setTooltipText: function (v) { delete this.tooltipText; if (typeof v === "string") { this.tooltipText = v; } else if (typeof v === "function") { Object.setProperty( 0xA, this, "tooltipText", v); } else { Object.setProperty(0xA, this, "tooltipText", function () { return this.clickable ? this.clickableTooltipText : this.unclickableTooltipText; }); } }, setOffset: function (m, y) { this.offsetX = -this.width >> 1; this.offsetY = -this.height >> 1; if (arguments.length > 1) { this.offsetY += y; } }, setClickable: function (b) { delete this.clickable; this.clickable=typeof b==="boolean"? b : !0; }, setDraggable: Drag.prototype.setDraggable }; inherit(Button, Region); }), // Button // } // • Define complex visual classes { (function () { MenuBar = function (conf) { Easel.call(this, conf); this.y = -56; var that = this, canvas=CanvasContent.makeMenubar(conf.title); asap(function () { that.setCanvas(canvas); canvas.revoke(); canvas = null; }); this.addTimeout(function () { this.parent.animatePositionTo( 26, this.parent.x, 0, "stop"); }, 40); }; MenuBar.prototype = { setVisible: Scene.prototype.setVisible, setSize: function (w, h) { this.width = w \|\| NATURAL_WIDTH; this.height = h \|\| 42; if (arguments.length > 2) { this.setOffset(arguments[2]); } } }; inherit(MenuBar, Easel); allocate(MenuBar, 2); }), // MenuBar (function () { var cancelUpdater = function (btn) { if (btn.updater) { btn.updater.cancel(); btn.updater = null; } }, setActiveCanvas = function (btn, idx) { btn.canvas = btn.cache[getCacheKey(btn,idx)]; }, resetUp = function (btn) { cancelUpdater(btn); setActiveCanvas(btn, 0); btn.down = !1; btn.pressScale = 1; }, releaseUp = function (btn) { setActiveCanvas(btn, FRAME_COUNT - 1); btn.down = !1; btn.pressScale = 1; }, pressDown = function (btn) { setActiveCanvas(btn, FRAME_COUNT); btn.down = !0; btn.pressScale = 0.94; }, callResetUp = function () { resetUp(this.parent); }, callPressDown = function () { pressDown(this.parent); }, getCacheKey = function (btn, idx) { return btn.direction + "-" + btn.textContent + "-" + btn.shape + "-" + btn.color + "-" + idx; }, FRAME_COUNT = 16, addUpdater = function (btn) { btn.updater = btn.addUpdater( function (progress) { if (progress === 1) { setActiveCanvas(btn, FRAME_COUNT - 1); btn.updater = null; return; } setActiveCanvas(btn,FRAME_COUNTprogress\|0); }, FRAME_COUNT); }; MenuButton = function (conf) { Button.call(this, conf); this.pressScale = 1; /⬇ This will be the text displayed on the button. / this.textContent = conf.textContent \|\| ""; this.setFont(conf.fontFamily, conf.fontSize); this.color = conf.color; this.shadowColor = "rgba(0,0,0,0.6)"; this.shadowOffsetX = this.width / 75 \| 0; this.shadowOffsetY = this.height / 8.5 \| 0; this.shadowBlur = 6; this.widthShadowOffset = this.shadowOffsetX<<3; this.heightShadowOffset = this.shadowOffsetY<<3; this.cache = conf.cache \|\| activeCache; var that = this, n = 0, k; asap(function (lastTime) { while (n <= FRAME_COUNT) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } k = getCacheKey(that, n); if (!(k in that.cache)) { that.cache[k] = CanvasContent.makeButton( that, n, n === FRAME_COUNT); } n++; } asap(function () { setActiveCanvas(that, 0); }); }); }; MenuButton.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.cache = this.canvas = null; this.updater = null; }, setFont: Label.prototype.setFont, setVisible: Easel.prototype.setVisible, setClickable: function (b) { Button.prototype.setClickable.call(this, b); this.opacity = this.clickable ? 1 : 0.4; }, paint: function (ctx) { if (this.localRotation === 0) { ctx.translate(this.localX\|0,this.localY\|0); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX this.pressScale \| 0, this.offsetY * this.pressScale \| 0, (this.widthShadowOffset + this.width) * this.pressScale \| 0, (this.heightShadowOffset + this.height) * this.pressScale \| 0); ctx.globalAlpha = 1; ctx.translate(-this.localX\|0,-this.localY\|0); } else { ctx.save(); ctx.translate(this.localX\|0,this.localY\|0); ctx.rotate(this.localRotationDEG_TO_RAD); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX this.pressScale \| 0, this.offsetY * this.pressScale \| 0, (this.widthShadowOffset+this.width) * this.pressScale \| 0, (this.heightShadowOffset+this.height) * this.pressScale \| 0); ctx.restore(); } }, activateClick: function () { this.clickable = !0; this.opacity = 0.4; this.animateOpacityTo(8, 1); }, deactivateClick: function () { this.clickable = !1; this.opacity = 1; this.animateOpacityTo(8, 0.4); cancelUpdater(this); this.addImmediate(callResetUp); }, toggleClickable: function () { if (this.clickable) { this.activateClick(); } else { this.deactivateClick(); } }, onmouseenter: function (evt) { if (this.clickable) { cursorStyle = POINTER_CURSOR; if (this.isSelected() && evt.buttons > 0) { this.addImmediate(callPressDown); } else { cancelUpdater(this); addUpdater(this); } } }, onmouseleave: function () { if (this.clickable) { cancelUpdater(this); this.addImmediate(callResetUp); } }, ondragexit: function () { if (this.clickable) { cancelUpdater(this); this.addImmediate(callResetUp); } }, onmousedown: function (evt) { cursorStyle = this.clickable ? (evt.button === LEFT_BUTTON && (cancelUpdater(this), this.addImmediate(callPressDown)), POINTER_CURSOR) : this.unclickableCursor; }, onmousemove: function () { cursorStyle = this.clickable ? POINTER_CURSOR : this.unclickableCursor; }, onmouseup: function () { cursorStyle = this.clickable ? (cancelUpdater(this), this.addImmediate(function () { releaseUp(this.parent); }), POINTER_CURSOR) : this.unclickableCursor; } }; inherit(MenuButton, Button); allocate(MenuButton, 24); }), // MenuButton (function () { var resplice = (function () { var siblings, self_idx, ref_idx, idx, l; return function (target) { self_idx = 0x1FFFFFFFFFFFFF; siblings = target.parent.children; l = siblings.length; ref_idx = l + 0; idx = -1; while (++idx < l) { if (siblings[idx] === target) { self_idx = idx; continue; } if ( !(siblings[idx] instanceof Card) && idx >= self_idx ) { ref_idx = idx; break; } } siblings.splice(self_idx, 1); siblings.splice(ref_idx - 1, 0, target); siblings = null; }; })(); var MAX_ASCEND = 1.06, FACTOR = (MAX_ASCEND-1)/3; var cancelUpdater = function (card) { if (card.updater) { card.updater.cancel(); card.updater = null; } }, descend = function (card) { var remaining = card.ascendScale - 1; cancelUpdater(card); if (remaining <= 0) { return; } card.updater = card.addUpdater( function (progress) { card.ascendScale = MAX_ASCEND + (-remaining * progress); if (progress === 1) { card.ascendScale = 1; card.updater = null; } }, Math.round(remaining / FACTOR)); }, ascend = function (card) { var remaining = MAX_ASCEND - card.ascendScale; cancelUpdater(card); if (remaining <= 0) { return; } card.updater = card.addUpdater( function (progress) { card.ascendScale = 1 + remainingprogress; if (progress === 1) { card.ascendScale = MAX_ASCEND; card.updater = null; } }, Math.round(remaining / FACTOR)); }, cancelFlip = function (card) { card.flipScale = 1; if (card.flipUpdater) { if (!card.flipped) { card.toggleFaceDown(); card.flipped = !0; } card.flipUpdater.cancel(); card.flipUpdater = null; } }, flip = function (card) { cancelFlip(card); card.flipped = !1; card.flipUpdater = card.addUpdater( function (progress) { if (progress <= 0.5) { card.flipScale = 1 - 2 progress; } else { if (!card.flipped) { card.toggleFaceDown(); card.flipped = !0; } card.flipScale = 2 * (progress - 0.5); if (progress === 1) { card.flipScale = 1; card.flipUpdater = null; descend(card); } } }, 20); }; Card = function (conf) { Region.call(this, conf); this.opacity = typeof conf. opacity === "number" ? conf.opacity : 1; this.ascendScale = 1; this.flipScale = 1; this.movable = typeof conf. movable === "boolean" ? conf.movable : !1; this.rotatable = typeof conf. rotatable==="boolean" ? conf.rotatable : !0; this.resizable = typeof conf .resizable==="boolean"?conf.resizable : !0; this.resplicable = typeof conf .resplicable==="boolean"?conf.resplicable:!1; this.moving = !1; this.clickableTooltipText = conf.tooltipText \|\| "Click to flip over."; this.movableTooltipText = "Hold down left " + "mouse button to drag or click to flip over."; this.unclickableTooltipText = conf .unclickableTooltipText \|\| "This card cannot be turned over."; this.faceColor = conf.faceColor; this.faceChar = conf.faceChar; this.backPattern = conf.backPattern; this.backColor = conf.backColor; this.backColor2 = conf.backColor2 \|\| this.backColor; this.faceKey = this.faceColor + "-" + this.faceChar + "-card-face"; this.backKey = this.backColor + "-" + this.backColor2 + "-" + this.backPattern + "-card-back"; this.cache = conf.cache \|\| activeCache; if (!(this.backKey in this.cache)) { this.cache[this.backKey] = CanvasContent .makeCardBack(this.backPattern, this.backColor, this.backColor2); } if (!(this.faceKey in this.cache)) { this.cache[this.faceKey] = CanvasContent .makeCardFace(this.faceChar,this.faceColor); } this.setFaceDown(typeof conf .faceDown==="boolean"? conf.faceDown : !1); this.score = conf.score \|\| 0; this.originalScore = this.score + 0; this.matched = !1; }; Card.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.cache = this.canvas = null; }, setVisible: Scene.prototype.setVisible, setDraggable: Drag.prototype.setDraggable, setResizable: function (b) { this.resizable = typeof b==="boolean"?b : !0; }, setTooltipText: function (v) { delete this.tooltipText; if (typeof v === "string") { this.tooltipText = v; } else { Object.setProperty(0xA, this, "tooltipText", function () { return this.clickable ? this.movable ? this.movableTooltipText : this.clickableTooltipText : this.unclickableTooltipText; }); } }, setSize: function (w, h) { this.width = w \|\| 80; this.height = h \|\| 116; if (arguments.length > 2) { this.setOffset(arguments[2]); } }, setOffset: Button.prototype.setOffset, paint: function (ctx) { if (this.localRotation === 0) { ctx.translate(this.localX\|0,this.localY\|0); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX * this.ascendScale * this.flipScale \| 0, this.offsetY * this.ascendScale \| 0, this.width * this.ascendScale * this.flipScale \| 0, this.height * this.ascendScale \| 0); ctx.globalAlpha = 1; ctx.translate(-this.localX\|0,-this.localY\|0); } else { ctx.save(); ctx.translate(this.localX\|0,this.localY\|0); ctx.rotate(this.localRotationDEG_TO_RAD); ctx.globalAlpha = this.opacity; ctx.drawImage(this.canvas, this.offsetX this.ascendScale * this.flipScale \| 0, this.offsetY * this.ascendScale \| 0, this.width * this.ascendScale * this.flipScale \| 0, this.height * this.ascendScale \| 0); ctx.restore(); } }, setFaceDown: function (b) { this.faceDown = !!b; this.canvas = this.cache[this.faceDown ? this.backKey : this.faceKey]; }, toggleFaceDown: function () { this.setFaceDown(!this.faceDown); }, flipUp: function () { if (!this.flipUpdater) { ascend(this); if (this.faceDown) { flip(this); } } }, flipDown: function () { if (!this.flipUpdater) { ascend(this); if (!this.faceDown) { flip(this); } } }, flipOver: function () { if (!this.flipUpdater) { ascend(this); flip(this); } }, fadeAway: function () { cancelFlip(this); descend(this); this.animateSizeTo(12, 0, 0); this.addTimeout(function () { this.parent.end(); }, 12); this.animateOpacityTo(12, 0); }, onmouseenter: function () { cursorStyle = this.movable ? ALL_SCROLL_CURSOR : POINTER_CURSOR; if (this.clickable) { ascend(this); } }, onmouseleave: function () { descend(this); }, ondragexit: function () { if (this.clickable) { if (!this.movable \|\| this.rotatable) { descend(this); } } }, onmousedown: function (evt) { if (this.clickable) { if (this.resplicable) { resplice(this); } switch (evt.button) { case LEFT_BUTTON: cursorStyle = this.movable ? GRABBING_CURSOR : POINTER_CURSOR; break; case RIGHT_BUTTON: if (this.rotatable) { cursorStyle = ALIAS_CURSOR; } break; } ascend(this); } }, onmousemove: function () { cursorStyle = this.clickable ? this.movable ? GRAB_CURSOR : POINTER_CURSOR : NOT_ALLOWED_CURSOR; }, onmouseup: function (evt) { cursorStyle = this.clickable ? (this.isSelected() && evt.button === LEFT_BUTTON && !this.moving && this.flipOver(), this.movable ? (this.moving && (this.moving = !1, descend(this)), GRAB_CURSOR) : POINTER_CURSOR) : NOT_ALLOWED_CURSOR; }, onwheel: function (evt) { if (this.clickable && this.resizable) { cursorStyle = CARD_RESIZE_CURSOR; this.width -= evt.deltaY/100this.width; this.height -= evt.deltaY/100this.height; this.offsetX = -this.width >> 1; this.offsetY = -this.height >> 1; } }, ondrag: function (evt) { if (this.clickable && evt.buttons > 0) { switch (evt.button) { case LEFT_BUTTON: if (this.movable) { this.x += evt.movementX; this.y += evt.movementY; this.moving = !0; } break; case RIGHT_BUTTON: if (this.rotatable) { this.rotation += ( evt.movementX + evt.movementY); } break; } } } }; inherit(Card, Region); allocate(Card, 36); }), // Card (function () { InputFieldLabel = function (conf) { Label.call(this, conf); }; InputFieldLabel.prototype = { _finalize: function () { Label.prototype._finalize.call(this); this.updater = null; }, paint: function (ctx) { ctx.font=this.fontSize+"px "+this.fontFamily; ctx.globalAlpha = this.opacity; ctx.textAlign = this.textAlign; ctx.shadowColor = this.shadowColor; ctx.shadowOffsetX = this.shadowOffsetX; ctx.shadowOffsetY = this.shadowOffsetY; //ctx.shadowBlur = this.shadowBlur; ctx.fillStyle = this.color; ctx.fillText(this.textContent, this.localX, this.localY + (this._normalizedAscentthis.fontSize>>1)); if (this._cursorVisible) { ctx.fillRect( (ctx.measureText(this.textContent) .width >> 1) + this.localX, this.localY + 9, 18, 2); this._cursorVisible = !1; } ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.globalAlpha = 1; } }; inherit(InputFieldLabel, Label); allocate(InputFieldLabel, 6); }), // InputFieldLabel (function () { var conf1 = { localName: "field-label", position: [-1, -1], textContent: "", fontSize: -1, shaded: !0 }, conf2 = { localName: "hightlight", tangible: !1, opacity: 0, rectMode: CENTER, src: "cyan-highlight", visible: !0 }, blurredTooltipText = "Click to focus " + "the keyboard to this for input.", focusedTooltipText = "Type on " + "your keyboard to enter characters " + "into this. The backspace key " + "removes one character and the " + "delete key clears the entry. "+ "To confirm press the enter key " + "or click anywhere off the text " + "entry window.", addUpdater = function (label) { label.updater = label.addFrequency( function () { this.parent._cursorVisible = !0; }, 30, 30, 1/0); }, cancelUpdater = function (label) { if (label.updater) { label.updater.cancel(); label.updater = null; } }; InputField = function (conf) { Region.call(this, conf); this.buffer = conf.buffer \|\| ""; this.prevBuffer = this.buffer; this.savedBuffer = this.buffer; this.maxInputLength = typeof conf .maxInputLength === "number" ? conf.maxInputLength : 8; this.fontSize = conf.fontSize; conf1.position[0] = this.width >> 1; conf1.position[1] = this.height >> 1; conf1.textContent = this.buffer; conf1.fontSize = this.fontSize \|\| 24; this.label = this.appendChild( InputFieldLabel.create(conf1)); }; InputField.prototype = { _finalize: function () { Region.prototype._finalize.call(this); this.label = this.highlight = null; }, setTooltipText: function (v) { delete this.tooltipText; if (typeof v === "string") { this.tooltipText = v; } else { Object.setProperty(0xA, this, "tooltipText", function () { return this.hasFocus() ? focusedTooltipText : blurredTooltipText; }); } }, refreshLabelText: function () { this.label.textContent = this.buffer; }, keepBuffer: function () { this.prevBuffer = this.buffer; }, onfocus: function () { this.buffer = ""; this.refreshLabelText(); if (!this.label.updater) { addUpdater(this.label); } if (!this.immediate && !this.highlight) { conf2.width = this.width + 88; // 310 conf2.height = this.height + 18; // 62 var that = this; this.immediate = this.addImmediate( function () { that.highlight = that.appendChild( Graphic.create(conf2)); that.highlight.x += that.width >> 1; that.highlight.y += that.height >> 1; that.highlight.animateSizeTo( 10, that.width, that.height); that.highlight.animateOpacityTo(10, 1); that.immediate = null; }); } }, onblur: function () { if (this.buffer.length === 0) { this.buffer = this.prevBuffer; } this.refreshLabelText(); if (this.label.updater) { cancelUpdater(this.label); } if (this.highlight) { this.highlight.animateOpacityTo(10, 0); this.highlight.addTimeout( function () { this.parent.end(); }, 10); this.highlight = null; } }, onmousedown: function () { cursorStyle = TEXT_CURSOR; }, onmousemove: function () { cursorStyle = this.hasFocus() ? TEXT_CURSOR : ZOOM_IN_CURSOR; }, onmouseup: function () { if (this.hasFocus()) { cursorStyle = TEXT_CURSOR; } }, onkeydown: function (evt) { switch (evt.keyCode) { case 8: // BACKSPACE if (this.buffer.length) { this.buffer = this.buffer.substr( 0, this.buffer.length - 1); } break; case 127: // DELETE this.buffer = ""; break; case 10: // ENTER this.blur(); break; } this.refreshLabelText(); }, onkeypress: function (evt) { if (this.buffer.length < this.maxInputLength) { this.buffer += evt.key; this.refreshLabelText(); } } }; inherit(InputField, Region); allocate(InputField, 6); }), // InputField (function () { ScrollTab = function (conf) { Easel.call(this, conf); this.setShadow(1, 3, null, 5); var canvas = CanvasContent.get("scroll-tab"), that = this; asap(function () { that.setCanvas(canvas); }); this.minY = conf.minY \|\| 0; this.maxY = conf.maxY; this.scrollRange = pjs.dist( 0, this.minY, 0, this.maxY); }; ScrollTab.prototype = { setVisible: Scene.prototype.setVisible, setSize: function (w, h) { this.width = 30; this.height = 22; if (arguments.length > 2) { this.setOffset(arguments[2]); } }, setOffset: Button.prototype.setOffset, setDraggable: Drag.prototype.setDraggable, moveTo: function (y) { this.y = y < this.minY ? this.minY : y > this.maxY ? this.maxY : y; }, scrollTo: function (y) { if (this.updater) { this.updater.cancel(); this.updater = null; } this.updater = this.animatePositionTo( 16, this.x, y < this.minY ? this.minY : y > this.maxY ? this.maxY : y); }, onmousedown: function (evt) { if (evt.button === LEFT_BUTTON) { cursorStyle = GRABBING_CURSOR; } }, onmousemove: function () { cursorStyle = GRAB_CURSOR; }, onmouseup: function () { cursorStyle = GRAB_CURSOR; }, ondrag: function (evt) { if (evt.button === LEFT_BUTTON) { cursorStyle = GRABBING_CURSOR; this.moveTo(evt.y - this.globalY); } } }; inherit(ScrollTab, Easel); allocate(ScrollTab, 1); }), // ScrollTab (function () { var conf1 = { type: ScrollTab, tooltipText: "Hold down the left " + "button to drag up and down.", localName: "scrolltab", position: [15, 11], minY: 11, maxY: 349 }; ScrollBar = function (conf) { Easel.call(this, conf); var canvas = CanvasContent.get("scroll-bar"), that = this; asap(function () { that.setCanvas(canvas); }); that.appendChild(assembleConfig(conf1)); that.addTimeout(function () { that.animatePositionTo( 46, NATURAL_WIDTH - 46, that.y, "stop"); }, 20); }; ScrollBar.prototype = { setSize: function () { this.width = 30; this.height = 360; this.setOffset(); } }; inherit(ScrollBar, Easel); allocate(ScrollBar, 2); }), // ScrollBar (function () { var conf1 = { localName: "scroll-bar", position: [NATURAL_WIDTH + 400, 73], shaded: !0, draggable: !0 }, conf2 = { type: Region, localName: "page", position: [0, 46], height: 496, draggable: !0 }; // page ScrollScene = function (conf) { Scene.call(this, conf); this.minPageY = conf.minPageY; this.maxPageY = conf.maxPageY \|\| 0; this.pageScrollRange = pjs.dist( 0, this.minPageY, 0, this.maxPageY); conf2.height = conf.pageHeight; conf2.children = conf.pageChildren; this.page = this.appendChild( assembleConfig(conf2)); conf2.children = null; this.appendChild(ScrollBar.create( conf.scrollbar \|\| conf1)); this.tab = this.children[1].firstChild; this.scrollMovement = 112; var that = this; that.addEventHandler("wheel", function (evt) { if (evt.deltaY < 0) { // Down that.tab.scrollTo( that.tab.y - that.scrollMovement (that.tab.scrollRange / that.pageScrollRange)); that.scrollPageTo( that.page.y + that.scrollMovement); } else if (evt.deltaY > 0) { // Up that.tab.scrollTo( that.tab.y + that.scrollMovement * (that.tab.scrollRange / that.pageScrollRange)); that.scrollPageTo( that.page.y - that.scrollMovement); } }, !0); that.addEventHandler("drag", function (evt) { if (evt.target === that.tab) { that.movePageTo(that.maxPageY + (evt.y - evt.target.globalY - evt.target.height / 2) * -1 * (that.pageScrollRange/ that.tab.scrollRange)); return; } evt.stopImmediatePropagation(); if (evt.target instanceof Button) { return; } if (evt.button === LEFT_BUTTON) { that.tab.moveTo(that.tab.y-evt.movementY * (that.tab.scrollRange / that.pageScrollRange)); that.movePageTo( that.page.y - evt.movementY * -1); } }, !0); }; ScrollScene.prototype = { movePageTo: function (y) { this.page.y = y < this.minPageY ? this.minPageY : y > this.maxPageY ? this.maxPageY : y; }, scrollPageTo: function (y) { if (this.page.updater) { this.page.updater.cancel(); this.page.updater = null; } this.page.updater = this.page .animatePositionTo(16, this.page.x, y < this.minPageY ? this.minPageY : y > this.maxPageY ? this.maxPageY : y); } }; inherit(ScrollScene, Scene); allocate(ScrollScene, 1); }), // ScrollScene // } // • Define panel classes { (function () { var conf1 = { localName: "header", tooltipText: "", width: -1, height: 34, draggable: !0 }, // header conf2 = { localName: "label-display", position: [53, 39], width: 120, height: 40 }, // label-display conf3 = { localName: "selection-label", position: [113, 60], fontSize: 23 }, // selection-label conf4 = { localName: "left-arrow", shape: TRIANGLE, direction: LEFT, position: [33, 58], width: 46, height: 46, color: "" }, // left-arrow conf5 = { localName: "right-arrow", shape: TRIANGLE, direction: RIGHT, position: [193, 58], width: 46, height: 46, color: "" }; // right-arrow SelectionPanel = function (conf) { Easel.call(this, conf); this.selectedIndex = storage.get( conf.localName)[0]; this.lastSelectedIndex = this.selectedIndex+0; this.collection=storage.get(conf.localName)[1]; if (this.leftTooltipTexts) { this.leftTooltipTexts.length = 0; } else { this.leftTooltipTexts = []; } if (this.rightTooltipTexts) { this.rightTooltipTexts.length = 0; } else { this.rightTooltipTexts = []; } if (this.displayTooltipTexts) { this.displayTooltipTexts.length = 0; } else { this.displayTooltipTexts = []; } if (conf.displayTooltipTexts) { Array.prototype.push.apply( this.displayTooltipTexts, conf.displayTooltipTexts); if (conf.displayTooltipTexts.length === 2) { this.leftTooltipTexts[0] = "This button " + "can only switch this option off."; this.leftTooltipTexts[1]="Switch this off."; this.rightTooltipTexts[0]="Switch this on."; this.rightTooltipTexts[1] = "This button " + "can only switch this option on."; } } var that = this, ctx, pf, title = conf.title, titleTooltipText = conf.titleTooltipText, w = conf.width, clr = conf.buttonColor, tray = CanvasContent.get("small-tray"), canvas = CanvasContent.get("status-view"); asap(function () { that.setCanvas(tray); }, function () { pf = pjs.loadFont("serif", 27); ctx = that.context; ctx.save(); ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.shadowColor = WHITE; ctx.shadowOffsetY = 1; ctx.shadowOffsetX = 1; ctx.fillText(title, 113, 18+pf.ascent/2); ctx.setShadowColor(0, 0.6); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 6; ctx.drawImage(canvas, 53, 39); ctx.restore(); }, function () { conf1.tooltipText = titleTooltipText; conf1.width = w; that.header = that.appendChild( Region.create(conf1)); that.display = that.appendChild( Region.create(conf2)); that.label = that.appendChild( Label.create(conf3)); }, function () { conf4.color = clr; that.leftButton = that.appendChild( MenuButton.create(conf4)); }, function () { conf5.color = clr; that.rightButton = that.appendChild( MenuButton.create(conf5)); }, function () { that.addEventHandler("click", function (evt) { switch (evt.region) { case "left-arrow": // { if (that.selectedIndex > 0) { that.selectedIndex--; that.label.fontSize = 26; that.label.animatePropertyTo( 8, "fontSize", 23); if ( that.selectedIndex === 0 && that.leftButton.clickable ) { that.leftButton.deactivateClick(); } } if ( that.selectedIndex !== (that .collection.length - 1) && !that.rightButton.clickable ) { that.rightButton.activateClick(); } that.refresh(); break; // } case "right-arrow": // { if ( that.selectedIndex !== (that .collection.length - 1) ) { that.selectedIndex++; that.label.fontSize = 26; that.label.animatePropertyTo( 8, "fontSize", 23); if ( that.selectedIndex === (that .collection.length - 1) && that.rightButton.clickable ) { that.rightButton.deactivateClick(); } } if ( that.selectedIndex > 0 && !that.leftButton.clickable ) { that.leftButton.activateClick(); } that.refresh(); break; // } } }, !0); that.checkButtons(); that.refresh(); }); }; SelectionPanel.prototype = { _finalize: function () { Easel.prototype._finalize.call(this); this.header = this.display = this.label = null; this.leftButton = this.rightButton = null; }, setDraggable: Drag.prototype.setDraggable, setSize: function (w, h) { this.width = 226; this.height = 90; if (arguments.length > 2) { this.setOffset(arguments[2]); } }, refresh: function () { this.refreshLabelText(); this.display.setTooltipText( this.displayTooltipTexts[this.selectedIndex] ); this.leftButton.setTooltipText( this.leftTooltipTexts[this.selectedIndex]); this.rightButton.setTooltipText( this.rightTooltipTexts[this.selectedIndex]); }, refreshLabelText: function () { this.label.textContent = this.collection[ this.selectedIndex]; }, setTooltipTexts: function (arr, s) { arr.forEach(function (ele, idx) { if (s) { if (ele === "Random A") { this.displayTooltipTexts[idx] = "" + "Choose one of the other " + "settings at random each " + "round during a game."; } else if (ele === "Random B") { this.displayTooltipTexts[idx] = "" + "Choose one of the other " + "settings at random each game."; } else { this.displayTooltipTexts [idx] = s.replace("%s", ele); } } if (!idx) { this.leftTooltipTexts[idx] = "There " + "are no more options " + "in this direction."; } else { if (arr[idx - 1] === "Random A") { this.leftTooltipTexts[idx] = "Set " + "this to Random Each Round."; } else if (arr[idx - 1] === "Random B") { this.leftTooltipTexts[idx] = "Set " + "this to Random Each Game."; } else { this.leftTooltipTexts[idx] = "Set " + "this to " + arr[idx - 1] + "."; } } if (idx === arr.length - 1) { this.rightTooltipTexts[idx] = "There " + "are no more options " + "in this direction."; } else { if (arr[idx + 1] === "Random A") { this.rightTooltipTexts[idx] = "Set " + "this to Random Each Round."; } else if (arr[idx + 1] === "Random B") { this.rightTooltipTexts[idx] = "Set " + "this to Random Each Game."; } else { this.rightTooltipTexts[idx] = "Set " + "this to " + arr[idx + 1] + '.'; } } }, this); }, checkButtons: function () { this.leftButton.setClickable(!0); this.rightButton.setClickable(!0); if (this.selectedIndex === 0) { this.leftButton.setClickable(!1); } else if ( this.selectedIndex === (this .collection.length - 1) ) { this.rightButton.setClickable(!1); } }, resetSelectedValue: function () { this.selectedIndex = this.prevSelectedIndex; }, getSelectedValue: function () { return this.collection[this.selectedIndex]; }, saveSelectedValue: function () { storage.set(this.localName, [this.prevSelectedIndex = this .selectedIndex, this.collection]); } }; inherit(SelectionPanel, Easel); allocate(SelectionPanel, 8); }), // SelectionPanel (function () { var conf1 = { localName: "header", height: 34, draggable: !0 }, // header conf2 = { localName: "input-field", position: [12,39], width: 202, height: 40 }; // input-field InputFieldPanel = function (conf) { Easel.call(this, conf); var that = this, ctx, pf, title = conf.title, titleTooltipText = conf.titleTooltipText, w = conf.width, ln = conf.localName, l = conf.maxInputLength, tray = CanvasContent.get("small-tray"), canvas = CanvasContent.get("field-view"); asap(function () { that.setCanvas(tray); conf1.tooltipText = titleTooltipText; conf1.width = w; conf2.buffer = storage.get(ln); conf2.maxInputLength = l; }, function () { pf = pjs.loadFont("serif", 27); ctx = that.context; ctx.save(); ctx.fillStyle = BLACK; ctx.font = pf.css; ctx.textAlign = "center"; ctx.shadowColor = WHITE; ctx.shadowOffsetY = 1; ctx.shadowOffsetX = 1; ctx.fillText(title, 113, 18+pf.ascent/2); ctx.setShadowColor(0, 0.6); ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 6; ctx.drawImage(canvas, 12, 39); ctx.restore(); }, function () { that.header = that.appendChild( Region.create(conf1)); that.input = that.appendChild( InputField.create(conf2)); }); }; InputFieldPanel.prototype = { setDraggable: Drag.prototype.setDraggable, _finalize: function () { Easel.prototype._finalize.call(this); this.header = this.input = null; }, setSize: SelectionPanel.prototype.setSize, resetSelectedValue: function () { this.input.buffer = this.input.savedBuffer; }, getSelectedValue: function () { return this.input.buffer; }, saveSelectedValue: function () { storage.set(this.localName, (this.input.savedBuffer = (this.input .prevBuffer = this.input.buffer))); } }; inherit(InputFieldPanel, Easel); allocate(InputFieldPanel, 8); }), // InputFieldPanel (function () { var conf1 = { localName: "header", height: 41 }, // header conf2 = { localName: "display", position: [12, 43], draggable: !0 }, // display conf3 = { tooltipText: "Hold down the left button " + "to drag up and down.", localName: "scrolltab", position: [-1, -1] }, parseItems = (function () { var item; return function (acc, k) { item = storage.get(k); if (isArray(item)) { item = toSelected(item); acc.push([k.toRegularCase() + ":", ( item==="Random A" ? "Random Each Round" : item==="Random B" ? "Random Each Game" : item)]); } else if (item) { acc.push([k.toRegularCase()+":", item]); } return acc; }; })(), projectImageData = function (d) { d.projectionImageData.data.set( d.sourceImageData.data.subarray( (d.projectionY << 2) * d.sourceImageData.width, ((d.projectionY << 2) * d.sourceImageData.width) + (d.projectionImageData.height * d.projectionImageData.width << 2)-1), 0); d.context.putImageData( d.projectionImageData, 12, 43); }; ListDialog = function (conf) { Easel.call(this, conf); var that = this, textContent, titleTooltipText = conf.titleTooltipText, w = conf.width, drag = typeof conf.draggable === "boolean" ? conf.draggable : !1, displayTooltipText = conf.displayTooltipText, dh = conf.displayHeight \|\| conf.height - 54, dts = conf.displayTextSize \|\| 19; if ( typeof conf.setDisplayTextContent==="function" ) { var callback = conf.setDisplayTextContent; asap(function () { textContent = callback.call(that); }); } else if (conf.storageItemNames) { var items = conf.storageItemNames; asap(function () { textContent = items.reduce(parseItems, []); }); } else { textContent = conf.displayTextContent \|\| ""; } asap(function () { var canvas = CanvasContent.makeText( that.width - 24, dts, textContent); asap(function () { conf1.tooltipText = titleTooltipText; conf1.width = w; conf1.draggable = drag; conf2.tooltipText = displayTooltipText; conf2.height = dh; that.header = that.appendChild( Drag.create(conf1)); that.display = that.appendChild( Region.create(conf2)); }, function () { that.displayScrollRange = canvas .height - that.display.height; if (that.displayScrollRange > 0) { that.display.setTooltipText( "Scroll up or down to view more text."); } that.display.width = that.width - 24 + ( that.displayScrollRange > 0 ? -28 : 0); if (that.displayScrollRange < 0) { that.displayScrollRange = 0; } that.sourceImageData = canvas .getContext("2d").getImageData( 0, 0, that.display.width, canvas.height); }, function () { that.projectionImageData = canvas .getContext("2d").createImageData( that.display.width, that.displayScrollRange > 0 ? that.display.height : that.sourceImageData.height); canvas.revoke(); }, function () { canvas = CanvasContent.makeDialog( that.width, that.height, that.display.height, conf.title, that.displayScrollRange > 0); if (that.displayScrollRange > 0) { conf3.position[0] = that.width - 19; conf3.position[1] = 48; conf3.minY = 48; conf3.maxY = that.display.height + 37; that.tab = that.appendChild( ScrollTab.create(conf3)); that.scrollMovement = 40; that.addEventHandler("wheel", function (evt) { if (evt.target === that.display) { if (evt.deltaY < 0) { // Down that.tab.scrollTo(that.tab.y - that.scrollMovement * (that.tab.scrollRange / that.displayScrollRange)); that.scrollProjectionTo( that.projectionY - that.scrollMovement); } else if (evt.deltaY > 0) { // Up that.tab.scrollTo(that.tab.y + that.scrollMovement * (that.tab.scrollRange / that.displayScrollRange)); that.scrollProjectionTo( that.projectionY + that.scrollMovement); } } }, !0); that.addEventHandler("drag", function (evt) { if (evt.target === that.tab) { that.moveProjectionTo( (evt.y - that.display.localY) * (that.displayScrollRange / that.tab.scrollRange)); } else if (evt.target === that.display) { evt.stopImmediatePropagation(); if (evt.button === LEFT_BUTTON) { that.tab.moveTo( that.tab.y - evt.movementY * (that.tab.scrollRange / that.displayScrollRange)); that.moveProjectionTo( that.projectionY - evt.movementY); } } }, !0); } asap(function () { that.setCanvas(canvas); canvas.revoke(); }, function () { if (that.tab && typeof conf.tabYStart === "number" ) { if (conf.tabYStart < 0) { that.projectionY = 0; } else { that.projectionY = conf .tabYStart>that.displayScrollRange? that.displayScrollRange : conf.tabYStart; that.tab.y = 48 + that.projectionY * (that.tab.scrollRange / that.displayScrollRange); } } else { that.projectionY = 0; } projectImageData(that); }); }); }); }; ListDialog.prototype = { _finalize: function () { Easel.prototype._finalize.call(this); this.tab = this.header = this.display = null; }, setVisible: Scene.prototype.setVisible, moveProjectionTo: function (y) { this.projectionY = y < 0 ? 0 : y > this.displayScrollRange ? this.displayScrollRange : y; projectImageData(this); }, scrollProjectionTo: function (y) { if (this.updater) { this.projectionUpdater.cancel(); this.updater.cancel(); } this.projectionUpdater = this .animatePropertyTo(16, "projectionY", y < 0 ? 0 : y > this.displayScrollRange ? this.displayScrollRange : y); this.updater = this.addUpdater( function () { projectImageData(this.parent); }, 16); } }; inherit(ListDialog, Easel); allocate(ListDialog, 2); }), // ListDialog // } // • Define card game component classes { (function () { ScoreLabel = function (conf) { Label.call(this, conf); this.setTextContent = conf.setTextContent; }; ScoreLabel.prototype = { animateFont: function () { if (this.parent.active) { this.fontSize = 24; this.animatePropertyTo(8, "fontSize", 20); } } }; inherit(ScoreLabel, Label); allocate(ScoreLabel, 21); FadeLabel = function (conf) { Label.call(this, conf); this.animatePositionTo(40, this.x, this.y-30); this.addTimeout(function () { this.parent.animatePropertyTo( 30, "fontSize", 8, "ease-out"); }, 40); this.addTimeout(function () { this.parent.animateOpacityTo(40, 0); }, 30); this.addTimeout(function () { this.parent.end(); }, 70); }; inherit(FadeLabel, Label); allocate(FadeLabel, 12); TimerLabel = function (conf) { Label.call(this, conf); this.shouldCountDown = typeof conf .shouldCountDown === "boolean" ? conf.shouldCountDown : !1; this.beginTime = typeof conf .beginTime === "number" ? conf.beginTime : 0; this.reversedUpdate = !1; this.reset(); }; var addUpdater = function (comp) { comp.updater = comp.addUpdater( function (progress) { comp.color = mapColor(comp.reversedUpdate ? 1 - progress : progress, 0, 1, "rgb(255,255,255)", "rgb(255,0,0)"); if (progress === 1) { comp.reversedUpdate = !comp.reversedUpdate; } }, 30, 1/0); }, cancelUpdater = function (comp) { if (comp.updater) { comp.updater.cancel(); comp.updater = null; } }; TimerLabel.prototype = { setUpdatable: Timer.prototype.setUpdatable, reset: function () { this.setUpdatable(!1); this.timedOut = !1; this.startTime = this.elapsedTime = 0; this.color = WHITE; this.textContent=toTimerFormat(this.beginTime); this.started = this.stopped = !1; }, start: function () { this.startTime = 0; this.setUpdatable(!0); this.started = !0; this.stopped = !1; }, resume: function () { if (!this.stopped) { this.startTime = 0; if (this.started) { this.setUpdatable(!0); } } }, pause: function () { this.setUpdatable(!1); }, stop: function () { cancelUpdater(this); this.setUpdatable(!1); this.stopped = !0; }, stopCountdown: function () { this.timedOut = !0; this.textContent = "00:00.00"; cancelUpdater(this); this.addImmediate(function () { this.parent.color = "red"; }); game.endRound(); }, update: function (time) { if (this.startTime === 0) { this.startTime = time - this.elapsedTime; } else { this.elapsedTime = time - this.startTime; } if (this.shouldCountDown) { if ((this.beginTime-this.elapsedTime) > 0) { this.textContent = toTimerFormat( this.beginTime - this.elapsedTime); if ( !this.updater && (this.beginTime-this.elapsedTime)<=20000 ) { addUpdater(this); } } else { this.stopCountdown(); } } else { this.textContent = toTimerFormat( this.elapsedTime); } } }; inherit(TimerLabel, Label); allocate(TimerLabel, 1); }), // card game label components (function () { var conf1 = { localName: "cards-for-match-label", position: [99, 18], textContent: "", fontSize: 20, shaded: !1 }, // cards-for-match-label conf2 = { localName: "match-style-label", position: [99, 46], textContent: "", fontSize: 20, shaded: !1 }, // match-style-label conf3 = { localName: "cards-each-match-region", tooltipText: "This is the number " + "of cards that need to be " + "matched at a time during this round.", position: [0, 5], width: 136, height: 26 }, // cards-for-match-region conf4 = { localName: "match-style-region", tooltipText: "This is how the cards " + "are matched during this round. "+ "COLOR means that only colors " + "can be matched, "+ "SHAPE means that only shapes " + "can be matched, "+ "and ANY means colors and or " + "shapes can be matched.", position: [0, 33], width: 136, height: 26 }; // match-style-region StatusBar = function (conf) { Easel.call(this, conf); var that = this, canvas = CanvasContent.get("status-bar"); asap(function () { that.setCanvas(canvas); conf1.textContent = game.cardsForMatch; conf2.textContent = game .matchStyle.toProperCase(); }, function () { that.cardsForMatchLabel = that.appendChild( ScoreLabel.create(conf1)); that.matchStyleLabel = that.appendChild( ScoreLabel.create(conf2)); that.appendChild(Region.create(conf3)); that.appendChild(Region.create(conf4)); that.addTimeout(function () { that.animatePositionTo(20, 292, 0, "stop"); }, 26); }); }; StatusBar.prototype = { _finalize: function () { Easel.prototype._finalize.call(this); this.cardsForMatchLabel = null; this.matchStyleLabel = null; }, setSize: function () { this.width = 136; this.height = 64; this.setOffset(); }, refresh: function () { if ( this.cardsForMatchLabel .textContent !== game.cardsForMatch ) { this.cardsForMatchLabel.animateFont(); } this.cardsForMatchLabel .textContent = game.cardsForMatch; if ( this.matchStyleLabel.textContent !== game .matchStyle.toProperCase() ) { this.matchStyleLabel.animateFont(); } this.matchStyleLabel.textContent = game .matchStyle.toProperCase(); } }; inherit(StatusBar, Easel); allocate(StatusBar, 1); }), // StatusBar (function () { var conf1 = { localName: "timer-label", position: [99, 31], fontSize: 20, shaded: !1 }, // timer-label conf2 = { localName: "time-display-region", tooltipText: "This is the game timer. "+ "It displays the elapsed time over a " + "started round. It doesn\'t start " + "until a card has been clicked.", position: [0, 17], width: NATURAL_WIDTH >> 2, height: 26 }; // time-display-region TimerBar = function (conf) { Easel.call(this, conf); var that = this, canvas = CanvasContent.get("timer-bar"); asap(function () { that.setCanvas(canvas); conf1.beginTime = game.maxTimeForRound; conf1.shouldCountDown=game.maxTimeForRound>0; }, function () { game.timer = (that.label = that .appendChild(TimerLabel.create(conf1))); that.appendChild(Region.create(conf2)); that.addTimeout(function () { that.animatePositionTo( 20, NATURAL_WIDTH - 150, 0, "stop"); }, 26); }); }; TimerBar.prototype = { _finalize: function () { Easel.prototype._finalize.call(this); this.label = null; }, setSize: function () { this.width = NATURAL_WIDTH >> 2; this.height = 64; this.setOffset(); } }; inherit(TimerBar, Easel); allocate(TimerBar, 1); }), // TimerBar (function () { var conf1 = { localName: "left-button", tooltipText: "Pause the game.", textContent: "Pause", position: [48, 16], width: 96, height: 32, fontSize: 24, color: "cyan" }, // left-button conf2 = { localName: "right-button", clickableTooltipText: "View the current rules implemented.", unclickableTooltipText: "This isn\'t available yet!", textContent: "Rules", position: [NATURAL_WIDTH - 48, 16], width: 96, height: 32, fontSize: 24, color: "red", clickable: !0 }, // right-button conf3 = { localName: "round-label", position: [NATURAL_WIDTH >> 1, 16], fontSize: 27, shaded: !0, color: "black", shadowColor: "rgb(215,215,215)", setTextContent: function (value) { this.textContent = "Round " + value + "/" + game.roundsEachGame; this.parent.setTooltipText( "This is round " + game.roundNumber + " out of " + game.roundsEachGame + "."); } }; // round-label GameBar = function (conf) { Graphic.call(this, conf); this.source = CanvasContent .makeMenubar("", this.height); var that = this; asap(function () { that.appendChild(MenuButton.create(conf1)); that.appendChild(MenuButton.create(conf2)); }, function () { that.roundLabel = that.appendChild( ScoreLabel.create(conf3)); that.roundLabel.setTextContent(1); that.addTimeout(function () { that.animatePositionTo( 20, 0, NATURAL_HEIGHT - 32, "stop"); }, 46); that.addEventHandler("click", function (evt) { if (evt.target instanceof Button){ disableUI(); switch (evt.region) { case "left-button": // { evt.target.onmouseleave(evt); evt.target.addImmediate( function () { this.parent .addImmediate(showPauseTray); }); break; // } case "right-button": evt.target.onmouseleave(evt); evt.target.addImmediate( function () { this.parent .addImmediate(showRulesDialog); }); break; } evt.stopImmediatePropagation(); } }, !0); }); }; GameBar.prototype = { _finalize: function () { Graphic.prototype._finalize.call(this); this.roundLabel = null; }, setSize: function () { this.width = NATURAL_WIDTH; this.height = 32; this.setOffset(); } }; inherit(GameBar, Graphic); allocate(GameBar, 1); }), // GameBar (function () { var conf1 = { localName: "name-label", position: [10, 16], textContent: "", fontSize: 22, shaded: !0, textAlign: "left" }, // name-label conf2 = { localName: "score-label", position: [105, 47], textContent: "", fontSize: 20, shaded: !1, color: WHITE, setTextContent: function (value) { this.textContent = game.numberOfPlayers > 1 ? value + "" : (this.color = value >= game .pointsToWinRound ? "green" : "red", value + "/" + game.pointsToWinRound); if (player) { this.animateFont(); } } }, // score-label conf3 = { localName: "wins-label", position: [234, 18], fontSize: 20, shaded: !1, color: "red" }, // wins-label conf4 = { localName: "trys-label", position: [234, 47], textContent: "0", fontSize: 20, shaded: !1, color: "white" }, // trys-label conf5 = { localName: "name-region", position: [5,5], width: 140, height: 24 }, // name-region conf6 = { localName: "points-region", position: [5, 33], width: 140, height: 26 }, // points-region conf7 = { localName: "wins-region", position: [146, 5], width: 118, height: 26 }, // wins-region conf8 = { localName: "trys-region", position: [146, 33], width: 118, height: 26 }; // trys-region PlayerBar = function (conf) { Easel.call(this, conf); this.score = conf.score \|\| 0; this.number = conf.number; this.name = conf.name; this.winCount = 0; this.lossCount = 0; this.tryCount = 0; this.cpu = conf.cpu; var that = this; asap(function () { conf1.textContent = that.name; conf3.textContent = "0/"+game.winsToWinGame; conf5.tooltipText = "This is " + that.name + "\'s user name and color. "+ "These can be changed under " + "the options menu."; conf6.tooltipText = "The left " + "number is how many points " + that.name + " has won during " + "this round making matches " + "and the right is the total " + "points that need to be obtained " + "in order to win this round."; conf7.tooltipText = "This is " + "the wins display. " + "The left number is how many " + "rounds " + that.name + " has won during this game " + "and the right is how many " + "rounds need to be won in " + "order to win the game."; conf8.tooltipText = "This is " + "how many times " + that.name + " has attempted to match a " + "set of cards during this round."; }, function () { that.nameLabel = that.appendChild( Label.create(conf1)); that.scoreLabel = that.appendChild( ScoreLabel.create(conf2)); that.scoreLabel.setTextContent(that.score); that.winsLabel = that.appendChild( ScoreLabel.create(conf3)); that.trysLabel = that.appendChild( ScoreLabel.create(conf4)); }, function () { that.appendChild(Region.create(conf5)); that.appendChild(Region.create(conf6)); that.appendChild(Region.create(conf7)); that.appendChild(Region.create(conf8)); }); }; PlayerBar.prototype = { setUpdatable: Component.prototype.setUpdatable, show: function () { this.setActive(!0); this.animatePositionTo(20, 0, 0, "stop"); }, hide: function () { this.animatePositionTo( 20, 0, -(this.height + 10), "start"); this.addTimeout(function () { this.parent.setActive(!1); }, 20); }, incrementWinCount: function () { this.winCount++; this.winsLabel.textContent = this.winCount + "/" + game.winsToWinGame; this.winsLabel.color = this .winCount>=game.winsToWinGame?"green":"red"; this.winsLabel.animateFont(); }, incrementTryCount: function () { this.trysLabel.textContent = ++this.tryCount; this.trysLabel.animateFont(); }, reset: function () { this.score = 0; this.scoreLabel.setTextContent(this.score); this.scoreLabel.animateFont(); this.trysLabel.textContent = this.tryCount = 0; this.trysLabel.animateFont(); } }; inherit(PlayerBar, Easel); allocate(PlayerBar, 4); }), // PlayerBar // } // } // ▲ Define card game class module { (function () { var gameNumber = 0, roundCache = clone(null), userdata = {}, resultsData = [], collectedResults = [], playerbars = [], playersByOrder = [], playerIndex, selectedCards = [], cardTable = null, endRound, roundEnded, clickedChars = {}, clickedColors = {}, roundTryCount = 0, roundMatchCount = 0, handlePlayerTurn, clearRoundCache, MAX_GAME_COUNT_RESULTS = 10; var prepareUserData = (function () { var getRandom = function (arr) { return arr[Math.random()(arr.length-2)\|0]; }, setRandomGetter = function (k, arr) { delete userdata[k]; Object.setProperty(0xB, userdata, k, function () { return arr[Math.random()(arr.length-2)\|0]; }); }; return function () { storage.each(function (ele, k) { delete userdata[k]; if (isArray(ele)) { switch (toSelected(ele)) { case "Random A": setRandomGetter(k, ele[1]); return; case "Random B": userdata[k] = getRandom(ele[1]); return; default: userdata[k] = toSelected(ele); } } else { userdata[k] = ele; } }); }; })(), defineGameFields = (function () { var ele; return function () { Object.keys(userdata) .forEach(function (k) { /** Return could be from * a value or getter. / ele = userdata[k]; if (isNumber(+ele)) { game[k.toCamelCase()] = +ele; } else if (typeof ele === "string") { game[k.toCamelCase()] = (ele === "On" \|\| ele === "Off") ? ele === "On" : !k.endsWith("name") ? ele.toLowerCase() : ele; } }); switch (game.cardBackPattern) { case "diamonds": game.cardBackPattern = 1; break; case "squares": game.cardBackPattern = 2; break; } /* Override "match-style" if * "deal-style" is set to * something other that "default". / switch (game.dealStyle) { case "same clr": case "diff clrs": game.matchStyle = "shape"; break; case "same shp": case "diff shps": game.matchStyle = "color"; break; } switch (game.timeCountdown) { case "easy": game.maxTimeForRound = game .cardsEachRound 3000 \| 0; break; case "normal": game.maxTimeForRound = game .cardsEachRound * 2500 \| 0; break; case "hard": game.maxTimeForRound = game .cardsEachRound * 2000 \| 0; break; case "expert": game.maxTimeForRound = game .cardsEachRound * 1250 \| 0; break; default: game.maxTimeForRound = 0; } switch (game.pointDifficulty) { case "easy": game.pointsRatioToWinRound = 0.5 - game.pointsEachCard / 144; break; case "normal": game.pointsRatioToWinRound = 0.6 - game.pointsEachCard / 144; break; case "hard": game.pointsRatioToWinRound = 0.7 - game.pointsEachCard / 144; break; case "expert": game.pointsRatioToWinRound = 0.8 - game.pointsEachCard / 144; break; default: throw "Error: Game difficulty " + "level not found!"; } game.pointsToWinRound = game.cardsEachRound * game.pointsEachCard * game.pointsRatioToWinRound \| 0; game.maxRoundLosses = Math.ceil( game.roundsEachGame / 2); game.totalRoundMatches = game.cardsEachRound / game.cardsForMatch \| 0; }; })(), setupStatusBars = (function () { var conf_table = { localName: "card-table", height: NATURAL_HEIGHT, tangible: !1 }, conf_stat = { localName: "status-bar", position: [292, -74], shaded: !0 }, // status-bar conf_timer = { localName: "timer-bar", position: [NATURAL_WIDTH + 10, 0], shaded: !0 }, conf_bar = { localName: "menu-bar", position: [0, NATURAL_HEIGHT + 42], visible: !0 }; // menu-bar return function () { cardTable = game.appendChild( Region.create(conf_table)); game.statusbar = game.appendChild( StatusBar.create(conf_stat)); if (game.numberOfPlayers === 1) { game.appendChild( TimerBar.create(conf_timer)); } game.menubar = game.appendChild( GameBar.create(conf_bar)); }; })(), setupPlayerBars = (function () { var conf1 = { className: "player-bar", position: [0, -74], width: 270, height: 64, shaded: !0, active: !1 }, n, p; return function () { n = 0; while (++n < (game.numberOfPlayers + 1)) { conf1.localName = "playerbar-" + n.toString().padStart(2, 0); conf1.cpu=game["player"+n+"CpuControlled"]; conf1.src = (!conf1.cpu ? game["player" + n + "Color"] : "gray" ) + "-player-bar"; conf1.number = n; conf1.name = game["player" + n + "Name"]; p = game.appendChild( PlayerBar.create(conf1)); playerbars.push(p); playersByOrder.push(p); } p = null; if (game.numberOfPlayers > 1) { game.sortPlayerOrder(); } player = playersByOrder[playerIndex = 0]; game.addTimeout(function () { player.show(); }, 26); }; })(), dealCards = (function () { /** This will be the labeling * array for the dealer. / var faces_to_sort = [], colors_to_sort = [], /* Copy active category as to * not modify the original. / possible_faces = [], /* Get an array of color names * to assign values. / possible_colors = null, /* Fill arrays with how many times a choice * can be made for a certain color or face. / color_choices = [], face_choices = [], count, j, n, m, l, q, r, face, clr, generateDealerData = function () { asap(function () { possible_faces = Array.prototype.slice .call(card_decks[game.deckCategory]); possible_colors = Object.keys( card_face_colors); count = game.cardsEachRound / game.cardsForMatch; l = possible_colors.length; j = Math.ceil(game.cardsEachRound / l); color_choices.length = 0; face_choices.length = 0; n = 0; }, function (lastTime) { while (n < l) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } color_choices.push(j); face_choices.push(j); n++; } n = -1; }); switch (game.dealStyle) { case "same shp": // { asap(function () { face = possible_faces[Math.random() possible_faces.length \| 0]; }, function (lastTime) { while (++n < count) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.random() * possible_colors.length \| 0; clr = possible_colors[q]; m = 0; while (m < game.cardsForMatch) { faces_to_sort.push(face); colors_to_sort.push(clr); m++; } if (--color_choices[q] === 0) { /** When a color has been * selected the max number * of times it is removed. / color_choices.splice(q, 1); possible_colors.splice(q, 1); } } }); return; // } case "same clr": // { asap(function () { clr = possible_colors[Math.random() possible_colors.length \| 0]; }, function (lastTime) { while (++n < count) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.random() * possible_faces.length \| 0; face = possible_faces[q]; m = 0; while (m < game.cardsForMatch) { faces_to_sort.push(face); colors_to_sort.push(clr); m++; } if (--face_choices[q] === 0) { /** Once the symbol is pushed * into the group so many times, * remove it so it can't be * chosen again. / face_choices.splice(q, 1); possible_faces.splice(q, 1); } } }); return; // } case "diff shps": // { asap(function (lastTime) { while (++n < count) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.random() possible_colors.length \| 0; clr = possible_colors[q]; m = 0; while (m < game.cardsForMatch) { r = Math.random() * possible_faces.length \| 0; face = possible_faces[r]; faces_to_sort.push(face); colors_to_sort.push(clr); /** Once the symbol is pushed * into the group, remove it * so it can't be chosen again. / possible_faces.splice(r, 1); m++; } if (--color_choices[q] === 0) { /* When a color has been * selected the max number * of times it is removed. / color_choices.splice(q, 1); possible_colors.splice(q, 1); } } }); return; // } case "diff clrs": // { asap(function (lastTime) { while (++n < count) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.random() possible_faces.length \| 0; face = possible_faces[q]; m = 0; while (m < game.cardsForMatch) { r = Math.random() * possible_colors.length \| 0; clr = possible_colors[r]; faces_to_sort.push(face); colors_to_sort.push(clr); if (--color_choices[r] === 0) { /** When a color has been * selected the max number * of times it is removed. / color_choices.splice(r, 1); possible_colors.splice(r, 1); } m++; } if (--face_choices[q] === 0) { /* Once the symbol is pushed * into the group so many times, * remove it so it can't be * chosen again. / face_choices.splice(q, 1); possible_faces.splice(q, 1); } } }); return; // } default: // { asap(function (lastTime) { while (++n < count) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } q = Math.random() possible_faces.length \| 0; r = Math.random() * possible_colors.length \| 0; face = possible_faces[q]; clr = possible_colors[r]; m = 0; while (m < game.cardsForMatch) { faces_to_sort.push(face); colors_to_sort.push(clr); m++; } if (--face_choices[q] === 0) { /** Once the symbol is pushed * into the group so many times, * remove it so it can't be * chosen again. / face_choices.splice(q, 1); possible_faces.splice(q, 1); } if (--color_choices[r] === 0) { /* When a color has been * selected the max number of * times it is removed. / color_choices.splice(r, 1); possible_colors.splice(r, 1); } } }); return; // } } }, columns, rows, card_scale, x_spacing, y_spacing, start_x, start_y, d, i, dur, rot, u, v, card, conf1 = { position: [-1, -1], rotation: 0, scale: [1, 1], faceDown: !0, cache: roundCache }, animateCardTo = function (x, y) { this.parent.animatePositionTo(10, start_x + (x ? x_spacing x : 0), start_y + (y ? y_spacing * y : 0)); if (game.useSloppyDeal) { this.parent.animatePropertyTo( 10, "rotation", this.parent.rotation + (Math.random()9)(Math.random()>=0.5 ? 1 : -1) \| 0, "stop"); } }; return function () { switch (game.cardsEachRound) { case 12: // { columns = 4; rows = 3; card_scale = 1.2; x_spacing = 80/1.2 + 14; y_spacing = 116/1.2 + 10; start_x = 178; start_y = 136; break; // } case 24: // { columns = 6; rows = 4; card_scale = 1.6; x_spacing = 80/1.6 + 14; y_spacing = 116/1.6 + 10; start_x = 140; start_y = 120; break; // } case 36: // { columns = 9; rows = 4; card_scale = 1.6; x_spacing = 80/1.6 + 14; y_spacing = 116/1.6 + 10; start_x = 44; start_y = 120; break; // } } i = rot = v = u = 0; dur = 46 + 10 * (rows * columns); generateDealerData(); asap(function () { game.addTimeout(function () { game.addTimeout(function () { if (player.cpu) { game.addTimeout(handlePlayerTurn, 36); } else { cardTable.setTangible(!0); } enableUI(); }, 114 + 1); game.addAnnouncement("start"); }, dur + 4); }, function (lastTime) { while (v < rows) { if ((now()-lastTime)>MAX_FRAME_TIME) { return !1; } if (u === columns) { v++; u = 0; if (v === rows) { break; } } rot = 0; if (game.useUpsideDown) { if (Math.random() >= 0.5) { rot = 180; } } d = Math.random()faces_to_sort.length\|0; conf1.position[0] = start_x - i 0.5; conf1.position[1] = start_y - i * 0.5; conf1.rotation = rot; conf1.width = 80 / card_scale; conf1.height = 116 / card_scale; conf1.faceChar = faces_to_sort[d]; conf1.faceColor = colors_to_sort[d]; conf1.backColor = game.cardBackColor1; conf1.backColor2 = game.cardBackColor2; conf1.backPattern = game.cardBackPattern; conf1.score = game.pointsEachCard; card = Card.create(conf1); if (dur > 46) { card.addTimeout(animateCardTo,dur,u,v); } card.parent = cardTable; cardTable.children.push(card); if (!clickedChars[conf1.faceChar]) { clickedChars[conf1.faceChar] = []; } if (!clickedColors[conf1.faceColor]) { clickedColors[conf1.faceColor] = []; } faces_to_sort.splice(d, 1); colors_to_sort.splice(d, 1); i++; u++; dur -= 10; } }); }; })(), setupEventHandlers = (function () { var setSinglePlayerMode, setMultiplayerMode, waitTime; (function () { var handleRoundEnd; (function () { var handleToNextRound, parseResultsAndExit; clearRoundCache = function () { Object.keys(roundCache) .forEach(function (k) { roundCache[k].revoke(); delete roundCache[k]; }); Object.keys(clickedChars) .forEach(function (k) { delete clickedChars[k]; }); Object.keys(clickedColors) .forEach(function (k) { delete clickedColors[k]; }); }; var button_offset, comp, fadeAwayAnnouncement = function () { comp.animateSizeTo(20, comp.width - 50, comp.height + 50, "start"); comp.addTimeout(function () { comp.end(); }, 20); comp.animateOpacityTo(20, 0, "start"); }, announceNextRound = function () { if ( game.roundNumber === game.roundsEachGame ) { game.addTimeout(function () { game.addAnnouncement("game-over"); }, 8); } else if ( game.roundNumber === (game .roundsEachGame - 1) ) { game.addTimeout(function () { game.addAnnouncement("last-round"); }, 8); } else { game.addAnnouncement("next-round"); } }, conf1 = { type: MenuButton, localName: "continue-button", tooltipText: "Proceed to the next round.", position: [300, 550 - 76], width: 206, height: 54, textContent: "Continue", fontSize: 36, color: "pink", configure: function () { this.addEventHandler("click", function (evt) { disableUI(); comp.addTimeout( fadeAwayAnnouncement, 70 - 30); evt.currentTarget.addTimeout( function () { this.parent.animatePositionTo( 28, 300, 550, "start"); game.addTimeout( handleToNextRound, 18 + 40); }, 10); }); this.addTimeout(function () { this.parent.animatePositionTo( 24, 300, 340+button_offset, "stop"); }, 60); game.addTimeout(enableUI, 80); } }, conf2 = { type: MenuButton, localName: "results-button", tooltipText: "Proceed to the results screen.", position: [300, 550], width: 206, height: 54, textContent: "Results", fontSize: 36, color: "pink", configure: function () { this.addEventHandler("click", parseResultsAndExit); this.addTimeout(function () { this.parent.animatePositionTo( 20, 300, 340+button_offset, "stop"); }, 110); game.addTimeout(enableUI, 130); } }; setSinglePlayerMode = (function () { var handleLastStep = (function () { var n, t, acc; return function () { disableUI(); acc = 0; collectedResults.length = 0; collectedResults.push( ["Game " + gameNumber, "", ""], ["Round", "Status", "Time"]); n = 0; while (resultsData.length) { collectedResults.push([++n + ":", (resultsData.shift() ? "Success" : "Fail"), toTimerFormat( t = resultsData.shift())]); acc += t; } collectedResults.push(["Totals:", (player .winCount >= game.winsToWinGame ? "Won":"Lost"), toTimerFormat(acc)]); beginSceneExitTo("results-screen", "diamond-out", 28); }; })(), handleStep3 = function () { resultsData.push( player.score >= game .pointsToWinRound, // status game.timer.elapsedTime); // time if ( player.winCount<game.winsToWinGame && player.lossCount<game.maxRoundLosses ) { roundEnded = !1; game.timer.reset(); /** Re-get all data (this resets all * the randoms if there are any). / defineGameFields(); player.reset(); game.statusbar.refresh(); game.menubar.roundLabel .setTextContent(++game.roundNumber); game.addTimeout(dealCards, 64); } else { game.addTimeout(function () { button_offset = 0; if( player.winCount >= game .winsToWinGame ){ game.addAnnouncement("you-win"); } else { game.addAnnouncement("you-lose"); } if (game.useAutoFinish) { game.addTimeout( parseResultsAndExit, 152 + 24); } else { game.insertBefore( assembleConfig(conf2), game.menubar); } }, 78 + 24); } }, handleStep2 = function () { if ( player.winCount>=game.winsToWinGame\|\| player.lossCount>=game.maxRoundLosses ){ game.addTimeout(function () { game.addAnnouncement("game-over"); }, 8); } else { announceNextRound(); } game.addTimeout(handleStep3, 54); }, handleStep1 = function () { clearRoundCache(); if (game.timer.timedOut) { game.addAnnouncement("out-of-time"); } else { game.addAnnouncement("round-over"); } game.addTimeout(function () { button_offset = 0; if ( player.score>=game.pointsToWinRound ) { player.incrementWinCount(); comp=game.addAnnouncement("success"); } else { player.lossCount++; comp=game.addAnnouncement("too-bad"); button_offset = 34; } if ( game.useAutoContinue \|\| game.roundNumber === game .roundsEachGame \|\| player.winCount>=game.winsToWinGame\|\| player.lossCount>=game.maxRoundLosses ) { game.addTimeout(function () { comp.addTimeout( fadeAwayAnnouncement, 70); game.addTimeout( handleToNextRound, 36 + 70); }, 64 + 20 - button_offset); } else { game.addTimeout(function () { game.insertBefore( assembleConfig(conf1), game.menubar); }, 24); } }, 126); }; return function () { parseResultsAndExit = handleLastStep; handleToNextRound = handleStep2; handleRoundEnd = handleStep1; }; })(); setMultiplayerMode = (function () { var highestWinCount, highestScore, winnerCount, handleLastStep = (function () { var n, val, toResultArray = function (acc) { return val = resultsData.shift(), acc.push(val === null ? "Tie" : val ? "Success" : "Fail"), acc; }; return function () { disableUI(); collectedResults.push( playerbars.reduce( function (acc, ele) { return acc.push(""), acc; }, ["Game " + gameNumber]), playerbars.reduce( function (acc, ele) { acc.push(" " + ele.name + " "); return acc; }, ["Round"]) ); n = 0; while (resultsData.length) { collectedResults.push( playerbars.reduce(toResultArray, [++n + ":"])); } collectedResults.push( playerbars.reduce( function (acc, ele) { return acc.push(ele .winCount === highestWinCount ? "Won" : "Lost"), acc; }, ["Totals:"]) ); beginSceneExitTo("results-screen", "diamond-out", 28); }; })(), handleStep3 = (function () { var n; return function () { if (winnerCount > 1) { playerbars.forEach( function (p) { resultsData.push( p.score === highestScore ? null : !1); }); } else { playerbars.forEach( function (p) { resultsData.push( p.score === highestScore); }); } if ( game.roundNumber < game .roundsEachGame && highestWinCount < game .winsToWinGame ) { roundEnded = !1; /* Re-get all data (this resets all * randoms (if there are any)). / defineGameFields(); playerbars.forEach(function (p) { p.reset(); }); game.statusbar.refresh(); game.menubar.roundLabel .setTextContent( ++game.roundNumber); game.sortPlayerOrder(); player = playersByOrder[ playerIndex = 0]; game.addTimeout(function () { player.show(); }, 46); game.addTimeout(dealCards, 64); } else { game.addTimeout( function () { winnerCount = 0; n = -1; while (++n < playerbars.length) { if ( playerbars[n] .winCount === highestWinCount ) { winnerCount++; } } button_offset = 0; if (winnerCount > 1) { game.addAnnouncement("tie"); } else { n = -1; while (++n < playerbars.length) { if ( playerbars[n] .winCount===highestWinCount ) { game.addAnnouncement( "p" + (n + 1) + "-wins"); button_offset = 34; break; } } } if (game.useAutoFinish) { game.addTimeout( parseResultsAndExit, 176); } else { game.insertBefore( assembleConfig(conf2), game.menubar); } }, 102); } }; })(), handleStep2 = function () { if ( highestWinCount >= game.winsToWinGame ) { game.addTimeout(function () { game.addAnnouncement("game-over"); }, 8); } else { announceNextRound(); } game.addTimeout(handleStep3, 54); }, handleStep1 = (function () { var n, m; return function () { clearRoundCache(); game.addAnnouncement("round-over"); player.hide(); game.addTimeout(function () { button_offset = 0; highestScore = playerbars[0].score; winnerCount = 0; n = 0; while (++n < playerbars.length) { if ( playerbars[n] .score > highestScore ) { highestScore = playerbars[n] .score; } } n = -1; while (++n < playerbars.length) { if ( playerbars[n] .score === highestScore ) { winnerCount++; } } m = 0; if (winnerCount > 1) { comp=game.addAnnouncement("tie"); m = 34; } else { n = -1; while (++n < playerbars.length) { if ( playerbars[n] .score === highestScore ) { playerbars[n] .incrementWinCount(); comp=game.addAnnouncement( "p" + (n + 1) + "-wins"); button_offset = 34; break; } } } highestWinCount = 0; n = -1; while (++n < playerbars.length) { if ( playerbars[n] .winCount > highestWinCount ) { highestWinCount = playerbars[n] .winCount; } } if ( game.useAutoContinue \|\| game.roundNumber === game .roundsEachGame \|\| highestWinCount >= game .winsToWinGame ) { game.addTimeout( function () { comp.addTimeout( fadeAwayAnnouncement, 70); game.addTimeout( handleToNextRound, 36 + 70); }, 64 + 20 - m); } else { game.addTimeout( function () { game.insertBefore( assembleConfig(conf1), game.menubar); }, 24); } }, 126); }; })(); return function () { parseResultsAndExit = handleLastStep; handleToNextRound = handleStep2; handleRoundEnd = handleStep1; }; })(); })(); endRound = function () { if (roundEnded) { return; } disableUI(); roundEnded = !0; cardTable.setTangible(!1); roundMatchCount = 0; roundTryCount = 0; selectedCards.length = 0; cardTable.children.forEach( function (card) { return !card.matched&&card.fadeAway(); }); waitTime += 62; if (game.timer) { game.timer.stop(); game.timer.color = WHITE; if (game.timer.timedOut) { waitTime = 30; } } if (game.roundChosenToEnd) { game.roundChosenToEnd = !1; waitTime = 30; } game.addTimeout(handleRoundEnd, waitTime); waitTime = 0; }; })(); var handleClick = (function () { var anyCardsMatch = (function () { var firstCard; return function () { firstCard = selectedCards[0]; switch (game.matchStyle) { case "shape": return !selectedCards.find( function (ele) { return ele !== firstCard && ele.faceChar!==firstCard.faceChar; }); case "color": return !selectedCards.find( function (ele) { return ele !== firstCard && ele.faceColor!==firstCard.faceColor; }); default: // any return !selectedCards.find( function (ele) { return ele !== firstCard && ele.faceChar!==firstCard.faceChar && ele.faceColor!==firstCard.faceColor; }); } }; })(); var handleMatchedCard = (function () { var conf1 = { position: [-1, -1], fontSize: 34, shadowColor: "rgba(0,0,0,0.8)" }; return function (card) { if (card.score > 0) { player.scoreLabel.setTextContent( player.score += card.score); } /* wait aprox. 8 iterations / game.addEmitter("card-sparks", card); conf1.position[0] = card.x; conf1.position[1] = card.y; conf1.textContent = "+" + card.score; conf1.color = mapColor( card.score, 0, card.originalScore, "rgb(255,0,0)", "rgb(255,255,0)"); game.appendChild(FadeLabel.create(conf1)); card.setFaceDown(!1); card.fadeAway(); }; })(), handleMismatchedCard = function (card) { if (card.score > 0) { card.score--; } card.flipDown(); card.addTimeout(function () { this.parent.setClickable(!0); }, card.flipDuration); }, handleAutoEndRound = function () { if (player.score >= game.pointsToWinRound) { waitTime = 0; endRound(); } }, showNextPlayerBar = function () { cardTable.setTangible(!1); game.addTimeout( function (prev_player) { prev_player.hide(); game.addTimeout(function () { game.addTimeout(handlePlayerTurn, 20); player.show(); }, 26); }, arguments[0], player); playerIndex = ++playerIndex % game.numberOfPlayers; player = playersByOrder[playerIndex]; }; handlePlayerTurn = (function () { var n, m, arr, w, b, obj = null, callClick = function (card) { card.click(); }; return function () { switch (game.matchStyle) { case "shape": obj = clickedChars; break; case "color": obj = clickedColors; break; default: // both obj = Math.round(Math.random())>0 ? clickedChars : clickedColors; } switch (player.cpu) { case "easy": // { w = Math.random() <= 0.5; b = Math.random() <= 0.5; break; // } case "normal": w = Math.random() < 0.6; b = Math.random() < 0.6; break; case "hard": w = Math.random() < 0.7; b = Math.random() < 0.7; break; case "expert": w = Math.random() < 0.85; b = Math.random() < 0.85; break; default: // not cpu cardTable.setTangible(!0); obj = null; return; } arr = Object.keys(obj) .reduce(function (acc, k) { return obj[k].length === game .cardsForMatch && w && acc.push(obj[k]), acc; }, []); if (arr.length > 0 && b) { arr=arr[Math.random()arr.length \| 0]; } else { arr = cardTable.children .filter(function (card) { return !card.matched; }); while (arr.length>game.cardsForMatch) { arr.splice( Math.random() * arr.length \| 0, 1); } } m = 4; n = -1; while (++n < game.cardsForMatch) { game.addTimeout(callClick, m, arr[n]); m += 8; } obj = arr = null; }; })(); return (function () { var card, arr, idx; return function (evt) { if ( evt.target instanceof Card && selectedCards.length<game.cardsForMatch ) { evt.stopPropagation(); if (game.timer && !game.timer.updatable) { game.timer.start(); } evt.target.setClickable(!1); evt.target.flipUp(); if ( selectedCards.push(evt.target ) === game.cardsForMatch ) { roundTryCount++; player.incrementTryCount(); if (anyCardsMatch()) { roundMatchCount++; waitTime = 38; while (selectedCards.length > 0) { card = selectedCards[0]; card.matched = !0; arr = clickedChars[card.faceChar]; idx = arr.indexOf(card); if (idx > -1) { arr.splice(idx, 1); } arr=clickedColors[card.faceColor]; idx = arr.indexOf(card); if (idx > -1) { arr.splice(idx, 1); } game.addTimeout( handleMatchedCard, waitTime, selectedCards.shift()); waitTime += 4; } arr = card = null; if ( roundMatchCount === game .totalRoundMatches ) { endRound(); } else if (game.numberOfPlayers > 1) { if (!game.useExtraTurn) { showNextPlayerBar(waitTime+16); } else if (player.cpu) { game.addTimeout( handlePlayerTurn, 54); } } else if (game.useAutoEndRound) { game.addTimeout( handleAutoEndRound, waitTime+1); } } else { waitTime = 60; while (selectedCards.length > 0) { card = selectedCards[0]; arr=clickedChars[card.faceChar]; idx = arr.indexOf(card); if (idx < 0) { arr.push(card); } arr=clickedColors[card.faceColor]; idx = arr.indexOf(card); if (idx < 0) { arr.push(card); } game.addTimeout( handleMismatchedCard, waitTime, selectedCards.shift()); waitTime += 4; } arr = card = null; if (game.numberOfPlayers > 1) { showNextPlayerBar(waitTime + 16); } } } } }; })(); })(); return function () { if (game.numberOfPlayers > 1) { setMultiplayerMode(); } else { setSinglePlayerMode(); } /*Make "endRound()" public for manual round ending. / game.endRound = endRound; game.addEventHandler("click",handleClick,!0); }; })(); CardGame = function (conf) { Scene.call(this, conf); if (gameNumber >= MAX_GAME_COUNT_RESULTS) { gameNumber = collectedResults.length = 0; } gameNumber++; game = this; game.pointsEachCard = 3; game.roundNumber = 1; roundEnded = !1; asap(prepareUserData, defineGameFields, setupStatusBars, setupPlayerBars, dealCards, setupEventHandlers, function () { game.addFader("diamond-in"); }); }; CardGame.getResults = function () { return collectedResults.length > 0 ? collectedResults:"No game results were found"; }; CardGame.clearResults = function () { gameNumber = collectedResults.length = 0; }; CardGame.prototype = { _finalize: function () { Scene.prototype._finalize.call(this); this.statusbar = this.menubar = null; cardTable = player = this.timer = game = null; playersByOrder.length = 0; selectedCards.length = playerbars.length = 0; roundMatchCount = resultsData.length = 0; clearRoundCache(); }, setActive: function (b) { this.active = typeof b === "boolean" ? b:!0; }, setBackground: function (ele) { this.background = ele \|\| CanvasContent.get( toSelected(storage.get("game-background")) .toLowerCase() + "-background"); }, sortPlayerOrder: function () { switch (this.orderOfTurns) { case "wins": // { playersByOrder.sort(function (a, b) { return b.winCount - a.winCount; }); break; // } case "random": // { playersByOrder.sort(function (a, b) { return -1 + Math.round(Math.random()2); }); break; // } } } }; inherit(CardGame, Scene); allocate(CardGame, 1); }), // } // ____________________________ // ▲ Define event classes { (function () { AppEvent = function (type, options) { this.type = type; this.target = null; this.currentTarget = null; this.phase = 0; if (options) { this.bubbles = !!options.bubbles; this.cancelable = !!options.cancelable; //this.view = options.view \|\| window; //this.detail = options.detail \|\| null; } else { this.bubbles = !1; this.cancelable = !0; //this.view = window; //this.detail = null; } this.defaultPrevented = !1; this.capturePrevented = !1; this.bubblePrevented = !1; this.propagationStopped = !1; this.immediatePropagationStopped = !1; this.originalTarget = null; if (!this.path) { this.path = []; } else { this.path.length = 0; } this.depth = 0; }; AppEvent.prototype = { preventDefault: function () { if (this.cancelable) { this.defaultPrevented = !0; } }, preventBubble: function () { if (this.cancelable) { this.bubblePrevented = !0; } }, preventCapture: function () { if (this.cancelable) { this.capturePrevented = !0; } }, stopPropagation: function () { if (this.cancelable) { this.bubblePrevented = !0; this.propagationStopped = !0; } }, stopImmediatePropagation: function () { if (this.cancelable) { this.capturePrevented = !0; this.bubblePrevented = !0; this.propagationStopped = !0; this.immediatePropagationStopped = !0; } }, toString: Component.prototype.toString }; Object.setPrototypeOf( AppEvent.prototype, null); allocate(AppEvent, 1); AppFocusEvent = function (type) { AppEvent.call(this, type, arguments[1]); this.relatedTarget = null; }; inherit(AppFocusEvent, AppEvent); allocate(AppFocusEvent, 1); AppKeyboardEvent = function (type) { AppEvent.call(this, type, arguments[1]); this.keyCode = 0; this.key = ""; }; inherit(AppKeyboardEvent, AppEvent); allocate(AppKeyboardEvent, 1); AppMouseEvent = function (type) { AppEvent.call(this, type, arguments[1]); this.x = 0; this.y = 0; this.button = 0; this.buttons = 0; this.relatedTarget = null; this.region = ""; this.movementX = 0; this.movementY = 0; }; inherit(AppMouseEvent, AppEvent); allocate(AppMouseEvent, 1); AppDragEvent = function (type) { AppMouseEvent.call( this, type, arguments[1]); this.dataTransfer = null; }; inherit(AppDragEvent, AppMouseEvent); allocate(AppDragEvent, 1); AppWheelEvent = function (type) { AppMouseEvent.call( this, type, arguments[1]); this.deltaX = 0; this.deltaY = 0; }; inherit(AppWheelEvent, AppMouseEvent); allocate(AppWheelEvent, 1); }), // } // ▲ Define event interface module { (function () { // • Define private variables { /*⬇ The current client coordinates / var clientX = 0, clientY = 0, /*⬇ The previous client coordinates / prevX = 0, prevY = 0, /*⬇ The client coordinate delta / movementX = 0, movementY = 0, /*⬇ The client wheel delta / deltaX = 0, deltaY = 0, /*⬇ The code for the client pressed button. / button = 0, // NONE = 0 LEFT = 0 MIDDLE = 1 RIGHT = 2 /⬇ The code for multiple pressed buttons. / buttons = 0, /* NONE = 0 LEFT = 1 * MIDDLE = 4 RIGHT = 2 * Take the values and add them * together to test for the buttons * that are pressed down. / /* NOTE: Because KA's Processing * event handler "mouseReleased" does * not update "mouseButton" the event * property "buttons" cannot be * completely emulated. Instead of * adding and subtracting button * codes my "buttons" property only * counts how many buttons are held. / /⬇ This variable controls whether the client's wheel scrolls the * target component up or down. * -1 = "natural" or 1 = "standard" / scrollStyle = 1, /⬇ This variable flags whether the client's cursor is over the inline * frame or not. / overFrame = !0, /⬇ This is true when the client's cursor is dragging. / dragging = !1, /⬇ A variable that equals the last pressed keyboard key character. / key_char = "", /⬇ A variable that equals the last pressed keyboard key code. / key_code = 0, /⬇ The mouse coordinate scale / xyScale = viewport_y === 0 ? NATURAL_HEIGHT / OUTPUT_HEIGHT : NATURAL_WIDTH / OUTPUT_WIDTH; // } // • Define component pointers { /*⬇ The current component under mouse. / var hitComp = null, /*⬇ The previous component under mouse. / prevHitComp = null, /*⬇ The currently held component. / selectedComp = null, /*⬇ The current component receiving focus. / activeComp = null, /*⬇ The previous component receiving focus. / prevActiveComp = null; // } // • Define privileged init methods { AppFocusEvent.prototype._init = function (target) { this.relatedTarget = target === activeComp ? prevActiveComp : activeComp; return target.focusable; }; AppMouseEvent.prototype._init = function (target) { this.x = clientX; this.y = clientY; this.button = button; this.buttons = buttons; this.relatedTarget = prevHitComp; this.region = hitComp ? hitComp.localName : ""; this.movementX = movementX; this.movementY = movementY; if (this.type === "click") { return target.clickable; } return target instanceof Region; }; AppWheelEvent.prototype._init = function (target) { //this.deltaX = deltaX * scrollStyle; this.deltaY = deltaY * scrollStyle; return AppMouseEvent.prototype ._init.call(this, target); }; AppKeyboardEvent.prototype._init = function () { this.key = key_char; this.keyCode = key_code; return !0; }; // } // • Define private utilities { var updateClientPosition = function () { prevX = clientX; prevY = clientY; clientX = pjs.mouseX; clientY = pjs.mouseY; if (clientX > 0) { clientX = (clientX-viewport_x)xyScale \| 0; } if (clientY > 0) { clientY = (clientY-viewport_y)xyScale \| 0; } movementX = clientX - prevX; movementY = clientY - prevY; }, updateClientButton = function () { switch (pjs.mouseButton) { case LEFT: button = LEFT_BUTTON; break; case CENTER: button = CENTER_BUTTON; break; case RIGHT: button = RIGHT_BUTTON; break; } }, seekCompUnderCursor = (function () { var comp, searchChildren = function (arr, idx) { /** This powerful recursive function * finds the current component that the * mouse cursor is over. / while (idx --> 0) { // while idx "goes to" 0 if ( arr[idx].tangible && arr[idx].isPointInside(clientX, clientY) ) { comp = arr[idx]; if (comp.children) { searchChildren(comp.children, comp.children.length); } return; } } }; return function () { prevHitComp = hitComp; searchChildren(root.children, root.children.length); hitComp = comp; comp = null; }; })(); // } // • Define tooltip class { (function () { var arr = [], textLead, x, y, lines, boxWidth, boxHeight, leading, delayDuration, fadeDuration, delayStartTime, fadeStartTime; Tooltip = function (conf) { Component.call(this, conf); this.fontSize = 13; leading = this.fontSize 1.154 \| 0; this.fontFamily = "Arial"; this.opacity = 0; delayDuration = 24 * (1000 / FPS) \| 0; fadeDuration = 6 * (1000 / FPS) \| 0; delayStartTime = 0; fadeStartTime = 0; }; Tooltip.prototype = { setUpdatable: function () { this.updatable = !0; }, setVisible: function () { this.visible = !0; }, setActive: function (b) { this.active = typeof b === "string" ? b.toUpperCase() === "ON" : typeof b === "boolean" ? b : !0; }, prevent: function () { delayStartTime = fadeStartTime = 0; lines = boxWidth = null; this.opacity = 0; this.updatable = this.visible = !1; }, dismiss: function () { delayStartTime = fadeStartTime = 0; lines = boxWidth = null; this.opacity = 0; this.visible = !1; if (hitComp !== prevHitComp) { this.updatable = !0; } }, update: function (time) { if (!overFrame) { return; } if (!delayStartTime) { delayStartTime = time; } if ( (time - delayStartTime ) > delayDuration ) { if (!fadeStartTime) { fadeStartTime = time; this.visible = !0; if ( hitComp && typeof hitComp .tooltipText === "string" && hitComp.tooltipText !== "" && !selectedComp ) { lines = hitComp.tooltipText .match(TOOLTIP_LINE_LENGTH); } } if (this.opacity !== 1) { this.opacity = Math.min((time - fadeStartTime) / fadeDuration, 1); } else { this.updatable = !1; } } }, paint: function (ctx) { if (!lines) { return; } ctx.font = this.fontSize + "px " + this.fontFamily; ctx.textAlign = "left"; ctx.globalAlpha = this.opacity; arr.length = 0; if (!boxWidth) { boxHeight = leading * (lines.length - 1); boxWidth = Math.max.apply(null, lines.reduce(function (acc, ele) { acc.push(ctx.measureText(ele).width); return acc; }, arr) ); } x = clientX; y = clientY; if ( clientX + boxWidth + 8 > NATURAL_WIDTH ) { x += -((4 + clientX + boxWidth + 8) - NATURAL_WIDTH); } if ( ((clientY + 19 + boxHeight) + 20) > NATURAL_HEIGHT ) { y += -(45 + boxHeight); } if (cursorStyle === "not-allowed") { y += this.fontSize; } /ctx.shadowColor = "rgba(0,0,0,0.8)"; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 2; ctx.shadowBlur = 3;/ ctx.fillStyle = "rgba(0,0,0,0.4)"; ctx.fillRect(x + 1 , y + 22, boxWidth + 8, 5 + boxHeight); ctx.fillStyle = WHITE; // rgb(234,234,234) ctx.fillRect(x , y + 20, 8 + boxWidth, 5 + boxHeight); ctx.fillStyle = BLACK; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; lines.forEach(function (ele, idx) { ctx.fillText(ele, x + 4, y + 34 + (leading * idx)); }); ctx.globalAlpha = 1; } }; inherit(Tooltip, Component); allocate(Tooltip, 1); })(); // } // • Define private event pointer { /*⬇ This pointer variable points to the current firing DOM event object. / / This is used much how "window.event" * use to be used. / var event; // } // • Define private event handlers { var handleFocus = function () { prevActiveComp = activeComp; activeComp = hitComp; var evt; if (activeComp !== prevActiveComp) { if (prevActiveComp) { evt = AppFocusEvent.create("blur"); prevActiveComp.deliverEvent(evt); evt.revoke(); } evt = AppFocusEvent.create("focus"); activeComp.deliverEvent(evt); evt.revoke(); } }, handleBlur = function () { prevActiveComp = activeComp; activeComp = null; var evt = AppFocusEvent.create("blur"); prevActiveComp.deliverEvent(evt); evt.revoke(); }, handleHitChange = function () { if (selectedComp && selectedComp.draggable) { if (prevHitComp) { event = AppDragEvent.create("dragleave"); prevHitComp.deliverEvent(event); event.revoke(); } event = AppDragEvent.create("dragenter"); hitComp.deliverEvent(event); event.revoke(); } else { if (prevHitComp) { event = AppMouseEvent.create("mouseleave"); prevHitComp.deliverEvent(event); event.revoke(); } event = AppMouseEvent.create("mouseenter"); hitComp.deliverEvent(event); event.revoke(); } }; // } // • Define "assignEventCallbacks()" { pjs.assignEventCallbacks = function () { // Manually focus root component { activeComp = root; // } // Define mouse event handlers { /* Note: Because "mouseMoved" * only fires when there is * movement and a button isn't * pressed it will never fire on * a "touchmove" event. * The function assigned to "mouseMoved" * also needs to be assigned to * "mouseDragged" to capture a * "move" event whether dragging * or movement is occurring. / pjs.mouseMoved = function () { if (!overlay.tangible) { tooltip.dismiss(); updateClientPosition(); seekCompUnderCursor(); if (hitComp === null) { return; } if (selectedComp && selectedComp.draggable) { / if (!dragging) { event = AppDragEvent.create("dragstart"); hitComp.deliverEvent(event); event.revoke(); } / dragging = !0; event = AppDragEvent.create("drag"); selectedComp.deliverEvent(event); event.revoke(); event = AppDragEvent.create("dragover"); hitComp.deliverEvent(event); event.revoke(); if (hitComp !== prevHitComp) { handleHitChange(); } return; } else { cursorStyle = hitComp.cursor; event = AppMouseEvent.create("mousemove"); hitComp.deliverEvent(event); event.revoke(); } if (hitComp !== prevHitComp) { handleHitChange(); } output.canvas.style.cursor = cursorStyle; } else { updateClientPosition(); seekCompUnderCursor(); if (hitComp === null) { return; } cursorStyle = hitComp.cursor; } }; pjs.mouseDragged = pjs.mouseMoved; pjs.mousePressed = function () { tooltip.prevent(); updateClientPosition(); updateClientButton(); buttons++; seekCompUnderCursor(); if (hitComp === null) { return; } cursorStyle = hitComp.cursor; selectedComp = hitComp; event = AppMouseEvent.create("mousedown"); hitComp.deliverEvent(event); event.revoke(); handleFocus(); if (hitComp !== prevHitComp) { handleHitChange(); } dragging = !1; output.canvas.style.cursor = cursorStyle; }; pjs.mouseReleased = function () { tooltip.prevent(); updateClientPosition(); updateClientButton(); if (buttons > 0) { buttons--; } seekCompUnderCursor(); if (hitComp === null) { return; } cursorStyle = hitComp.cursor; event = AppMouseEvent.create("mouseup"); hitComp.deliverEvent(event); event.revoke(); if ( button === LEFT_BUTTON && selectedComp === hitComp && selectedComp.clickable ) { /* NOTE: KA's "mouseClicked" event * callback is called before * "mouseReleased" and regardless of the * value of "mouseButton". * This behavior is very different than * the default DOM event calls. * This block is needed to emulate the * HTML "click" event better. / /* IMPORTANT: The HTML "onclick" * event only fires after the "mouseup" * event if the mouse position is * unchanged since the "mousedown" event fired. / /NOTE: My "onclick" event is less strict than HTML's. If the user moves * their mouse (or finger) while selecting * something the "click" event won't fire * and the action is canceled. * I found this to be a little frustrating * when I quickly navigate menus. * Instead of not moving I fire my "click" * event when the selected component matches * the hit component. / event = AppMouseEvent.create("click"); selectedComp.deliverEvent(event); event.revoke(); } if (selectedComp) { if (dragging) { if (selectedComp !== hitComp) { event = AppDragEvent.create("dragexit"); selectedComp.deliverEvent(event); event.revoke(); } event = AppDragEvent.create("dragend"); hitComp.deliverEvent(event); event.revoke(); if (selectedComp.draggable) { event = AppDragEvent.create("drop"); hitComp.deliverEvent(event); event.revoke(); } } selectedComp = null; } if (hitComp !== prevHitComp) { handleHitChange(); } dragging = !1; output.canvas.style.cursor = cursorStyle; }; pjs.mouseOver = function () { overFrame = !0; if ( selectedComp && selectedComp.draggable && selectedComp.movable ) { cursorStyle = GRABBING_CURSOR; output.canvas.style.cursor = cursorStyle; } }; pjs.mouseOut = function () { tooltip.prevent(); overFrame = !1; if (selectedComp && !selectedComp.movable) { pjs.mouseX = NATURAL_WIDTH; pjs.mouseY = -viewport_y; pjs.mouseReleased(); } else if (!overlay.tangible) { updateClientPosition(); seekCompUnderCursor(); if (prevHitComp) { event=AppMouseEvent.create("mouseleave"); prevHitComp.deliverEvent(event); event.revoke(); } } }; // } // Define keyboard event handlers { pjs.keyPressed = function () { tooltip.dismiss(); key_char = String.fromCharCode(pjs.key.code); key_code = pjs.keyCode; event = AppKeyboardEvent.create("keydown"); activeComp.deliverEvent(event); event.revoke(); }; pjs.keyReleased = function () { tooltip.dismiss(); key_char = String.fromCharCode(pjs.key.code); key_code = pjs.keyCode; if (!activeComp) { return; } event = AppKeyboardEvent.create("keyup"); activeComp.deliverEvent(event); event.revoke(); }; pjs.keyTyped = function () { /* NOTE: Do not reference * Processing's keyCode in * this thread. / if (!activeComp) { return; } switch (key_code) { case 8: // BACKSPACE case 9: // TAB case 10: // ENTER case 12: // NUMLOCK case 27: // ESC case 44: // PRINTSCREEN case 127: // DELETE return; default: /* NOTE: This only fires when * non-modifier keys are pressed down. * This handler is best for typing letters. / event = AppKeyboardEvent.create("keypress"); activeComp.deliverEvent(event); event.revoke(); } }; // } // Define wheel event handler { /* NOTE: This only fires with a mouse * wheel scroll and not a touch swipe. / pjs.wheelEventHandler = function (dom_event) { DOMEventUtil.preventDefault(dom_event); deltaY = dom_event.deltaY \|\| dom_event.detail \|\| 0; tooltip.prevent(); if (hitComp) { // && hitComp.scrollable cursorStyle = hitComp.cursor; event = AppWheelEvent.create("wheel"); hitComp.deliverEvent(event); event.revoke(); output.canvas.style.cursor = cursorStyle; } }; // } // Decorate event handlers with "try" { if (debugging) { (function () { Array.prototype.forEach.call(arguments, function (k) { var fn = pjs[k]; pjs[k] = function () { try { fn.apply(pjs, arguments); } catch (err) { pjs.clearEventCallbacks(); pjs.cancelMainLoop(); pjs.println(k + err); } }; }); }) ("mouseMoved", "mouseDragged", "mousePressed", "mouseReleased", "mouseOver", "mouseOut", "wheelEventHandler", "keyPressed", "keyReleased", "keyTyped"); pjs.mouseDragged = pjs.mouseMoved; } // } // Attach wheel event handler { /* NOTE: A wheel event handler * is a little trickier to attach than * others handlers because of poor * cross-browser support. * This approach has to be taken * because of this. / DOMEventUtil.addHandler(output.canvas, "onwheel" in output.canvas ? "wheel" : "DOMMouseScroll", pjs.wheelEventHandler); // } }; // } // • Define hit target methods { Region.prototype.isSelected = function () { return this === selectedComp; }; Region.prototype.hasFocus = function () { return this === activeComp; }; Region.prototype.click = function () { /NOTE: This is a non-standard way to deliver a click event. / this.addImmediate(function () { prevHitComp = hitComp; hitComp = this.parent; var evt = AppMouseEvent.create("click"); hitComp.deliverEvent(evt); evt.revoke(); }); }; Region.prototype.focus = function () { hitComp = this; hitComp.addImmediate(handleFocus); }; Region.prototype.blur = function () { if (activeComp === this) { activeComp.addImmediate(handleBlur); } }; // } }), // } // ▲ Define announcement configs { (function () { var waitTime, conf1 = { type: Graphic, rectMode: CENTER, opacity: 0, configure: function () { this.addTimeout(function () { this.parent.addTimeout(function () { this.parent.animateOpacityTo(24, 0); }, 24); this.parent.animateOpacityTo(24, 1); }, waitTime); } }, w, h, setConfig = function (comp) { w = comp.width; h = comp.height; comp.source = CanvasContent.get( comp.localName + "-A"); conf1.width = w; conf1.height = h; conf1.src = comp.localName + "-B"; }; configs.announcement_1 = function () { setConfig(this); waitTime = 36; this.appendChild(assembleConfig(conf1)); this.animatePositionTo(30, 300, 234); this.width += 50; this.height -= 50; this.animateSizeTo(30, w, h); this.addTimeout(function () { this.parent.addTimeout(function () { this.parent.animateSizeTo( 20, w - 50, h + 50); this.parent.addTimeout(function () { this.parent.end(); }, 20); this.parent.animateOpacityTo(20, 0); }, 70); }, 24); this.animateOpacityTo(24, 1); }; configs.announcement_2 = function () { setConfig(this); waitTime = 36; this.appendChild(assembleConfig(conf1)); this.animatePositionTo(30, 300, 234); this.width = 3; this.height = 3; this.animateSizeTo(24, w, h); this.animatePropertyTo(24, "rotation", 0); this.addTimeout(function () { this.parent.addTimeout(function () { this.parent.animateSizeTo(20, w-50, h+50); this.parent.addTimeout(function () { this.parent.end(); }, 20); this.parent.animateOpacityTo(20, 0); }, 70); }, 24); this.animateOpacityTo(24, 1); }; configs.announcement_3 = function () { setConfig(this); waitTime = 36 << 1; this.appendChild(assembleConfig(conf1)); this.animatePositionTo(30, 300, 234); this.width = 5; this.height = 5; this.animateSizeTo(24, 0, 0); this.animatePropertyTo(24, "rotation", 0); this.addTimeout(function () { this.parent.rotation = -360; this.parent.animatePropertyTo( 24, "rotation", 0); this.parent.animateSizeTo(20, w, h); this.parent.addTimeout(function () { this.parent.parent.addEmitter( "announcement-sparks", this.parent); }, 20); }, 24); this.animateOpacityTo(24, 1); }; configs.announcement_4 = function () { setConfig(this); waitTime = 36 + 12; this.appendChild(assembleConfig(conf1)); this.animatePositionTo(30, 300, 234); this.addTimeout(function () { if (this.parent.localName === "success-text") { this.parent.parent.addEmitter( "announcement-sparks", this.parent); } }, 24); this.animateOpacityTo(24, 1); }; announcements = { "start": { type: Graphic, localName: "start-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 242, height: 104, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_1 }, "round-over": { type: Graphic, localName: "round-over-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 276, height: 172, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_1 }, "next-round": { type: Graphic, localName: "next-round-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 276, height: 172, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_1 }, "last-round": { type: Graphic, localName: "last-round-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 276, height: 172, rectMode: CENTER, opacity: 0, rotation: -360, tangible: !1, configure: configs.announcement_2 }, "game-over": { type: Graphic, localName: "game-over-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 276, height: 172, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_1 }, "you-win": { type: Graphic, localName: "you-win-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 468, height: 100, rectMode: CENTER, opacity: 0, rotation: -360, tangible: !1, configure: configs.announcement_3 }, "you-lose": { type: Graphic, localName: "you-lose-text", position: [NATURAL_WIDTH >> 1, 220 - 76], width: 460, height: 100, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_4 }, "success": { type: Graphic, localName: "success-text", position: [NATURAL_WIDTH >> 1, 220 - 76], width: 420, height: 100, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_4 }, "too-bad": { type: Graphic, localName: "too-bad-text", position: [NATURAL_WIDTH >> 1, 220 - 76], width: 204, height: 196, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_4 }, "out-of-time": { type: Graphic, localName: "out-of-time-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 286, height: 170, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_1 }, "tie": { type: Graphic, localName: "tie-text", position: [NATURAL_WIDTH >> 1, 320 - 76], width: 142, height: 84, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_4 }, "p1-wins": { type: Graphic, localName: "p1-wins-text", position: [NATURAL_WIDTH >> 1, 234], width: 338, height: 188, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_3 }, "p2-wins": { type: Graphic, localName: "p2-wins-text", position: [NATURAL_WIDTH >> 1, 234], width: 338, height: 188, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_3 }, "p3-wins": { type: Graphic, localName: "p3-wins-text", position: [NATURAL_WIDTH >> 1, 234], width: 338, height: 188, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_3 }, "p4-wins": { type: Graphic, localName: "p4-wins-text", position: [NATURAL_WIDTH >> 1, 234], width: 338, height: 188, rectMode: CENTER, opacity: 0, tangible: !1, configure: configs.announcement_3 } }; }), // } // ▲ Define scene manager module { (function () { /⬇ The viewport's drawing context / var ctx = viewport.getContext("2d"), /*⬇ The current executing scene / scene = null, /*⬇ The previous executing scene name / prevSceneName = null, /*⬇ The current default exit fader / exitFaderName = "ease-out", /*⬇ The current default exit delay / exitDelay = 48, /*⬇ The current rules to display in dialogs / rules = "These are the current rules: " + "N\/A", /*⬇ The tooltip text for a fade background / fadeTooltipText = "Press the OK button " + "on the dialog box to resume."; assembleConfig = function (conf) { var comp = conf.type.create(conf); if (conf.children) { conf.children.forEach(function (ele) { if (ele instanceof Component) { comp.appendChild(ele); } else { comp.appendChild(assembleConfig(ele)); } }); } if (typeof conf.configure === "function") { conf.configure.call(comp, prevSceneName); } return comp; }; setCurrentScene = function (scene_name) { if (!scene_name) { throw "Error: Scene name not specified!"; } if (scene) { prevSceneName = scene.localName; scene.end(); scene = null; } if (scene_name in configs.scenes) { root.addImmediate(function () { asap(function () { /*⬇ Clear active cache / Object.keys(activeCache) .forEach(function (k) { activeCache[k].revoke(); delete activeCache[k]; }); }, function () { scene = assembleConfig( configs.scenes[scene_name]); root.insertBefore(scene, overlay); }); }); } else { throw "ReferenceError: " + scene_name + " doesn't exist!"; } }; setCurrentRules = function (s) { rules = s; }; beginSceneExitTo = function (k, f, d) { d = d \|\| exitDelay; f = f \|\| exitFaderName; root.addTimeout(function () { scene.addTimeout(function () { asap(function () { ctx.fillStyle = BLACK; ctx.fillRect(0, 0, NATURAL_WIDTH, OUTPUT_HEIGHT); }); setCurrentScene(k); }, faders[f].duration); // - 1 scene.addFader(f); }, d); }; beginExitToPrevScene = function (f, d) { beginSceneExitTo(prevSceneName, f, d); }; var pauseAllChildren = function (comp) { var arr = comp.getChildrenByKey("pause"); if (arr) { arr.forEach(function (ele) { ele.pause(); }); } }, resumeAllChildren = function (comp) { var arr = comp.getChildrenByKey("resume"); if (arr) { arr.forEach(function (ele) { ele.resume(); }); } }, removeOverlays = function (evt) { evt.currentTarget.previousSibling .animateOpacityTo(10, 0, "start"); evt.currentTarget.previousSibling .addTimeout(function () { resumeAllChildren(scene); scene.setActive(!0); this.parent.previousSibling.end(); this.parent.end(); }, 10); evt.currentTarget.end(); // end dialog }, conf1 = {}, // screenshot conf2 = { opacity: 0, src: "black-background" }, // fade conf3 = { type: ListDialog, localName: "message-dialog", titleTooltipText: "", position: [ (NATURAL_WIDTH >> 1) - 156, (NATURAL_HEIGHT >> 1) - 139 ], width: 312, height: 274, shaded: !0, draggable: !0, children: [ { type: MenuButton, localName: "bottom-button", tooltipText: "Close dialog box.", textContent: "OK", position: [156, 241], width: 124, height: 42, fontSize: 27, color: "pink" } // bottom-button ], configure: function () { this.addEventHandler("click", function (evt) { switch (evt.region) { case "bottom-button": // { removeOverlays(evt); break; // } } }, !0); } }, // msg-dialog attachOverlays = function () { root.insertBefore(Easel.create(conf1),overlay) .setCanvas(ctx.getImageData(0, 0, viewport.width, viewport.height)); root.insertBefore(Graphic.create(conf2), overlay).animateOpacityTo(10, 0.5, "stop"); }; showMessageDialog = function (parent, msg, title) { parent = parent \|\| scene; pauseAllChildren(parent); parent.setActive(!1); conf2.tooltipText = fadeTooltipText; attachOverlays(); conf3.title = title \|\| "Message"; conf3.displayHeight = conf3.height - 54 - 54; conf3.displayTextContent = msg; root.insertBefore(assembleConfig(conf3),overlay); enableUI(); }; showRulesDialog = function (parent) { parent = parent \|\| scene; pauseAllChildren(parent); parent.setActive(!1); conf2.tooltipText = fadeTooltipText; attachOverlays(); conf3.title = "Rules"; conf3.displayHeight = conf3.height - 108; conf3.displayTextContent = rules; root.insertBefore(assembleConfig(conf3),overlay); enableUI(); }; var conf4 = { type: ListDialog, titleTooltipText: "", position: [ (NATURAL_WIDTH >> 1) - 156, (NATURAL_HEIGHT >> 1) - 139 ], width: 312, height: 274, displayHeight: 166, shaded: !0, draggable: !0, children: [ { type: MenuButton, localName: "left-button", tooltipText: "Decline and return.", textContent: "No", position: [84, 241], width: 124, height: 42, fontSize: 27, color: "cyan" }, // left-button { type: MenuButton, localName: "right-button", tooltipText: "Accept.", textContent: "Yes", position: [228, 241], width: 124, height: 42, fontSize: 27, color: "pink" } // right-button ], configure: function () { this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { evt.currentTarget.end(); removeOverlays(evt); switch (evt.region) { case "right-button": // { disableUI(); switch (evt.currentTarget.localName) { case "restart-prompt": CardGame.clearResults(); beginSceneExitTo("card-game", "diamond-out", 12); break; case "end-prompt": scene.addTimeout( function () { this.parent.roundChosenToEnd=!0; this.parent.endRound(); }, 12); break; default: CardGame.clearResults(); beginSceneExitTo("main-menu", "diamond-out", 12); } break; // } } } }, true); } }, // restart/quit-prompt showRestartPrompt = function () { conf4.localName = "restart-prompt"; conf4.title = "Restart?"; conf4.displayTextContent = "Any current " + "progress will be lost. Are you sure " + "you want to restart this game?"; root.insertBefore(assembleConfig(conf4),overlay); }, showQuitPrompt = function () { conf4.localName = "quit-prompt"; conf4.title = "Quit?"; conf4.displayTextContent = "Any current " + "progress will be lost. Are you sure " + "you want to quit this game?"; root.insertBefore(assembleConfig(conf4),overlay); }; var conf5 = { type: Graphic, localName: "pause-tray", position: [ (NATURAL_WIDTH >> 1) - 156, (NATURAL_HEIGHT >> 1) - 139 ], width: 312, height: 274, shaded: !0, visible: !0, src: "pause-tray", children: [ { type: Drag, localName: "header-region", tooltipText: "Choose an option below.", width: 312, height: 40, draggable: !0 }, // header-region { type: MenuButton, localName: "top-button", tooltipText: "Resume this current game.", textContent: "Resume", position: [156, 84], width: 206, height: 54, fontSize: 34, color: "cyan" }, // top-button { type: MenuButton, localName: "center-button", tooltipText: "Start a new game " + "with the same settings.", textContent: "Restart", position: [156, 152], width: 206, height: 54, fontSize: 35, color: "pink" }, // center-button { type: MenuButton, localName: "bottom-button", tooltipText: "Return to the Main Menu.", textContent: "Exit", position: [156, 220], width: 206, height: 54, fontSize: 36, color: "light-blue" } // bottom-button ], configure: function () { this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { evt.currentTarget .previousSibling.setTooltipText(""); evt.currentTarget.end(); switch (evt.region) { case "top-button": removeOverlays(evt); break; case "center-button": showRestartPrompt(); break; case "bottom-button": showQuitPrompt(); break; } } }, !0); } }; showPauseTray = function (parent) { parent = parent \|\| scene; pauseAllChildren(parent); parent.setActive(!1); conf2.tooltipText = "Press the RESUME " + "button on the dialog box to resume " + "the current game."; attachOverlays(); root.insertBefore(assembleConfig(conf5),overlay); enableUI(); }; }), // } // ____________________________ // ▲ Define and construct root { (function () { configs.root = { type: Transform, className: "root", children: [ { type: Graphic, localName: "overlay", height: NATURAL_HEIGHT, tangible: !1, cursor: WAIT_CURSOR, src: "viewport-frame", children: [ { type: Tooltip, className: "tooltip", configure: function () { this.setActive(toSelected( storage.get("use-tooltip-display"))); } } // tooltip ], configure: (function () { var conf1 = { localName: "fps-label", position: [8, 87], fontSize: 20, textAlign: "left", color: "white" }, // fps-text conf2 = { localName: "stack-label", position: [8, 87 + 23], fontSize: 20, textAlign: "left" }, // stack-text conf3 = { localName: "speed-label", position: [8, 87 + 23 * 2], fontSize: 20, textAlign: "left" }; // speed-text return function () { if (debugging) { this.prependChild(Label.create(conf1)); this.prependChild(Label.create(conf2)); this.prependChild(Label.create(conf3)); } }; })() }, // overlay { type: Region, localName: "top-bar", position: [0, -viewport_y], height: viewport_y }, // top-bar { type: Region, localName: "bottom-bar", position: [0, NATURAL_HEIGHT], height: viewport_y } // bottom-bar ], configure: function () { overlay = this.firstChild; tooltip = overlay.lastChild; this.toString = function () { return "[object Root]"; }; } }; root = assembleConfig(configs.root); }), // } // ▲ Define scene configure dictionary { (function () { // • Define private callbacks { var moveInLeftColumn = function () { this.parent.animatePositionTo( 46, 0, this.parent.y, "stop"); }, moveInRightColumn = function () { this.parent.animatePositionTo( 46, 300, this.parent.y, "stop"); }, hideMenubar = function () { this.parent.animatePositionTo( 26, this.parent.x, -56, "start"); }, hideScrollBar = function () { this.parent.animatePositionTo( 46, NATURAL_WIDTH + 400, this.parent.y, "start"); }; // } // • Define special functions { var showSceneButtons = (function () { var callback = function () { this.parent.animatePositionTo( 46, 300, this.parent.y, "stop"); }; /*NOTE This function must always be invoked using the "call" method. / return function (rev, waitTime) { waitTime = waitTime \|\| 20; rev = rev ? 0 : 1; this.getChildrenByEntry( "groupName", "scene-buttons") .forEach(function (ele, idx) { ele.x = (idx + rev) % 2 === 0 ? NATURAL_WIDTH + 252 : -252; ele.addTimeout(callback, waitTime); }); }; })(), hideSceneButtons = function (rev, evt) { rev = rev ? 0 : 1; evt.currentTarget.addTimeout( function () { this.parent.getChildrenByEntry( "groupName", "scene-buttons") .forEach(function (ele, idx) { if (evt.target !== ele) { ele.animatePositionTo(40, (idx + rev) % 2 === 0 ? -252 : NATURAL_WIDTH + 252, ele.y, "start"); } }); }, 6); }; // } // • Define configure functions { configs.subMenuConfig = (function () { var callback = function (evt) { if (evt.target instanceof Button) { switch (evt.region) { case "left-button": case "right-button": // { disableUI(); evt.currentTarget.lastChild .addTimeout(hideMenubar, 6); evt.currentTarget.firstChild .firstChild.addTimeout( function () { this.parent.animatePositionTo( 46, -400, this.parent.y, "start"); }, 6); evt.currentTarget.firstChild .children[1].addTimeout( function () { this.parent.animatePositionTo( 46, NATURAL_WIDTH + 100, this.parent.y, "start"); }, 6); if ( evt.currentTarget instanceof ( ScrollScene) ) { evt.currentTarget.children[1] .addTimeout(hideScrollBar, 6); } evt.currentTarget .getChildrenByKey("getSelectedValue") .forEach(evt.region==="left-button" ? function (ele) { ele.resetSelectedValue(); } : function (ele) { ele.saveSelectedValue(); }); beginExitToPrevScene( "horizontal-swipe-out"); break; // } } } }; return function () { this.addFader("horizontal-swipe-in"); this.addTimeout(enableUI, 66); this.addEventHandler("click", callback, !0); }; })(); // } // • Define button configure objects { configs.back_button = { type: MenuButton, localName: "left-button", textContent: "Back", position: [62, 21], width: 124, height: 42, color: "cyan", fontSize: 28 }; configs.ok_button = { type: MenuButton, localName: "right-button", textContent: "OK", position: [NATURAL_WIDTH - 62, 21], width: 124, height: 42, color: "pink", fontSize: 27 }; // } // • Define configure object pointer { var conf; // } // • Define children configure objects { configs.leafMenuBarChildren = [ (conf = clone(configs.back_button), conf.tooltipText = "Return to the previous "+ "menu without saving changes.", conf), (conf = clone(configs.ok_button), conf.tooltipText = "Save changes and " + "return to the previous menu.", conf) ]; // } // • Define scene configure objects { configs.scenes = { "opening-sequence": { type: Scene, localName: "opening-sequence", src: "black-background", children: [ { type: Label, localName: "loading-label", position: [250, 404], fontSize: 28, textAlign: "left", color: WHITE, shaded: !1 } // loading-label ], configure: function () { this.firstChild.addUpdater( function () { this.parent.textContent = "loading" + (".").repeat( (this.elapsedTime % 1000) / 267 \| 0); }, 128, 1/0); Object.keys(card_face_colors) .forEach(function (k) { CanvasContent.get(k + "-spark"); }); root.addTimeout(function () { setCurrentScene("title-screen"); }, 110); } }, "title-screen": { type: Scene, localName: "title-screen", children: [ { type: Card, localName: "r-card", groupName: "title-cards", position: [408, 105], rotation: 15, faceChar: 'R', backPattern: 1, faceColor: "blue", backColor: "blue", movable: !0, resplicable: !0 }, // r-card { type: Card, localName: "e-card", groupName: "title-cards", position: [196,117], rotation: -15, faceChar: 'E', backPattern: 1, faceColor: "orange", backColor: "blue", movable: !0, resplicable: !0 }, // e-card { type: Card, localName: "y-card", groupName: "title-cards", position: [476,133], rotation: 20, faceChar: 'Y', backPattern: 1, faceColor: "purple", backColor: "red", movable: !0, resplicable: !0 }, // y-card { type: Card, localName: "o-card", groupName: "title-cards", position: [340,101], rotation: 8, faceChar: 'O', backPattern: 1, faceColor: "green", backColor: "red", movable: !0, resplicable: !0 }, // o-card { type: Card, localName: "m-card-1", groupName: "title-cards", position: [128,127], rotation: -20, faceChar: 'M', backPattern: 1, faceColor: "red", backColor: "red", movable: !0, resplicable: !0 }, // m-card-1 { type: Card, localName: "m-card-2", groupName: "title-cards", position: [268,95], rotation: -8 + 2, faceChar: 'M', backPattern: 1, faceColor: "yellow", backColor: "blue", movable: !0, resplicable: !0 }, // m-card-2 { type: Card, localName: "card-1", position: [28, 263], rotation: -21, faceChar: '✧', backPattern: 1, faceColor: "red", backColor: "red", faceDown: !0, resplicable: !0 }, // card-1 { type: Card, localName: "card-2", position: [74, 293], rotation: 15, faceChar: '☆', backPattern: 1, faceColor: "cyan", backColor: "blue", faceDown: !1, resplicable: !0 }, // card-2 { type: Card, localName: "card-3", position: [56, 433], rotation: -6, faceChar: '❖', backPattern: 1, faceColor: "purple", backColor: "red", faceDown: !1, resplicable: !0 }, // card-3 { type: Card, localName: "card-4", position: [110, 427], rotation: 11, faceChar: '❇', backPattern: 1, faceColor: "green", backColor: "blue", faceDown: !0, resplicable: !0 }, // card-4 { type: Card, localName: "card-5", position: [477, 437], rotation: 32, faceChar: '✷', backPattern: 1, faceColor: "orange", backColor: "blue", faceDown: !1, resplicable: !0 }, // card-5 { type: Card, localName: "card-6", position: [547, 433], rotation: 8, faceChar: '※', backPattern: 1, faceColor: "yellow", backColor: "red", faceDown: !0, resplicable: !0 }, // card-6 { type: Card, localName: "card-7", position: [527, 304], rotation: -21, faceChar: '⍟', backPattern: 1, faceColor: "pink", backColor: "red", faceDown: !1, resplicable: !0 }, // card-7 { type: Card, localName: "card-8", position: [567, 272], rotation: -15, faceChar: '☾', backPattern: 1, faceColor: "blue", backColor: "blue", faceDown: !0, resplicable: !0 }, // card-8 { type: MenuButton, localName: "center-button", groupName: "scene-buttons", tooltipText: "Go to the main menu.", textContent: "Start", position: [300, 270], width: 222, height: 66, fontSize: 53, color: "red" }, // center-button { type: MenuButton, localName: "bottom-button", groupName: "scene-buttons", tooltipText: "Go to options.", textContent: "Options", position: [300, 342], width: 192, height: 48, fontSize: 36, color: "yellow" }, // bottom-button { type: Graphic, localName: "banner", position: [186, 381], width: 228, height: 36, src: "publisher-bar", visible: !0, tangible: !1, configure: function (prevSceneName) { switch (prevSceneName) { case "main-menu": case "options-menu": break; default: this.y = 459; this.addTimeout(function () { this.parent.animatePositionTo( 13, this.parent.x, 381, "stop"); }, 241); } } }, // banner { type: Graphic, localName: "developer-bar", position: [0, 424], height: 26, src: "developer-bar", children: [ { type: Region, localName: "left", tooltipText: "This is the last time "+ "this application was modified.", width: NATURAL_WIDTH >> 2, height: 26 }, // left { type: Region, localName: "center", tooltipText: "Visit: " + info.developerURL + " to see my other projects.", position: [225, 0], width: NATURAL_WIDTH / 3, height: 26 }, // center { type: Region, localName: "right", tooltipText: "This is the " + "application version.", position: [450, 0], width: NATURAL_WIDTH >> 2, height: 26 } // right ], configure: function (prevSceneName) { switch (prevSceneName) { case "main-menu": case "options-menu": break; default: this.y = NATURAL_HEIGHT; this.addTimeout(function () { this.parent.animatePositionTo( 13, this.parent.x, 424, "stop"); }, 241); } } } // developer-bar ], configure: function (prevSceneName) { switch (prevSceneName) { case "main-menu": showSceneButtons.call(this, !1, 208); this.addFader("diamond-in"); break; case "options-menu": this.addTimeout(enableUI, 66); showSceneButtons.call(this); this.addFader("vertical-swipe-in"); break; default: showSceneButtons.call(this, !1, 208); this.addFader("ease-in"); } if (prevSceneName !== "options-menu") { this.addTimeout(enableUI, 254); this.getChildrenByEntry( "groupName", "title-cards") .forEach(function (card, idx) { card.setFaceDown(!0); card.addTimeout( function () { this.parent.flipOver(); this.parent.addTimeout( function () { this.parent.parent.addEmitter( "card-sparks", this.parent); }, 64); }, 110 + 10 idx); card.addTimeout(function (x, y) { this.parent.animatePositionTo( 30, x, y, "card-stop"); }, 40 + 8 * idx, card.x, card.y); card.x = 300; card.y = 306; }); } this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); hideSceneButtons(!1, evt); switch (evt.region) { case "center-button": beginSceneExitTo( "main-menu", "diamond-out"); break; case "bottom-button": beginSceneExitTo("options-menu", "vertical-swipe-out"); break; } } }, !0); } }, "options-menu": { type: Scene, localName: "options-menu", children: [ { type: Card, localName: "card-9", position: [64, 66], rotation: 11, faceChar: '✪', backPattern: 1, faceColor: "red", backColor: "red", faceDown: !0 }, // card-9 { type: Card, localName: "card-10", position: [42, 384], rotation: -21, faceChar: '□', backPattern: 1, faceColor: "yellow", backColor: "blue", faceDown: !0 }, // card-10 { type: Card, localName: "card-11", position: [550, 306], rotation: 9, faceChar: '◊', backPattern: 1, faceColor: "purple", backColor: "red", faceDown: !1 },// card-11 { type: MenuButton, localName: "top-button", groupName: "scene-buttons", tooltipText: "Modify player attributes.", position: [NATURAL_WIDTH >> 1, 140 + 44], width: 306, height: 68, textContent: "Players", fontSize: 46, color: "yellow" }, // top-button { type: MenuButton, localName: "bottom-button", groupName: "scene-buttons", tooltipText: "Change visual options.", position: [NATURAL_WIDTH >> 1, 348 - 44], width: 306, height: 68, textContent: "Visuals", fontSize: 44, color: "orange" }, // bottom-button { type: MenuBar, title: "Options Menu", tooltipText: "Choose an option to view below.", localName: "menu-bar", shaded: !0, children: [ (conf = clone(configs.back_button), conf.tooltipText = "Return to " + "the Title Screen.", conf) ] } // menu-bar ], configure: function (prevSceneName) { switch (prevSceneName) { case "title-screen": showSceneButtons.call(this); break; default: showSceneButtons.call(this, !0); if (prevSceneName === "visual-options") { tooltip.setActive(toSelected( storage.get("use-tooltip-display"))); } } this.addFader("horizontal-swipe-in"); this.addTimeout(enableUI, 66); this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); switch (evt.region) { case "top-button": beginSceneExitTo( "player-options-menu", "horizontal-swipe-out"); break; case "bottom-button": beginSceneExitTo("visual-options", "horizontal-swipe-out"); break; case "left-button": evt.currentTarget.lastChild .addTimeout(hideMenubar, 6); hideSceneButtons(!0, evt); beginSceneExitTo("title-screen", "horizontal-swipe-out"); return; } hideSceneButtons(!1, evt); } }, !0); } }, "player-options-menu": { type: Scene, localName: "player-options-menu", children: [ { type: Card, localName: "card-12", position: [53, 351], rotation: -6, faceChar: '◖', backPattern: 1, faceColor: "orange", backColor: "red", faceDown: !0 }, // card-12 { type: Card, localName: "card-13", position: [532, 111], rotation: -21, faceChar: '⬡', backPattern: 1, faceColor: "red", backColor: "red", faceDown: !1 }, // card-13 { type: Card, localName: "card-14", position: [524, 422], rotation: 12, faceChar: '★', backPattern: 1, faceColor: "yellow", backColor: "blue", faceDown: !0 }, // card-14 { type: MenuButton, localName: "p1-button", groupName: "scene-buttons", tooltipText: "Go to player 1\'s options.", textContent: "Player 1", position: [300, 127], width: 268, height: 62, fontSize: 41, color: "red" }, // p1-button { type: MenuButton, localName: "p2-button", groupName: "scene-buttons", tooltipText: "Go to player 2\'s options.", textContent: "Player 2", position: [300, 205], width: 268, height: 62, fontSize: 41, color: "blue" }, // p2-button { type: MenuButton, localName: "p3-button", groupName: "scene-buttons", tooltipText: "Go to player 3\'s options.", textContent: "Player 3", position: [300, 283], width: 268, height: 62, fontSize: 41, color: "green" }, // p3-button { type: MenuButton, localName: "p4-button", groupName: "scene-buttons", tooltipText: "Go to player 4\'s options.", textContent: "Player 4", position: [300, 361], width: 268, height: 62, fontSize: 41, color: "yellow" }, // p4-button { type: MenuBar, title: "Players Menu", tooltipText: "Choose a player\'s menu to go to.", localName: "menu-bar", shaded: !0, children: [ (conf = clone(configs.back_button), conf.tooltipText = "Return to " + "the Options Menu.", conf) ] } // menu-bar ], configure: function (prevSceneName) { switch (prevSceneName) { case "options-menu": showSceneButtons.call(this); break; default: showSceneButtons.call(this, !0); } this.addFader("horizontal-swipe-in"); this.addTimeout(enableUI, 66); this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); switch (evt.region) { case "p1-button": beginSceneExitTo("player-1-options", "vertical-swipe-out"); break; case "p2-button": beginSceneExitTo("player-2-options", "vertical-swipe-out"); break; case "p3-button": beginSceneExitTo("player-3-options", "vertical-swipe-out"); break; case "p4-button": beginSceneExitTo("player-4-options", "vertical-swipe-out"); break; case "left-button": evt.currentTarget.lastChild .addTimeout(hideMenubar, 6); hideSceneButtons(!0, evt); beginSceneExitTo("options-menu", "horizontal-swipe-out"); return; } hideSceneButtons(!1, evt); } }, !0); } }, "visual-options": { type: Scene, localName: "visual-options", children: [ { type: Region, localName: "page", children: [ { type: Region, localName: "left-column", groupName: "column", position: [0, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "menu-background", position: [63, 27], title: "Menu Background", titleTooltipText: "Change the current background.", buttonColor: "red", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Display a %s " + "colored background."); } }, // menu-background { type: SelectionPanel, localName: "use-tooltip-display", position: [63, 139], title: "Tooltips", titleTooltipText: "Change if tooltip information" + " is displayed or not.", displayTooltipTexts: [ "Do not display tooltips " + "when your mouse is hovering.", "Do display tooltip " + "information." ], buttonColor: "yellow", shaded: !0 } // use-tooltip-display ], configure: function () { this.x = -400; this.addTimeout( moveInLeftColumn, 20); } }, // left-column { type: Region, localName: "right-column", groupName: "column", position: [NATURAL_WIDTH >> 1, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "game-background", position: [11, 27], title: "Game Background", titleTooltipText: "Change the " + "card game background.", buttonColor: "blue", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Display a %s " + "colored background."); } }, // in-game-background { type: SelectionPanel, localName: "use-special-FX", position: [11, 139], title: "Special FX", titleTooltipText: "Change if special effects " + "are displayed or not.", displayTooltipTexts: [ "Do not display " + "special effects.", "Do display special effects." ], buttonColor: "green", shaded: !0 } // use-special-FX ], configure: function () { this.x = NATURAL_WIDTH + 100; this.addTimeout( moveInRightColumn, 20); } } // right-column ] }, // page { type: MenuBar, title: "Visual Options", tooltipText: "Modify visual options below.", localName: "menu-bar", shaded: !0, children: configs.leafMenuBarChildren } // menu-bar ], configure: configs.subMenuConfig }, "main-menu": { type: Scene, localName: "main-menu", children: [ { type: ListDialog, localName: "settings-dialog", titleTooltipText: "These are the current " + "settings for a card game.", title: "Current Game Settings", position: [60, 74], width: 480, height: 162 + 24, shaded: !0, storageItemNames: [ "number-of-players", "rounds-each-game", "wins-to-win-game", "cards-each-round", "point-difficulty", "cards-for-match", "match-style", "deal-style" ] }, // settings-dialog { type: MenuButton, localName: "center-button", groupName: "scene-buttons", tooltipText: "Start a game once " + "you\'ve confirmed your settings.", textContent: "Start Game", position: [300, 312], width: 342, height: 72, fontSize: 49, color: "green" }, // center-button { type: MenuButton, localName: "bottom-button", groupName: "scene-buttons", clickableTooltipText: "Change the settings for " + "a card game.", textContent: "Settings", position: [300, 400], width: 236, height: 62, fontSize: 40, color: "light-blue" }, // bottom-button { type: MenuBar, title: "Main Menu", tooltipText: "Start a card game or " + "change settings or rules.", localName: "menu-bar", shaded: !0, children: [ (conf = clone(configs.back_button), conf.tooltipText = "Return " + "to the Title Screen.", conf) ] } // menu-bar ], configure: function (prevSceneName) { switch (prevSceneName) { case "settings-menu": showSceneButtons.call(this, !0); this.addFader("horizontal-swipe-in"); break; default: showSceneButtons.call(this); this.addFader("ease-in"); } this.addTimeout(enableUI, 66); this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); switch (evt.region) { case "center-button": hideSceneButtons(!1, evt); beginSceneExitTo( "card-game", "ease-out"); break; case "left-button": evt.currentTarget.lastChild .addTimeout(hideMenubar, 6); hideSceneButtons(!0, evt); beginSceneExitTo( "title-screen", "ease-out"); break; case "bottom-button": hideSceneButtons(!1, evt); beginSceneExitTo("settings-menu", "vertical-swipe-out"); break; } } }, !0); } }, "card-game": { type: CardGame, localName: "card-game" }, "settings-menu": { type: Scene, localName: "settings-menu", children: [ { type: Easel, localName: "button-tray", position: [120, 42], width: 360, height: 420, shaded: !0, src: "settings-tray", children: [ { type: Drag, localName: "header", tooltipText: "Configure game settings below.", position: [180, 29], width: 360, height: 52, rectMode: CENTER, draggable: !1 }, // header { type: MenuButton, localName: "top-button", tooltipText: "Change the number of " + "players or player " + "display properties.", textContent: "Player", position: [180, 99], width: 230, height: 58, fontSize: 41, color: "yellow" }, // top-button { type: MenuButton, localName: "center-button", tooltipText: "Change the current rules.", textContent: "Rules", position: [180, 171], width: 230, height: 58, fontSize: 42, color: "purple" }, // center-button { type: MenuButton, localName: "bottom-button", tooltipText: "Change card properties.", textContent: "Cards", position: [180, 243], width: 230, height: 58, fontSize: 42, color: "orange" }, // bottom-button { type: MenuButton, localName: "close-button", tooltipText: "Return to the Main Menu.", textContent: "Close", position: [180, 317], width: 194, height: 49, fontSize: 34, color: "cyan" } // close-button ], configure: function (prevSceneName) { switch (prevSceneName) { case "main-menu": this.y = NATURAL_HEIGHT + 8; this.addTimeout( function () { this.parent.animatePositionTo( 46, this.parent.x, 42, "stop"); }, 20); break; } } } // button-tray ], configure: function (prevSceneName) { switch (prevSceneName) { case "main-menu": this.addFader("horizontal-swipe-in"); this.addTimeout(enableUI, 66); break; default: this.addFader("vertical-swipe-in"); this.addTimeout(enableUI, 32); } this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); switch (evt.region) { case "top-button": beginSceneExitTo("player-settings", "vertical-swipe-out", 16); break; case "center-button": beginSceneExitTo("rule-settings", "vertical-swipe-out", 16); break; case "bottom-button": beginSceneExitTo("card-settings", "vertical-swipe-out", 16); break; case "close-button": evt.currentTarget.lastChild .addTimeout(function () { this.parent.animatePositionTo( 40, this.parent.x, NATURAL_HEIGHT + 8, "start"); }, 6); beginSceneExitTo("main-menu", "horizontal-swipe-out"); break; } } }, !0); } }, "player-settings": { type: Scene, localName: "player-settings", children: [ { type: Region, localName: "page", children: [ { type: Region, localName: "left-column", groupName: "column", position: [0, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "number-of-players", titleTooltipText: "Change the number of " + "players for a game.", position: [63, 27], title: "No. of Players", buttonColor: "red", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Play a %s player game."); } }, // number-of-players { type: SelectionPanel, localName: "use-auto-finish", titleTooltipText: "Change to exit with or " + "without a prompt to go to " + "the results screen when " + "the game ends.", displayTooltipTexts: [ "Have a results button " + "to click to proceed to " + "the results screen.", "Automatically exit " + "to results without a prompt." ], position: [63, 139], title: "Auto Finish", buttonColor: "green", shaded: !0 }, // use-auto-finish { type: SelectionPanel, localName: "use-extra-turn", titleTooltipText: "Change if an extra turn " + "is awarded for a correct " + "match (Multiplayer Only).", displayTooltipTexts: [ "Do not award an extra turn " + "for a correct match.", "Award an extra turn " + "for a correct match." ], position: [63, 251], title: "Extra Turn", buttonColor: "yellow", shaded: !0 } // use-extra-turn ], configure: function () { this.x = -400; this.addTimeout( moveInLeftColumn, 20); } }, // left-column { type: Region, localName: "right-column", groupName: "column", position: [NATURAL_WIDTH >> 1, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "use-auto-end-round", titleTooltipText: "Change if " + "the current round ends " + "right when the point " + "ceiling to win is met " + "(Single Player Only).", displayTooltipTexts: [ "End round normally by " + "having all cards cleared.", "End round upon the " + "point ceiling being met." ], position: [11, 27], title: "Auto End Round", buttonColor: "blue", shaded: !0 }, // use-auto-end-round { type: SelectionPanel, localName: "use-auto-continue", titleTooltipText: "Change to continue with " + "or without a continue " + "prompt when a round ends.", displayTooltipTexts: [ "Require the user to press " + "a continue button to move " + "on to the next round.", "Automatically move on " + "to the next round without " + "a prompt." ], position: [11, 139], title: "Auto Continue", buttonColor: "orange", shaded: !0 }, // use-auto-continue { type: SelectionPanel, localName: "order-of-turns", titleTooltipText: "Change how " + "to decide the order of " + "the players\' turns each " + "round (Multiplayer Only).", position: [11, 251], title: "Order of Turns", buttonColor: "purple", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]=""+ "Use the players\' number " + "labels to decide the order "+ "of the players\' turns."; this.displayTooltipTexts[1]=""+ "Decide the order of the " + "players\' turns by the " + "players\' wins."; this.displayTooltipTexts[2]=""+ "Let the CPU randomly " + "decide the order of " + "the players\' turns."; } } // order-of-turns ], configure: function () { this.x = NATURAL_WIDTH + 100; this.addTimeout( moveInRightColumn, 20); } } // right-column ] }, // page { type: MenuBar, title: "Player Settings", tooltipText: "Change player properties below.", localName: "menu-bar", shaded: !0, children: configs.leafMenuBarChildren } // menu-bar ], configure: configs.subMenuConfig }, "rule-settings": { type: ScrollScene, localName: "rule-settings", minPageY: -26, maxPageY: 46, pageHeight: 496, pageChildren: [ { type: Region, localName: "left-column", groupName: "column", width: NATURAL_WIDTH >> 1, height: 496 + 112, draggable: !0, children: [ { type: InputFieldPanel, localName: "rounds-each-game", titleTooltipText: "Change the " + "total number of rounds " + "that are allotted to " + "win a game.", position: [63, 27], title: "Rounds Each Game", maxInputLength: 1, shaded: !0 }, // rounds-each-game { type: InputFieldPanel, localName: "wins-to-win-game", titleTooltipText: "Change the " + "number of rounds that have " + "to be won in order to win " + "the game. Note that in " + "multiplayer mode if this " + "goal is not met within " + "the set number of rounds " + "the winner is the player " + "with the most wins.", position: [63, 139], title: "Wins to Win Game", maxInputLength: 1, shaded: !0 }, // wins-to-win-game { type: SelectionPanel, localName: "cards-for-match", titleTooltipText: "Change the number of cards " + "that need to be matched " + "durring a turn.", position: [63, 251], title: "Cards for Match", buttonColor: "red", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]="Two "+ "cards have to be paired during "+ "a player\'s turn (default)."; this.displayTooltipTexts[1]="Three "+ "cards have to be matched during "+ "a player\'s turn " + "(trickier than it sounds)."; this.displayTooltipTexts[2]="Four" + "cards have to be matched during "+ "a player\'s turn " + "(most difficult)."; this.displayTooltipTexts[3]="Choose"+ " one of the other settings " + "at random each round."; this.displayTooltipTexts[4]="Choose"+ " one of the other settings " + "at random each game."; } }, // cards-for-match { type: SelectionPanel, localName: "deal-style", titleTooltipText: "Change how "+ "the cards get dealt out. " + "If this setting is not " + "set to \"default\" it can " + "override the " + "\"Match Style\" setting.", position: [63, 365], title: "Deal Style", buttonColor: "blue", shaded: !0, configure: function () { this.setTooltipTexts([ "Default", "Same Shape","Same Color", "Different Shapes", "Different Colors", "Random Per Round", "Random Per Game"]); this.displayTooltipTexts[0]="Deal "+ "out cards in a standard fashion."; this.displayTooltipTexts[1]="Deal "+ "out cards that all have the " + "same shape but matchable colors."; this.displayTooltipTexts[2]="Deal "+ "out cards that all have the " + "same color but matchable shapes."; this.displayTooltipTexts[3]="Deal "+ "out cards that all have " + "different shapes but " + "matchable colors."; this.displayTooltipTexts[4]="Deal "+ "out cards that have different " + "colors but matchable shapes."; this.displayTooltipTexts[5]="Choose"+ " one of the other settings "+ "at random each round."; this.displayTooltipTexts[6]="Choose"+ " one of the other settings "+ "at random each game."; } } // deal-style ], configure: function () { this.addEventHandler("blur", function (evt) { if ( evt.target instanceof InputField && evt.target.buffer !== "" ) { var val = +evt.target.buffer; if (isInteger(val)) { switch ( evt.target.parent.localName ) { case "rounds-each-game": if (val === 0) { showMessageDialog(null, "There has to be at " + "least 1 round for a game!" ); break; } if ( val >= +evt.currentTarget .children[1].input.buffer ) { evt.target.keepBuffer(); return; } showMessageDialog(null, "There cannot be " + "fewer rounds than " + "required wins for a game!"); break; case "wins-to-win-game": if (val === 0) { showMessageDialog(null, "There has to be at " + "least 1 win for a game!"); break; } if ( val <= +evt.currentTarget .children[0].input.buffer ) { evt.target.keepBuffer(); return; } showMessageDialog(null, "There cannot be " + "more required wins " + "than rounds for a game!"); break; } } else { showMessageDialog(null, "Invalid entry! " + "Entry must be an integer."); } evt.target.buffer = ""; } }, !0); this.x = -400; this.addTimeout(moveInLeftColumn, 20); } }, // left-column { type: Region, localName: "right-column", groupName: "column", position: [NATURAL_WIDTH >> 1, 0], width: NATURAL_WIDTH >> 1, height: 496 + 112, draggable: !0, children: [ { type: SelectionPanel, localName: "cards-each-round", titleTooltipText: "Change " + "the number of cards that " + "get dealt out at a time.", position: [11, 27], title: "Cards Each Round", buttonColor: "yellow", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Deal out %s cards at a time."); } }, // cards-each-round { type: SelectionPanel, localName: "match-style", titleTooltipText: "Change " + "how the cards have to " + "be grouped during a turn.", position: [11, 139], title: "Match Style", buttonColor: "green", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]="Cards"+ " can only be paired by " + "the shape on the card face."; this.displayTooltipTexts[1]="Cards"+ " can only be paired by " + "the color on the card face."; this.displayTooltipTexts[2]="Cards"+ " can both be paired by the " + "shape or color on the card face."; this.displayTooltipTexts[3]="Choose"+ "one of the other settings " + "at random each round."; this.displayTooltipTexts[4]="Choose"+ "one of the other settings " + "at random each game."; } }, // match-style { type: SelectionPanel, localName: "point-difficulty", titleTooltipText: "Change the " + "amount of points that " + "have to be obtained in " + "order to win a round " + "(Single Player Only).", position: [11, 251], title: "Point Difficulty", buttonColor: "light-blue", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Have point " + "difficulty set to %s."); } }, // point-difficulty { type: SelectionPanel, localName: "time-countdown", titleTooltipText: "Set if " + "the game rounds are timed " + "and the difficulty " + "(Single Player Only).", position: [11, 365], title: "Time Countdown", buttonColor: "purple", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]="Have"+ " time countdown turned off."; this.displayTooltipTexts[1]="Have"+ " the timer countdown with " + "lots of time."; this.displayTooltipTexts[2]="Have"+ " the timer countdown with " + "some time."; this.displayTooltipTexts[3]="Have"+ " the timer countdown with " + "little time."; this.displayTooltipTexts[4]="Have"+ " the timer countdown with " + "very little time."; } } // time-countdown ], configure: function () { this.addEventHandler("blur", function (evt) { if ( evt.target instanceof InputField && evt.target.buffer !== "" ) { var val = +evt.target.buffer; if (isInteger(val)) { switch ( evt.target.parent.localName ) { case "points-each-card": if (val !== 0) { evt.target.keepBuffer(); return; } showMessageDialog(null, "There has to be at " + "least 1 point for " + "each card!"); break; } } else { showMessageDialog(null, "Invalid entry! " + "Entry must be an integer."); } evt.target.buffer = ""; } }, !0); this.x = NATURAL_WIDTH + 100; this.addTimeout(moveInRightColumn, 20); } } // right-column ], children: [ { type: MenuBar, title: "Rule Settings", tooltipText: "Change rule settings below.", localName: "menu-bar", shaded: !0, children: configs.leafMenuBarChildren } // menu-bar ], configure: configs.subMenuConfig }, "card-settings": { type: Scene, localName: "card-settings", children: [ { type: Region, localName: "page", children: [ { type: Region, localName: "left-column", groupName: "column", position: [0, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "deck-category", titleTooltipText: "Change " + "what deck of cards are used.", position: [63, 27], title: "Deck Category", buttonColor: "blue", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]=""+ "Use a deck with geometric"+ " shapes (Beginner)."; this.displayTooltipTexts[1]=""+ "Use a deck with star shapes"+ " (Easy)."; this.displayTooltipTexts[2]=""+ "Use a deck with letters " + "(Easy)."; this.displayTooltipTexts[3]=""+ "Use a deck with greek-like"+ " characters (Medium)."; this.displayTooltipTexts[4]=""+ "Use a deck with circled " + "numbers (Medium)."; this.displayTooltipTexts[5]=""+ "Use a deck with stick " + "characters (Hard)."; this.displayTooltipTexts[6]=""+ "Use a deck with strange "+ "characters (Hard)."; this.displayTooltipTexts[7]=""+ "Use all the decks mixed "+ "together (Expert)."; this.displayTooltipTexts[8]=""+ "Choose one of the other " + "settings at random each round."; this.displayTooltipTexts[9]=""+ "Choose one of the other "+ "settings at random each game."; } }, // deck-category { type: SelectionPanel, localName: "card-back-color-1", titleTooltipText: "Change " + "the first color for " + "the card back\'s pattern.", position: [63, 139], title: "Back Color 1", buttonColor: "red", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "This is set to %s."); } }, // card-back-color-1 { type: SelectionPanel, localName: "use-upside-down", titleTooltipText: "Change if " + "cards can be dealt " + "out upside-down.", displayTooltipTexts: [ "Deal out cards with all " + "the faces up right.", "Deal out cards that can " + "be upside-down at random." ], position: [63, 251], title: "Upside-Down", buttonColor: "orange", shaded: !0 } // use-upside-down ], configure: function () { this.x = -400; this.addTimeout( moveInLeftColumn, 20); } }, // left-column { type: Region, localName: "right-column", groupName: "column", position: [NATURAL_WIDTH >> 1, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, localName: "card-back-pattern", position: [11, 27], title: "Back Pattern", titleTooltipText: "Change " + "the style of the back of " + "the cards.", buttonColor: "yellow", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "Use the %s pattern."); } }, // card-back-pattern { type: SelectionPanel, localName: "card-back-color-2", titleTooltipText: "Change the " + "second color for the " + "card back\'s pattern.", position: [11, 139], title: "Back Color 2", buttonColor: "green", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "This is set to %s."); } }, // card-back-color-2 { type: SelectionPanel, localName: "use-sloppy-deal", titleTooltipText: "Change if " + "cards can be dealt out angled.", displayTooltipTexts: [ "Deal out all cards at a "+ "right angle.", "Deal out cards that can "+ "be angled at random." ], position: [11, 251], title: "Sloppy Deal", buttonColor: "purple", shaded: !0 } // use-sloppy-deal ], configure: function () { this.x = NATURAL_WIDTH + 100; this.addTimeout( moveInRightColumn, 20); } } // right-column ] }, // page { type: MenuBar, title: "Card Settings", tooltipText: "Change card settings below.", localName: "menu-bar", shaded: !0, children: configs.leafMenuBarChildren } // menu-bar ], configure: configs.subMenuConfig }, "results-screen": { type: Scene, localName: "results-screen", children: [ { type: ListDialog, localName: "results-dialog", titleTooltipText: "These are the results " + "of your Free Play game.", title: "Current Game Results", position: [60, 74], width: 480, height: 284, displayHeight: 214, shaded: !0, tabYStart: 284, setDisplayTextContent:CardGame.getResults }, // score-dialog { type: MenuBar, title: "Results Menu", tooltipText: "Below are the game results.", localName: "menu-bar", shaded: !0, children: [ (conf = clone(configs.back_button), conf.tooltipText = "Return " + "to the Free Play Menu.", conf), { type: MenuButton, localName: "right-button", tooltipText: "Play another game " + "with the same settings.", textContent: "Play Again", position: [NATURAL_WIDTH - 62, 21], width: 124, height: 42, fontSize: 23, color: "pink" } ] } // menu-bar ], configure: function () { this.addTimeout(enableUI, 66); this.addFader("ease-in"); this.addEventHandler("click", function (evt) { if (evt.target instanceof Button) { disableUI(); switch (evt.region) { case "bottom-button": break; case "left-button": CardGame.clearResults(); beginSceneExitTo("main-menu", "ease-out", 16); break; case "right-button": beginExitToPrevScene("ease-out",16); break; } } }, !0); } } }; // } // • Define sub scenes { (function () { Array.prototype.forEach.call(arguments, function (n) { configs.scenes["player-"+n+"-options"] = { type: Scene, localName: "player-"+n+"-options", children: [ { type: Region, localName: "page", children: [ { type: Region, localName: "left-column", groupName: "column", position: [0, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: InputFieldPanel, titleTooltipText: "This player\'s display name.", localName: "player-"+n+"-name", position: [63, 27], title: "Player Name", shaded: !0 }, // player-name { type: SelectionPanel, localName: "player-" + n + "-cpu-controlled", titleTooltipText: "Set if " + "this player is controlled " + "by the computer and the " + "difficulty " + "(Multiplayer Only).", position: [63, 139], title: "CPU Controlled", buttonColor: "light-blue", shaded: !0, configure: function () { this.setTooltipTexts( this.collection); this.displayTooltipTexts[0]=""+ "Have this player not " + "controlled by the CPU."; this.displayTooltipTexts[1]=""+ "Have this player " + "controlled by a " + "novice CPU."; this.displayTooltipTexts[2]=""+ "Have this player " + " controlled by a " + "intermediate CPU."; this.displayTooltipTexts[3]=""+ "Have this player " + "controlled by a hard CPU."; this.displayTooltipTexts[4]=""+ "Have this player " + "controlled by a pro CPU."; } } // player-cpu-controlled ], configure: function () { if (n === 1) { this.lastChild.end(); } this.addEventHandler("blur", function (evt) { if ( evt.target instanceof ( InputField) && evt.target.buffer !== "" ) { if (!storage.any( function (ele, k) { return evt.target .parent.localName!==k && evt.target.buffer === ele; })) { evt.target.keepBuffer(); } else { evt.target.buffer = ""; showMessageDialog(null, "Each player\'s " + "name must be unique!"); } } }, !0); this.x = -400; this.addTimeout( moveInLeftColumn, 20); } }, // left-column { type: Region, localName: "right-column", groupName: "column", position: [NATURAL_WIDTH >> 1, 46], width: NATURAL_WIDTH >> 1, height: NATURAL_HEIGHT - 46, children: [ { type: SelectionPanel, titleTooltipText: "Change the display " + "color for this player.", localName: "player-" + n + "-color", position: [11, 27], title: "Player Color", buttonColor: "red", shaded: !0, configure: function () { this.setTooltipTexts( this.collection, "This player\'s color " + "is set to %s."); } } // player-color ], configure: function () { this.x = NATURAL_WIDTH + 100; this.addTimeout( moveInRightColumn, 20); } } // right-column ] }, // page { type: MenuBar, title: "Player " + n + " Options", tooltipText: "Modify this " + "player\'s options below.", localName: "menu-bar", shaded: !0, children: configs.leafMenuBarChildren } // menu-bar ], configure: configs.subMenuConfig }; }); })(1, 2, 3, 4); // } }), // } // ▲ Define "traverse()" and launch()" { (function () { // • Define execute queues { /*⬇ An array of current updating components. / var updatables = [], /⬇ An array of current painting components. / paintables = []; // } // • Define traverse method { var traverse = (function () { /* These are matrix values that will * be passed down the tree to child * components to set there position, * scale, and rotation according * to their parent's transform * plus their own. / var matrixX = 0, matrixY = 0, matrixRotation = 0, matrixXScale = 1, matrixYScale = 1, tiers = [[],[],[],[],[],[],[],[]], depth = 0, release = function (comp) { if (comp.children) { comp.children.forEach(release); comp.children.length = 0; } if (!comp.invalidated) { comp.end(); } comp.revoke(); }; return function (comp) { comp.globalX = matrixX; comp.globalY = matrixY; comp.globalRotation = matrixRotation; if (comp.positionHeritable) { matrixX = (comp.localX = comp.x+matrixX); matrixY = (comp.localY = comp.y+matrixY); } else { comp.localX = comp.x; comp.localY = comp.y; } if (comp.rotationHeritable) { matrixRotation = (comp.localRotation = comp .rotation + matrixRotation); } else { comp.localRotation = comp.rotation; } if (comp.scaleHeritable) { matrixXScale = (comp.localXScale = comp .xScale matrixXScale); matrixYScale = (comp.localYScale = comp .yScale * matrixYScale); } else { comp.localXScale = comp.xScale; comp.localYScale = comp.yScale; } if (comp.children.length > 0) { comp.children.reduce( function (acc, ele, idx) { return acc[idx] = ele, acc; }, tiers[depth]) .forEach(function (ele) { if (ele.invalidated) { ele.parent.removeChild(ele); release(ele); return; } if (ele.active) { if (ele.updatable) { updatables.push(ele); } if (ele.visible) { paintables.push(ele); } if (ele.children) { depth++; traverse(ele); depth--; } } }); tiers[depth].length = 0; } matrixX = comp.globalX; matrixY = comp.globalY; matrixXScale = comp.globalXScale; matrixYScale = comp.globalYScale; matrixRotation = comp.globalRotation; }; })(); // } // • Define launch callback { pjs.launch = function (timeStamp) { var ctx = viewport.getContext("2d"), time, startTime = timeStamp; ctx.disableImageSmoothing(); pjs.assignEventCallbacks(); if (debugging) { var frame_rate = 0, stack_count = 0, frame_speed = 0; Object.setProperty(0xB, overlay.children[0], "textContent", function () { return (frame_rate \| 0) + " fps"; }); Object.setProperty(0xB, overlay.children[1], "textContent", function () { return stack_count + " stack"; }); Object.setProperty(0xB, overlay.children[1], "color", function () { return +stack_count>=80 ? "red" : "white"; }); Object.setProperty(0xB, overlay.children[2], "textContent", function () { /** The milliseconds that have * passed during iteration. / return (frame_speed \| 0) + " ms"; }); Object.setProperty(0xB, overlay.children[2], "color", function () { return frame_speed > 16 ? "red" : "white"; }); var running = !0, paused = !1; root.addEventHandler("keydown", function (evt) { switch (evt.keyCode) { case 27: // ESC pjs.clearEventCallbacks(); pjs.cancelMainLoop(); pjs.println("Program has ended."); break; case 112: // F1 pjs.println(""); pjs._clearLogs(); break; case 113: // F2 /NOTE: Striking the F2 key pauses the game * engine clock to * check animations. / paused = !paused; running = !running; break; case 114: // F3 break; case 115: // F4 break; case 116: // F5 //pjs.Program.restart(); break; } }, true); var prevTime = startTime, stepTime, pauseStartTime, pauseTime = 0; pjs.setMainLoop(function (timeStamp) { stepTime = timeStamp - prevTime; if (stepTime > 0) { frame_rate = 1000 / stepTime; } prevTime += stepTime; if (paused) { pauseTime = prevTime - pauseStartTime; } else { pauseStartTime = prevTime - pauseTime; } if (running) { output.canvas.style.cursor="context-menu"; try { traverse(root); stack_count = root.childCount; time = timeStamp-startTime-pauseTime; updatables.forEach(function (ele) { ele.update(time); }); updatables.length = 0; paintables.forEach(function (ele) { ele.paint(ctx); }); paintables.length = 0; output.context.drawImage(viewport, viewport_x, viewport_y); } catch (err) { pjs.clearEventCallbacks(); pjs.cancelMainLoop(); output.canvas.style.cursor = "default"; pjs.println("Runtime" + err); return; } finally { //stack_count = root.childCount; output.canvas.style.cursor=cursorStyle; } frame_speed = now() - timeStamp; } }); } else { pjs.setMainLoop(function (timeStamp) { output.canvas.style.cursor = "context-menu"; traverse(root); time = timeStamp - startTime; updatables.forEach(function (ele) { ele.update(time); }); updatables.length = 0; paintables.forEach(function (ele) { ele.paint(ctx); }); paintables.length = 0; output.context.drawImage(viewport, viewport_x, viewport_y); output.canvas.style.cursor = cursorStyle; }); } }; // } }), // } // ▲ Set Post-launch setup options { (function () { // • Disable output canvas anti-aliasing { /* NOTE: KA's function "noSmooth" * is unreliable to disable the output * canvas element's anti-aliasing. * I made a method to disable * anti-aliasing on any canvas drawing * context that it is called on. / output.context.disableImageSmoothing(); // } // • Set drawing context attributes { output.context.fillStyle = BLACK; output.context.fillRect(0, 0, OUTPUT_WIDTH, OUTPUT_HEIGHT); // } // • Deactivate client cursor { disableUI(); // } // • Set current scene { setCurrentScene("opening-sequence"); // } }) // } ]; // } // ________________________________________________ // ⭑ Define main loop managing methods { (function () { if (pjs.setMainLoop === noop) { (function () { var callback, mainLoop = function () { callback(now()); }; pjs.setMainLoop = function (fn) { callback = fn; pjs.draw = mainLoop; pjs.loop(); }; pjs.getMainLoop = function () { return callback; }; pjs.cancelMainLoop = function () { pjs.draw = noop; pjs.noLoop(); }; })(); /NOTE: Because of inconstant frame updates, the only way to fight not having noticeable * animation skips is to force the frame speed to * be as fast as possible and control animations * not by "frameCount" but by time passage. / /NOTE: If you are using a mobile device, having the inline frame update this fast * can deplete battery life much faster. / pjs.frameRate(1/0); } })(); // } // ⭑ Define deferred task execute function { asap = (function () { /* This function schedules a task (function) * and executes an array of them at a safe speed * to ensure frame rate to not slow too much. * More importantly, this method will allow mass * caching without EB interrupting the program. * Created by @MKaelin368 KWC (C) June 2018 / var tasks = [], idx, start_time, last_time, original_callback; var SENTINAL = !1; var handler = function () { if (last_time >= MAX_FRAME_TIME) { last_time = now(); } while (idx < tasks.length) { if ( (now() - last_time) < MAX_FRAME_TIME && tasks[idx](last_time) !== SENTINAL ) { idx++; } else { /* The current executing task * took too long to execute * or returned false. / last_time = now(); return; } } if (debugging) { pjs.println("Tasks completed in " + (now() - start_time) + " ms."); } tasks.length = 0; pjs.setMainLoop(original_callback); }; if (debugging) { var original_handler = handler; handler = function () { try { original_handler(); } catch (err) { pjs.clearEventCallbacks(); pjs.cancelMainLoop(); pjs.println("Task" + err); } }; } return function () { if (tasks.length === 0) { idx = 0; last_time = start_time = now(); if (debugging) { pjs.println("Start handling tasks..."); } if (pjs.getMainLoop() !== handler) { original_callback = pjs.getMainLoop(); pjs.setMainLoop(handler); } } Array.prototype.push.apply(tasks, arguments); }; })(); // } // ⬟ Setup pre-launch { // ▲ Paint launch prompt { (function (ctx) { ctx.save(); ctx.font = (46 ( OUTPUT_WIDTH / NATURAL_WIDTH) \| 0) + "px Arial"; ctx.fillStyle = BLACK; ctx.textAlign = "center"; ctx.fillText("click/tap to launch", OUTPUT_WIDTH >> 1, OUTPUT_HEIGHT >> 1); ctx.restore(); })(output.context); // } // ▲ Define launch click event handler { pjs.mouseReleased = function () { pjs.mouseReleased = noop; if (output.sketch && "onPause" in output.sketch) { output.sketch.onPause = function () { if (debugging) { pjs.println("sketch has paused"); } output.sketch.onPause = noop; output.canvas.style.cursor = DEFAULT_CURSOR; pjs.clearEventCallbacks(); pjs.cancelMainLoop(); }; } output.canvas.style.cursor = WAIT_CURSOR; pjs.setMainLoop(function () { if (pjs.launch === noop) { asap.apply(null, configs.startupTasks); } else { if (debugging) { pjs.println("loading complete"); } pjs.setMainLoop(pjs.launch); } }); }; // } // ▲ Pause "draw" caller { pjs.cancelMainLoop(); // } // ▲ Set pre-launch cursor { output.canvas.style.cursor = POINTER_CURSOR; // } // } // ⬟ Print debugging setup time { if (debugging) { pjs.println("Initial read took aprox. " + (now() - initTime) + " ms."); } // } }; // } // ￭ Execute initialize function { try { init(this, this.externals, !1); } catch (err) { this.clearEventCallbacks(); this.cancelMainLoop(); throw { message: "Setup" + err }; } // } }; main(); /******************************************************/
Folds	85,151,152,158,159,188,189,233,234,238,239,242,243,387,391,397,400,404,405,409,410,413,414,419,420,425,426,437,438,513,514,536,537,569,570,585,586,600,601,674,675,700,705,725,726,754,755,785,792,836,837,872,873,894,895,1025,1026,1088,1092,1188,1189,1206,1207,1228,1229,1255,1256,1276,1277,1290,1291,1304,1305,1319,1320,1349,1352,1380,1381,1539,1540,3177,3178,3383,3386,3982,3983,4248,4249,4552,4553,4648,4649,4794,4795,4957,4958,5153,5154,5206,5207,6161,6162,6774,6775,7322,7325,8755,8757,8875,8878,8947,8948,8964,8965,9001,9002,9061,9062,9202,9203,9210,9211,9258,9259,9566,9567,9596,9601,9875,9876,10247,10249,10327,10330,10350,10351,10388,10389,10441,10442,10464,10465,10468,10469,10479,10482,10512,10513,10846,10847,10963,10964,11106,11107,11223,11224,11328,11329,11332,11333,11462,11463,11635,11636,11975,11976,12151,12152,12219,12224,12374,12379,12622,12623,12653,12659,12696,12697,12766,12768,12780,12781,12810,12811,12814,12815,12818,12821,12826,12831,12843
Fork	true
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgILyo62ECgw
Votes	538
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6369047752998912","title":"Project: Memory++","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	KWC
Author Name	MKaelin368
Author ID	kaid_1018232416454567422505063
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739399975479
Updated	6 months ago, 1739399982004
Source Deleted	unknown