<html lang="en">
<!-- DISPATCH FROM NIL! IF YOU ARE READING THIS, YOU ARE CHEATING!
But if you're going to, you may as well read the developer docs:
https://github.com/diemastermonkey/dial-o-tron
A nostalgic DTMF hacker adventure played in 7 digit increments.
A cyberpunk fantasy of the Good Old Network on the precipice of
proprietary control and consumerist decay.
by Gary Arthur Douglas - 2024 GPL
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<title>Dial-O-Tron - For use with SIM approval only</title>
<!-- NEW styling (still needs optimizing) -->
<style>
a:link, a:visited {
color: orange; /* Links always same color */
}
body {
line-height: 1.13em;
display: flex;
justify-content: center;
background-color: #333333;
font-family: Arial, sans-serif;
flex-wrap: wrap; /* Cheap, easy vertical support */
overflow-x: hidden; /* No scroll horiz */
}
#ui_device {
display: flex;
order: 1; /* For media query reordering */
}
#ui_container {
width: 280px;
height: 320px;
background: linear-gradient(145deg, #a9a9a9, #c0c0c0);
border-radius: 20px;
padding: 20px;
display: grid;
grid-template-columns: repeat(4, 60px);
grid-gap: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 3px solid #333;
}
.ui_output_right {
font-family: 'Press Start 2P', monospace; /* Google font */
font-size: 1.0em;
background: linear-gradient(145deg, #a9a9a9, #c0c0c0);
border-radius: 20px;
padding: 20px;
display: flex;
width: 280px;
height: 320px;
/* NO: margin-left: 1em; */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 3px solid #333;
order: 2; /* For media query reordering */
}
.ui_key {
width: 60px;
height: 60px;
background-color: #e0e0e0;
color: #333;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
cursor: pointer;
user-select: none;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background 1.0s ease, box-shadow 1.0s ease;
}
.ui_key:active {
background-color: #d4d4d4;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Style for red keys (FO, F, I, P) */
.ui_key.red {
background-color: #d32f2f;
color: white;
}
.ui_key.red:active {
background-color: #b71c1c;
}
.ui_sim_master {
font-family: 'Press Start 2P', monospace; /* Google font */
position: absolute;
top: 0; left: 0;
width: 90%;
height: 90%;
background: rgba(0, 0, 0);
color: white;
padding: 5%;
display: none; /* Default invisible */
}
/* Media query reverses order of panels for wide vs narrow */
@media (max-width: 670px) {
body {
flex-direction: column; /* Stacks elements vertically */
}
#ui_output_right {
order: 1;
}
#ui_device {
order: 2;
}
}
/* For effects only */
/* Container */
.img-fuzz {
position: absolute;
bottom: 0px;
/* Note: Transition speed = self-delete time */
transition: opacity 7.7s linear;
overflow: hidden;
}
.img-fuzz img {
display: block;
width: 100%;
height: 100%;
opacity: 44%; /* new */
}
</style>
<!-- DOT Device Implementation and Audio -->
<script>
// DOT (device) code
// =========================================================
// Class: DOT Object
// The DOT should be treated as an actual device, with OS,
// state, functions. Game events affecting the DOT should
// interact directly with this object. NPC/events can use
// it as a whiteboard, adding/reading/modifying properties.
// It runs timers for NPCs/events, which might be triggered
// by response scripts.
// ---------------------------------------------------------
class DOT_Type { // Arg: Disused (?) own number
// Constructor
constructor (argNumber) {
this.prng = new PRNG(argNumber); // In case we need to Procgen
this.number = argNumber; // For display only
this.offset = this.prng.randInt(20); // For procgen event clock if needed
this.factor = this.prng.rand() * 6 - 3; // For clock
// Actual random properties
// this.pickup = Math.floor(Math.random() * 64);
// Common properties
this.heat = 0; // Citations. If > X, GTA warrant! Hacker term.
this.locked = false; // If true, SIM locked! Mb timestamp?
this.bricked = false; // If true, bricked + active DOM warrant!
this.timer = null; // Timer handle, if active
this.last = "5551212"; // Last completed call to...
this.screenElement = ""; // ID of screen DIV, set it on create!
this.simElement = null; // SIM-controlled element, ex: ui_sim_master
this.keypress = "A"; // Last 'key' press; Many uses.
this.targetkey = null; // Dynamic - could be skipped but safer here
this.dialbuffer = ""; // Accumulates numbers as they're dialed
this.buffer = ""; // Used to hack-together programs, more
this.br = "<br/>"; // Handy
this.datamode = false; // Used by many 'services'
this.achievements = null; // Set on create, for convenience
// 'Hooks' are mostly invisible triggers, modified dynamically
// Ex: 'A00' is a system cmd to clear 'cmd buffer' (this.buffer)
// Thus scripts can add to/clear all other hooks by calling A00
// TO DO: Move to some inline data somewhere, parse on init
this.hooks = {
// Not ready yet
// 'A00':'{DOT.write(" DOT Reset!"); console.log("Do DOT.reset()");}',
// 'A09':'{DOT.write(" buffer=log"); DOT.buffer=DOT.log;}', // Not ready
// Target key workflow: 7 -> left-right top-down
'A71':'{DOT.write(" target show" + "<br/><br/>" + DOT.targetkey);}',
'A72':'{DOT.write(" nop");}',
'A73':'{DOT.write(" nop");}',
'A74':'{DOT.write(" target f"); DOT.targetkey="B";}', // See DTMF
'A75':'{DOT.write(" target i"); DOT.targetkey="C";}', // for why
'A76':'{DOT.write(" nop");}', // for why
'A77':'{console.log("DOT: A13 Target *"); DOT.targetkey="*";}',
'A78':'{console.log("DOT: A14 Target #"); DOT.targetkey="#";}',
'A79':'{DOT.write(" target clear"); DOT.targetkey=null;}',
// Arranged for 'keypad' logic, workflow goes left-to-right up-to-down
// Dump general buffer and clear dial buffer
'A81':'{DOT.write(" buffer dump<br/><br/>" + DOT.buffer);}',
'A84':'{DOT.write(" buffer=last"); DOT.buffer=DOT.last;}',
'A85':'{DOT.write(" nop");}', // for why
//
// Exec doesn't work yet. This ONLY dials numbers.
// 'A86':'{DOT.write(" buffer exec"); eval(DOT.buffer);}',
//
// IMPORTANT: Buffer 'hook' only *copies* the number in buffer 'to' key
// BUG: Initiates own call, thus breaking Caller ID blocking. --v
// BUG: Really demonstrates need for a 'DOT.screenreset' or something
'A87': '{code="iCurrentNPC=" + DOT.buffer + "; " + "DOT.write(null); " + "DOT.write(sSystemName + DOT.br + iCurrentNPC + DOT.br); " + "console.log(code); fnNPCInteraction(iCurrentNPC);"; DOT.setHook (DOT.targetkey, code); DOT.write(" buffer hook<br/><br>" + DOT.targetkey + " -> buffer"); }',
//
'A89':'{DOT.write(" buffer clear"); DOT.buffer="";}',
// A0x System commands
// Aka gold mine :P
'A#0':'{DOT.write(" symbol dump<br/><br/>"); msg=Reflect.ownKeys(DOT.hooks).join(", "); DOT.write(msg);}',
'A08':'{DOT.datamode = !DOT.datamode; DOT.write(" data toggle<br/><br/>" + DOT.datamode);}',
// DOT (only) reset
'A00':'{console.log("DOT: A99 Reset DOT"); console.log("RESET");}',
// The evil DOT HCF!
'A*#A':'eval(aGlobalTokens["HALTCATCHFIRE"]);'
//
};
// New, associative array multiple timers?
// this.timers = {[null]:[null]}; // timers[1112222] would -> (timer handle)
} // End constructor
// Function: Return own clock-based wave value (optional salt)
// ! With a time offset arg, can be a time machine !
getWave (argSalt) { // Use salt for multiple waves
return (
this.factor *
Math.sin(
Math.floor (Date.now() / 1000) + this.offset
)
); // End return statement
}; // End function
// Function: Very simple outputter - later, w/throttle etc
// Call with null to clear output area
// Writes to output area to be set at instantiation!
write (argOut) {
if (argOut == null) { // Clear command
document.getElementById(this.screenElement).innerHTML = "";
return;
}
// Just append to write
document.getElementById(this.screenElement).innerHTML
+= argOut;
} // End function
// Function: Launch a one-shot timer to run (arg) code as eval
// Expects SECONDS as argument (it gets *= 1000)!
// Pass null to cancel any pending timer
setEvent (argCode, argTime = 0) { // Default to immediately
// To cancel timer
if (argCode == null) {
if (this.timer != null) { // Redundatnt?
clearTimeout(this.timer);
this.timer = null;
console.log ("DOT event timer cleared");
}
return; // Done here
}
// Launch timer w/local property so others can check
console.log ("DOT timer set for " + argTime + "s for " + argCode);
this.timer = setTimeout (
// When time, run code and unset timer var
function() {
eval (argCode);
DOT.setEvent(null); // Side-recurse to clear timer
},
argTime * 1000 // ...after X sec
); // End setTimeout
}; // End function
// Function: Add, overwrite, or delete an existing hook
// Pass hook string, response/code to create or overwrite
// Pass hook string, null to clear an existing hook
// Performs validation, appends to this.hooks
// Reminder: Hooks, like responses, may contain runtime tokens/code
// To do: Optional 3rd argument 'hook expirey', to self-delete?
setHook (argHookString, argResponseString, argTime = 0) { // Default forever
// To delete a hook
if (argResponseString == null) {
if (argHookString in this.hooks) {
delete (this.hooks[argHookString]);
console.log ("DOT: Hook cleared for " + argHookString);
}
return; // Done here
}
// Create hook (later, create expiry timer if desired)
console.log ("DOT: Hook added for " + argHookString);
this.hooks[argHookString] = argResponseString;
}; // End function
// Function: The bad guys call convenience to disable ("brick") a unit.
// NEW: Updates 'Achievements' content for end game screen
setBricked () {
this.achievements['Bricked'] = true;
if (this.simElement == null) {
console.log ("DOT: Firmware error, SIM layer undefined!"); // obscure
return (false);
}
// Populate achievements
document.getElementById(this.simElement + "_achievements").innerHTML // Hokey, yes
= Object.keys(this.achievements)
.map(key => `<input type="checkbox" ${this.achievements[key] ? 'checked' : ''}>${key} `)
.join('');
// Populate a fun random conviction
var iConvict
= Math.floor(Math.random() * aGlobalTokens['CONVICTIONS'].length); // For your eyes :)
document.getElementById(this.simElement + "_conviction").innerHTML
= aGlobalTokens['CONVICTIONS'][iConvict];
// And a fun random Base64 easter egg 'Verdict ID'
var iVerdictID
= Math.floor(Math.random() * aGlobalTokens['DEATHTAUNTS'].length);
document.getElementById(this.simElement + "_verdictid").innerHTML
= aGlobalTokens['DEATHTAUNTS'][iVerdictID];
// For now simply set visible - it should be 'on top' of entire page
document.getElementById(this.simElement).style.display = "block";
return (true); // To caller: was bricked
} // End func
} // End DOT_Type
// DTMF Dialer code
// =========================================================
// DTMF frequencies as associative array of key->freq_a,freq_b
// ---------------------------------------------------------
const GToneDurationMS = 150; // Tone duration (ms) per Wikipedia
const dtmfFrequencies = {
'1': [697, 1209], '2': [697, 1336], '3': [697, 1477],
'4': [770, 1209], '5': [770, 1336], '6': [770, 1477],
'7': [852, 1209], '8': [852, 1336], '9': [852, 1477],
'*': [941, 1209], '0': [941, 1336], '#': [941, 1477],
'A': [697, 1633], // FO Key
'B': [770, 1633], // F Key
'C': [852, 1633], // I Key
'D': [941, 1633] // P Key
};
// Function: Create AudioContext (or webkitAudioContext, depending)
// ---------------------------------------------------------
function fnCreateAudioContext () {
console.log ("DOT: Audio initialized");
return (new (window.AudioContext || window.webkitAudioContext)());
}
// Function: Play a DTMF tone for arg key
// ---------------------------------------------------------
function fnPlayDTMF (sArgKey) {
// Init audio context only if necessary
GAudioContext = GAudioContext || fnCreateAudioContext();
const iCurrentTime = GAudioContext.currentTime;
const aFrequencies = dtmfFrequencies[sArgKey];
// Audio context clock time is microseconds (not milliseconds)
const iStopClockTime = iCurrentTime + GToneDurationMS / 1000;
// Define both tones
const tone1 = fnGenerateTone(aFrequencies[0], GAudioContext);
const tone2 = fnGenerateTone(aFrequencies[1], GAudioContext);
// Start both tones
tone1.start(iCurrentTime);
tone2.start(iCurrentTime);
// Tell both "stop after duration"
tone1.stop(iStopClockTime);
tone2.stop(iStopClockTime);
} // End func
// Function: Generate an oscillator and return as object
// Oscillator set to global GAudioVolume volume
// ---------------------------------------------------------
function fnGenerateTone (argFrequency, argAudioContext) {
const oOsc = argAudioContext.createOscillator();
const oGainNode = argAudioContext.createGain();
oOsc.type = 'sine';
// Set frequency and volumne
oOsc.frequency.setValueAtTime (argFrequency, argAudioContext.currentTime);
oGainNode.gain.setValueAtTime (GAudioVolume, argAudioContext.currentTime);
// Connect oscillator to gain, to destination
oOsc.connect(oGainNode);
oGainNode.connect(argAudioContext.destination);
return(oOsc);
} // End func
</script>
<!-- NPC Implementation -->
<script>
// NPC Code
// ================================================================
// Class: NPC - Non-Player "Character"
// Can be a person or a device, system glitch, etc
// argSeed is the NPC's phone number, but could differ
// *Hardwired* N% chance of even existing (see this.exists)
// NEW: Optional argResponseScripts; it can do own interactions etc
// ...defaults to global
// ----------------------------------------------------------------
function NPC_Type (argSeed, argResponseScripts = aResponseScripts) {
this.prng = new PRNG(argSeed); // Seed is just phone number
this.number = argSeed; // For display only
// NOTE: Changing order of prng accesses changes *everything* !
this.exists = this.prng.randInt(2) === 0 ? 1 : 0; // If 1-in-N, true, else false
this.offset = this.prng.randInt(20); // Procgen int for clock wave offset
this.factor = this.prng.rand() * 6 - 3; // Procgen float for clock wave factor
this.script = this.prng.randInt(64); // Script NUM. Mod len(scripts) = script index
// Actual (random) random properties - ie NPC random behavior
// Middle response: Modulo the value with the number of choices
this.response = Math.floor(Math.random() * 64); // Middle response *number*
// All responses (delimited by ; ) in procgen'd script.
// Relies on global fnResponseArray :(
var temp = this.script % argResponseScripts.length;
this.aResponses = fnResponseArray (argResponseScripts[temp]);
this.greeting = this.aResponses[0];
temp = this.response % (this.aResponses.length - 2) + 1; // Drops first/last
this.mid = this.aResponses[temp]; // fka 'response'
this.goodbye = this.aResponses[this.aResponses.length - 1];
// Ordinary properties commonly used as whiteboards, etc
// More can be added dynamically by scripts
// Response greeting/mid/goodbye for convenience
this.buffer = ""; // For text, code, etc
this.text = "";
this.track = 0; // Scores, state, etc
this.connected = false; // Data services state
this.page = 0; // Pagination
this.footer = "<br/><br/>[disconnected]"; // Sometimes overridden
// Method: Return own clock-based wave value (optional salt)
// ! With a time offset arg, could be a time machine !
this.getWave = function (argSalt) { // Salt if multiple waves
return (
Math.sin(Math.floor (Date.now() / 1000) + this.offset) * this.factor
); // End return statement
}; // End getWave anon func
// Method: Returns 'snippet' of object or false if nonexistent
// Optional regex: Remove any matches
this.getSnippet = function (argRegex = null) {
if (! this.exists) {
return (false);
}
// Crudely crammed-together everything
var sOut = this.number + ';'
+ 'intro=' + this.greeting + ';mid=' + this.mid
+ ';goodbye=' + this.goodbye;
// To do: Apply optional regex
return (sOut);
}; // End getSnippet
// Method: Return last 4 of own number ie ###-1234
// For convenient use in scripts
this.lastFour = function () {
return (this.number.slice (3, 7));
};
}; // End NPC object
// Simply returns a response script as an array, for rand/PRNG etc
// Ultimately should replace tokens too
// ---------------------------------------------------------
function fnResponseArray (argScriptsArray) {
// New fancy regex CAN miss some edge cases
// Beware of dangling or lonely braces
return (argScriptsArray.split(/;(?![^{}]*\})/));
}
// Function: Returns a Seedable PRNG object
// ---------------------------------------------------------
function PRNG (argSeed) {
this.state = argSeed || 1;
this.rand = function() { // Just like Math.random()
var x = Math.sin(this.state++) * 10000;
return (x - Math.floor(x));
};
this.randInt = function (argMax) { // Convnient return 0 to argMax
return (Math.floor(this.rand() * argMax));
};
this.seed = function(newSeed) { // Set seed
this.state = newSeed || 1;
};
}; // End PRNG
</script>
<!-- Game Data -->
<script>
// Simple Static (?) tokens. Use as <token> in text AND code.
// They should be usable as single- or multi-value entries
// As multiple, they should be selected randomly or by procgen
// These would be used for <name> or <greeting>, for more variety
// Never use a DIV! Take care with styling. Use <br />, not <br/>.
// Could be probably be recursive/self-modifying
// Ex: Locating by key: if ("keyname" in dict) { ... }
// Ex: Writing to DOT screen: DOT.write(aGlobalTokens["BBSJUNGLE"])
// For example, in a responsescript: Execute contents of aGlobalTokens['PZMFIEND']
// "Hello; {eval(aGlobalTokens['PZMFIEND']);}; Goodbye"
// NOT YET IMPLEMENTED but I am leaning on them
const aGlobalTokens = {
// A few basic symbols/ascii here
'PHONESYMBOL':'📞', 'CHECKSYMBOL':'✓', 'UNCHECKSYMBOL':'✘',
'SATELLITESYMBOL':'🛰', 'JOYSTICKSYMBOL':'🕹',
'WARNINGSYMBOL':'⚠', 'LOCKSYMBOL':'🔒',
'RIGHTSYMBOL':'➤', 'LEFTSYMBOL':'➥',
'NOENTRYSYMBOL':'⛔',
'HOURGLASSSYMBOL': '⏳', // aka '⏳'
// List of joke convictions for end screen, elsewhere
// Writing this was the best part :)
'CONVICTIONS' : ['UNMONETIZED CONTENT', 'ANTICONSUMERISM', 'ANTIPROFITEERING',
'ADVERSERIAL COMPUTING', 'CONSUMER MISALIGNMENT', 'UNLICENSED REPAIR', 'COUNTERINFLUENCE',
'COMMUNAL CODING', 'PERK REJECTION', 'FOLLOWER SHUNNING', 'MEMETIC TRANSGRESSIONS',
'UNLICENSED ALGORITHMS', 'BRAND AMBIVALENCE', 'CLICK HOARDING', 'INSUFFICIENT ENGAGEMENT',
'BRAND DISLOYALTY', 'COLLECTIVE DEBRANDING', 'COLLECTIVE DISENGAGEMENT', 'ALGORITHM HIJACKING',
'FUGITIVE DATA', 'INTELLECTUAL PROPERTY CACHING', 'SPONSOR HOSTILITY', 'COOKIE EVASION',
'HOME MARKET INVASION', 'SOURCE RAIDING', 'DEMOGAPHIC OBFUSCATION', 'DEMOGRAPHIC JAMMING',
'INTENT JAMMING', 'SENTIMENT OBFUSCATION', 'OPPORTUNITY SABOTAGE', 'INFLUENCE HACKING',
'MEME DEFLATION', 'FILTER TAMPERING', 'BIT SMUGGLING', 'MALFORMED PROTOCOL USE',
'NETWORK USER EMPOWERMENT', 'SOURCE MIRRORING', 'UNHACKING', 'BEING SO LEET', 'PDF HOARDING',
'NOT SUPPORTING THE EFF!', 'NOT SUPPORTING THE EFF!'],
// List of Base64'd death taunts. And a 'Brazil' reference.
'DEATHTAUNTS': ['R0FNRSBPVkVSIQo=', 'U08gSVQgR09FUwo=', 'QUlOVCBQRVJTT05BTAo=',
'WUVSRE9ORUJSVUgK', 'RU5ET0ZMSU5FCg==', 'SVRTT1ZFUk1BTgo=', 'Q0NTIDE5NjctMjAxOAo=',
'TklDRSBUUlkgVEhPCg==', 'Qy1ZQSEK', 'WUEgTUlTU0VEIQo=', 'R09UQ0hBIQo=',
'QU5ZIExBU1QgV09SRFM/Cg==', 'VEhYNFBMQVlJTkchLUdBRAo=', '27B/6'],
// Official SIM sh*t
'SIMREVIEWWARNING': 'Hacking alert! Unit locked for TOE review. Wait time ~ 3m. Remain seated. DO NOT evade review!',
// A 'Denied' msg for Level 1 Bots, in ROT-13. Append NPC.number(last 4) or clue nonsense.
// Requires data mode on, a target key set, last 4 digits in DOT buffer = NPC last 4
'BOTLEVEL1GATECHECK': '1 Qngn zbqr 2 Frg gnetrg xrl 3 Znxr ohssre ynfg 4 rdhny gb:',
//
// Code as tokens
//
// "Get blocked by a call recipient" mostly display; Blocker hooks own number!
'GETBLOCKED' : '{DOT.write("<br/><br/>[loud beep]<br/><br/>Error:<br/>Caller ID blocked!")}',
// BBS Paginators: Most of this is formatting text etc. Fix that.
// Checks to see if 'connected' BBS, if not clears self/DOT.datamode - but BBS code should do that work.
// FIX this: Jumps many hoops because no DOT.screenreset or DOT.dial methods yet
'BBSPREVPAGE': '{if (NPC.connected == false) DOT.setHook("*", null); if (NPC.connected == false) DOT.datamode=false; NPC.page -= 1; DOT.write(null); if (NPC.connected) DOT.write (sSystemName + "<br/>" + iCurrentNPC.slice(0, 3) + "-" + iCurrentNPC.slice(3) + "<br/>"); if (NPC.connected) fnNPCInteraction (iCurrentNPC); if (NPC.connected == false) DOT.write(sSystemName + "<br/>" + DOT.keypress);}',
// Sadly, total duplicate except sign. Use another token??
'BBSNEXTPAGE': '{if (NPC.connected == false) DOT.setHook("#", null); NPC.page += 1; DOT.write(null); if (NPC.connected) DOT.write (sSystemName + "<br/>" + iCurrentNPC.slice(0, 3) + "-" + iCurrentNPC.slice(3) + "<br/>"); if (NPC.connected) fnNPCInteraction (iCurrentNPC); else DOT.datamode = false; if (NPC.connected == false) DOT.write(sSystemName + "<br/>" + DOT.keypress);}',
// Advanced: 'fi(e)nd' wardialer by pzm. Entirely one code block.
// * Note: Handling code blocks isn't in fnInterpolate yet!
// Translation: Set sPre = last dialed prefix, randomize last 4, dial that NPC, start interaction
'PZMFIEND' : '{sPre=DOT.last.substr(0,3); iCurrentNPC = sPre + "" + Math.floor(Math.random()*9999); DOT.write(null); DOT.write("Fi(e)nd v9 by pzm<br/><br/> -> "); DOT.write(iCurrentNPC.slice(0, 3) + "-" + iCurrentNPC.slice(3) + "<br/>"); fnNPCInteraction(iCurrentNPC); }',
//
// Try a random number in current prefix, get snippet if exists (else false)
// Best used as: eval(aGlobalTokens['GETRANDOMNPCSNIPPET'])
'GETRANDOMNPCSNIPPET' : 'iCheckNPC = DOT.last.substr(0,3) + String(Math.floor(Math.random()*9999)); oCheckNPC = new NPC_Type (iCheckNPC, aResponseScripts); sSnippet = oCheckNPC.getSnippet(); console.log (sSnippet);',
// Halt and catch fire (forever). Note: disables all ui!
'HALTCATCHFIRE' : 'document.getElementById("ui_container").disabled = true; DOT.write(null); DOT.write(sSystemName + "<br/>HCF Executed<br/><br/>Catching fire...<br/><br/>For more information on the HCF feature, refer to your DOT engineer\'s guide.<br/><br/>Manufactured by Unhacker"); fnHaltCatchFire(0.33);',
//
// 'Graphics' for BBSes, ads, etc
// Single BBS, as an array of screens. See response script for how used.
'BBSJUNGLE' : [
'░▀▀█░█░█░█▀█░█▀▀░█░░░█▀▀░░<br/>' // Page 0 Fancy intro
+ '░░░█░█░█░█░█░█░█░█░░░█▀▀░░<br/>'
+ '░▀▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░░<br/>'
+ '░█▀▄░█▀▄░█▀▀░░░░░░░░░░░░░░<br/>'
+ '░█▀▄░█▀▄░▀▀█░░░░░░░░░░░░░░<br/>'
+ '░▀▀░░▀▀░░▀▀▀░░░░░░░░░░░░░░<br/>',
// '┏━ ┏━┛┃┃┃┏━┛<br/>┃ ┃┏━┛┃┃┃━━┃<br/>┛ ┛━━┛━━┛━━┛<br/>' // Nice ASCII no fit
'_ Board News _<br/>' // Page 1 News
+ '✓ Modem (new)<br/>' + '✓ Posts<br/>' + '✓ Recon<br/>'
+ '✘ Files down <br/>'
+ '✘ Layout bugs<br/>',
'_ Tips by NIL0 _<br/>' // Page 2 Tips
+ '🔹 A81 b dump<br/>' + '🔹 A84 b last<br/>'
+ '🔹 A74 targ f<br/>' + '🔹 A87 b hook<br/>'
+ '🔹 AVO id CR ;)<br/>',
'_ Recon _<br/>' // Intel/rabbit holes?
+ '🔹 2121233 bot<br/>' + '🔹 5458995 sim<br/>'
+ '🔹 5551355 flx<br/>' + '🔹 2226065 flx<br/>'
+ '🔹 5651654 pzm?<br/>',
// Peer board 'Weird Howard' (kinda meh)
/*
'🔹UFOs 🔹Cryptids 🔹Weird Sh*t<br/>'
+ ' | ⡇⢸ ⢀⡀ ⠄ ⡀⣀⢀⣸ |<br/>| ⠟⠻ ⠣⠭ ⠇ ⠏ ⠣⠼ |<br/>' // Dot matrix
+ '+- HOWARD\'S -+<br/>',
*/
' ~.<br/>'
+ ' _/\\ Jungle BBS<br/>' // End BBS
+ ' /\\_ <br/>'
+ ' ___ Thanks for<br/>'
+ ' ... visiting! ....<br/>'
+ ' ..................<br/>'
], // Remember commas!
'CHECKED': '✓', // Handy check/uncheck boxes
'UNCHECKED': '✘',
"DISUSED" : "" // More tokens here
}; // End const
// NPC Response Script Templates
// ----------------------------------------------------------------
// Each field is delimited by semicolon.
// *IMPORTANT!* Adding/removing/moving list entries *WILL* change the ENTIRE universe!
// You *MUST* recalculate key story clues/contacts/rabbit holes EVERY time. Test, too!
// To do: Pauses should be simulated where ... are found.
//
// Implied format:
// Initial response(s); Multiple responses; hangup message(s) (last only)
// <NOTHING>/other disused tokens are workarounds for old code: Fix them.
//
// Important: Initial, mid, or end responses can be empty - or just code!
// Important: Responses can include commands, inside {code} brackets!
// Example:
// "in text{console.log(10, 'console.log(3)')}; mid text{DOT.locked=1}; bye!"
// WILD hack to use tokenized code directly. Insert in response text.
// Execute entire contents of aGlobalTokens['PZMFIEND'] :
// {eval(aGlobalTokens['PZMFIEND']);}
// NEW: Scripts can now use NPC.xyz dynamic properties for stateful stuff!
// ----------------------------------------------------------------
const aResponseScripts = [
// One of NIL0's messy drops w/clues
"[4 weird tones]<br/><br/>PWNED BY NIL0; 121-1001 BBS; 1?0-1211 NIL; 10?-1211 NIL; <br/>Integritas Retis!",
// SIM self-check
// To do : Compliance check, looks for unlicensed hooks, evidence of hacking
// and increases heat, 'advises review' by TOE, etc.
// Bonus: Reports DOT.heat IN BINARY (°), making it a hacker tool too
"[single beep]{NPC.binaryheat=DOT.heat.toString(2).padStart(8,'0');} ; Analyzing...<br/><br/>[odd clicking]<br/><NPC.binaryheat>°{DOT.achievements['SIM']=true;}; <br/> Unit is compliant",
// Stateful crank call victim. Greet is all code, w/manual write. WILL call SIM!
// Called X times in a row, 'blocks you' via hook for own number (see goodbye)
// Note whacky ternary syntax because of { {..} } bug in fnInterplate (FIX)
"{msg='Hello?'; msg = (DOT.last == iCurrentNPC) ? 'You, again??' : (NPC.anger = 0, msg); DOT.write(msg);} ; Why?; But why??; I can hear you breathing, you know.; It's time to stop! It's time to stop!; Where are your parents?!; I'm calling the SIM!{DOT.heat += 1; DOT.achievements['Heat'] = true;}; Goodbye!{NPC.anger += 1; macro='GETBLOCKED'; if (NPC.anger > 2) DOT.setHook (DOT.last, 'eval(aGlobalTokens[macro])');if (NPC.anger > 2) NPC.anger=0;}",
// Sad Stories
"Hello George?; It is you?; Are you there?; Where are you?; Are you coming home, dear?; Oh nevermind.; You're not George, are you?; Wrong number.; George, is that you dear?; I forgive you, George. Hello?; [sigh]",
// fi(e)nd bot: Loads pzm's wardialer to DOT.targetkey (test: 2121233)
// User must: Set data mode, a target key, and last 4 digits in buffer equal last 4 of bot's number
// NPC buffer stores 'goodbye' text, which is displayed as a <token>
// Intro: If requirements met, put 'win' text in NPC buffer. Also grant achievement!
// TO DO: Make a global 'last4(string)' for convenience
"[kazoo??]{if (DOT.datamode == true && DOT.targetkey !== null && DOT.buffer.slice(3,7) == NPC.lastFour()) NPC.buffer = 'Installing:<br/>Fi(e)nd v2 ...<br/><br/>Fi(e)nd hooked!<br/>Good hunting.'; if (NPC.buffer) DOT.achievements['Bot']=true};"
// Mid: Unless NPC buffer set in intro, show 'gate check' (puzzle -> instructions)
// Otherwise, immediately hooks PZMFIEND script to their target key. Silently.
// Bug fix: Must also clear data mode, so sad double logic check
+ "{if (! NPC.buffer) NPC.buffer='You\\'re not ready!<br/>' + aGlobalTokens['BOTLEVEL1GATECHECK'] + NPC.lastFour(); else DOT.setHook(DOT.targetkey, aGlobalTokens['PZMFIEND']); if (NPC.buffer) DOT.datamode = false;} ;"
// End: Merely displays the text
+ "<NPC.buffer>", // End fi(e)nd bot
//
// Spammer
"Oh good, you called back...; Don't hang up yet!; Let me tell you about our financing plans!{DOT.achievements['Spammed']=true;}; Wait, don't go!; Dangit!",
// Resistance clues
"You found us. Good.{DOT.achievements['NIL']=true;}; Don't speak, just listen.;<br/>Beware SIM, they're everywhere.;<br/>We are NIL!",
// Resistance
"Is that you?<br/>{DOT.achievements['NIL']=true;}; Not safe right now...; Keys exist<br/>Find them.; Docs exist<br/>Find them.; Try NIL.; 100-121?; I've said too much, I must go.;<br/>Call back.",
// The stoners
"Uh...<br/>{DOT.achievements['Stoners']=true;}; Hehehe...; For a good time 566-1337; Hahaha...; Dave's not here, man; [bass-heavy music]; [rock music]; [opera?!]; [heavy coughing]; [bong rips]; [bong rips]; <br/>Later, man...",
//
// A functional BBS:
// Greet checks datamode off then keeps default text
// else gets page via tokens into NPC.text
// Also awards achievement on 2nd page viewed
// Middle merely displays NPC.text
// Goodbye displays appropriate goodbye/footer
// TO DO: Not proud of double DOT.datamode == true
// Note page # may be negative (we abs, then modulo it)
// New: It 'breaks connection' if it wasn't also the previous number
// Intro
"{pageIndex = Math.abs(NPC.page) % aGlobalTokens['BBSJUNGLE'].length; midText = aGlobalTokens ['BBSJUNGLE'][pageIndex]; if (DOT.datamode) NPC.connected = true; else midText = 'Data mode req\\'d<br/>A0?'; if (NPC.number != DOT.last) NPC.connected = false;};" // Contradicts self :(
// Middle
+ "<midText>{};"
// End. Beware double escaping for eval code inside eval code
+ "{if (NPC.page) DOT.achievements['BBS']=true; sCode = 'DOT.setHook (\\'#\\', aGlobalTokens[\\'BBSNEXTPAGE\\']);DOT.setHook (\\'*\\', aGlobalTokens[\\'BBSPREVPAGE\\']);'; if (NPC.connected) eval (sCode); if (NPC.connected) NPC.footer = '* prev | # next'}",
//
// Rabbit holes
"[3 beeps]{DOT.achievements['NIL']=true;}; 5??-?332; ?5?-2?32; ?55-23?2; ?55-2??2;<br/>NIL", // Clue techniques
// All NIL0 pwns start with same tones. These point to a SIM VM and NIL Dispatch #1
"[4 weird tones]<br/>; 111-2222 SIM; 11?-5432 FLX; aHR0cHM6Ly9w<br/>YXN0ZWJpbi5j<br/>b20vcmF3L2FO<br/>dGZlY2dGCg==;<br/>PWNED BY NIL0",
// Cleartext -> Pastebin -> NIL Dispatch 0. Carefully formatted.
"[4 weird tones]<br/>; [beeping pattern]; 7?7-7777 FLX; pastebin.com /raw/sudbDdHF;<br/>PWNED BY NIL0",
// Corporate voicemail. To do: Make hackable
"Welcome to Axis Voicemail; Enter mailbox #; Incorrect<br/> Goodbye",
// Hackable SIM login terminal w/defense. Increases 'heat' each access.
// Randomly, gets pissed/sets DOT event to brick in N min! Hustle, user, find a hack!
// BEWARE empty final field! Fix handler.
"SIM VM 3.7{DOT.achievements['SIM']=true;}; " // Intro
+ "Install key; " // Middle(s)
+ "No key detected<br/>Incident logged {DOT.heat += 1; DOT.achievements['Heat']=true;}; "
+ "<SIMREVIEWWARNING>{DOT.locked=true; DOT.achievements['Locked']=true; DOT.setEvent('DOT.bricked = true; DOT.setBricked();', 180);}; " // Random warrant middle
+ "{true;}", // Empty end.
// The Breather :P
"[breathing]{DOT.achievements['Breather']=true;}; [panting]; [moaning]; [mumbling]; [squeeking?]; Oh yeah...; Ooh...; Aah...; Heh heh heh [cough]",
//
// Flox: Functional hacker bot. Unlocks active DOT locks, clears pending timers.
// TO DO: Clear only SIM timer (not all)
// Intro: Assembles main output in buffer/eval in NPC.code per logic. Grants achievement.
"/--- flox v3 ---{DOT.achievements['Flox']=true; NPC.code = ''; NPC.buffer=':Fuzz : bof!<br/> :State: unlocked'; if (DOT.locked == true) NPC.code= 'DOT.locked=false;DOT.setEvent(null);'; else NPC.buffer=':<br/>:No locks here'; } ;"
// Mid: Note: Clears *all* timers :(
+ ":Heat : <DOT.heat><br/>:Lock : <DOT.locked> <br/><NPC.buffer> {if (DOT.locked) DOT.achievements['Unlocked']=true; eval(NPC.code); } ;"
// End: Just a footer
+ ":<br/>: 'f*** locks'<br/>\\____ -pzm ____",
//
// The famed Jeffe's Pizza.
"Jeffe's pizza!; Watchou want?; We got pizza!; We got sauce!; We got cheese!; We got pepperoni!; We have those tiny packets of red pepper!; We got those little parmesan packets!; We don't have cookies. Why would we have cookies?; No new orders, call back!; OMG PIZZA FIRE CALL HELP!; Hello??"
//
// "Nimo's Circuit Shop is closed for remodeling.; Nimo's has the bytes you want!; Nimo's is closed, try later."
//
// Ad-Supported Services: Watch "LookAt.me" or play "VR Consumer" to decrease DOT.heat:
// (..something something...) {DOT.heat -= 1}
//
// Glitched-out systems that 'accidentally' leak game intel or useful state or player info, such as built-in hooks, etc. They could even locate active NPC numbers randomly, and 'leak' them in error messages.
//
// UI Theme Bot: Choose theme, it swaps your CSS. Basically SetTheme. :)
//
// Lofi ASCII/ANSI Art Gallery BBS
//
// CAT (Meow? Meow meow meow meow...)
//
// 2-player games you play against an NPC:
// Dead-Drop Golf: Solve riddle, be first to call secret number
// Mega Reality Ninja Street Fight Virtual Experience:
// Like rock scissors paper, but kick/punch/block vs NPC one-move-per dial. :)
// Asynchronous Pong: Get one screen, dial move, get next
//
];
// Achievements: A dictionary of simple true/false. DOT should manage these.
var aAchievements = Object.fromEntries([ // Prettier way to set all false
// Finding things
'NIL', 'SIM', 'BBS', 'Flox', 'Bot', 'Spammed', 'Stoners', 'Breather',
// Key game milestones
'Heat', 'Cool', 'Locked', 'Unlocked', 'Warrant', 'Pardon', 'Bricked',
// Hacker milestones. Release hack, get DT invite to DEFCON w/Black Badge!
'Lurker', 'Poster', 'Coder', 'Hacker', 'Author', 'Black Badge', 'Meet pzm',
// Normie (?) milestones
'Mod', 'Redial', 'Help Sarah', 'Help George', 'Save a Life', 'Order Pizza'
].map(key => [key, false]));
</script>
</head>
<body onReady="fnMain()">
<!-- Mainline and Most Game Code -->
<script>
// Globals
var GAudioEnabled = true;
var GAudioContext = null; // Single glob audio object
var GAudioVolume = 0.07; // Actual browser volume
var imgCounter = 0; // Used only by FX
var sUnicodeMute = "🔇"; // Speaker w/crossout
var sUnicodeSound = "🔊"; // Speaker w/sound waves "on"
var sSystemName = "Dial-O-Tron 0.36<br/>"; // When no output
var iCurrentNPC = 0; // Global, interacting NPC
var sPlayerNumber = "5551212"; // Disused but could be fun? Seed?
// var sHangup = "[disconnected]"; // Moved to NPC.hangup
// Instantiate/configure one global DOT device
var DOT = new DOT_Type(sPlayerNumber); // As arg, becomes a world seed
DOT.screenElement = "ui_output_right"; // To do: Make constructor arg?
DOT.simElement = "ui_sim_master"; // UI that SIM controls
DOT.achievements = aAchievements; // Convenience
var NPC = null; // Now global for sharing/state
// Mainline run when document ready
// ---------------------------------------------------------
window.onload = function() {
console.log ("Unit initialized: " + sSystemName);
fnInitUIHandlers();
// Resize window (only for CodePen)
var contentHeight = document.documentElement.scrollHeight;
var contentWidth = document.documentElement.scrollWidth;
// Resize window to fit content
window.resizeTo(contentWidth, contentHeight);
};
// Function: Init all UI handlers
// Note: Doesn't handle DOT keypad (but does keyboard entry)
// ---------------------------------------------------------
function fnInitUIHandlers () {
// Init any UI dressing (removed for CodePen's preview)
// document.getElementById('ui_output_right').innerHTML = sSystemName;
console.log ("DOT: Initializing interface hooks");
// UNIMPLEMENTED: Handler for toggleable audio
document.getElementById("toggleAudio").addEventListener("click", function () {
GAudioEnabled = !GAudioEnabled;
// INSERT CODE: ROTATE AUDIO VOLUME (Low, med, high)
console.log ("Audio (not actually) toggled");
});
// Handler for physical number key dialing
document.addEventListener (
"keydown", function(event) { // Anon func triggered on event
// Handle numeric keys only here, i.e. keypad entry
// Note it is always only a single char.
if (Number.isInteger(parseInt(event.key))) {
console.log ("Dialed via keyboard: " + event.key);
fnUIHandle(event.key); // Explicit dial
return; // Key handled, shunt out
}
//
// INSERT CODE: Handle other keystrokes if desired
//
} // End inline function
); // End addEventListener
} // End fnInitUIHandlers
// Function: Handle all UI 'buttons' (clicks OR keystrokes)
// FIX NEEDED: Most of this belongs in fnGameplayHandle!
// Note: *All* keypresses must go through this (its encumbered)
// ---------------------------------------------------------
function fnUIHandle (argEvent) {
// Special case if called from HTML/keyboard/code
if (argEvent instanceof HTMLElement) {
sEvent = argEvent.id; // If called by event
} else {
sEvent = argEvent; // If called by code
}
// INSERT CODE: Exit if not dialer cmd (if other UI cmd)
// DOT stores this for everyone
DOT.keypress = sEvent;
// Special case: If first dialed number, restart output
if (DOT.dialbuffer.length == 0) {
document.getElementById('ui_output_right').innerHTML =
sSystemName + "<br/>"; // For dialing to follow
}
// Special case: If 3rd keypress, inject '-', ie 'phone format'
if (DOT.dialbuffer.length == 3) {
document.getElementById('ui_output_right').innerHTML += "-";
}
// Handle tones, accumulator, and triggering NPC
fnPlayDTMF(sEvent); // Sound first
DOT.dialbuffer += sEvent; // Append, for everyone
DOT.write(sEvent); // Append to screen as dialed
// Handle 'hooks' - usually invisible events that occur
// when sequence of keys is entered (but dialing continues)
if (DOT.dialbuffer in DOT.hooks) {
// (New?) hooks cancel dialing process?
// DOT.write(null); // ...
// DOT.write(sSystemName);
// INSERT CODE: Interpolate tokens before execute!
eval(DOT.hooks[DOT.dialbuffer]);
DOT.dialbuffer = ""; // FIX THIS: Should be in DOT.reset()
// return; // If we don't return here, hooks may be any length. Else 7.
}
// When 7 digits dialed, handle attempt to place call
if (DOT.dialbuffer.length == 7) { // i.e. 555-1212
// INSERT CODE: Call a proper DOT dialer routine
// that also checks for locks/sanity/etc
// For now, a few hardwired conditions
if (/\D/.test(DOT.dialbuffer)) { // If ANY non-numeric
DOT.write(
"<br/><br/>[loud beep]"
+ "<br/><br/>Error:<br/>Invalid number"
+ "<br/><br/>[disconnected]"
);
DOT.dialbuffer = ""; // Clear dial buffer
return (-1); // If function caller interested
}
// If DOT locked, error IF not same prefix as last completed call
// Also should be part of DOT dialer method
if (DOT.locked == true) {
var sPrefix = DOT.last.substring(0, 3);
if (DOT.dialbuffer.substring(0, 3) !== sPrefix) {
DOT.write(
"<br/><br/>[loud beep]<br/><br/>Error:"
+ "<br/><br/>Unit locked to prefix " + sPrefix + "."
+ "<br/><br/>TOE review in progress."
+ "<br/><br/>[disconnected]"
);
DOT.dialbuffer = "";
return (-1);
}
}
// If still here, call *is* being placed
iCurrentNPC = DOT.dialbuffer; // Seed for NPC
DOT.write("<br/><br/>[ringing]");
// Handle NPC event or update UI if none
fnNPCInteraction (iCurrentNPC);
// Must happen *after* NPC interact! NPCs use it
DOT.last = DOT.dialbuffer; // For redial etc
DOT.dialbuffer = ""; // Clear
}
} // End fnUIHandle
// Function: Handle game events
// ---------------------------------------------------------
// argNPC may be null
function fnGameplayHandle (argNPC) {
// TO DO: Move gameplay sh* from fnUIHandle/fnNPCInteraction here
// fnNPCInteraction should run only when sure the NPC exists
}
// Function: Handle NPC event (if they even exists)
// ---------------------------------------------------------
function fnNPCInteraction (argNPC) {
argNPC = String(argNPC); // Quietly accepts int if necessary
// Sanitize arg in case it's "555-1212", or int
sTemp = String(argNPC.replace(/-/g, ''));
// Generate NPC for this phone number
// NPC is global, so it can be reused/persist
// If same as previous, re-use existing object, so NPCs can have state
// This does require re-selecting 'mid' response, which needs to be random
// That's dupe code, so fix it somehow
if (NPC !== null && NPC.number == sTemp) { // Dont test null, dummy
// Disguised debug msg
console.log ("DOT: Re-using half-open connection to " + sTemp);
// Drops first/last fields
NPC.mid = NPC.aResponses[
Math.floor(Math.random() * 64) // Dupes NPC code
% (NPC.aResponses.length - 2) + 1
];
} else {
// Any current NPC goes poof
NPC = new NPC_Type (sTemp, aResponseScripts);
}
// If NPC doesn't exist, end interaction. That's procgen'd.
if (! NPC.exists) {
console.log ("DOT: No relevant response from remote.");
document.getElementById('ui_output_right').innerHTML +=
"<br/>[no answer]";
return (-1);
}
//
// INSERT CODE: Is awake? Check schedule or ditch
//
// The NPC's PRNG selects which script and which responses from script
// Thus script always same for NPC but response order can differ
// var iScriptNum = NPC.script % aResponseScripts.length; // Which script
// var aResponses = fnResponseArray(aResponseScripts[iScriptNum]); // Respones in script
// Primary response excludes 0th (greet), last (goodbye) from random selection
// OG
// var iPrimaryResponse = NPC.response % (aResponses.length - 2) + 1;
// NEW v02803: *Important*: Made 'primary responses' actual random not procgen
// The script is already procgen'd, the 'middle' response should be shuffled
// This must be done to allow re-used, stateful NPCs (see --^)
// NOTE: That means NPC.response is completely disused. Retire it?
// var iPrimaryResponse
// = Math.floor(Math.random()*64) % (aResponses.length - 2) + 1;
// Selected scripts for each phase of interaction, including code
var sGreetingScript = NPC.greeting; // aResponses[0];
var sResponseScript = NPC.mid; // aResponses[iPrimaryResponse]; // See above
var sGoodbyeScript = NPC.goodbye; // aResponses[aResponses.length - 1];
// Perform greet, response, goodbye script
DOT.write("<br/>[connected]<br/>");
// Iterate, interpolate, execute, and display scripts
// Note the BASH-style for
for (var sScript of [sGreetingScript, sResponseScript, sGoodbyeScript]) {
console.log ("DOT: " + sScript);
sScript = fnInterpolate(sScript); // Does all text + commands
var sText = fnResponseOnly (sScript);
var sCommand = fnCommandsOnly (sScript);
DOT.write ("<br/>" + sText); // Write to screen
if (sCommand.length) { // Don't bother if no command
fnCommandHandle(sCommand);
}
}
// NPC ends interaction (usually '<br/><br/>disconnected')
DOT.write(NPC.footer);
}
// Function: Interpolate/otherwise pre-process single response (or ?)
// Interpolates *entire* response string, including commands
// Call before any other operations on response OR command
// Recurses if interpolations contain tokens, returns final version
// NOTE: Tokens may contain ONLY letters/periods: xyz, xyz.z
// ---------------------------------------------------------
function fnInterpolate (argString) {
if (!argString.match(/<[\w.]+>/g)) { // If no tokens, reflect args
// ("fnInterplate: No tokens found");
return (argString); // Done here
}
// So tokens (or HTML?!) exist: Get all tokens as list (sans <>)
var sOutString = argString;
const aLocalTokens = sOutString.match(/<[\w.]+>/g);
// Interpolate each token found
for (var sToken of aLocalTokens) {
// Discard brackets <>
sToken = sToken.replace (/[<>]/g, '');
// First check (not really) 'static' tokens, the simpler case
// Check explicit tokens 'aGlobalTokens' first
if (sToken in aGlobalTokens) {
//
// INSERT CODE: Select via Procgen
// insert in outstring
sOutString =
sOutString.replace (new RegExp (`<${sToken}>`, 'g'), aGlobalTokens[sToken]);
return (sOutString);
}
// Replace any <token> if that variable exists! Cheap but sleazy.
// SHOULD probably work with methods/global functions too?
// Weird fancy regex because don't want '<' in tokens
// Note: Non-tokens MUST be left or embedded HTML may be broken!
// Note: 'fnIsToken' should really be called 'fnLooksLikeAToken'
// if (fnIsToken (sToken)) {
sOutString =
sOutString.replace (new RegExp (`<${sToken}>`, 'g'), eval(sToken));
// } else {
// console.log ("DOT: Kept non-interpolated token " + sToken);
// }
} // End foreach
// console.log ("fnInterpolate returning: " + sOutString);
return (sOutString);
}
// Function: Simply return response with commands stripped
function fnResponseOnly (argResponseString) {
return (argResponseString.replace(/{[^}]*}/g, ''));
}
// Function: Simply return only the commands from a response string
// If no match, returns nothing
function fnCommandsOnly (argResponseString) {
return (
argResponseString.substring (
argResponseString.indexOf('{') + 1, argResponseString.lastIndexOf('}')
)
);
}
// Function: Parse-out any commands from (arg) script response
// dialog, and execute them. Make sure to have already delivered
// the text response before you do this.
// New: Expects only "{...code...}" as arg, see fnCommandsOnly
// ---------------------------------------------------------
function fnCommandHandle (argResponseString) {
// console.log ("fnCommandHandle: Recieved " + argResponseString);
var sCommand = argResponseString; // Clean this up
// If no command found, done here (shouldn't happen really)
if (! sCommand.length) {
return;
}
// ** INSERT CODE: Interpolate tokens **
// Eval
console.log ("DOT: SIM trig " + sCommand);
eval(sCommand);
return (sCommand); // If desired by caller
}
// Function: Simply returns true if arg is a token
// 'Is a token' means is an existing variable OR
// is in global tokens dictionary (code pending)
// Beware tricky code: Testing a variable *named* in a variable
function fnIsToken (sArgToken) {
if (typeof window[sArgToken] !== 'undefined') {
console.log ("fnIsToken: confirmed token " + sArgToken);
// console.log(typeof window[sArgToken], window[sArgToken]);
return (true);
}
// Thing is, are dynamic properties in 'window'? This catches those:
// Update: But chokes when it's not
/*
if ((eval(sArgToken)) !== 'string') {
console.log ("fnIsToken: confirmed token " + sArgToken);
return (true);
}
*/
return (false);
}
</script>
<!-- Dialer Interface -->
<div id="ui_device">
<div id="ui_container">
<!-- Keypad Buttons -->
<div id="1" class="ui_key" onclick="fnUIHandle(this)">1</div>
<div id="2" class="ui_key" onclick="fnUIHandle(this)">2</div>
<div id="3" class="ui_key" onclick="fnUIHandle(this)">3</div>
<!-- AKA 'A' -->
<div id="A" class="ui_key red" onclick="fnUIHandle(this)">A</div>
<div id="4" class="ui_key" onclick="fnUIHandle(this)">4</div>
<div id="5" class="ui_key" onclick="fnUIHandle(this)">5</div>
<div id="6" class="ui_key" onclick="fnUIHandle(this)">6</div>
<!-- AKA 'B' -->
<div id="B" class="ui_key red" onclick="fnUIHandle(this)">B</div>
<div id="7" class="ui_key" onclick="fnUIHandle(this)">7</div>
<div id="8" class="ui_key" onclick="fnUIHandle(this)">8</div>
<div id="9" class="ui_key" onclick="fnUIHandle(this)">9</div>
<!-- AKA 'C' -->
<div id="C" class="ui_key red" onclick="fnUIHandle(this)">C</div>
<div id="*" class="ui_key" onclick="fnUIHandle(this)">*</div>
<div id="0" class="ui_key" onclick="fnUIHandle(this)">0</div>
<div id="#" class="ui_key" onclick="fnUIHandle(this)">#</div>
<!-- AKA 'D' (retired)
<div id="D" class="ui_key red" onclick="fnUIHandle(this)">P</div>
-->
<div id="toggleAudio" class="ui_key">🔊</div>
</div>
</div>
<!-- Output Area to Right of Pad
Pre-populated, else empty preview in CodePen
-->
<div id="ui_output_right" class="ui_output_right">
<div id="ui_out_dialog">
Dial-O-Tron 0.36<br/><br/>
Welcome, citizen! <br/><br/>
Access a world of free services, no strings attached! <br/><br/>
DOT is safe, secure, fun! * <br/>
<br/><br/>
* Signals Intelligence Ministry license number 32-329-96
</div>
</div>
<!-- SIM Master Control Display -->
<div id="ui_sim_master" class="ui_sim_master">
<span style="color:orange">*SIM SYSTEM INTERRUPT*</span><br/>
<br/>
TOE Verdict # <span id="ui_sim_master_verdictid">R0FNRSBPVkVSIQo=</span><hr/>
You have been found guilty of:<br/><br/>
<div id="ui_sim_master_conviction">UNMONETIZED CONTENT</div><br/>
<br/>
<span style="color:orange">This unit is disabled.</span>
A digital warrant has been issued for your arrest.<br/>
<br/>
Remain seated. Await DOM intervention personnel for transport to complimentary Consumer Rehabilitation.<br/>
<hr/>
Thanks for using Dial-O-Tron!<br/><br/>
Manufactured by <a href="https://linkedin.com/in/unhacker" target="_blank">Unhacker</a>
<br/><br/>
<u>Achievements</u><br/><br/>
<div id="ui_sim_master_achievements">
Find a BBS <br/>
Clear a lock <br/>
Evade a warrant <br/>
</div>
<!-- In a future DOT release...
Dial-O-Tron Statistics<br/><br/>
DOT Active Time: 0h 32m 3s <br/>
Calls placed: 12 <br/>
Systems discovered: 7 <br/>
Systems accessed: 0 <br/>
DOM citations: 1 <br/>
DOT heat max: 6 <br/>
NIL contacts: 3 <br/>
Score: 0 <br/>
-->
</div>
<!-- HCF! -->
<div id="ui_hcf" class="ui_hcf">
<!-- Insert 'image fuzz' effect here -->
</div>
<!-- Effects code only -->
<script>
HCF_IMAGE_ENCODED ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAABPCAYAAADbYDZdAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpVIqDnYQEcxQnSz4hThKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi7OCk6CIl/i8ptIjx4Lgf7+497t4BQqPCVLNrHFA1y0jFY2I2tyoGXhHEMAIQMSExU0+kFzPwHF/38PH1LsqzvM/9OXqVvMkAn0g8x3TDIt4gntm0dM77xGFWkhTic+Ixgy5I/Mh12eU3zkWHBZ4ZNjKpeeIwsVjsYLmDWclQiaeJI4qqUb6QdVnhvMVZrdRY6578haG8tpLmOs0hxLGEBJLUkYwayqjAQpRWjRQTKdqPefgHHX+SXDK5ymDkWEAVKiTHD/4Hv7s1C1OTblIoBnS/2PbHCBDYBZp12/4+tu3mCeB/Bq60tr/aAGY/Sa+3tcgR0LcNXFy3NXkPuNwBBp50yZAcyU9TKBSA9zP6phzQfwsE19zeWvs4fQAy1NXyDXBwCIwWKXvd4909nb39e6bV3w/Wr3LPmrF/+wAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gKHwcoOuoXDboAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAgAElEQVR42u28eZBk13Xm9zv3vi33rKrMWruql+oNDaAbDTbQ2DcSaBALAS4CR1wgiSJlyhppNDYnxhMaTzgmwgpH0KM/JhyyJzwR4z8sx4xHDgU3aURqocxFEIeAuIIgQQAN9Ibeaq+szHzv3eM/7susaqKbImSCA0h9OzK6oupl5nvvfvec7/vOuQ+ujqvj6rg6ro6r4+q4Oq6Oq+PquDqujqvj6rg63pxDp5Grd+HquDqujqvj6rg6/o7meXnr5vmdAbIvZOLhGvateP7mLXfGU29dsBwdZ/7YDG8/mb41z/8tBxY5jXsr3ugnZmk8eQ2/PF1n6Ztd8qtguTouO+YrmHsmed9slX1r8Pxb9TquguVnMO6fpn7LBI+vKlzocuoqWH7G4+Eawb6Q6Z3Bm5/DtBLu2tVmpm+58KWzXMJYYoNYIXzDBMEtP73785YFy8kUPTbDw0fH2ftmPs+b2wRHWzxcqlDpKotnu5uc61iJeHfAsbph2xt2Au2rkYVvdsmn65x/8ho++sQsjTfred7RpjFd5l4JKJ/rkkYhCvDOKtsfn+R/+NAUd80nnHzDBMFn/Pf9vecsa/C92Sq77pnk8fnKm/Na8pRDMzXaYiilSqWfIrOC3D/OAw/sNm97PuVPvr7OW0JMv6XBcqHLiVUlvWWCY/dPU30znmM7ZnczJiAiKpUYXegjJxT98hrPf+acW3h2ha/9vSO4ehT5aZKpHx1WiGJz6ed/6Sxp33J2V5vxVsLNb8YbvC2iZgRMiG2N0BpP/D3/zwt89V8/yye/vkbn7x1Y5K9Q2m8cWOqGHbsD3nWsRDz43dkueVe5UKoQHm1x983tN5eNXjWIcSRALgHaHqP16CF/z09k9F9MeTrjrWMy/lTTkHzmjbvw+YTjH5rirscn+ZfvrLIdIArhXJeeBNjpMkfuaL8xqehAmfqkZeR1cyqHphl9yegDOlplLrTMXfVZ3uDx9XX6z6f84QO7zcH7x7lvVpB+CqkSicHO1KjlKfveiO++d9y8495Rc9/fildtsK5d+nRxk2VKhyZ5tGrfmvWttxTBfXaFpz5zzp3/8hrPn1B0oY+USlSJMM2YoB2/Mat2SmTy0Ulz9/u3v37z7PQ6Z3qrZKyiQZ/gxjbvf9f8Tyz1YyNvntT6lgLL19fY+NfP8jv/ecEriPEE0xqhYULECGyLqLwR33te3NLtO8NbDrftsQfGXl9UCHK+u7CAYwmVDnJNnf13TfJrT0z8zSCYDNl25wTveO+eN0ckekuBJQP3Yso3TngOwKOHMO0xRiQAwBlHXDU//RvbHeGZJaf66J7o461Ydl/puN/eTeWT11z6/UHOK+dXOK6LONbRsiF4eBu/ebjBw/988sef64OzdD64j1/YPcLMWwosugfRx99cuTa0TI5WmQJEMvI0I1tzr9+xnLQ0DpSvTI6/f05/8O+P937npQvp2a7TK6aijvLwqZxDW3/3zAa97yzzx1kRXejCdJnKO8b55Cu9H1+qqAcs7x+jUot47MPXIofL2Ftr7Lm7+V9mHn7yyLLdL+03jSy1yKFJ7pssE9NFtYu7sEH3b0VgR83t946bu6709y+ewF2s6n/8l09nH//uCt+70nFzNcqP7OS3PnbtZjr8wgb6jXU+c2aRLhdxdBGxyKFxJt83zm+/p3Tl1Pn9VbJyJMu37JK7zy1TOlDHfHgXP3/DGHve1GCRP0Hlsz+9OsNlT8aTueQnOfZd81RvbPPOoE/IKtJbxZ1e5/zr/c73byd8dNLcPiVyxZLb9XPYXgn52gLp9ztXvgdLGdmNs9x8dAcf/uihzdW/Zvjhix2edqs4NhAMEjQw905w+4N1fvMme3n+spChBGzsn2FqpsauhQw3VSP9ub189JO3vH4p/3eGs7x3D3LnBI9Ohn+zonliAnvXJB+8ps4u6WBYgoUFNMj54ev5zgfGkMNte8/tO8Mj58WtXjGKCXtGDcceuv5vCP8KlZjo1jl+vWY3K8n/dpn+51f51EYPRweHAHVMZZLwwRYfv7PK7ZflShkq4No1SY6Mc/jpJdyZHt8/NMmOuQbvu3/6Z6uU3jRg2T3C9g/u41cenGXtxx33zyeRww3ueXgbv1A2BKwjugjnVzgV5Jzeeuwnr0F+ezflK31WK5adj+6JfnHJqXRH+NaVjtvRYMfDe/nYkZkfL3nrggiwe4zx26b4lV/avXl/T6T82StdOmyg5ChlYBw73SJ5ZIT/5vEtzjR4UAqYrKejJiCerXHdxRzzvWWe21CCu7Zz75HJN8ZXetOB5e4m5tYaBw+XsR++FlOLeGL/GEk9YOnHve+VHjvfMc5/N12mTNdHlWwBvrPMl5/Z8CppME7lHOgob7+iynEavnQhvfDvj/f+1++f0xevdFzeJdg3yv65UX7jn91OcKXjyoZIFAkT5GCLnwthavC3v97gzKke39CUjD6OCGghZgq5psXhyRI3AOyOsfMxt+2KsRc6aCcHMZhalcmpGOMML5/eoNeuUnlglvc+MXvl8/k7A5Ybxrj+w7v41QN17LllSrfskvvKkVz4/uqVafR7SpTeN84/OTTOuFgCulguImcW6X9jnT/7wsYmn/jYtZQe2clvzNUoXenzvrvCD/7l09knLlb1U188ceVShc05la/DfXt5ohJwWSJ8WwWJQppYhASZa9LcXeI9pogSz+akJ3r8hcvZwJETkdNC2I5pTRPeO8WjdcEcGCF8fCf/5Og4o0sO11Ne0a5KEBNUI+TzJ+id6XACiPfVuaEVsevvNFg+eQvtn9vLP52q0VnIyGdq7Nk/wzgBqwvZ5QnkTRb7YJ2P3TvBTUEDi8GygXGr8GKH764Zjg+O/egh5OgOfu7GWd62lL22k348YPd0wIHFrietvRJy/dyV8/9YyEurC3TmRohumeWfvnvutf1nPcWOldgtFaAKUQ25qclD99WGhF2/0+H7qaFDhZQ6omMY3Ya127A72tz6rgnimRr1Y/PsKScc7KTkT1/gW+ur6pYyzr6yRr6Skh9f4rhzBK0ypVta3Bn/jPZS/czBcv80dq7Bxw5Nsv1Mj2eeXsIdGedt7ZqEAmn3CmC5s8pND7b4UGWSiDoBgqGDbPTQz6/yJ/92ebOBqGaZunWOj1RiIvS1N3J3nYXbR/lHT27j12+aYnTU8PaqMH+lc355lU62wctGkVt3sOPYFJ84kFxq/R9uEJYDrjMVlBoqI+TzI2yfqHDt4Jhl4fhiQsYIohWUCo4WohME7To76pbxdcf+/eOUDk/78/niS3z2M9/j23/0HF/tOPKzffSHiyw4R2AiovkaR46NvnE9vP9FwXJkkhvu2s6DG4p+b5lvX8wxszWuNQGS9XRENs9pOMmPl4geGeFXpluUGCegjCFH2EBe6dI7kfLVwbG/tBtz2xQf3j3GuICpy2uv8asLLKz1+N8fbMndH5mU33lwNx/f0biyCjvewXVSzrk+Uqpiju3goSMt7vgRJTQ7kTBOGaWMo4GbaOOun+ReKa6lWePsWhW0CUSoGFQSkCqmVSKxyoH5Jg+MlYmmy7SvqSNfOMni736dX/vMc3x68FWJgqQYMYRTCXON8PI9vO7Wn27E+ZmC5YlZwgdm+cV2leT0BuvO8OJUjKlVGReDdHLchQ66y5O8W3bHPjVMlrj+mhaHzBSGFgERhj5oCqd6fO+vNzg7dHVh/GCLx8IEK0pQNkSXO5e1jGeeWeCrB+e5Zb7OrenGlVXTiVV0OWWdPkoJZrcRvn8Xv/JYe9MT2l3n6EwdKJMTA2WcbZBeP8Oh7WW/8m1EpxuRESGiKBmKQUmQJCE4OMr7HtnDz0UJJAGltcxP9l+eZvGVdU/eSyC7StTFYSTATJRJRsLLO8HmL3+6vtjPFCytiH376hwG7JkOP/z8CbrVCAliAu2q9JQTSw53dJzRx3fyjw+MENYFc+8UD7SmidlOSAs//Q5cTv9Ej796Nvek2IDMl3jXXJMGCRaLiUKat1Veu8K+tI47N6YLk7t1MuhQDtbZLlx+Ja7miIUSXaCMMZPYm+a4dqbBLQB3jxIdHuXBsEJABYhAyyBN8okxZo7t8bL4dJe8a+hJgGJRHI4cRVCTYN51gIcOzlKT2HdEpZeh3JkgI5ZJUYwKEgbY6+pMGN543vIzA0ssmFtavL1VJnIOji/x/EpK/soa+VLGq+ur6p6+wLc7KXk54fpj8+yeqVF71wTRjjZH7TasbiPQMbHUjaUiLjV0v9PhRW+HwcGyTB2q8d6ohqGKSAUZK7Grp68lr++eo3VsP++dHEH7y7iHylw3IpeXofMRJunTEkU1xpxPKDFB/f4DPLqrTnCgSnVblX0yitUyBuMtfUqwfZQkCHy96Lkl8lw4owpYQBF6ODLUlNH2DGIr/mKWeuTZZTa53lwhbIXsNYqgIIIdjWhvC18/WF4vwH5mGv3YKOF8jZtNBJnD/XCRC2f7KJD/0XN8ZXGViS++xGcBDk+zc/84yfpz7K1bXmnX2a4TxLSwVFR1Q1VGsIsJuiycwN972d3g8flRdskIGTXEVKAccO3BOtHTnU1JfiAhODbFb962k7kgYGl5haAsNCYNdiF/baf9HaPURg3bugbz/HFqp9aI7pljeR/cd+dpJswK89MtqjJOiMUW3xRIndJIFx7cx/uePc/XFteBnAzFkePZlCAIShMhLF4pqkLvQvraNHJdk9ZkmTkCRAwGyCOhupy/vonfFiIC16/nPLfgLvWnfmaR5UqkqhEyN5UwKwaV1JO0wfjMc3zqd7/Of/2FkyxeU0emy7THyoTzTd5ulWtaJUpSxUqCiEGIMNrErlUxzZqvB+Vg3zbBveMtibUBlP1rImF8ocedI2azqnykxe3HdvBQqYrYnM46fOF3T/I/nb3MTbMgTcv9rYjGd16WVnhekhuvpVNqw47tjF4zx0O37eL6yhgJIxiM51M4LDWapkXjpl3cc/9eHpquYmJLhMFpUPAVg6OE0gJGi/M2OIGNy93IkZgbJuvExBhVjCgmgmTN/eRgGTXInS3mPnE9d94yfmUf6g2PLFciVSMh+ybKWAkQ6XqSVgLZAH1lnf6AwK1lSBJQihLkkT2855keU0lCTIJfRxmIgkaYboSzERsA4xHRgXF2xE0J8ljjIEYow3SdYF+VXzUpX/uDNXisTfL+XXx0dhsRJQyr0Mk5/0zKt5f0tcbcgw3aD0/y5Ok+7Wsigpdb2htvkZIj0RLmxjkezV/mjKliCRHyQscpEBMwQqVtsD+f88/aJWZsSEsMqg7VACRAqfiUhSJ0UQW3sEFHufRe3landMck7yvVsSQoKQaHyx2J+wlTyq115IYGM790rbyrExF++qJmb6o0ZECuqzMeBoiKn+wRy0QmGPRS0yx1ntxJjBycpbHN8U6TIIgIuQrg1BBIQN41pKeLx1e8Yxdxe1RrQUPIYqpEdKmQmxKVO9scWN0gYQ1mGhy9aY5rzSSWMsJ5nIXK6mXC+JESpSdm+US7xP7JuiTLGYxP0BWLYsAouneMQ987wU6Ji3pOjqopCLgi4ol2ac7RPub4tTgk0QgIcEMmVUYxCD2UPmRK9twiF7m0WCQHW7z9yAzX2hqqFQwdcg2gZ8AImv8N2uexScxtLQ4/tkce3D4l0R887/76pUW/2N6QNPS3Yd3bQmQ0oi0+O6tRaIXsu7nyWrBmuSd3CmIrmPYM1pQxZGroIShWLdY5glw4/9ySZwjNMtfOjqEkKoElcBBrmYARyjsaNBoJzV11gvsP8MjIDsraJsTLa5I+Y/PRpfdid0Dw+BT/8J3T3JdDvVnBLFjV0QYZ4sGCgakSMlqlToJD/T8RVAxcWMH2+oiUENqUVirUR8YJJE6c2IaKJKoCGqAkKBEOh1vpkK/2L33awj1jlB7dwYdaNV+xlhIQIUTQN6zbH4lCApWt6m4sQI6Oc9/7r+X9I+PUvviKe/VzL/LFF1cujaaxYA+WCcbta7HxuiLLqCGuWK5TeOZk+pNr+OUcicQ3+YhBNEAny8xe16T9lbVL9/le8OSujyBUMEQY0oIGil+xkkPuCMhxucK9c4Tv3M+7x1o4qmqNYPMUNZbQtEmmx9DFlzhy515W9u3hXjNNJHWEHjkRZtSw7Y5Raj8441fztEEen+SRD+3g3c0awQkl/EGOjlzHahDhFAyKw4DJIUhQLYGEqAaoCCjoyqrEnRSzo6I9DZD6KNbWMMRdsF3vLQ+AZ2Egp1fWySK7WUEPQI6O88DRcXabpKhYJxi6KAFiLP18C1juGiPYUeejZzv8uz8+y0rB6fjSWb676Fg509X1xQ1e+Nwp3yw2Y5FbxmjcPM7u+Srb//w0+f9zmi8DF/7WYLllnNKxae5+6gyLf3yWlxZ+whbGNYdEEIuC+lzOZJ1oJOYQeLB4FYj6+8cGxnsa2MKtjQGDYHyuV4ONLcl0FXvHHo7dtIt740mCvEIoipWUTIVARgirLdzBWW5dbRPv2M6YNLGEOFKMhNi5MrWm5R0W/u8c9LY6s/9gho/PNglpEM7sZKkyq646hsNixKCaIliwCbpjBhaUsBV5wBCAyxDtW7OBQ0NFMpgZBbFsPmDD+esFBFcUJlKyix3W+/lmGnpggsoDs/ziSBVLGUdSJDAFUXQsZuJATPDtrud9e8c4+KF93Pq/fYvPgwfLUob+0VnO/NFZzlzCg8qU3zfL0ftmuH5XE/tX5zgl8KevZq+t/r8usPRi0kPbxN46zmPN7+rvf2OZk3+58jcDxoHkbhioIUFKdbhjkvfddp4/+8oKXSlWhoIubNBVgBghwSAeJAQFqNR31ZmAiXcf5CPvuI4Pt2dpSIPEBqRqcAZylxGaEJEqsq3KodIcM1GApYpgMShKjFQqBO+a4kPfX+XPX+hw4Z3jfPC6JiOSEDKGmRinpxVvgolBh5NrPIkugXnqOJU7trEeip/088sELbFyLnOCQ40334QQ1ILmqFB8BjhSlBSnGXm3z+pTJzel/r5R7j88wZyUMTSwlBBVDy8B2dvgmoe28f6da3y6PULjyev4yD6/aMo/bl4ebjD+5A4ee3CWyXKZ/C9e5dT/8QL/6ffOeID9/wLLS4tsnN7Q7797jzn0j0p88FPP6+fHL/CNT73643ciGkF7Xi4ikZeHtoYemeHAwTO83azwua3HP7fIxUzJAkNMghAjRX+Zn6igiE5jTB9r8hszcySMkmjoo5Dx3qhITiD498cx1+wZY90oEDKo0xoSVEYIb26x/YkNPvHZ0/y7O8Z4R1TGUsNS9t81BEmBflLA4DlHgql0sQsr2IkKWZbBymkJd8VwIVclw4ty9UDSHDob2EqVHMGpJpB1VVJUcjSxbLQr6PPrMBsR3jrNo7UyATWEKpYYR+ZtBDXIdIPwE4f56EspT1RHcLtHsUuv0nPZpfxSoKwQAUvvH2f2Yzv50B1T1MIK6bcWWf83z/P5/3gFoFyR4I5b5GCZIP6RItyLK7jPvchffPEVd3JknPj91/Kuo+PcMbbl6Uvi00n5R7wK7RvWiXBEqJSAOrRq8OgOPnDP2KVaf7XP6ZUODucLbiSIeiVlxK9ukRianjQ2aVORElYY/t2IFC4GQAKtGvFETKlIZf5E/ecYaWHiKvaRGd5xdIz/ea5GhSqGBiIhgh1GT09hM5QMCBAJfTRsKaxcJNQMd/48wVTXGJyiAbl0i+44QXHo6hqml4I4rwVFu4pDVX2KLcU0DrV9srp7G7XdTfaZMkKtKKIGGCyiAUiMkTp2bBJ7ZB/VfTsoBwKdDk7dZtfhw20m3z3Fx5uG4APTTP7GAX7h7u20ohHsCvCHJ/jLL53n1dctnY0wcmeLm//FNPaFNU5+7RzHn7rIyqkc/b0XWF7q8n+NPKfbpxJK3znPma3a94EJahNlPnx8hX/z/170oTQHNZYeAUqIkgApahL06DjzR8e5/0sX+XRWpKLIcnplHR13KBbBFhPsb7cOIkvYIKwFiAbkgMGghiFEUFtMZgnCBExKokIqihfK1lceaWKlTdRwmHdv47bjGef31liXBCHyJBJBC14FGSoOUX9OdPqYssL6EtZl0F/DlERlvZtpMqappD7SIf5mXFzCjtbJB5xFDYgrnvFbxk62aaaGQ8BXUHa16iRaw1BDJPEurzjQGGEMwWCwKBFGMoQFzGKPPC8I6r1j1H/5AP9VJ2N5LSP9wF5+6aZZxm2JPLeYp05yYqHLM6/69hBbxE79iSLLqxkLAl9tBPCre7nxv7+Ox/7b3Ry9reyrrJ87Re///CE/+OR3+OYfneXc0pYelJGEiY9cx+G9Y5t9HAdigrGYthTSEny0oIyMVJEHZnnygYnNLRH9nAsXO3RIizzvU4qRHLwGwUqEmBJ2ZoRIhMDEiIbEhFgCDGERFSLPWeZnIUowTqjgCie4AKIkCOOYvEZ1rklglPEVS0zki4IFRFV8ZPBbYjIQhxMHi8uEdYdEK9juBhKG5GuqetppPl2nX5BXRVBN0fVVTGyHxr9KUVAUH0ntWJvyQ3v5+J0TVIylWa1iqfhoSlQUIS1GIoQxLGOIjKCU/ee5HD3X5+y3l1gOBblrhvvv2s72V3qcfPIAj987z/ag6uX66RX6nzrOF/7V8/QA6obJfWX2vy7O8r+8wspiyl+I4b67JxnfWebQTMK2keP82eeWWbjS+0QpXTOGPHmIn1fLxfOLrFxT5eG9DfYJOBTUohJgaSDSg8MTzO0b5f4/PMsfADx1kuwjN7CmGW1Jh+1Lnua6gjv4qCHWIZoRoqRiEQeBgbSQpYIP1VIe9VdrhTDvU7MBa2LIVYrPqmB0lLLpITuqBM8tMXL9DAuY4UIY8BVvI2aep6lCtkoQAXUHC0vYmUl652J1cyXyUMlxgwQE/RSbdTCRkJOjOB81xXlXVwCbIHfP87aXL/Brz5zhB2GMkcgvAKxf9SJACaNsngcbQB9cDsc7fOelPtmxaZL7dnF7tYpMVDj08DyjpYa/p66PPnuBl75xYdO+uKlFfMc2Dv7ut/nB+fRSw/THEtzfO8NaH746VuX+gyNUHwtojyU8Un2J//QfznEOqAmkyubmLpehkpLeMsdkq8r/uLZIsDOkMRp7u14K6UsAVLFsoLUe3DrNI7//Ap890SdtVzzJk9wTSfXxz0cDKSLMlvYo6WE0IZIYxRGowwk+1YiAGkTLm/rcpIQupWaUFYEcgxCjUsJKFRPmaHON2lKP1ZEqaaHFKPiKkBWgEaSbQrBIaAVKAmc2sCYkn2jhpFcQYdns11tYIRgJcDKIseAGUyLe31dKSHOC8Mkb+aB5muMaIwSoaMGbpPBk4uI9A8KdgfbQlS7Z187y7dShoyXmd7cZCRP4wHVMRmUyKp4g91bQL5/k2acWN0ExN0Lljp1MfXeV5PefZ/11ObhfOs/FPzzBt1Ygi0bI795O9TcOcOwD04w1DfbdU7zn4TZjw4Yxx3qnQz8Q8n07sEf2EY9NolInl5hcfS+HB4snbdaUMbub7Lt7GzWAQ22iUsyIBohqoYQUQ44R/7NIjqgrrDqHSAdDD0uOaEpAVtRpBqV8g0jklZA4xOaELqOug/YFi5EQoQFUkKkQc+IMdefNH1/0kwIw+cCrxb18itJM5heCUYQOVnOUdMtxnmpr5qB7kchGOBEcprgyKaBIkeqMFwEjbeK75tkdJoU3YzeP1c2fGaZ29d/7vYusnlzjuX+8D/PAHm5qjxBIhMRNhAaiJX9NJ9fIF3u8MJi7yCAzDdrz4yRJtDmnPwlYBDCvZuhClx88dY7TeUJum+Q3zVL7wF7ecfMY6Xt2kf3yAd5975jnHDksLPbokZJKTEablCkypsgYwxGTisURer9Fa4jWMK06Saa+Uz01HJps06TsWYU4LI5QXAEcVxh1rgCDX1kihVQUh9EMK24otour8UaaqKdwRggyRwXB4GW9GZyTjSFZpLKeEgibSkYzfGLJ0ZUVbHCcaikADX3Uki5GvcvscLj1Hmal57tXzi4SjfWwEuKEIeCGQBksCyk8JcqINDCm7CMLwZCveFDhFRTiCTI96PTRPz3JV/78HCtpTPPmWY7YMlBBqYKUYFDbOtVj6VR3k1JMl7CHJ9nRrGKF1+79viJY9pWZqRuaAP/qedJPHeeZ0yv0SMiDKu7eeVpPHuD2V3qcvWs7rbtmuCkU5NtLrJ3rc9blpDj6lEllhB5jZIyRSUSGJcOSE6ESI1SQahVrLc07J6g+tJdfG2tTJiIoJl7EIZpjyIr1mBfpYMBNnM/X4oqSQk5QrHAKkPm/FUAh9+o5EGKXEyGI+lqLSgkkhqkAe2qB0uB4clQyP8H9HM6/RGNHgpGK3/4hBoIe4nIfVdI+8vTzVAOL62ZIdo5SOQAbkw+iTRFZfJQxBSCiQjWW0LkZ1JYLf2oQlQvAEOAk8O9TRbWPPn2GpT89wadvbMHtczw4N05TykDdG4jio6OoQ9cd546vbXpkB9uM7W0zGRpULoMNE1+mMNgOMf9gP9tvam1ymm9c4OKzF3jVKTll8lID9/A8eycq7KxWcfft4sCxaaKX+uTHO/zA5aT0SXGkGpGSFMApkYuQAimWnBCVCMIYYwy19+znH961i6M2KWRqjpMcK16BmGLSGEaXbBhtPHjyTb8HN6TGg5vElvcPOIyoUlLPiZDQ8xtNkFIEqyvEwzRUvLoO88MXGJ3NScxI0YCdgFgPTMGT1RdeoTKmYC3u5EtUpxTrDAQx+VAdUYBk8PIgUIn9ZzZGvcWgAwDZLenQooQF0HLcwjr9z77If7iQ8uqj+3nbnTs5FnojT6mihMMYpiqwmrH04qoHixHkyDT7do0ROA+T1/TpmVsbr0XQ3TuI7thJc25kc0vlU4u4L5/kRK9LTomcOnl9DPeB62iECfnuNuXRElOpQ792lh+udOlrD7//DvoE9CWiR0wfSypCJtAXJSPwnsGRST7y4VafLr0AABMrSURBVBv5cLVNjZJ3VmRwG3NEBmvRy2eRQXqxwxgpZN7/EF8/ksHf1BT8Z+DAXgqs0CnhoKAnRS+MWLA5gQbDHhXd6CHHX6A1H1MOvWQVqflIRDDEoC6sEsavUopLuFdeoDazThwC/QzCgGyYdoIiumxGGf9zWFSiy94nIi4AM+A3Fof1sM9y8o0+2ZdO8NVlwzd/6538/JM38euTY8SUgVphAdgi6TlUQbuKHbRmHBolOrKN6+IIuj00z1/buhBsb1BmmUs2hScR1flxzEzDE87BWOxx5uQa6e5JhBKGgDyOPJFsjxA+sIe9Y5aXn13ile9dZOW2MYrsOKytCoJRixGKmo/1kjBMsHfNs6vZoqwlrArOCKhihqDwM2t8w4t/GgH50LrXYeRIC/U0SDmDnL7pw1LYeGDAWCR1RIV9zsD1lcQ7/eqrSHT72Jdfob17jMSGxTlFxeelnrdogNMcTh6nOhcgFxZIdgRoYP3xXaDi05ArXGSW1ggbFVKxhUGnlxBXxBYgNsPfuqI6peS49Q3yV5dwu+Y49Ft7uW5qhCDs4VRwUqJ4XmaxqChcY4EcGkV7kdw4xf4bttGSAF3tkVfC1xYSjbOvJTICSbOKHJ6ktWPLk6tPdVk/1WMVg4ollxI5VXIq5LZMdvMsu9KY6p+fY/1PT/LNTp+UHqk4UoS+Kmk/w4rQx/oIQ0BKQN+UScUz9cAExURKAQ6GoZfh+ht0rw6e9GS3Vi2Hzcyim++DvLDpi1Sk+RYwCaEaRALv6opfzahi1KC5oC++wtjOUUp2DGiANEFqHlhYDxwT4U5fJG5nxFEdmW9CUEQdVW+DRLbQSaDdPubkS1RT7wwN1RAWlRAkLBTcoA3TM01XNE85tbh6lXzfdtKDewnmZgnDAT8pFdHJDuW7avGzWBgpM1qxmBtHqTy2nzvHGz4Sr/dYi8ylshnAvLjK4mXAIqFB9rZpHNzyuNDja+i6Y1n9BoZchJwyGXUyKZPPjRPfPscNN7bgT0/w1NNnWNK+BwnGA6PvqGR+cnv4EkBfIjJbJp+bIaWEU89j1FmsDGo5A8AYBjFp4MBeSsU8+UVdUXtxW8AiW/piFCQrwOKJb2AKV1ekkPZR4XhZ3KuLlKYDKlEDqCHU/DZVomLFF2WMPMQtvkplvImUx0HqXvUNVFhutyghQc9dIJ7JCFZWCQZyfKiQPGh8EdP41KGD1BXgCIv/I5RK0dJRxpJ4wk2MEqMSbrl3/j0iBt1Wo364ReuDB3j7XfO0pISqQdd7rHzpMnu/zVcuXPZpSc4ZdNcY5sg0k8NC4iq6mrGuQla4CDlhEV2qZGGN/M6dHHx0P/MXUhY//QJffvEiDc08WNSSB4rJUyyD6BLS14i+SUgbo6SmREdKrBHgxJfMGJQElS3qxxSTvrl/8ZJ0JH6S/XHFxBMWIAi28Bwz/FkkKI71tSeREESRTJD1RZq1YosJJb/bi7DgQ97eFA1htY+0HbEdBZoFoJJiL5FBJdwkt86hZoWoFsPaEpFmOByqObqyHlh1xd4iN/B//U+qOB0sC1OQ4RhTtHT4a/XbaH10HCiooFB6iY8s14xgH9vJez9wDYdqDVRiD9Jz6/RfWv0Ja0N5Tr/bgzhCjmxj2+Exr4pWc+gqogwvIe86wr7BUiOjTDY5Bk/exP2/9U5uu5hK569OyMp6jyzNSNMMGxic89/bRzxQiOlraaiWNgjpKwQFV3ED1qPBJUaUDKPGADh209fVQiWr2QKKoABesOXKCx9GbUFS4+JmB36SkxDOrRKPJpSkWmwJ3Ao6hueAWvTcAtH4IOpUim794jMlKHpvC/2WO4hzQpuA7Unc8w3YmmZGvvVDV8/6vmBIhtJHpY9KipPM7zXSfIuC8oVEb95FXnYXrZoM2jzFAiWUhv+/ksDRGabiEobER3QF7fTpdfKfsEWhEtJZ7aESoDdso3rjlH/OiPiOxkQEJSdPc8zpZbZnBkg8h5EK+cwk9n238LZPPKhPzs8x9t0ztNY65HlGYk1RyzCkGPpi6BHRlzKpxrisWB8mQDUi36oWxAy93M10ZLaYbrKFt2xZF1o4xmqH79l839Y9H8EWEHjTEGtheZVKs45IaQg0FXMJrwLrG6bHE4wtb0YeKfpkB661DupLoGsdgijwf2+V1ZxbJMGgyx1nxzK1q52ifXMQV3IcGY60WKyF8SdSdNwZP2dFqhlEPh1G58CXCHRg0NWQG+bg2Q7GlYf7r/NWmdINl3nI4WXBEhm66z26WBhvII/tZ8+No8QVi4yUKS/3qaYOudilFQcSxhEbWPIBYCiTR3Xc9h0s7p7Tjb1TBJUySk5FTLG9ynstfYxPRykkztEIDLEpZKFspjungAwM/C2+p+rQnd1MRZvKSaToW9kKGC2algbvU7upOC5JWTHSc1jbp2wGv5Piuwc9oGx+znoOE3W/2b2oeqNRYagVdn3myxSqDu33kdCnB+IEZJ1y2kfSFDNpodMh0IFUdj6aFNBxmqGLy0WLt2dmTsDpVuldpFuVgu8AGnrAUAapQnkMmWggL6/79Goi3L4x2jdNvfaZdZcFy5dOoOs9NtR4VXDXPNUPHmD/4RaVmRqlfp+RtZyqiiRhQFcMmYTkxOTEZCT+FdboliOqpkTWyWjGFiHAqUHVkqnQzx2u12MkyKgGfsUOSnXZUL/k5GSkxT6+TRKoqOiw500KPwXd8pgNMZvmm0hhnBWSdQthxoZbwLKpQoirmHJCMvBRLoliUqS5yANnqQfNRuGLePXCQF0N+I1kiKaopKh1RRHReQ4xEWMvnKOUWLJOjmrmt5YU1Wk3jCeKrq9hL7xKTXXzb5oX94ZN8AjD0gBD428rYOqwYwbOLGDWc79He2qU8M5tHLmtfSk+LvsAm40MeWAnk3unqZgyGhnYFVDv9xl9YA8lhGkpkScjLIRlVpIq3b4h6qYkUUSfEDRENjaYKxtqXYtJDNUwwoj1ZWoTcxGH6XWYTnIqxd5dESmaeQYSOUPUt66nBYexWzybTRk9mPxN2by5b2XAZ2S4RAbvpSgyMuiNHXgfQ6ZvkNQijXoRcaLis7fsNBhA+8Ka7/4zFS9di/3Mm95Phi500GabFTFesPUXqSY+EmGA3jKhKdMJG2w0q/QC8clmAAopPJalRUrJCqVkjGUr5M6hL71KvVlhQ/yORjcgxChO0uIV4sTiJMdJ0WdjDNoaxf31SXS6DYHg2oaR9Q1WA7jwwsqPAUsOPLKLyW1txqM6mQiarUMEpZ2TmK5l0taxjXFeTWK6EsHqBiN5RrVUZpUQ6eZUbY/ZIEAEgiQs+jEcZBlqQxb6K0yXMmpS2PIiW8TtZtUE51Aj9GTAUxSjYGWLEhrykc26zyWTPoTXJifVITDskPxugqVINTaGU8swMbpJbIutHhTlCB2AZbELo1XElEESROwW2Z76YxfXodpkNTA4a9HFi1RrCSKJT1clRRYvEMc1NioxqRQxVBy5760r9hYtUG30CDsJncjSdxmcOydjJqRXiegWQBkoKO12sGkfCX1tzkerdLOIGQVouYw+v4BOjqO1AOZLbHMKo2UufPs8+WX7WW5oIq0y8WKXEevQSpmNZztww5wnRUGO2oBKHmICyFVQetQFQvVugdtYZWzE63mXGI9odeRkiCp0l2mWU8oSkGO3mGzWO4qyNdgruQx6Zrwa826DKabXDZnDYA+ObOUz4oY9s5tcY9CiqZtKqWhtZPCUAzEQhpAX6WYAvs3+yqEPgvNRR6QyrMHokGhb7+4SQbUEGxk2jsisIZcKG+RUoFAuNZjqYRdfYexUg9X2OKtx5KOJ+K5k5xQ1XUzkYHmJkovo/PAMzZJFO0tS1qouFQ3mrvC7Ncsxz59i6toSL0dhsVFu4OUEHjztBN1Q5LlFzP4JzLQQfqjBzdPH2R7EfPuykeWxXVTftZ/dQYnpvIG7sMFGJcVEJeppmdDENEoxpfWI5djScwbTXWfGCGFU51wONlthZykYPn7CT2ARtnsZEuWUg+JRoMXKFg2HNT9RCoveQe7AQm9gzLmcQBxWtqShYRQZFAgpYDb4nEHOli2V563/65bSmRYup4AxsNqDWg3fDjeIPj/C+FSQTgr1WhGBTAGowd6qtCgJKCzBRrNKXyyoJXdrVEMv231Dk4VSH8rrRIuLlDrgSiW64r0V50DXzlOvWaTbIwjqrPQWqGlAr9pkpZLQG1Lh4ioNuLVlGe0prlymu7xGUoKuuGHKUnK0XsVtONyJRbQ1gpYi2DdO+Y59zL6G4N7Wxty5jfl2kzguSWU9JTyzgLTHqHSVnUmdjAhshMlS6hi0lxJaJXF+Xbu1dWoVLZKCt6RzhFyUXJXc5eShkAtk6o2lHF9YzNS7Cr5EkJPhyCQndxkpOT0yevRxZGRkg84SPyWX8BN7yV7bQXqSgdU/AOIw724pAwz8VVUfaXZMFN1oA1LNls3vBdhNgE6OekI7CIuqW1JfAbI4hNUNoqIQqLU63fNKV/sFyIOi8DcCQQkdt5j6BZqnX6bVy4tNdoKKw4iBEYu5cJF6EOBGu5TLIf2hCzZwhH0ad6WYXPsSr6yRrC9RV1ucXVB4M8a3YMw10clR9FvnIauAqUB7dEtWn49I3tsmeXiebffsZXq1xEipTPDcadz1s9isz864Qj9MSBECE4JJaWiGWV+nVra+i00VdRvUAyl8EUsuvt8iL+ylzBWlAvU9HLmaYhqVXPxGi1wduSqZKqlAlue+Y0WVTH34zHzL05aeuEFHXMFtRIYW3tZedRlEFNGi2Li1fqRbdggWzl5kIA6GKkvUsdkUuekAShQWEvzSJXhJMdAaUEdUpC1nEpwdYbWXFnHAFObgwNiL0TiAyR6l8ydo9x2SC5iCwAcx1FZpuD5hTTDr5xlR3YyxK+sk/T7WGPLGmJ5pjOpCtkFiMyId9M5EviwwBIyi4w04sAPtRkUjeLjlsu6ZpPmefdz35Nu4bnI7gYxhvnle0xu2s9xfZ7JmqWiJVQUxQiQWtY5yPyUU3wCtCpKl2KBHTfxeYC26svIBADBFTWmzGyWTwbp2BV0cdLoKGYbMGLJi3rq5t38zccV7ZMuxmxLxNRJ3SG11S3AeoGeQmnSLftjyO/0xW+i2eC1bzcLNVDWIQoXZJxZCIUxl2Gag7QnWF53flTh8KlTJP/WSoj3BRjCpJBdO03IGNXaz6t0oQQMsFpINamsdooE82FihsrxKGdBGhbVGiY5sUBKHJSrc5ULauxiWUpKBEZrEaK2Oo+n7YYKH9pG0K7Tv2c7b3jHFtbVZfuAm6J9fYGFmJ8utCNtfZlL8StjY6JNEAYYAKRnMSp9K4KibYu/L6jK1qiMstiw4TEEIvTGmObjAV0xFBjfMd3tlW6KAyFaDTYoWSD/NtgCbFA84HdSKhkqpIMo6bLsc7AWUwZ7ALYXJzXoTgz08WyT2EExqio76yzafbhp1l9WXl6ZGqUeYtZQg8k+pIwxwWURflVh8z66TCNWKN+8Qb/XbHG2llM+epxEJrujbcRKidc/3tJwjry7QrFRZRVHpErsU60a5IIrLMsSuUZKQXhHJnPo9E26lR3R2lUazwVpRe/KOuS9auuBfPMK9O8cIpEdrBOKlmObz5zjfqKGzNbKLJ5gejQgy0CSg3+1Tr1T8ZAQWOmtMTVWINIBAYHmd5mhYVDetvyBcsYVBvcdSKpPL5uaOS5sONhWQryoXOd9a6OU0Ql+9TQekGLNlwsxwx4IdphTDpQ9LdVuAIsOYoANPZCiLZYvyYUv5wG1JW1t9nC1FzcHms2EJXz19GRQymwlyYo1kpO0fAOAy7+cM6s5qhu0IOvBC6OG0jwtyXG2d2hpFmjcoMU4C3x8sGWo6VFKQwD/9JlLn2ywEdHWFUgWCNcPG0jqxQjjaZBlFVzYoS584F9RI8VQqKfwaQYOb9xKimMUF/3jV4+epT+5gebpJL18nDHNapo64vmf84mgWWzrBQsVSDXwJXpMAgi4jUtoshQ/73DLvUiZmOEEybF3yNlzOpRxjUBBUr5WRyCL9nNxYRPwztjfBYguwDSKJ80rssqu8AIhuTUtySZ88ulXpbGEog5Pa+lLdUrlkixobtuwP6iieSEYOyXtUnGXRBOhGnzC0BCTDBaBbfB8tWgugB9KHagBL6q17sb5gqBQJfANt9rGLHcpjoyxnBgkdcVcJShFpL6VcLyrq5Qr9Uy+wI4zp1yqs5opN1JRSnAzkOhSRH/IAi1G/eTzKDGZnlVIXxlzG2ZUNGvWEUMr+vFdTGs2ICtFm2dsO8p6BzEIjwUiMSrApP4drUXAy3MS5ZeuYbOZ/KWSomC1ObHGEsWjk0NShYeS71FU32wwKsqrqb7leUi6ULVLZXAKQSyvQ/EiBcfD9djMaDSOPsKl3zNC/KRB+6Wfpll4cEbScUlrLCaoJ6WKHpF33uyeH32N+pIWiiEoaeuWW58UzYWLQCBFbbH5TiPpI1qWmEYsSIjWLLPQpxxU65FRNGecyrCmTlsv018+wLdnD901E1giR82vUtlXYQHDdDONypJyQ/n+qLBurvmmgiwAAAABJRU5ErkJggg==';
// Function: HCF
// Optional arg: Run every X seconds forever, else once
function fnHaltCatchFire (argSeconds = 0) {
let URL=HCF_IMAGE_ENCODED; // DEV
SCALE=333;
Y = 0;
X = Math.floor (Math.random() * 120) - 10; // May run off screen
var oFuzzElement = fnPlaceImageFuzz (URL, X, 13, 444);
setTimeout(() => {
oFuzzElement.style.opacity = "0.0";
}, 500); // 500 ms avoid races
// Run self again in X seconds
if (argSeconds) {
setTimeout ( () => {
fnHaltCatchFire (argSeconds); // Re-run self
}, argSeconds * 1000);
}
}
// Function: Append an image that deletes self at end of its CSS transition
function fnPlaceImageFuzz (url, xPercent, yPercent, width) {
// Actually, is square per width
const imgContainer = document.createElement('div');
const uniqueId = `img-fuzz-${imgCounter++}`; // Generate a unique ID
imgContainer.id = uniqueId; // Added for distinct transitions
imgContainer.className = 'img-fuzz';
imgContainer.style.width = `${width}px`;
imgContainer.style.height = `${width}px`;
imgContainer.style.left = `calc(${xPercent}% - ${width / 2}px)`;
// imgContainer.style.top = `calc(${yPercent}% - ${width / 2}px)`;
imgContainer.style.position = 'absolute'; // Ensure position is absolute
const img = document.createElement('img');
img.src = url;
imgContainer.appendChild(img); // Return value ignored
// Add an event listener for the 'transitionend' event
imgContainer.addEventListener('transitionend', function(event) {
// Delete self! :P
imgContainer.remove();
});
// Append new element
document.body.appendChild(imgContainer);
return (imgContainer); // OG
}
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.