-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_dev.html
executable file
·1 lines (1 loc) · 35.8 KB
/
index_dev.html
1
<!doctype html><meta charset="utf-8"><style type="text/css">*{margin:0;padding:0;color:#aaa;user-select:none}html{height:100%;background:#383838;font-family:sans-serif}body{position:relative}.b,.col,.g,.r{display:inline-block}.b,.g,.r{height:15px;margin-right:10px;width:15px}.col{width:33%}.r{background:#b00}.g{background:#0b0}.b{background:#00b}#m table,.award,.emo,.emo-inline,.sparkles,canvas{color:red;font-size:3em;font-family:'Segoe Ui Emoji',sans-serif}#m table{table-layout:fixed;width:960px;height:360px;border:5px solid green;text-align:center;border-collapse:collapse;margin:0 auto}.award,.emo,.emo-inline,.sparkles,canvas{margin:0}.emo-inline{font-size:inherit}.enemy #m table{border:5px solid red}#m table:first-of-type tr:last-child td{border-bottom:0}td,tr{height:33%}tr{background-color:#633f19;width:100%}td{border:10px solid rgba(123,77,29,.4);width:33%;position:relative}li,ul{list-style:none;margin:0;padding:0}#p tr:first-child td{border-top:0}.a{display:none;top:0;bottom:0;background-color:rgba(0,0,0,.5);width:100%;z-index:1}.a li{position:relative;display:inline-block;font-size:40px;height:80px;width:80px;vertical-align:middle;line-height:80px;top:30px}#mm,.a,.a li:after{position:absolute}.a li:after{content:'◼';z-index:-1;font-size:100px;width:80px;height:85px;top:-5px;left:0}.valid{background:rgba(0,200,0,.3)}td .a{display:block}.turn{position:absolute;right:0;top:55%;transform:translate(-50%,-50%);background:rgba(0,0,0,.9);padding:20px;color:green;font-size:40px}.enemy .turn{top:45%;bottom:auto;color:red}@media (max-width:1630px){.turn{right:-40px;font-size:30px}}@media (max-width:1410px){.turn{font-size:20px}}.a li[data-action-id=endTurn]:before{content:'';position:absolute;top:25px;bottom:40px;width:auto;background:#0078d7;left:20px;right:22px}.health,.view{pointer-events:none!important}.health{font-size:20px}.view{opacity:1;transition:all .5s ease-in-out}.view.hasActed{opacity:.5}.view.dodge{margin-left:-100px}.noRange{filter:grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(.8)}#mm{top:50%;left:-20px;transform:translate(-100%,-50%);opacity:1}#mm li,#mm ul{background:#633f19}#mm ul{border-top:5px solid red;border-bottom:5px solid green;width:100%}#mm li{height:40px;width:100px;border:4px solid #000}#mm .active,.c{position:relative}#mm .active{background:green}#mm .active:before{background:red;content:'';position:absolute;width:100%;height:100%;opacity:.3;transform:translateY(calc(-100% - 8px))}#log,.c{margin:0 auto}.c{width:960px}#log{color:#aaa;overflow-y:scroll;height:150px;width:200px;font-family:'Segoe Ui Emoji',sans-serif}#log::-webkit-scrollbar{width:0;background:0 0}.wall{background-color:transparent;border-color:transparent}#intro,.scanLines:after{top:0;bottom:0;left:0;right:0}#intro{font-family:sans-serif;background:rgba(0,0,0,.9);opacity:0;transition:opacity .5s ease-in-out;position:fixed;z-index:-10000}#intro.active{opacity:1;z-index:10000}#intro.hiding{transition:opacity .5s ease-in-out,z-index 0s linear .5s}#intro h1{margin-bottom:20px}.intro-container{transition:all 1.5s ease-in-out 2s;width:960px;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.intro-container p{display:inline-block;width:100%;font-size:24px;margin-bottom:20px;overflow:hidden}button{border:1px solid #aaa;border-radius:0;box-shadow:none;background:0 0;font-size:20px;margin-top:10px;padding:10px 20px;transition:all .3s}button:hover{border-color:#fff;color:#fff;cursor:pointer}button+button{margin-left:15px}button.small{margin-left:30px;padding:10px;font-size:12px}.award{opacity:0;transform:scale(.1)}.award.active{opacity:1;transform:scale(2);transition:all 1s}.award .silver{filter:grayscale(100%)}.award .bronze{filter:hue-rotate(330deg) saturate(75%)}.next-level,.restart.finished{margin-top:25px;opacity:0;visibility:hidden;transition:all 1s}.next-level.active,.restart.finished.active{visibility:visible;opacity:1}.sparkles{transform:scale(.1) translate(-50%,-50%);transform-origin:top left;position:absolute;left:50%;top:50%;opacity:0}.sparkles.active,.sparkles.half{transition:transform .5s ease-out,opacity .3s ease-out}.sparkles.active{transform:scale(2) translate(-50%,-50%);opacity:1}.sparkles.half{opacity:0}#p .effect.dodge,.effect{transform:translateX(-50%)}.effect{position:absolute;top:0;left:50%;opacity:1;transition:all .3s ease-in,opacity .3s ease-in-out}.effect.fade{opacity:0}#p .effect{transform:translateX(-50%) rotate(180deg)}#p .effect.dodge{font-size:40px;margin-top:40px}.hidden{display:none}.manual-container{position:absolute;padding:40px;top:0;bottom:0;right:0;left:0;background-color:rgba(0,0,0,.9);font-size:24px}.manual-container h3{margin-top:20px}.scanLines{pointer-events:none;position:relative;filter:blur(.6px)}.scanLines *{pointer-events:all}.scanLines:after{pointer-events:none;background:-webkit-repeating-linear-gradient(top,transparent 0,transparent 2px,rgba(255,255,255,.25) 2px,rgba(0,0,0,.25) 4px);content:'';position:absolute;z-index:999999}</style><div class="scanLines"><div id="intro" class=""></div><div id="m"><div class="c"><table id="e"><tr id="e-b"><td id="e-b-l"></td><td id="e-b-c"></td><td id="e-b-r"></td></tr><tr id="e-m"><td id="e-m-l"></td><td id="e-m-c"></td><td id="e-m-r"></td></tr><tr id="e-f"><td id="e-f-l"></td><td id="e-f-c"></td><td id="e-f-r"></td></tr></table><table id="p"><tr id="p-f"><td id="p-f-l"></td><td id="p-f-c"></td><td id="p-f-r"></td></tr><tr id="p-m"><td id="p-m-l"></td><td id="p-m-c"></td><td id="p-m-r"></td></tr><tr id="p-b"><td id="p-b-l"></td><td id="p-b-c"></td><td id="p-b-r"></td></tr></table><div id="mm"><ul id="mmul"><li></li><li></li><li></li><li class="active"></li><li></li><li></li></ul></div></div></div><div class="c" style="text-align:center"><h3 style="display:inline-block;margin-top:20px">Log</h3><div id="log"></div></div><div class="turn">Player Turn</div><div style="text-align:center"><button class="hidden" id="manual" onclick="showManual()">Manual</button></div><div class="manual-container hidden"><div class="c"><h3>Turns</h3><p>Turns are 1 character a time. Once you have moved and attacked (in any order) with one character the turn will be passed to the opponent. If all enemy characters have already acted the turn instantly goes back to you.</p><h3>How to act</h3><p>Click a character to select its action.</p><h3>Objective</h3><p>Objective: Eliminate all enemies. By clearing the front row and using the <span style="color:red">warrior</span>'s push ability you can limit their movement options.</p><h3>Colour coding</h3><p><span class="r"></span>High HP, low attack. Can push enemy's lane. Low dodge and crit chance.</p><p><span class="g"></span>Low HP, high attack. Can attack ranged or diagonal. High dodge and crit chance.</p><p><span class="b"></span>Very low HP, average atk. Can attack any column in a row within 3 range. Can't dodge or crit.</p><h3>Scoring</h3><p>Whenever you lose a hero your score goes down by one (gold -> silver -> bronze).</p><div style="text-align:center;margin-top:40px"><button onclick="hideManual()">Close manual</button></div></div></div></div><audio class="hidden" id="audio-hurt" src="data:audio/mp3;base64,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"></audio><script>var d=document,w=window;window.$=d.querySelector.bind(d),w.$$=d.querySelectorAll.bind(d),w.find=function(n,o){return n.querySelectorAll(o)},w.log=function(n){var o=$("#log");o.innerText+=[].join.call(arguments," ")+"\n",o.scrollTop=o.scrollHeight},w.closeIntro=function(){var n=$("#intro");n.classList.remove("active"),n.classList.add("hiding"),setTimeout(function(){n.classList.remove("hiding")},500)},w.rnd=function(n,o){return Math.floor(Math.random()*(o-n+1)+n)},w.disableTutorial=function(){sessionStorage.setItem("disableTutorial",1)},w.tutorialEnabled=function(){return!sessionStorage.getItem("disableTutorial",1)},w.enableTutorial=function(){sessionStorage.removeItem("disableTutorial")},w.showManualButton=function(){$("#manual").classList.remove("hidden")},w.showManual=function(){$(".manual-container").classList.remove("hidden")},w.hideManual=function(){$(".manual-container").classList.add("hidden")},w.playSound=function(n){var o=$("#audio-"+n);o&&(o.volume=.5,o.play())}</script><script>!function(){"use strict";var t=function(t){this.stage=t,this.pos={x:0,y:0},this.str=1,this.dex=10,this.int=10,this._sta=5,this.maxHealth=this._sta,this._health=this._sta,this.type=t.P,this.view="😡",this.$field=null,this.$view=null,this.curAction=null,this.rotate=0,this.hueRotate=0,this.saturate=100,this.contrast=100,this._hasAttacked=!1,this._hasMoved=!1,this._hasActed=!1,this._alive=!0,this.attackView="🗡",this._actions=[{actionId:"move",view:"🏃",range:1,type:t.P},{actionId:"attack",view:"🗡",range:1,rangeX:0,type:t.E},{actionId:"endTurn",view:"🔚",type:t.P}]};t.prototype={move:function(t,e){if(t instanceof Node)return this.move(+t.dataset.x,+t.dataset.y);var i=this.stage.fieldByCoord(t,e);if(this.stage.inited&&(this.stage.playerInField(i)||i.classList.contains("wall")))return console.warn("cant move to occupied or walled field"),!1;this.pos.x=t,this.pos.y=e,this.stage.dirty=!0,this.playerTarget?log(this.view,"moves towards",this.playerTarget.view):log(this.view,"moves")},attack:function(t){if(t){var e=this.stage.playerInField(t);if(e){var i=1;this.renderAttack(e),log(this.view,"attacks",e.view),Math.random()>e.dex/100?(Math.random()<this.dex/150&&(i=1.5)&&log("Critical hit!"),log(e.view,"receives",this.str*i,"damage"),e.health-=this.str*i):(log(e.view,"dodged!"),e.renderDodge())}}},selectAction:function(t){this.curAction=this.actions.filter(function(e){return e.actionId===t})[0],this.curAction.range?(this.hideValidActionTargets(),this.renderValidActionTargets(this.curAction),this.stage.state=this.stage.S_TAR):this.performSelectedAction()},performSelectedAction:function(t){var e=this.curAction.actionId;this.stage.hideSelectAction(),this[e](t),"move"===e?this.hasMoved=!0:"attack"===e?this.hasAttacked=!0:"endTurn"===e&&this.endTurn(),this.hideValidActionTargets(),this.stage.dirty=!0},endTurn:function(){this.stage.turn===this.type&&(this.hasActed=!0,this.stage.endTurn())},getValidActionTargets:function(t){var e,i,s,a,n;if(t.type===this.stage.P){for(e=this.type===this.stage.P?this.stage.playerFieldByCoord.bind(this.stage):this.stage.enemyFieldByCoord.bind(this.stage),i=this.pos.x,s=this.pos.y,a=[],n=1;n<=t.range;n++)a=a.concat([e(i+n,s),e(i-n,s),e(i,s+n),e(i,s-n)]);a=a.filter(function(t){return t&&!find(t,".view").length&&!t.classList.contains("wall")})}if(t.type===this.stage.E){for(e=this.type===this.stage.P?this.stage.enemyFieldByCoord.bind(this.stage):this.stage.playerFieldByCoord.bind(this.stage),i=this.pos.x,s=this.pos.y,a=[],n=1;n<=t.range;n++)a=a.concat([e(i,s+n),e(i,s-n)]);a=a.filter(function(t){return t})}return a},renderValidActionTargets:function(t){var e=this.getValidActionTargets(t);return e.forEach(function(t){t.classList.add("valid")}),e},hideValidActionTargets:function(){$$(".valid").forEach(function(t){t.classList.remove("valid")})},render:function(t){var e=document.createElement("div");e.innerText=this.view,e.classList.add("view"),e.style.transform="rotate("+this.rotate+"deg)",e.style.filter="hue-rotate("+this.hueRotate+"deg) saturate("+this.saturate+"%) contrast("+this.contrast+"%)",t.appendChild(e),this.hasActed&&e.classList.add("hasActed"),this.$view=e,this.$field=t;var i=document.createElement("div");i.classList.add("health");for(var s=0,a=this.health;a>0;a--)a>5||s+a>5?(i.innerText+="💕",a--):i.innerText+=a>=1?"❤":"💔",s++;this.$field.appendChild(i)},renderActions:function(){var t=this,e=document.createElement("b");return t.actions.forEach(function(i){var s=document.createElement("li");if(!("move"===i.actionId&&t.hasMoved||"attack"===i.actionId&&t.hasAttacked)){var a=t.getValidActionTargets(i);"endTurn"===i.actionId||a&&a.length||s.classList.add("noRange"),s.innerText=i.view,s.dataset.actionId=i.actionId,e.appendChild(s)}},t),e.innerHTML},renderAttack:function(t){var e=t.pos;setTimeout(function(){var i=document.createElement("div");i.classList.add("effect"),i.innerText=this.attackView,this.$field.appendChild(i);var s=0,a=!1;i.addEventListener("transitionend",function(e){if(++s>1){if(a)return i.remove();a=!0,i.classList.add("fade"),t&&t.$view&&t.$view.classList.contains("dodge")||playSound("hurt")}}.bind(this)),setTimeout(function(){var t=this.pos.x-e.x,s=this.pos.y-e.y;t*=-317,t+=158.5,s*=117,i.style.left=t,i.style.top=-s}.bind(this),100)}.bind(this),100)},renderDodge:function(){setTimeout(function(){var t=document.createElement("div");t.classList.add("effect","dodge"),t.innerText="💨",this.$field.appendChild(t),this.$view.classList.add("dodge");var e=!1;t.addEventListener("transitionend",function(i){e?t.remove():(e=!0,t.classList.add("fade"))}.bind(this)),setTimeout(function(){t.style.left=198.5}.bind(this),100)}.bind(this),100)},kill:function(){log(this.view,"was slain!"),this._alive=!1,this.stage.removeActor(this),this.stage=null,this.pos=null,this.str=null,this.dex=null,this.int=null,this._sta=null,this.maxHealth=null,this._health=null,this.type=null,this.view=null,this.$field=null,this.$view=null,this.curAction=null,this.rotate=null,this._hasAttacked=null,this._hasMoved=null,this._hasActed=null,this.actions=null}},Object.defineProperty(t.prototype,"sta",{get:function(){return this._sta},set:function(t){this._sta=t,this.maxHealth=this._sta,this.health>this.maxHealth&&(this.health=this.maxHealth)}}),Object.defineProperty(t.prototype,"health",{get:function(){return this._health},set:function(t){this._health=t,this.health>this.maxHealth&&(this._health=this.maxHealth),this.health<=0&&this.kill()}}),Object.defineProperty(t.prototype,"hasActed",{get:function(){return this._hasActed},set:function(t){this._hasActed=t,this._hasAttacked=t,this._hasMoved=t}}),Object.defineProperty(t.prototype,"hasMoved",{get:function(){return this._hasMoved},set:function(t){t!==this._hasMoved&&(this._hasMoved=t,this._hasMoved&&this._hasAttacked&&!this.hasActed?this.hasActed=!0:t||(this._hasActed=!1))}}),Object.defineProperty(t.prototype,"hasAttacked",{get:function(){return this._hasAttacked},set:function(t){t!==this._hasAttacked&&(this._hasAttacked=t,this._hasMoved&&this._hasAttacked&&!this.hasActed?this.hasActed=!0:t||(this._hasActed=!1))}}),Object.defineProperty(t.prototype,"alive",{get:function(){return this._alive}}),Object.defineProperty(t.prototype,"actions",{get:function(){return this._actions},set:function(t){this._actions=t}}),window.Player=t}()</script><script>!function(){"use strict";var t=function(t){Player.call(this,t),this.view="🧝🏼",this.maxHealth=3,this.health=3,this.dex=35,this.str=2},e=Object.create(Player.prototype);e.constructor=t,e.getValidActionTargets=function(t){if("attack"!==t.actionId)return Player.prototype.getValidActionTargets.call(this,t);var e,i,s;return e=this.type===this.stage.E?this.stage.playerFieldByCoord.bind(this.stage):this.stage.enemyFieldByCoord.bind(this.stage),i=this.pos.x,s=this.pos.y,[e(i+1,s+1),e(i-1,s+1),e(i-1,s-1),e(i+1,s-1),e(i,s-2),e(i,s-3),e(i,s+2),e(i,s+3)].filter(function(t){return t})},t.prototype=e,window.Rogue=t}()</script><script>!function(){"use strict";var t=function(t){Player.call(this,t),this.view="🧙🏻♂",this.maxHealth=2,this.health=2,this.str=1.5,this.dex=0,this.attackView="🔥",this.attackView2="💥"},i=Object.create(Player.prototype);i.constructor=t,i.getValidActionTargets=function(t){if("attack"!==t.actionId)return Player.prototype.getValidActionTargets.call(this,t);var i,e,a,s=[];i=this.type===this.stage.P?this.stage.enemyFieldByCoord.bind(this.stage):this.stage.playerFieldByCoord.bind(this.stage),e=this.pos.x,a=this.pos.y;for(var o,r=0;r<=2;r++)for(o=1;o<=3;o++)s=(s=(s=(s=s.concat([i(e+r,a+o)])).concat([i(e+r,a-o)])).concat([i(e-r,a+o)])).concat([i(e-r,a-o)]);return s.filter(function(t){return t})},t.prototype=i,window.Mage=t}()</script><script>!function(){"use strict";var t=function(t){Player.call(this,t),this.maxHealth=9,this.health=9,this.str=1,this.attackView="🗡"},i=Object.create(Player.prototype);i.constructor=t,i.push=function(){this.stage.playerPush(),log(this.view,"pushes onward!"),this.endTurn()},Object.defineProperty(i,"actions",{get:function(){var t=this.stage.playerInField.bind(this.stage),i=this.stage.fieldByCoord.bind(this.stage);if(3!==this.pos.y||1===this.stage.activeRow||t(i(0,2))||t(i(1,2))||t(i(2,2)))return this._actions;var s=JSON.parse(JSON.stringify(this._actions));return s[1].actionId="push",s[1].view="⬆",s},set:function(t){this._actions=t}}),t.prototype=i,window.Warrior=t}()</script><script>!function(){"use strict";var t=function(t){Player.call(this,t),this.type=t.E,this.view="🦂",this.playerTarget=null},e=Object.create(Player.prototype);e.constructor=t,e.determineTarget=function(){return this.playerTarget=null,this.stage.players.forEach(function(t){this.playerTarget||this.inAttackRange(t)&&(this.playerTarget=t)},this),this.playerTarget||(this.playerTarget=this.getClosest(this.stage.P)),this.playerTarget?(log(this.view,"targets",this.playerTarget.view),this):this},e.determineAction=function(){if(this.playerTarget&&this.playerTarget.alive||this.determineTarget(),this.playerTarget&&this.inAttackRange(this.playerTarget)){if(this.hasAttacked)return void this.selectAction("endTurn");this.selectAction("attack"),this.performSelectedAction(this.playerTarget.$field)}else{if(!this.hasActed&&"push"===this.actions[1].actionId)return this.selectAction("push"),this.performSelectedAction(this.stage.fieldByCoord(this.pos.x,this.pos.y+1)),void(this.hasActed=!0);if(this.hasMoved||!this.playerTarget)return void this.selectAction("endTurn");var t=this.pos.x,e=this.pos.y,i=t-this.playerTarget.pos.x,s=null;2-e>0?s=this.stage.enemyFieldByCoord(t,e+1):i>0?s=this.stage.enemyFieldByCoord(t-1,e):i<0&&(s=this.stage.enemyFieldByCoord(t+1,e)),s?(this.selectAction("move"),this.performSelectedAction(s)):this.hasMoved=!0}this.stage.state=this.stage.S_AI},e.inAttackRange=function(t){var e=!1,i=this.actions.filter(function(t){return"attack"===t.actionId})[0];if(!i)return!1;this.curAction=i;var s=this.getValidActionTargets(this.curAction);return!!s&&(s.forEach(function(i){t.$field===i&&(e=!0)}),e)},e.getAttackable=function(){var t;return this.stage.players.forEach(function(e){!t&&this.inAttackRange(e)&&(t=e)}),t},e.getClosest=function(t){var e=1/0,i=1/0,s=null;return t===this.stage.P&&this.stage.players.forEach(function(t){var a=Math.abs(t.pos.x-this.pos.x),r=Math.abs(t.pos.y-this.pos.y),h=a+r;(r<i||h<e)&&(e=h,i=r,s=t)},this),s},t.prototype=e,window.Enemy=t}()</script><script>!function(){"use strict";var t=function(t){Enemy.call(this,t),this.view="🦂",this.type=t.E,this.hueRotate=120,this.saturate=360,this.dex=30,this.maxHealth=3,this.health=3},e=Object.create(Enemy.prototype);e.constructor=t,e.getValidActionTargets=function(t){return Rogue.prototype.getValidActionTargets.call(this,t)},t.prototype=e,window.Scorpion=t}()</script><script>!function(){"use strict";var t=function(t){Enemy.call(this,t),this.maxHealth=2,this.health=2,this.dex=0,this.str=1.5,this.type=t.E,this.view="🕷",this.rotate=180,this.hueRotate=210,this.saturate=600,this.attackView="🕸"},e=Object.create(Enemy.prototype);e.constructor=t,e.getValidActionTargets=function(t){return Mage.prototype.getValidActionTargets.call(this,t)},t.prototype=e,window.Spider=t}()</script><script>!function(){"use strict";var t=function(t){Enemy.call(this,t),this.view="🦖",this.hueRotate=330,this.saturate=250,this.contrast=400,this.attackView="🗡"},s=Object.create(Enemy.prototype);s.constructor=t,s.push=function(){this.stage.enemyPush(),log(this.view,"pushes onward!")},Object.defineProperty(s,"actions",{get:function(){var t=this.stage.playerInField.bind(this.stage),s=this.stage.fieldByCoord.bind(this.stage);if(2!==this.pos.y||this.stage.activeRow===this.stage.rows-1||t(s(0,3))||t(s(1,3))||t(s(2,3)))return this._actions;var i=JSON.parse(JSON.stringify(this._actions));return i[1].actionId="push",i[1].view="⬆",i},set:function(t){this._actions=t}}),t.prototype=s,window.Dragon=t}()</script><script>!function(){"use strict";var t=function(){this.renderTargets=[],this.dirty=!1,this._state=this.S_CHAR,this._turn="",this.turn=this.P,this.currentSelection=null,this.rows=8,this.activeRow=Math.floor(this.rows/2),this.intro="",this.heroStartCount=0,this.inited=!1};t.prototype={S_CHAR:1,S_ACT:2,S_TAR:3,S_AI:4,P:1,E:2,init:function(){var t=document.createElement("ul");t.classList.add("a"),$("#m").appendChild(t),tutorialEnabled()&&this.renderIntro(),this.heroStartCount=this.players.length,this.inited=!0},renderIntro:function(){this.intro&&($("#intro").innerHTML=this.intro,$("#intro").classList.add("active"))},addActor:function(t){this.renderTargets.push(t),this.dirty=!0},removeActor:function(t){var e=this.renderTargets.indexOf(t);-1!==e&&this.renderTargets.splice(e,1),this.dirty=!0,this.enemies.length?this.players.length||this.gameOver():this.endStage()},render:function(){mappedStage.forEach(function(t){t.forEach(function(t){t.innerText="",+t.dataset.y<3-this.activeRow||+t.dataset.y>this.rows-this.activeRow+2?(t.classList.add("wall"),t.parentNode.classList.add("wall")):(t.classList.remove("wall"),t.parentNode.classList.remove("wall"))},this)},this),this.renderTargets.forEach(function(t){var e=this.fieldByCoord(t.pos.x,t.pos.y);t.render(e)},this);var t=$("#mmul");t.innerHTML="";for(var e=0;e<this.rows;e++)t.appendChild(document.createElement("li"));var i=$$("#mm li");i.forEach(function(t){t.classList.remove("active")}),i[this.activeRow].classList.add("active"),this.dirty=!1},fieldByCoord:function(t,e,i){switch(i){case FIELD_TYPE_ENEMY:return mappedEnemyFields[e]&&mappedEnemyFields[e][t];case FIELD_TYPE_PLAYER:return mappedPlayerFields[e]&&mappedPlayerFields[e][t];case FIELD_TYPE_STAGE:default:return mappedStage[e]&&mappedStage[e][t]}},playerFieldByCoord:function(t,e,i){if(e>2)return this.fieldByCoord(t,e,i)},enemyFieldByCoord:function(t,e,i){if(e<=2)return this.fieldByCoord(t,e,i)},playerInField:function(t,e,i){var n=null;return(e?e===this.P?i?this.playersToAct:this.players:this.enemiesToAct:this.renderTargets).forEach(function(e){e.$field&&e.$field.id===t.id&&(n=e)}),n},updateAi:function(){this.state=this.S_AI;var t=this.enemiesToAct.shift();if(!t)return this.endTurn();t.determineTarget(),function(t){setTimeout(function(){this.state===this.S_AI&&t.determineAction()}.bind(this),1e3),setTimeout(function(){this.state===this.S_AI&&t.determineAction()}.bind(this),2e3),setTimeout(function(){this.state===this.S_AI&&t.determineAction()}.bind(this),3e3)}.bind(this)(t)},renderSelectAction:function(){setTimeout(function(){$(".a").innerHTML=this.currentSelection.renderActions(),this.currentSelection.$field.appendChild($(".a"))}.bind(this),100)},hideSelectAction:function(){$(".a").innerHTML="",$("#m").appendChild($(".a"))},endTurn:function(){this.enemiesToAct.length||this.playersToAct.length?log("= end of turn ="):(log("= end of round ="),this.renderTargets.forEach(function(t){t.hasActed=!1},this)),this.turn=this.turn===this.E?this.P:this.E,this.state=this.S_CHAR,this.turn!==this.P||this.playersToAct.length||this.endTurn()},playerPush:function(){this.activeRow--,this.enemies.forEach(function(t){t.pos.y<2&&t.pos.y++})},enemyPush:function(){this.activeRow++,this.players.forEach(function(t){t.pos.y>3&&t.pos.y--})},endStage:function(){var t=!0,e="<span>🏆</span>";this.heroStartCount-1===this.players.length?(t=!1,e='<span class="silver">🏆</span>'):this.heroStartCount-2>=this.players.length&&(t=!1,e='<span class="bronze">🏆</span>'),this.intro='<div class="intro-container"><div class="sparkles">🎇</div><div class="award">'+e+'</div><button class="next-level">Next level</button>'+(t?"":'<button class="restart finished">Restart level</button>')+"</div>",this.renderIntro(),t||$(".restart").addEventListener("click",function(){reloadLevel()}.bind(this));for(var i=0;i<5;i++)setTimeout(function(){var t=$(".sparkles"),e=rnd(35,65)+"%",i=rnd(-150,150)+"px";t.classList.add("active"),t.style.left=e,t.style.top=i,setTimeout(function(){t.classList.add("half")},300)},550*i),function(t){setTimeout(function(){$(".sparkles")&&$(".sparkles").classList.remove("active","half")},550*t+500),4===t&&$(".next-level").addEventListener("click",function(t){window.loadNextLevel()}.bind(this))}(i);setTimeout(function(){$(".award").classList.add("active"),$(".next-level").classList.add("active"),$(".restart.finished")&&$(".restart.finished").classList.add("active")},2e3)},gameOver:function(){this.intro='<div class="intro-container"><p>Game over!</p><button class="restart">Restart level</button></div>',this.renderIntro(),$(".restart").addEventListener("click",function(){reloadLevel()}.bind(this))},destroy:function(){$(".a")&&$(".a").remove(),setTimeout(function(){this.renderTargets=null,this.dirty=null,this._state=null,this._turn=null,this.turn=null,this.currentSelection=null,this.rows=null,this.activeRow=null,this.intro=null,this.heroStartCount=null}.bind(this),0)}},Object.defineProperty(t.prototype,"state",{get:function(){return this._state},set:function(t){this._state=t,t===this.S_ACT?this.renderSelectAction():t!==this.S_TAR&&this.hideSelectAction()}}),Object.defineProperty(t.prototype,"turn",{get:function(){return this._turn},set:function(t){var e=$(".turn"),i=$("html").classList;this._turn=t,t===this.E?(e.innerText="Enemy",i.add("enemy")):(e.innerText="Player",i.remove("enemy")),t===this.E?(e.innerText="Enemy")&&i.add("enemy"):(e.innerText="Player")&&i.remove("enemy"),e.innerText+=" Turn",this.dirty=!0}}),Object.defineProperty(t.prototype,"enemies",{get:function(){return this.renderTargets.filter(function(t){return t.type===this.E},this)}}),Object.defineProperty(t.prototype,"players",{get:function(){return this.renderTargets.filter(function(t){return t.type===this.P&&t.alive},this)}}),Object.defineProperty(t.prototype,"enemiesToAct",{get:function(){return this.renderTargets.filter(function(t){return t.type===this.E&&!t.hasActed},this)}}),Object.defineProperty(t.prototype,"playersToAct",{get:function(){return this.renderTargets.filter(function(t){return t.type===this.P&&!t.hasActed},this)}}),window.mappedEnemyFields=[[$("#e-b-l"),$("#e-b-c"),$("#e-b-r")],[$("#e-m-l"),$("#e-m-c"),$("#e-m-r")],[$("#e-f-l"),$("#e-f-c"),$("#e-f-r")]],window.mappedPlayerFields=[[$("#p-f-l"),$("#p-f-c"),$("#p-f-r")],[$("#p-m-l"),$("#p-m-c"),$("#p-m-r")],[$("#p-b-l"),$("#p-b-c"),$("#p-b-r")]],window.mappedStage=mappedEnemyFields.concat(mappedPlayerFields);var e=0,i=0;mappedStage.forEach(function(t){t.forEach(function(t){t.dataset.x=e,t.dataset.y=i,e++}),i++,e=0}),window.FIELD_TYPE_PLAYER=1,window.FIELD_TYPE_ENEMY=2,window.FIELD_TYPE_STAGE=3,window.Stage=t}()</script><script>!function(){"use strict";function t(t,o,e,i){var r=new window[i](t);return r.move(o,e),r}var o=function(){Stage.call(this),this.rows=2,this.activeRow=1,this.intro='<div class="intro-container"><h1>Welcome to Dungemoji!</h1><p>The objective of the game is to eliminate all enemies with the heroes available to you.</p><p>Let\'s start with a simple tutorial where you control the <span style="color: red">Warrior</span>.</p><p>To act, click your hero, choose an action, then choose a target.</p><p><b style="color: gold"><br/>Objective: Eliminate the <span style="color:red">T-rex!</span></b></p><button onclick="closeIntro()">Continue</button><button onclick="disableTutorial();closeIntro();" class="small">Disable tutorial</button></div>'},e=Object.create(Stage.prototype);e.constructor=o,e.init=function(){this.addActor(t(this,1,3,"Warrior"));var o=t(this,1,2,"Dragon");o.health=2,o.dex=0,this.addActor(o),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},o.prototype=e,window.Stage1=o}()</script><script>!function(){"use strict";function t(t,e,i,o){var n=new window[o](t);return n.move(e,i),n}var e=function(){Stage.call(this),this.rows=6,this.activeRow=3,this.intro='<div class="intro-container"><p>Good job!</p><p>This stage will introduce you to the "push" mechanic.</p><p>If no enemy occupies the front row, the <span style="color:red;">Warrior</span>\'s attack is replaced by "push" (<span class="emo-inline">⬆</span>).</p><p>Pushing the enemy back will put them at a disadvantage, as it limits their movement.</p><p>Keep in mind that as soon as you push, your turn ends!</p><p><b style="color: gold"><br/>Objective: Eliminate the <span style="color:blue">Spider!</span></b></p><button onclick="closeIntro()">Continue</button></div>'},i=Object.create(Stage.prototype);i.constructor=e,i.init=function(){this.addActor(t(this,1,3,"Warrior")),this.addActor(t(this,0,0,"Spider")),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},e.prototype=i,window.Stage2=e}()</script><script>!function(){"use strict";function t(t,e,o,n){var s=new window[n](t);return s.move(e,o),s}var e=function(){Stage.call(this),this.rows=6,this.activeRow=3,this.intro='<div class="intro-container"><p>Well done! This is the last tutorial stage.</p><p>In this stage you\'ll get to know the <span style="color:green">Rogue</span> and the <span style="color: blue">Mage</span>.</p><p>As you probably noticed, heroes and enemies are colour-coded.</p><p>Red-coloured enemies have the same movement and attack options <br/>as the <span style="color: red">Warrior</span>, green as the <span style="color: green">Rogue</span>, and blue as the <span style="color: blue">Mage</span>.</p><p><b style="color: gold"><br/>Objective: Eliminate the <span style="color:red">T-rex!</span></b></p><button onclick="closeIntro()">Continue</button></div>'},o=Object.create(Stage.prototype);o.constructor=e,o.init=function(){this.addActor(t(this,1,3,"Rogue")),this.addActor(t(this,1,5,"Mage")),this.addActor(t(this,1,2,"Dragon")),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},e.prototype=o,window.Stage3=e}()</script><script>!function(){"use strict";function t(t,o,i,n){var e=new window[n](t);return e.move(o,i),e}var o=function(){Stage.call(this),this.rows=6,this.activeRow=3,this.intro='<div class="intro-container"><p>Now the real game begins.</p><p>If you need any more information, click the "manual" button at the bottom of the page.</p><p>Good luck!</p><button onclick="closeIntro();">Continue</button></div>',showManualButton()},i=Object.create(Stage.prototype);i.constructor=o,i.init=function(){this.addActor(t(this,1,3,"Rogue")),this.addActor(t(this,1,5,"Mage")),this.addActor(t(this,0,0,"Spider")),this.addActor(t(this,1,2,"Dragon")),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},o.prototype=i,window.Stage4=o}()</script><script>!function(){"use strict";function t(t,i,o,r){var s=new window[r](t);return s.move(i,o),s}var i=function(){Stage.call(this),this.rows=6,this.activeRow=3,this.intro=""},o=Object.create(Stage.prototype);o.constructor=i,o.init=function(){this.addActor(t(this,1,3,"Warrior")),this.addActor(t(this,2,4,"Rogue")),this.addActor(t(this,0,5,"Mage")),this.addActor(t(this,1,2,"Dragon"));var i=t(this,0,0,"Spider");this.addActor(i),this.addActor(t(this,1,0,"Scorpion")),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},i.prototype=o,window.Stage5=i}()</script><script>!function(){"use strict";function t(t,i,o,r){var n=new window[r](t);return n.move(i,o),n}var i=function(){Stage.call(this),this.rows=8,this.activeRow=3,this.intro=""},o=Object.create(Stage.prototype);o.constructor=i,o.init=function(){this.addActor(t(this,1,3,"Rogue")),this.addActor(t(this,2,3,"Mage")),this.addActor(t(this,1,2,"Dragon"));var i=t(this,0,0,"Spider");this.addActor(i),this.addActor(t(this,1,0,"Scorpion")),this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},i.prototype=o,window.Stage6=i}()</script><script>!function(){"use strict";function t(n){var i,r;return n===this.P?(i=rnd(0,2),r=rnd(3,5)):(i=rnd(0,2),r=rnd(0,2)),-1!==function(t,n){var i,r,o;for(i=0;i<t.length;++i)if(n.length===t[i].length){for(o=t[i],r=0;r<n.length&&n[r]===o[r];++r);if(r===n.length)return i}return-1}(o,[i,r])?t.bind(this)(n):(o.push([i,r]),[i,r])}function n(t,n,i,r){var o=new window[r](t);return o.move(n,i),o}var i=function(){Stage.call(this),this.rows=6,this.activeRow=3,this.intro='<div class="intro-container"><p>This is the final stage.</p><p>It will keep repeating with random setups.</p><p>Good luck!</p><button onclick="closeIntro();">Continue</button></div>'},r=Object.create(Stage.prototype),o=[];r.constructor=i,r.init=function(){for(var i=["Warrior","Mage","Rogue"],r=["Dragon","Spider","Scorpion"],o=0;o<3;o++){var e=t.bind(this)(this.P);this.addActor(n(this,e[0],e[1],i[rnd(0,i.length-1)]))}for(o=0;o<3;o++)e=t.bind(this)(this.E),this.addActor(n(this,e[0],e[1],r[rnd(0,r.length-1)]));this.turn=this.P,$("#log").innerText="",Stage.prototype.init.call(this)},i.prototype=r,window.Stage7=i}()</script><script>!function(){"use strict";function t(a){if(e.turn===e.P){var n=a.target,i=e.playerInField(n,e.P,!0),o=e.currentSelection;if(e.state===e.S_CHAR)i&&(e.currentSelection=i,e.state=e.S_ACT);else if(e.state===e.S_ACT){var r;(r=n.dataset.actionId)?(o.selectAction(r),a.stopPropagation()):o.hasMoved||o.hasAttacked||!i||(e.currentSelection=e.playerInField(n,e.P,!0),e.state=e.S_ACT)}else e.state===e.S_TAR&&(n.classList.contains("valid")?(o.performSelectedAction(a.target),o.hasMoved&&o.hasAttacked?o.curAction&&"endTurn"===o.curAction.actionId||o.endTurn():(e.state=e.S_ACT,t(a))):(r=n.dataset.actionId)?o.selectAction(r):o.hasMoved||o.hasAttacked||!i||(o.hideValidActionTargets(),e.currentSelection=e.playerInField(n,e.P,!0),e.state=e.S_ACT))}}var e=null,a=document.createElement("canvas"),n=a.getContext("2d"),i=0;a.width=a.height=55,n.font='72px "Segoe Ui Emoji"',n.fillText("⬛",-9,53),$("#m").style.backgroundImage='url("'+a.toDataURL()+'")',window.loadNextLevel=function(){if(e&&closeIntro(),e&&e.destroy(),++i>7){var t=this.tutorialEnabled();t&&this.disableTutorial(),i=7}(e=new window["Stage"+i]).init(),7===i&&t&&t&&this.enableTutorial()},window.reloadLevel=function(){i--;var t=0;window.tutorialEnabled()&&(t=1,window.disableTutorial()),window.loadNextLevel(),t&&window.enableTutorial()},window.loadNextLevel();var o=function(){e.turn===e.E&&e.state!==e.S_AI&&e.updateAi(),e.dirty&&e.render(),requestAnimationFrame(o)};o(),mappedStage.forEach(function(e){e.forEach(function(e){e.addEventListener("click",t)})})}()</script>