Skip to content

Instantly share code, notes, and snippets.

@Mizux

Mizux/hack-a-digital-card-game.markdown

Created July 25, 2022 13:53
Show Gist options
  • Save Mizux/f6dc469677672f14f2809c54965e89f7 to your computer and use it in GitHub Desktop.
Save Mizux/f6dc469677672f14f2809c54965e89f7 to your computer and use it in GitHub Desktop.
Download ZIP
Hack. A digital card game
Raw
hack-a-digital-card-game.markdown
Raw
index.haml
._audio
.screenCap.absolute.inset-0.flex.items-center.justify-center
%div.flex.flex-col
%img.h-12{:src => 'https://assets.codepen.io/217233/hack--screen.svg'}
%span.text-white.mt-4.px-10.text-center
This game is optimized for desktop resolutions 1300px x 700px and up.
%br Please play on a larger resolution.
.game.px-12
.tutorial.fixed.bg-red-100.inset-0.z-30.flex.items-center.justify-center{":class" => "{'active': !game.mainMenu && game.tutorial == true}"}
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 0 && !game.mainMenu && game.tutorial == true}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--one.gif")'}
.content
%h2 Welcome to Hack
%p.mb-4 In hack your goal is simple. Work your way through each stage's deck until you reach the end. Do this by using software in your tech deck, hacking data nodes and purchasing new upgrades.
%p.text-green Let’s go over some of the basics
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 1}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--two.gif")'}
.content
%h2 The tech deck
%p.mb-4 At the bottom of your screen you will find your tech deck. These are your playable cards and will help you move through each stage. You may only have a certain number of techs in hand at any one time so choose carefully what you take and leave.
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 2}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--three.gif")'}
.content
%h2 Formatting
%p.mb-4 To the right of your tech deck is the format slot. Dropping a card from your tech deck into this slot will remove it from play and free up space in your hand. Once the card is formatted, it can no longer be retrieved.
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 3}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--four.gif")'}
.content
%h2 The hacker
%p.mb-4 You take role of the hacker. Your hacker card is in the top left of the user interace. The card contains your current data and your current integrity points.
%p.text-green If your integrity points fall to zero, you are detected and the game is over.
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 4}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--five.gif")'}
.content
%h2 The firewall
%p.mb-4 To the right of your hacker is the firewall. The firewalls purpose is to block incoming damage from offensive programs in the stage deck. To load a module, simply drag one from your tech deck into the module slot. The total amount a firewall module can block is displayed on the card.
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 5}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--six.gif")'}
.content
%h2 The stage deck
%p.mb-4 This is the main stage deck. You must work your way through all of the cards in order to progress to the next stage. The hacker can interact with the various cards by dragging tech onto them or by simply clicking on them.
%p.text-green Let's take a look at some of the types of cards
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 6}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--eight.gif")'}
.content
%h2 Offensive cards
%p.mb-4 These cards will attack you and reduce your integrity points. You can see between the firewall module and the enemy what the intents of the enemy are. You must terminate an offensive card in order to progress. To do this, drag offensive cards onto the enemy from your tech deck. The amount of damage you do will depend on the penetration number of the used card.
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 7}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--nine.gif")'}
.content
%h2 Data
%p.mb-4 Data cards can be clicked to add them to your data store. This data can then be used on the dark web to purchase additional software, hardware or upgrades.
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 8}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--ten.gif")'}
.content
%h2 Data miner and data nodes
%p.mb-4 Within the stage deck you will find data nodes containing an amount of data. Use a data miner on them to collect its data, or simply click it to skip and progress to the next card
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 9}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--eleven.gif")'}
.content
%h2 Healing
%p.mb-4 There are several ways in which you can restore your integrity. You can play restoration cards from your tech deck, or using any of the games enumeration cards
.skip.text-white.absolute.right-2.top-2.underline.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"}
Skip
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress++"} Next
.tutorial_screen.absolute{":class" => "{'active': game.tutorialProgress == 10}"}
.gif.bg-cover.bg-center{:style => 'background-image: url("https://assets.codepen.io/217233/hack--tutorial--one.gif")'}
.content
%h2 Start hacking
%p.mb-4 That's the basics. As you start to play you'll learn strategies around picking the best upgrades for your current situation. If you need help again, click the help icon in the top right. Good luck and have fun.
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.tutorialProgress = 0, game.tutorial = false, game.tutorialDone()"} Play
.footer.absolute.bottom-4.text-description.left-48.text-center
A game by
%a.text-green{:href => 'https://www.codepen.io/jcoulterdesign', :target => '_blank'} Jamie Coulter
.game_achievement.z-30.text-white.absolute.bottom-0.right-0.p-2.flex.items-center.gap-5{":class" => "{'active': achievementEarned}"}
%img.h-8.w-8.mb-3{:src => 'https://assets.codepen.io/217233/hack--achComplete.svg'}
%div
%h3 Achievement unlocked
.game_achievement__name
{{completedAchievement.name}}
.game_achievement__description
{{completedAchievement.description}}
.game_intro.h-screen.flex.items-center.z-30.absolute.top-0.left-0.w-full{":class" => "{'active': game.mainMenu}"}
.hack--pattern.absolute.top-0.right-0.h-full{":class" => "{'active': game.gameCreation}"}
%img{:src => 'https://assets.codepen.io/217233/hack--pattern_2.png'}
.m-auto.introWrapper.flex.items-center.realtive.z-10{":class" => "{'active': !game.mainMenu}"}
%span.gamePreload.text-center.absolute.top-0.left-0.flex.flex-col.items-center.justify-center.w-full.h-full.cursor-pointer{":class" => "{'active': !game.init}", "@click" => "game.init = true, enJin.audioController.play('take'), enJin.audioController.play('intro');"}
%img.h-12.mb-3{:src => 'https://assets.codepen.io/217233/hack--headphones.svg'}
%span.text-2xl.text-white This game contains audio
%span.text-md.text-green Click anywhere to begin
%div.gameInit{":class" => "{'active': game.init}"}
.game_intro__menu.text-center.flex.flex-col
.flash.absolute.bg-white.w-full.h-full.left-0.top-0
.logo.mb-2.flex.justify-center
%img.h-12.mb-1.-mr-1{:src => "https://assets.codepen.io/217233/hackerLogoPart1.svg"}
%img.h-12.mb-1{:src => "https://assets.codepen.io/217233/hackerLogoPart1.svg"}
%img.h-12.mb-1.ml-2{:src => "https://assets.codepen.io/217233/hackerLogoPart2.svg"}
%span.author.text-description A game by Jamie Coulter
.menu.text-white.text-xl.space-y-1.mt-12
%h3{":class" => "{'active': game.gameCreation}", "@click" => "game.gameCreation = true, game.gameAchievements = false, enJin.audioController.play('take')", "@mouseenter" => "enJin.audioController.play('cardHover')"} New game
%h3{":class" => "{'active': game.gameAchievements}", "@click" => "enJin.audioController.setFrequency(game.lowerFrequency), game.gameAchievements = true, game.gameCreation = false, enJin.audioController.play('take')", "@mouseenter" => "enJin.audioController.play('cardHover')"} Achievements
%a{:href => "https://www.codepen.io/jcoulterdesign", :target => "_blank", "@mouseenter" => "enJin.audioController.play('cardHover')"} More stuff
.game_intro__newgame.text-white.text-2xl{":class" => "{'active': game.gameCreation}"}
.inner
%h4.mb-8.cursor-pointer.backArrow{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "game.gameAchievements = false, game.gameCreation = false, enJin.audioController.play('trash')"}
%svg{:fill => "none", :height => "21", :viewbox => "0 0 24 21", :width => "24", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M4.15132 11.4688L11.2171 18.5329C11.3991 18.7148 11.5012 18.9615 11.5012 19.2188C11.5012 19.476 11.3991 19.7227 11.2171 19.9046C11.0352 20.0865 10.7885 20.1887 10.5313 20.1887C10.274 20.1887 10.0273 20.0865 9.8454 19.9046L1.12665 11.1859C1.03643 11.0959 0.964855 10.989 0.916018 10.8713C0.86718 10.7536 0.842041 10.6274 0.842041 10.5C0.842041 10.3726 0.86718 10.2464 0.916018 10.1287C0.964855 10.011 1.03643 9.90412 1.12665 9.81413L9.8454 1.09538C10.0273 0.913473 10.274 0.811279 10.5313 0.811279C10.7885 0.811279 11.0352 0.913473 11.2171 1.09538C11.3991 1.27728 11.5012 1.524 11.5012 1.78125C11.5012 2.03851 11.3991 2.28522 11.2171 2.46713L4.15132 9.53125H22.1562C22.4132 9.53125 22.6596 9.63332 22.8413 9.81499C23.0229 9.99667 23.125 10.2431 23.125 10.5C23.125 10.7569 23.0229 11.0033 22.8413 11.185C22.6596 11.3667 22.4132 11.4688 22.1562 11.4688H4.15132Z", :fill => "#fff", "fill-rule" => "evenodd"}
%h2.text-lg.mb-2 Enter a network ID
.flex.items-center.relative
%input.text-black#targetID.mr-3{':value' => 'seed', "@keyup" => "seed = document.getElementById('targetID').value, enJin.utils.setSeed(document.getElementById('targetID').value)"}
%img.net.absolute.left-3{:src => 'https://assets.codepen.io/217233/el_network.svg'}
%button.random{"@click" => "enJin.utils.randomSeed(10)", "@mouseenter" => "enJin.audioController.play('cardHover')"}
%svg{:fill => "none", :height => "26", :viewbox => "0 0 34 26", :width => "34", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M24.3838 10.8321H32.9062C33.0092 10.8321 33.11 10.8615 33.1969 10.9168C33.2838 10.972 33.3531 11.0509 33.3968 11.1441C33.4404 11.2374 33.4566 11.3411 33.4435 11.4433C33.4303 11.5454 33.3883 11.6416 33.3224 11.7207L29.0612 16.836C29.0103 16.8969 28.9467 16.946 28.8748 16.9797C28.8028 17.0133 28.7244 17.0308 28.645 17.0308C28.5656 17.0308 28.4872 17.0133 28.4153 16.9797C28.3433 16.946 28.2797 16.8969 28.2289 16.836L23.9676 11.7207C23.9017 11.6416 23.8597 11.5454 23.8466 11.4433C23.8334 11.3411 23.8496 11.2374 23.8933 11.1441C23.9369 11.0509 24.0062 10.972 24.0931 10.9168C24.18 10.8615 24.2808 10.8321 24.3838 10.8321ZM0.541663 15.167H9.06413C9.1671 15.167 9.26792 15.1376 9.35479 15.0823C9.44166 15.0271 9.51099 14.9482 9.55466 14.8549C9.59832 14.7617 9.61452 14.6579 9.60135 14.5558C9.58817 14.4537 9.54618 14.3575 9.48029 14.2784L5.21905 9.16314C5.1682 9.10215 5.10456 9.05309 5.03265 9.01943C4.96074 8.98576 4.8823 8.96831 4.8029 8.96831C4.72349 8.96831 4.64506 8.98576 4.57315 9.01943C4.50123 9.05309 4.4376 9.10215 4.38675 9.16314L0.12551 14.2784C0.0596143 14.3575 0.0176224 14.4537 0.00445182 14.5558C-0.0087188 14.6579 0.00747695 14.7617 0.0511427 14.8549C0.0948084 14.9482 0.164136 15.0271 0.251009 15.0823C0.337881 15.1376 0.438701 15.167 0.541663 15.167Z", :fill => "#00FFC2"}
%path{"clip-rule" => "evenodd", :d => "M16.7238 2.16268C13.3599 2.16268 10.3515 3.69507 8.3639 6.10313C8.27515 6.21816 8.16418 6.31418 8.03757 6.38546C7.91097 6.45674 7.77133 6.50184 7.62694 6.51808C7.48256 6.53431 7.33639 6.52135 7.19712 6.47995C7.05785 6.43856 6.92832 6.36959 6.81624 6.27713C6.70416 6.18468 6.61182 6.07063 6.5447 5.94177C6.47758 5.81291 6.43706 5.67187 6.42554 5.52704C6.41402 5.3822 6.43175 5.23653 6.47766 5.09868C6.52357 4.96083 6.59673 4.83363 6.69279 4.72462C8.27978 2.80322 10.3853 1.37808 12.7588 0.618696C15.1323 -0.140687 17.674 -0.202351 20.0816 0.441036C22.4892 1.08442 24.6613 2.40579 26.3396 4.24797C28.0179 6.09014 29.1317 8.37561 29.5487 10.8325H27.3444C26.844 8.38505 25.5137 6.18547 23.5785 4.60572C21.6433 3.02597 19.2219 2.16298 16.7238 2.16268ZM6.10324 15.1675C6.51356 17.1716 7.48251 19.0187 8.89813 20.4954C10.3138 21.9721 12.1183 23.0182 14.1033 23.5128C16.0882 24.0074 18.1726 23.9303 20.1157 23.2905C22.0587 22.6506 23.781 21.4741 25.0837 19.8969C25.1725 19.7818 25.2835 19.6858 25.4101 19.6145C25.5367 19.5433 25.6763 19.4982 25.8207 19.4819C25.9651 19.4657 26.1112 19.4787 26.2505 19.52C26.3898 19.5614 26.5193 19.6304 26.6314 19.7229C26.7435 19.8153 26.8358 19.9294 26.9029 20.0582C26.97 20.1871 27.0106 20.3281 27.0221 20.473C27.0336 20.6178 27.0159 20.7635 26.97 20.9013C26.9241 21.0392 26.8509 21.1664 26.7548 21.2754C25.1678 23.1968 23.0624 24.6219 20.6888 25.3813C18.3153 26.1407 15.7736 26.2024 13.366 25.559C10.9585 24.9156 8.78635 23.5942 7.10805 21.752C5.42975 19.9099 4.31588 17.6244 3.89893 15.1675H6.10324Z", :fill => "#00FFC2", "fill-rule" => "evenodd"}
%h2.text-lg.mb-3.mt-8 Difficulty
%div.flex.gap-2.diffSelector
%button.difficulty.bg-white{":class" => "{'active': game.difficulty == 1}", "@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.difficulty = 1"} Easy
%button.difficulty.bg-white{":class" => "{'active': game.difficulty == 2}", "@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.difficulty = 2"} Medium
%button.difficulty.bg-white{":class" => "{'active': game.difficulty == 3}", "@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('take'), game.difficulty = 3"} Hard
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "game.restart(true), enJin.audioController.play('openShop'), seed = document.getElementById('targetID').value, enJin.utils.setSeed(document.getElementById('targetID').value)"} Hack
.game_intro__achievements.text-white.text-2xl.h-screen.flex.items-center.h-full{":class" => "{'active': game.gameAchievements}"}
.inner
%div.flex.justify-between.items-center.mb-12
%h4.backArrow{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.setFrequency(game.defaultFrequency), game.gameAchievements = false, game.gameCreation = false, enJin.audioController.play('trash')"}
%svg{:fill => "none", :height => "21", :viewbox => "0 0 24 21", :width => "24", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M4.15132 11.4688L11.2171 18.5329C11.3991 18.7148 11.5012 18.9615 11.5012 19.2188C11.5012 19.476 11.3991 19.7227 11.2171 19.9046C11.0352 20.0865 10.7885 20.1887 10.5313 20.1887C10.274 20.1887 10.0273 20.0865 9.8454 19.9046L1.12665 11.1859C1.03643 11.0959 0.964855 10.989 0.916018 10.8713C0.86718 10.7536 0.842041 10.6274 0.842041 10.5C0.842041 10.3726 0.86718 10.2464 0.916018 10.1287C0.964855 10.011 1.03643 9.90412 1.12665 9.81413L9.8454 1.09538C10.0273 0.913473 10.274 0.811279 10.5313 0.811279C10.7885 0.811279 11.0352 0.913473 11.2171 1.09538C11.3991 1.27728 11.5012 1.524 11.5012 1.78125C11.5012 2.03851 11.3991 2.28522 11.2171 2.46713L4.15132 9.53125H22.1562C22.4132 9.53125 22.6596 9.63332 22.8413 9.81499C23.0229 9.99667 23.125 10.2431 23.125 10.5C23.125 10.7569 23.0229 11.0033 22.8413 11.185C22.6596 11.3667 22.4132 11.4688 22.1562 11.4688H4.15132Z", :fill => "#fff", "fill-rule" => "evenodd"}
%button.hack.bg-white{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.play('openShop'), game.setAchievements(), achievements = JSON.parse(localStorage.getItem('achievements'))"} Reset
%div.flex.justify-between.mb-24
%h2 Achievements
%div.text-white.flex.w-12.items-end
%span.text-2xl {{ getAchievementCount() }}
%span.text-lightgrey.text-md /{{ achievements.length }}
.grid.grid-cols-4.gap-x-8.gap-y-12.overflow-y-scroll
%div.flex.flex-col.ach{"v-for" => "(achievement, index) in achievements", ":class" => "{'opacity-50': !achievement.complete}", "@mouseenter" => "enJin.audioController.play('cardHover')"}
%img.h-8.w-8.mb-3{:src => 'https://assets.codepen.io/217233/hack--ach.svg', "v-if" => '!achievement.complete'}
%img.h-8.w-8.mb-3{:src => 'https://assets.codepen.io/217233/hack--achComplete.svg', "v-if" => 'achievement.complete'}
%span.text-xl {{achievement.name}}
%span.text-sm.text-description.pr-6 {{achievement.description}}
.game_header.pt-12.flex.justify-between.items-start{":class" => "{'active': !game.mainMenu}"}
%div.flex.gap-4.items-end
.game_header__logo
%img{:src => 'https://assets.codepen.io/217233/hack--logo.svg'}
.game_header__seed.text-white.relative.top-1.pt-px.flex.gap-3
.div
Game seed:
%span.text-green {{enJin.utils.seedString}}
%span.text-white
Difficulty:
%span.text-green {{ game.difficulty == 1 ? 'Easy' : game.difficulty == 2 ? 'Normal' : 'Hard' }}
%div.flex.gap-2.justify-end
%div.text-white.tut{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "game.tutorial = true"} Tutorial
%div.cursor-pointer{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "enJin.audioController.globalMuteToggle(), game.muted = !game.muted"}
%img{:src => 'https://assets.codepen.io/217233/hack--audioon.svg', ":class" => "{'hidden': game.muted}"}
%img{:src => 'https://assets.codepen.io/217233/hack--audiooff.svg', ":class" => "{'hidden': !game.muted}"}
%div.flex
.eq.bg-white{":class" => "{'active': !game.muted}"}
.eq.bg-white{":class" => "{'active': !game.muted}"}
.eq.bg-white{":class" => "{'active': !game.muted}"}
.eq.bg-white{":class" => "{'active': !game.muted}"}
.hack--pattern.absolute.top-0.right-0.h-full.notBlurred.pointer-none
%img{:src => 'https://assets.codepen.io/217233/hack--pattern_2.png'}
.game_shop.text-white.absolute.top-0.left-0.z-20.w-full.flex.flex-col.justify-center.items-center.py-30{":class" => "{'active': player.shopping, 'min': game.shopMinimized}"}
.div
%h2.text-3xl.text-white.w-full.text-center.mb-1.mt-16 Dark web
%h3.text-lg.text-white.w-full.text-center.mb-12.text-description Trade data for software
%div.flex.item-center.gap-6.mb-24
.flex.gap-2.items-center.flex
%img.h-5{:src => 'https://assets.codepen.io/217233/hack-integrityicon.png'}
%span.flex.items-end.text-white
%span.text-2xl {{ player.health }}
%span.text-md.text-lightgrey /{{ player.maxHealth }}
.text-red-100.flex.gap-2.items-center
%svg.h-5.relative.-top-px{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "16", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.text-lime.text-2xl {{ player.currency }}
.game_shop__cards.flex.gap-4
.relative{"v-for" => "(card, index) in player.shopCards", ":data-index" => "index", ":class" => "{'opacity-20 pointer-events-none': player.shopCards[index].cost > player.currency || card.bought}"}
.bought.absolute.z-10.top-0{"v-if" => "card.bought"}
Downloaded
.slot{":class" => "`card--${card.type}`"}
.card.flex.justify-center.flex-col.items-center.relative{"@mouseenter" => "enJin.audioController.play('cardHover')", "@click" => "player.shopCards[index].buy()"}
.flex.gap-4.justify-center.items-center
%svg{"v-if" => "card.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.health"}
%span.text-2xl.relative.z-10.text-white {{ card.health }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#E82755"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.amount"}
%span.text-2xl.relative.z-10.text-blue {{ card.amount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.flex.gap-2.items-center.spin{"v-if" => "card.type == 'relic'"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M21.3519 2.6325C20.4969 -0.8775 15.5019 -0.8775 14.6469 2.6325C14.5193 3.15994 14.2689 3.64978 13.9162 4.06217C13.5635 4.47457 13.1184 4.79786 12.6171 5.00573C12.1158 5.21361 11.5726 5.3002 11.0315 5.25845C10.4904 5.21671 9.96689 5.04781 9.50344 4.7655C6.41644 2.8845 2.88394 6.417 4.76494 9.504C5.97994 11.4975 4.90219 14.0985 2.63419 14.6497C-0.878062 15.5025 -0.878062 20.4998 2.63419 21.3503C3.16176 21.4781 3.6517 21.7287 4.06409 22.0817C4.47648 22.4347 4.79967 22.8801 5.00735 23.3816C5.21503 23.8831 5.30132 24.4266 5.25919 24.9678C5.21707 25.509 5.04772 26.0326 4.76494 26.496C2.88394 29.583 6.41644 33.1155 9.50344 31.2345C9.9668 30.9517 10.4904 30.7824 11.0316 30.7402C11.5728 30.6981 12.1163 30.7844 12.6178 30.9921C13.1194 31.1998 13.5648 31.523 13.9178 31.9354C14.2708 32.3477 14.5214 32.8377 14.6492 33.3653C15.5019 36.8775 20.4992 36.8775 21.3497 33.3653C21.4779 32.838 21.7288 32.3484 22.0819 31.9362C22.4349 31.5241 22.8802 31.2011 23.3816 30.9935C23.883 30.7859 24.4263 30.6995 24.9674 30.7414C25.5084 30.7833 26.032 30.9522 26.4954 31.2345C29.5824 33.1155 33.1149 29.583 31.2339 26.496C30.9517 26.0325 30.7827 25.509 30.7408 24.9679C30.699 24.4269 30.7854 23.8836 30.993 23.3822C31.2006 22.8808 31.5236 22.4355 31.9357 22.0824C32.3478 21.7293 32.8374 21.4785 33.3647 21.3503C36.8769 20.4975 36.8769 15.5002 33.3647 14.6497C32.8371 14.5219 32.3472 14.2713 31.9348 13.9183C31.5224 13.5653 31.1992 13.1199 30.9915 12.6184C30.7838 12.1169 30.6976 11.5734 30.7397 11.0322C30.7818 10.491 30.9512 9.96736 31.2339 9.504C33.1149 6.417 29.5824 2.8845 26.4954 4.7655C26.0321 5.04828 25.5085 5.21763 24.9673 5.25976C24.4261 5.30188 23.8826 5.21559 23.381 5.00791C22.8795 4.80024 22.4341 4.47704 22.0811 4.06465C21.7281 3.65226 21.4775 3.16233 21.3497 2.63475L21.3519 2.6325ZM17.9994 24.75C19.7896 24.75 21.5065 24.0388 22.7724 22.773C24.0383 21.5071 24.7494 19.7902 24.7494 18C24.7494 16.2098 24.0383 14.4929 22.7724 13.227C21.5065 11.9612 19.7896 11.25 17.9994 11.25C16.2092 11.25 14.4923 11.9612 13.2265 13.227C11.9606 14.4929 11.2494 16.2098 11.2494 18C11.2494 19.7902 11.9606 21.5071 13.2265 22.773C14.4923 24.0388 16.2092 24.75 17.9994 24.75V24.75Z", :fill => "#FFAD33", "fill-rule" => "evenodd"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.defence"}
%span.text-2xl.relative.z-10.text-blue {{ card.defence }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.flex.gap-1.items-center.absolute.top-2.right-3{"v-if" => "card.durability"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.text-md.relative.mt-px {{ card.durability }}
%span.flex.gap-2.items-center{"v-if" => "card.value"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.text-2xl {{card.value}}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.dataAmount"}
%span.text-2xl.relative.z-10.text-blue {{ card.dataAmount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.attack && card.type != 'enemy'"}
%span.text-2xl.relative.z-10.text-white {{ card.attack }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 50 51", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%h2.text-xl.text-center.w-full.mt-3.px-4 {{card.name}}
%h2.text-sm.text-center.w-full.mt-2.px-4.text-description {{card.description}}
%span.flex.gap-3.items-center.spin.mt-2.absolute.bottom-3{"v-if" => "card.type == 'relic' && card.affects"}
%div.flex.items-center.gap-1{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].durability + player.boosts[offensiveCards[card.affects].name + 'Durability'] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :style => 'position: relative;left: 3px;top: -1px;', :height => "12", :viewbox => "0 0 50 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].attack + player.boosts[offensiveCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'healthCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 36 36", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.relative.top-px {{ healthCards[card.affects].value + player.boosts[healthCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'defensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 44 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.relative.top-px {{ defensiveCards[card.affects].defence + player.boosts[defensiveCards[card.affects].name] }}
%button.absolute.-top-8.left-0.right-0.m-auto.text-lime.flex.gap-2.justify-center.text-xl
%svg.h-6.relative.top-px{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "16", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
{{ player.shopCards[index].cost }}
%h4.text-2xl.mb-8.text-red-600.absolute.bottom-20.deckLimit{"v-if" => "player.maxHandWarning"} Tech deck at capacity
.game_shop__exit.mt-12
%button.hack.bg-white{"@click" => "dungeonDeck[player.shopIndex].closeShop(), enJin.audioController.play('take')"} Close browser
.game_minimize.uppercase.text-white{"@click" => "game.shopMinimized = !game.shopMinimized"}
%span{"v-if" => "!game.shopMinimized"} Minimize
%span{"v-if" => "game.shopMinimized"} Maximize
.game_enumerate.flex.flex-col.h-screen.items-center.justify-center{":class" => "{'active': player.resting}"}
%h2.text-3xl.text-white.w-full.text-center.mb-1 Enumerate
%h5.text-lg.text-white.w-full.text-center.mb-12.text-description Make a choice
%div
.flex.gap-2.items-center.flex.mb-20
%img.h-5{:src => 'https://assets.codepen.io/217233/hack-integrityicon.png'}
%span.flex.items-end.text-white
%span.text-2xl {{ player.health }}
%span.text-md.text-lightgrey /{{ player.maxHealth }}
%div.flex.gap-4
%div.w-60.cursor-pointer.p-3.selection.text-center.flex.flex-col.justify-center.items-center{"@click" => "player.heal(player.restHealPercentage, true, true), enJin.audioController.play('take')", "@mouseenter" => "enJin.audioController.play('cardHover')"}
%svg.h-8.mb-2{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%h4.text-2xl.text-white.w-full.mb-1 Recover
%p.text-description Recover {{player.restHealPercentage}}% of your integrity points
%div.w-60.cursor-pointer.p-3.selection.text-center.flex.flex-col.justify-center.items-center{"@click" => "player.adjustMaxHealth(player.restMaxHealthIncrease, false, true), enJin.audioController.play('take')", "@mouseenter" => "enJin.audioController.play('cardHover')"}
%svg.h-8.mb-2{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%h4.text-2xl.text-white.w-full.mb-1 Fortify
%p.text-description Gain +{{player.restMaxHealthIncrease}} max integrity
.game_stageComplete.flex.flex-col.py-16.items-center.justify-center.bg-black.absolute.left-0.top-0.w-full.z-10{":class" => "{'active': player.stageComplete && !game.won, 'min': game.endstageMinimized}"}
.div
%h2.text-3xl.text-white.w-full.text-center.mb-1.mt-24 Stage hacked
%h3.text-lg.text-white.w-full.text-center.mb-12.text-description Choose a tech
%div.flex.items-center.gap-6.mb-24.justify-center
.flex.gap-2.items-center.flex
%img.h-5{:src => 'https://assets.codepen.io/217233/hack-integrityicon.png'}
%span.flex.items-end.text-white
%span.text-2xl {{ player.health }}
%span.text-md.text-lightgrey /{{ player.maxHealth }}
.text-red-100.flex.gap-2.items-center
%svg.h-5.relative.-top-px{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "16", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.text-lime.text-2xl {{ player.currency }}
.flex.gap-4
.slot{"v-for" => "(card, index) in player.pickedRelics", ":data-index" => "index", ":class" => "`card--${card.type}`", "@mouseenter" => "enJin.audioController.play('cardHover')"}
.card.flex.justify-center.flex-col.items-center.relative
.flex.flex-col.justify-center.items-center
%svg{"v-if" => "card.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.health"}
%span.text-2xl.relative.z-10.text-white {{ card.health }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#E82755"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.amount"}
%span.text-2xl.relative.z-10.text-blue {{ card.amount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.flex.gap-2.items-center.spin{"v-if" => "card.type == 'relic'"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M21.3519 2.6325C20.4969 -0.8775 15.5019 -0.8775 14.6469 2.6325C14.5193 3.15994 14.2689 3.64978 13.9162 4.06217C13.5635 4.47457 13.1184 4.79786 12.6171 5.00573C12.1158 5.21361 11.5726 5.3002 11.0315 5.25845C10.4904 5.21671 9.96689 5.04781 9.50344 4.7655C6.41644 2.8845 2.88394 6.417 4.76494 9.504C5.97994 11.4975 4.90219 14.0985 2.63419 14.6497C-0.878062 15.5025 -0.878062 20.4998 2.63419 21.3503C3.16176 21.4781 3.6517 21.7287 4.06409 22.0817C4.47648 22.4347 4.79967 22.8801 5.00735 23.3816C5.21503 23.8831 5.30132 24.4266 5.25919 24.9678C5.21707 25.509 5.04772 26.0326 4.76494 26.496C2.88394 29.583 6.41644 33.1155 9.50344 31.2345C9.9668 30.9517 10.4904 30.7824 11.0316 30.7402C11.5728 30.6981 12.1163 30.7844 12.6178 30.9921C13.1194 31.1998 13.5648 31.523 13.9178 31.9354C14.2708 32.3477 14.5214 32.8377 14.6492 33.3653C15.5019 36.8775 20.4992 36.8775 21.3497 33.3653C21.4779 32.838 21.7288 32.3484 22.0819 31.9362C22.4349 31.5241 22.8802 31.2011 23.3816 30.9935C23.883 30.7859 24.4263 30.6995 24.9674 30.7414C25.5084 30.7833 26.032 30.9522 26.4954 31.2345C29.5824 33.1155 33.1149 29.583 31.2339 26.496C30.9517 26.0325 30.7827 25.509 30.7408 24.9679C30.699 24.4269 30.7854 23.8836 30.993 23.3822C31.2006 22.8808 31.5236 22.4355 31.9357 22.0824C32.3478 21.7293 32.8374 21.4785 33.3647 21.3503C36.8769 20.4975 36.8769 15.5002 33.3647 14.6497C32.8371 14.5219 32.3472 14.2713 31.9348 13.9183C31.5224 13.5653 31.1992 13.1199 30.9915 12.6184C30.7838 12.1169 30.6976 11.5734 30.7397 11.0322C30.7818 10.491 30.9512 9.96736 31.2339 9.504C33.1149 6.417 29.5824 2.8845 26.4954 4.7655C26.0321 5.04828 25.5085 5.21763 24.9673 5.25976C24.4261 5.30188 23.8826 5.21559 23.381 5.00791C22.8795 4.80024 22.4341 4.47704 22.0811 4.06465C21.7281 3.65226 21.4775 3.16233 21.3497 2.63475L21.3519 2.6325ZM17.9994 24.75C19.7896 24.75 21.5065 24.0388 22.7724 22.773C24.0383 21.5071 24.7494 19.7902 24.7494 18C24.7494 16.2098 24.0383 14.4929 22.7724 13.227C21.5065 11.9612 19.7896 11.25 17.9994 11.25C16.2092 11.25 14.4923 11.9612 13.2265 13.227C11.9606 14.4929 11.2494 16.2098 11.2494 18C11.2494 19.7902 11.9606 21.5071 13.2265 22.773C14.4923 24.0388 16.2092 24.75 17.9994 24.75V24.75Z", :fill => "#FFAD33", "fill-rule" => "evenodd"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.defence"}
%span.text-2xl.relative.z-10.text-blue {{ card.defence }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.flex.gap-1.items-center.absolute.top-2.right-3{"v-if" => "card.durability"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.text-md.relative.mt-px {{ card.durability }}
%span.flex.gap-2.items-center{"v-if" => "card.value"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.text-2xl {{card.value}}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.dataAmount"}
%span.text-2xl.relative.z-10.text-blue {{ card.dataAmount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.attack && card.type != 'enemy'"}
%span.text-2xl.relative.z-10.text-white {{ card.attack }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 50 51", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%h2.text-xl.text-center.w-full.mt-3.px-4 {{card.name}}
%h2.text-sm.text-center.w-full.mt-2.px-4.text-description {{card.description}}
%span.flex.gap-3.items-center.spin.mt-2.absolute.bottom-3{"v-if" => "card.type == 'relic' && card.affects"}
%div.flex.items-center.gap-1{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].durability + player.boosts[offensiveCards[card.affects].name + 'Durability'] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :style => 'position: relative;left: 3px;top: -1px;', :height => "12", :viewbox => "0 0 50 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].attack + player.boosts[offensiveCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'healthCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 36 36", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.relative.top-px {{ healthCards[card.affects].value + player.boosts[healthCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'defensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 44 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.relative.top-px {{ defensiveCards[card.affects].defence + player.boosts[defensiveCards[card.affects].name] }}
%button.absolute.inset-0{"v-if" => "card.durability || card.defence || card.value || card.type == 'mine'", "@click" => "player.pickedRelics[index].take('relics', index)"}
%button.absolute.inset-0{"v-if" => "!card.durability && !card.defence && !card.value && !card.health && card.type != 'mine'", "@click" => "player.pickedRelics[index].interact(index, true)"}
.game_shop__exit.mt-12.m-auto.text-center
%button.hack.skip.bg-white{"@click" => "player.stageComplete = !player.stageComplete, generateDungeonDeck(16), enJin.audioController.play('take')"} Skip
.game_minimize.uppercase.text-white{"@click" => "game.endstageMinimized = !game.endstageMinimized"}
%span{"v-if" => "!game.endstageMinimized"} Minimize
%span{"v-if" => "game.endstageMinimized"} Maximize
.game_winner.flex.flex-col.justify-center.h-screen.items-center{":class" => "{'active': game.won}"}
%img.h-6.mb-4{:src => 'https://assets.codepen.io/217233/hack--pc.svg'}
%h2.text-3xl.text-white.w-full.text-center.mb-1 Target hacked
%h4.text-lg.text-white.w-full.text-center.text-description You won
%div.detected
.div.text-white.my-12.flex.flex-col.justify-center.text-center
%span
Game seed:
%span.text-green {{enJin.utils.seedString}}
%span.text-white
Difficulty:
%span.text-green {{ game.difficulty == 1 ? 'Easy' : game.difficulty == 2 ? 'Normal' : 'Hard' }}
%div.flex.flex-col
%h3.text-2xl.text-white.w-full.text-center.px-12{"@click" => "enJin.audioController.play('take'), game.restart(), game.mainMenu = true, game.gameCreation = false", "@mouseenter" => "enJin.audioController.play('cardHover')"} New game
.game_gameoverman.flex.flex-col.justify-center.h-screen.items-center{":class" => "{'active': player.health <= 0}"}
%svg.h-16.mb-2{:fill => "none", :height => "50", :viewbox => "0 0 22 22", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M9.88187 2.91315C10.3425 1.99184 11.6573 1.99184 12.1179 2.91315L19.8819 18.441C20.2974 19.2721 19.6931 20.25 18.7638 20.25H3.23597C2.30674 20.25 1.70237 19.2721 2.11794 18.441L9.88187 2.91315ZM13.4596 2.24233C12.4461 0.215447 9.55367 0.215447 8.54023 2.24233L0.776295 17.7702C-0.137944 19.5987 1.19167 21.75 3.23597 21.75H18.7638C20.8081 21.75 22.1377 19.5987 21.2235 17.7702L13.4596 2.24233ZM11.5583 14.0035L12.3246 7.48978C12.4179 6.6968 11.7984 6.00005 10.9999 6.00005C10.2015 6.00005 9.58187 6.6968 9.67516 7.48978L10.4415 14.0035C10.4748 14.2866 10.7148 14.5 10.9999 14.5C11.285 14.5 11.525 14.2866 11.5583 14.0035ZM11.9999 17C11.9999 17.5523 11.5522 18 10.9999 18C10.4476 18 9.9999 17.5523 9.9999 17C9.9999 16.4477 10.4476 16 10.9999 16C11.5522 16 11.9999 16.4477 11.9999 17Z", :fill => "#00FFC2", "fill-rule" => "evenodd"}
%h2.text-3xl.text-white.w-full.text-center.mb-1 Detected
%h4.text-lg.text-white.w-full.text-center.text-description It's game over man...game over!
%div.detected
%h5.text-2xl.text-white.w-full.text-center.mt-12.mb-1.text-green
You failed on stage {{player.level}} of {{game.totalLevels}}
.div.text-white.mb-12.flex.flex-col.justify-center.text-center
%span
Game seed:
%span.text-green {{enJin.utils.seedString}}
%span.text-white
Difficulty:
%span.text-green {{ game.difficulty == 1 ? 'Easy' : game.difficulty == 2 ? 'Normal' : 'Hard' }}
%div.flex.flex-col
%h3.text-2xl.text-white.w-full.text-center.mb-2.px-12{"@click" => "enJin.audioController.play('take'), game.restart()", "@mouseenter" => "enJin.audioController.play('cardHover')"}
Try again
%span.text-sm (Same seed)
%h3.text-2xl.text-white.w-full.text-center.px-12{"@click" => "enJin.audioController.play('take'), game.restart(), game.mainMenu = true, game.gameCreation = false", "@mouseenter" => "enJin.audioController.play('cardHover')"} Abandon
.div.flex.items-center.h-screen.relative.-top-24.constrain
.game_stage.m-auto.constrain{":class" => "{'hidden': player.health <= 0, 'active': !game.mainMenu}"}
.game_stage__center.flex.pt-24
.gsc_player.flex.item-center.gap-4
-# Player / hacker card slot
.gsc_player__character.flex.flex-col.items-center.relative.left-0
%span.damageNumber.text-white.text-2xl.absolute.top-0.left-12.flex.gap-2.items-center{"v-if" => "player.attacked && player.fleshDamage != 0"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
{{ player.fleshDamage }}
%div.flex.w-full.justify-between.mb-3.items-center
%h4.text-white Hacker
%span.text-red-100.flex.gap-2.items-center
%svg.h-4.relative.-top-px{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "16", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.text-lime {{ player.currency }}
.slot.rounded-lg.p-4.droppable.text-white.card.card--hacker.flex.items-center.justify-center.mt-1{'data-accepts' => 'healing'}
-# Health trim
%svg.absolute.left-0{:fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#00FFC2", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / player.maxHealth) * player.health)"}
.flex.gap-2.items-center.flex-col
%img{:src => 'https://assets.codepen.io/217233/hack-integrityicon.png'}
%span.flex.items-end
%span.text-2xl {{ player.health }}
%span.text-md.text-lightgrey /{{ player.maxHealth }}
.gsc_player__effect.flex.items-center.mt-8
.arrows.flex{":class" => "{'arrows--three': player.armour.defence}"}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron.svg'}
-# Firewall card slot
.gsc_player__equipment.flex.flex-col.items-center.relative.left-0
%span.damageNumber.text-white.text-2xl.absolute.top-0.left-12.flex.gap-2.items-center{"v-if" => "player.attacked && player.shieldAmount != 0"}
%svg.h-6{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", 'fill' => "#00D1FF"}
%span.relative.z-10.text-2xl {{ player.shieldAmount }}
%div.flex.w-full.justify-between.mb-3.items-center
%h4.text-white Firewall
%span.text-red-100.flex.gap-1.items-center.opacity-0
%img.h-6{:src => 'https://assets.codepen.io/217233/hack--dataicon.svg'}
.animationWrap{":class" => "{'damaged': player.attacked && player.armour.defence}"}
.slot.rounded-lg.card.card--firewall.droppable.relative.flex.items-center.justify-center{'data-accepts' => 'defensive', ":class" => "{'card--firewall--active': player.armour.defence}"}
.w-full.h-full.items-center.justify-center.relative
-# Health trim
%svg.absolute.left-0.top-0{"v-if" => "player.armour.defence", :fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#00D1FF", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / player.armour.maxDefence) * player.armour.defence)"}
%span.flex.gap-2.flex-col.items-center.h-full.justify-center
.relative.flex.items-center.justify-center.w-12.h-12.mb-2
%span.text-2xl.relative.z-10.text-blue {{ player.armour.defence ? player.armour.defence : '' }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", ':fill' => "!player.armour.defence ? '#092830' : '#00D1FF'"}
%span.line-height-small.text-lightblue.px-4.text-center{"v-if" => "!player.armour.defence"} No module loaded
%h2.text-xl.text-center.w-full.mt-1{"v-if" => "player.armour.defence"} {{ player.armour.name ? player.armour.name : '' }}
%div.eject.bg-blue.rounded-md.text-center.flex.w-8.h-8.items-center.justify-center.absolute.bottom-3.right-3{"v-if" => "player.armour.defence", "@click" => "player.armour.unequip()"}
%svg.w-2.transform.-rotate-90{:fill => "none", :height => "15", :viewbox => "0 0 10 15", :width => "10", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M9.18213 12.0001L4.24213 7.06112L9.18213 2.12212L7.06013 0.000121978L0.000128437 7.06112L7.06013 14.1221L9.18213 12.0001Z", :fill => "white"}
.gsc_player__effect.flex.items-center.mt-6.flex-col.gap-4.justify-center
.div{"v-if" => "game.showintents"}
.div.flex.gap-4{"v-if" => "dungeonDeck[player.position].type == 'enemy' && dungeonDeck[player.position].health != 0"}
.div.flex.text-green.gap-1.items-center{"v-if" => "dungeonDeck[player.position].type == 'enemy'"}
%svg{:fill => "none", :height => "16", :viewbox => "0 0 16 16", :width => "16", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M2.87356 14.3665L2.13185 15.1008L1 13.969L14.093 1.00672L15.2249 2.13857L14.3837 2.97133C14.3944 3.04603 14.4 3.12238 14.4 3.2V4.8H16V6.4H14.4V9.6H16V11.2H14.4V12.8C14.4 13.6824 13.6824 14.4 12.8 14.4H11.2V16H9.6V14.4H6.4V16H4.8V14.4H3.2C3.08816 14.4 2.97898 14.3885 2.87356 14.3665ZM12.8002 4.53901L12.8016 12.8H4.45591L6.61084 10.6666H10.2223V7.09121L12.8002 4.53901ZM3.2 3.2H9.92312L11.536 1.6H11.2V0H9.6V1.6H6.4V0H4.8V1.6H3.2C2.3176 1.6 1.6 2.3176 1.6 3.2V4.8H0V6.4H1.6V9.6H0V11.2H1.6V11.4564L3.2 9.86925V3.2Z", :fill => "#00FFC2", "fill-rule" => "evenodd"}
%span.relative.top-px {{!player.armour ? dungeonDeck[player.position].attack : dungeonDeck[player.position].attack - player.armour.defence >= 0 ? dungeonDeck[player.position].attack - player.armour.defence : 0}}
.div.flex.text-brightblue.gap-1.items-center{"v-if" => "player.armour && dungeonDeck[player.position].type == 'enemy'"}
%svg{:fill => "none", :height => "16", :viewbox => "0 0 15 16", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M12.2632 2.51806C12.65 2.64304 13.0405 2.75727 13.4342 2.86061L13.8039 2.95273V6.99636C13.8039 13.4933 7.1386 15.9418 7.06958 15.9418L6.90196 16L6.73434 15.9418C6.73384 15.9416 6.73292 15.9413 6.73161 15.9408C6.62753 15.9021 4.00481 14.9267 2.06447 12.6149L12.2632 2.51806ZM10.6051 1.90719C10.4596 1.84677 10.3147 1.78478 10.1705 1.72121C9.1325 1.27836 8.13043 0.758053 7.17311 0.164849L6.90196 0L6.63574 0.169697C5.67842 0.762901 4.67635 1.28321 3.63832 1.72606C2.58148 2.18979 1.48843 2.56919 0.369748 2.86061L0 2.95273V6.99636C0 8.69441 0.456316 10.1145 1.13139 11.2863L10.6051 1.90719Z", :fill => "#00D1FF", "fill-rule" => "evenodd"}
%path{:d => "M0.627441 13.9688L13.7205 1.00648L14.8523 2.13833L1.75929 15.1006L0.627441 13.9688Z", :fill => "#00D1FF"}
%span.relative.top-px {{dungeonDeck[player.position].attack > player.armour.defence ? player.armour.defence : dungeonDeck[player.position].attack}}
.arrows.flex.mx-6.px-1{":class" => "{'arrows--five': dungeonDeck[player.position].type == 'enemy' && dungeonDeck[player.position].health > 0}"}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron--red.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron--red.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron--red.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron--red.svg'}
%img.w-3{:src => 'https://assets.codepen.io/217233/hack--chevron--red.svg'}
.gsc_field.flex.flex-col{":class" => "{'pointer-events-none': player.shopping}"}
%div.flex.flex-col.items-start.relative.justify-start
%div.flex.w-full.justify-start.mb-3.items-start.flex-col.gap-3.absolute.-top-10
.flex.items-center.gap-3
%h4.text-white Hack progress
%img{:src => 'https://assets.codepen.io/217233/hack--arrow.svg'}
.div.flex.gap-2.mb-4
%div.bg-white.w-6.h-6.rounded-md.progress.flex.justify-center.items-center{"v-for" => "(level, index) in game.totalLevels", ":class" => "{'inactive': index >= player.level, 'complete': index < player.level - 1, 'active': index == player.level - 1}"}
%svg{"v-if" => "(index + 1) % 3 == 0 && index >= player.level - 1", :fill => "none", :height => "15", :viewbox => "0 0 15 15", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M7.2069 0.00540115C3.33817 0.137359 0.181707 3.03349 0.00926368 6.62414C-0.0548404 7.81407 0.214594 8.99911 0.791362 10.064C1.36813 11.1289 2.2326 12.0374 3.30068 12.7012V13.8888C3.30068 14.1835 3.42707 14.4661 3.65204 14.6745C3.87701 14.8829 4.18213 15 4.50029 15H5.10009C5.17963 15 5.25591 14.9707 5.31215 14.9186C5.3684 14.8665 5.39999 14.7959 5.39999 14.7222V13.0762C5.39753 12.932 5.4542 12.7923 5.55856 12.6854C5.66292 12.5784 5.80721 12.512 5.96231 12.4997C6.04417 12.495 6.12622 12.5058 6.20337 12.5316C6.28053 12.5574 6.35115 12.5976 6.41088 12.6497C6.47061 12.7017 6.51818 12.7646 6.55064 12.8344C6.58309 12.9042 6.59976 12.9794 6.5996 13.0554V14.7222C6.5996 14.7959 6.6312 14.8665 6.68744 14.9186C6.74368 14.9707 6.81996 15 6.8995 15H8.09911C8.17865 15 8.25493 14.9707 8.31117 14.9186C8.36741 14.8665 8.39901 14.7959 8.39901 14.7222V13.0762C8.39654 12.932 8.45321 12.7923 8.55757 12.6854C8.66194 12.5784 8.80623 12.512 8.96132 12.4997C9.04319 12.495 9.12523 12.5058 9.20239 12.5316C9.27954 12.5574 9.35017 12.5976 9.4099 12.6497C9.46962 12.7017 9.51719 12.7646 9.54965 12.8344C9.58211 12.9042 9.59877 12.9794 9.59861 13.0554V14.7222C9.59861 14.7959 9.63021 14.8665 9.68645 14.9186C9.7427 14.9707 9.81898 15 9.89852 15H10.4983C10.8165 15 11.1216 14.8829 11.3466 14.6745C11.5715 14.4661 11.6979 14.1835 11.6979 13.8888V12.7012C13.0494 11.8559 14.0665 10.6255 14.5951 9.19656C15.1237 7.7676 15.135 6.21795 14.6272 4.78252C14.1195 3.34708 13.1203 2.10413 11.7813 1.24207C10.4422 0.380015 8.8363 -0.0541463 7.2069 0.00540115V0.00540115ZM4.80019 9.44387C4.50362 9.44387 4.2137 9.36241 3.96711 9.20978C3.72052 9.05715 3.52832 8.84021 3.41483 8.5864C3.30133 8.33259 3.27164 8.0533 3.32949 7.78385C3.38735 7.51441 3.53017 7.26691 3.73988 7.07265C3.94959 6.87839 4.21677 6.74609 4.50765 6.6925C4.79853 6.6389 5.10003 6.66641 5.37403 6.77154C5.64803 6.87668 5.88222 7.05471 6.04699 7.28314C6.21175 7.51156 6.2997 7.78012 6.2997 8.05484C6.29773 8.42267 6.13911 8.77492 5.85832 9.03502C5.57754 9.29512 5.19728 9.44205 4.80019 9.44387ZM10.1984 9.44387C9.90184 9.44387 9.61193 9.36241 9.36534 9.20978C9.11874 9.05715 8.92655 8.84021 8.81305 8.5864C8.69956 8.33259 8.66986 8.0533 8.72772 7.78385C8.78558 7.51441 8.9284 7.26691 9.13811 7.07265C9.34781 6.87839 9.615 6.74609 9.90588 6.6925C10.1968 6.6389 10.4983 6.66641 10.7723 6.77154C11.0463 6.87668 11.2804 7.05471 11.4452 7.28314C11.61 7.51156 11.6979 7.78012 11.6979 8.05484C11.696 8.42267 11.5373 8.77492 11.2566 9.03502C10.9758 9.29512 10.5955 9.44205 10.1984 9.44387V9.44387Z", :fill => "#00FFC2"}
%svg{"v-if" => "index < player.level - 1", :fill => "none", :height => "7", :viewbox => "0 0 9 7", :width => "9", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M1 3.5L3.625 6L8 1", :fill => "#00FFC2", "fill-opacity" => "0.13"}
%path{:d => "M1 3.5L3.625 6L8 1", :stroke => "#00FFC2", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
%div.flex.gap-4.mt-8
.slot.rounded-lg.flex.items-center.relative.mt-1{"v-for" => "(card, index) in dungeonDeck", ":class" => "{'inactive': !dungeonDeck[index].drop?.active && !card.active, 'shake' : card.health && player.attacking && card.revealed}"}
%span.damageNumber.text-white.text-2xl.absolute.-top-8.left-12.flex.gap-2.items-center.z-10{"v-if" => "card.revealed && card.health && player.attacking && player.attackAmount != 0"}
%svg.h-6{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", 'fill' => "#E82755"}
%span.relative.z-10.text-2xl {{ player.attackAmount }}
.card.back.absolute{":class" => "{'inactive': card.revealed}"}
.cardholder.relative.right-0{":class" => "{'cardholder--inactive': !card.revealed, 'right-10': player.attacked}"}
.card.relative.droppable.flex.items-center.justify-center{":class" => "`card--${card.type}`", "v-if" => "card.active", ':data-accepts' => 'card.type', ':data-id' => 'index', "@mouseenter" => "enJin.audioController.play('cardHover')"}
.cardDragWrapper
-# Health trim
%svg.absolute.left-0.top-0{"v-if" => "card.health", :fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#E82755", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / card.baseHealth) * card.health)"}
.flex.gap-4.justify-center.items-center
%svg{"v-if" => "card.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.health"}
%span.text-2xl.relative.z-10.text-white {{ card.health }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#E82755"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.amount"}
%span.text-2xl.relative.z-10.text-blue {{ card.amount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%span.flex.gap-2.items-center.spin{"v-if" => "card.type == 'relic'"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M21.3519 2.6325C20.4969 -0.8775 15.5019 -0.8775 14.6469 2.6325C14.5193 3.15994 14.2689 3.64978 13.9162 4.06217C13.5635 4.47457 13.1184 4.79786 12.6171 5.00573C12.1158 5.21361 11.5726 5.3002 11.0315 5.25845C10.4904 5.21671 9.96689 5.04781 9.50344 4.7655C6.41644 2.8845 2.88394 6.417 4.76494 9.504C5.97994 11.4975 4.90219 14.0985 2.63419 14.6497C-0.878062 15.5025 -0.878062 20.4998 2.63419 21.3503C3.16176 21.4781 3.6517 21.7287 4.06409 22.0817C4.47648 22.4347 4.79967 22.8801 5.00735 23.3816C5.21503 23.8831 5.30132 24.4266 5.25919 24.9678C5.21707 25.509 5.04772 26.0326 4.76494 26.496C2.88394 29.583 6.41644 33.1155 9.50344 31.2345C9.9668 30.9517 10.4904 30.7824 11.0316 30.7402C11.5728 30.6981 12.1163 30.7844 12.6178 30.9921C13.1194 31.1998 13.5648 31.523 13.9178 31.9354C14.2708 32.3477 14.5214 32.8377 14.6492 33.3653C15.5019 36.8775 20.4992 36.8775 21.3497 33.3653C21.4779 32.838 21.7288 32.3484 22.0819 31.9362C22.4349 31.5241 22.8802 31.2011 23.3816 30.9935C23.883 30.7859 24.4263 30.6995 24.9674 30.7414C25.5084 30.7833 26.032 30.9522 26.4954 31.2345C29.5824 33.1155 33.1149 29.583 31.2339 26.496C30.9517 26.0325 30.7827 25.509 30.7408 24.9679C30.699 24.4269 30.7854 23.8836 30.993 23.3822C31.2006 22.8808 31.5236 22.4355 31.9357 22.0824C32.3478 21.7293 32.8374 21.4785 33.3647 21.3503C36.8769 20.4975 36.8769 15.5002 33.3647 14.6497C32.8371 14.5219 32.3472 14.2713 31.9348 13.9183C31.5224 13.5653 31.1992 13.1199 30.9915 12.6184C30.7838 12.1169 30.6976 11.5734 30.7397 11.0322C30.7818 10.491 30.9512 9.96736 31.2339 9.504C33.1149 6.417 29.5824 2.8845 26.4954 4.7655C26.0321 5.04828 25.5085 5.21763 24.9673 5.25976C24.4261 5.30188 23.8826 5.21559 23.381 5.00791C22.8795 4.80024 22.4341 4.47704 22.0811 4.06465C21.7281 3.65226 21.4775 3.16233 21.3497 2.63475L21.3519 2.6325ZM17.9994 24.75C19.7896 24.75 21.5065 24.0388 22.7724 22.773C24.0383 21.5071 24.7494 19.7902 24.7494 18C24.7494 16.2098 24.0383 14.4929 22.7724 13.227C21.5065 11.9612 19.7896 11.25 17.9994 11.25C16.2092 11.25 14.4923 11.9612 13.2265 13.227C11.9606 14.4929 11.2494 16.2098 11.2494 18C11.2494 19.7902 11.9606 21.5071 13.2265 22.773C14.4923 24.0388 16.2092 24.75 17.9994 24.75V24.75Z", :fill => "#FFAD33", "fill-rule" => "evenodd"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.defence"}
%span.text-2xl.relative.z-10.text-blue {{ card.defence }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.flex.gap-1.items-center.absolute.top-2.right-3{"v-if" => "card.durability"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.text-md.relative.mt-px {{ card.durability }}
%span.flex.gap-2.items-center{"v-if" => "card.value"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.text-2xl {{card.value}}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.dataAmount"}
%span.text-2xl.relative.z-10.text-blue {{ card.dataAmount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.attack && card.type != 'enemy'"}
%span.text-2xl.relative.z-10.text-white {{ card.attack }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 50 51", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%h2.text-xl.text-center.w-full.mt-3.px-4 {{card.name}}
%h2.text-sm.text-center.w-full.mt-2.px-4.text-description {{card.description}}
%span.flex.gap-3.items-center.spin.mt-2.absolute.bottom-3.w-fit{:style => 'left: 18px;', "v-if" => "card.type == 'relic' && card.affects"}
%div.flex.items-center.gap-1{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].durability + player.boosts[offensiveCards[card.affects].name + 'Durability'] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :style => 'position: relative;left: 3px;top: -1px;', :height => "12", :viewbox => "0 0 50 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].attack + player.boosts[offensiveCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'healthCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 36 36", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.relative.top-px {{ healthCards[card.affects].value + player.boosts[healthCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'defensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 44 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.relative.top-px {{ defensiveCards[card.affects].defence + player.boosts[defensiveCards[card.affects].name] }}
%button.absolute.inset-0{"v-if" => "card.durability || card.defence || card.value || card.type == 'mine'", "@click" => "dungeonDeck[index].take('field', index)"}
%button.absolute.inset-0{"v-if" => "card.type == 'enemy'", "@click" => "dungeonDeck[index].interact(player.hand[0].attack)"}
%div.eject.bg-blue.rounded-md.text-center.flex.w-8.h-8.items-center.justify-center.absolute.bottom-3.right-3{"v-if" => "card.durability || card.defence || card.value || card.type == 'relic' || card.type == 'mine'", "@click" => "dungeonDeck[index].leave('field', index)"}
%svg{:fill => "none", :height => "9", :viewbox => "0 0 9 9", :width => "9", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M3.11401 4.38879L0 1.35236L1.3866 0L4.5 3.03687L7.6134 0L9 1.35236L5.88599 4.38879L6 4.5L5.88599 4.61121L9 7.64764L7.6134 9L4.5 5.96313L1.3866 9L0 7.64764L3.11401 4.61121L3 4.5L3.11401 4.38879Z", :fill => "white", "fill-rule" => "evenodd"}
%button.absolute.inset-0{"v-if" => "!card.durability && !card.defence && !card.value && !card.health && card.type != 'mine'", "@click" => "dungeonDeck[index].interact(index)"}
.card.relative.droppable.flex.flex-col.items-center.justify-center{":class" => "`card--${card.drop.type}`", ":data-index" => "index", "v-if" => "dungeonDeck[index].drop?.active && !card.active", ':data-accepts' => 'card.type', "@mouseenter" => "enJin.audioController.play('cardHover')"}
.flex.gap-4.justify-center.items-center
%svg{"v-if" => "card.drop.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.drop.amount"}
%span.text-2xl.relative.z-10.text-blue {{ card.drop.amount }}
%svg.absolute{:fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%svg{"v-if" => "card.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.drop.defence"}
%span.text-2xl.relative.z-10.text-blue {{ card.drop.defence }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.flex.gap-2.items-center.spin{"v-if" => "card.drop.type == 'relic'"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M21.3519 2.6325C20.4969 -0.8775 15.5019 -0.8775 14.6469 2.6325C14.5193 3.15994 14.2689 3.64978 13.9162 4.06217C13.5635 4.47457 13.1184 4.79786 12.6171 5.00573C12.1158 5.21361 11.5726 5.3002 11.0315 5.25845C10.4904 5.21671 9.96689 5.04781 9.50344 4.7655C6.41644 2.8845 2.88394 6.417 4.76494 9.504C5.97994 11.4975 4.90219 14.0985 2.63419 14.6497C-0.878062 15.5025 -0.878062 20.4998 2.63419 21.3503C3.16176 21.4781 3.6517 21.7287 4.06409 22.0817C4.47648 22.4347 4.79967 22.8801 5.00735 23.3816C5.21503 23.8831 5.30132 24.4266 5.25919 24.9678C5.21707 25.509 5.04772 26.0326 4.76494 26.496C2.88394 29.583 6.41644 33.1155 9.50344 31.2345C9.9668 30.9517 10.4904 30.7824 11.0316 30.7402C11.5728 30.6981 12.1163 30.7844 12.6178 30.9921C13.1194 31.1998 13.5648 31.523 13.9178 31.9354C14.2708 32.3477 14.5214 32.8377 14.6492 33.3653C15.5019 36.8775 20.4992 36.8775 21.3497 33.3653C21.4779 32.838 21.7288 32.3484 22.0819 31.9362C22.4349 31.5241 22.8802 31.2011 23.3816 30.9935C23.883 30.7859 24.4263 30.6995 24.9674 30.7414C25.5084 30.7833 26.032 30.9522 26.4954 31.2345C29.5824 33.1155 33.1149 29.583 31.2339 26.496C30.9517 26.0325 30.7827 25.509 30.7408 24.9679C30.699 24.4269 30.7854 23.8836 30.993 23.3822C31.2006 22.8808 31.5236 22.4355 31.9357 22.0824C32.3478 21.7293 32.8374 21.4785 33.3647 21.3503C36.8769 20.4975 36.8769 15.5002 33.3647 14.6497C32.8371 14.5219 32.3472 14.2713 31.9348 13.9183C31.5224 13.5653 31.1992 13.1199 30.9915 12.6184C30.7838 12.1169 30.6976 11.5734 30.7397 11.0322C30.7818 10.491 30.9512 9.96736 31.2339 9.504C33.1149 6.417 29.5824 2.8845 26.4954 4.7655C26.0321 5.04828 25.5085 5.21763 24.9673 5.25976C24.4261 5.30188 23.8826 5.21559 23.381 5.00791C22.8795 4.80024 22.4341 4.47704 22.0811 4.06465C21.7281 3.65226 21.4775 3.16233 21.3497 2.63475L21.3519 2.6325ZM17.9994 24.75C19.7896 24.75 21.5065 24.0388 22.7724 22.773C24.0383 21.5071 24.7494 19.7902 24.7494 18C24.7494 16.2098 24.0383 14.4929 22.7724 13.227C21.5065 11.9612 19.7896 11.25 17.9994 11.25C16.2092 11.25 14.4923 11.9612 13.2265 13.227C11.9606 14.4929 11.2494 16.2098 11.2494 18C11.2494 19.7902 11.9606 21.5071 13.2265 22.773C14.4923 24.0388 16.2092 24.75 17.9994 24.75V24.75Z", :fill => "#FFAD33", "fill-rule" => "evenodd"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.drop.attack"}
%span.text-2xl.relative.z-10.text-white {{ card.drop.attack }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 50 51", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.flex.gap-1.items-center.absolute.top-2.right-3{"v-if" => "card.drop.durability"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.text-md.relative.mt-px {{ card.drop.durability }}
%span.flex.gap-2.items-center{"v-if" => "card.drop.value"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.text-2xl {{card.drop.value}}
%h2.text-xl.text-center.w-full.mt-3.px-4 {{card.drop.name}}
%h2.text-sm.text-center.w-full.mt-2.px-4.text-description {{card.drop.description}}
%span.flex.gap-3.items-center.spin.mt-2.absolute.bottom-3.w-fit{:style => 'left: 18px;',"v-if" => "card.drop.type == 'relic' && card.drop.affects"}
%div.flex.items-center.gap-1{"v-if" => "card.drop.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.drop.affects].durability + player.boosts[offensiveCards[card.drop.affects].name + 'Durability'] }}
%div.flex.items-center.gap-2{"v-if" => "card.drop.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :style => 'position: relative;left: 3px;top: -1px;', :height => "12", :viewbox => "0 0 50 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.drop.affects].attack + player.boosts[offensiveCards[card.drop.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.drop.affectGroup == 'healthCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 36 36", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.relative.top-px {{ healthCards[card.drop.affects].value + player.boosts[healthCards[card.drop.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.drop.affectGroup == 'defensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 44 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.relative.top-px {{ defensiveCards[card.drop.affects].defence + player.boosts[defensiveCards[card.drop.affects].name] }}
%button.absolute.inset-0{"v-if" => "card.drop.amount || card.drop.type == 'relic' || card.drop.type == 'mine'", "@click" => "dungeonDeck[index].drop.interact(index)"}
%button.absolute.inset-0{"v-if" => "card.drop.type == 'offensive' || card.drop.type == 'defensive' || card.drop.type == 'mine' || card.drop.type == 'healing'", "@click" => "dungeonDeck[index].drop.take('drop', index)"}
%button.eject.bg-blue.rounded-md.text-center.flex.w-8.h-8.items-center.justify-center.absolute.bottom-3.right-3{"v-if" => "card.drop.type == 'mine' || card.drop.type == 'relic' || card.drop.type == 'offensive' || card.drop.type == 'defensive' || card.drop.type == 'healing'", "@click" => "dungeonDeck[index].drop.leave('drop', index)"}
%svg{:fill => "none", :height => "9", :viewbox => "0 0 9 9", :width => "9", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M3.11401 4.38879L0 1.35236L1.3866 0L4.5 3.03687L7.6134 0L9 1.35236L5.88599 4.38879L6 4.5L5.88599 4.61121L9 7.64764L7.6134 9L4.5 5.96313L1.3866 9L0 7.64764L3.11401 4.61121L3 4.5L3.11401 4.38879Z", :fill => "white", "fill-rule" => "evenodd"}
.game_stage__bottom.pt-24.relative
%h4.text-2xl.mb-8.text-red-600.absolute.top-12.deckLimit{"v-if" => "player.maxHandWarning"} Tech deck at capacity
.flex.justify-between.w-full.gap-8
%div.w-full
.gsc_hand.flex.flex-col
%div.flex.items-center.gap-3.mb-6
%h4.text-md.text-white.w-20
Tech Deck
%div.h-px.w-full.bg-grey
%div.text-white.flex.w-12.items-end.justify-end
%span.text-2xl {{ player.hand.length }}
%span.text-lightgrey.text-md /{{ player.maxInventory }}
%div.flex.gap-4
.card.draggable.flex.items-center.flex-col.justify-center{":class" => "`card--${card.type}`", "v-for" => "(card, index) in player.hand", ":data-index" => "index", "@mouseenter" => "enJin.audioController.play('cardHover')"}
.trimWrap.relative
-# Health trim
%svg.absolute.left-0.top-0{"v-if" => "card.type == 'mine'", :fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#E5FF44", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / 1) * 1)"}
%svg.absolute.left-0.top-0{"v-if" => "card.defence", :fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#00D1FF", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / card.maxDefence) * card.defence)"}
%svg.absolute.left-0.top-0{"v-if" => "card.attack", :fill => "none", :height => "215", :viewbox => "0 0 135 215", :width => "135", :xmlns => "http://www.w3.org/2000/svg"}
%rect.transition-all.duration-300{:height => "213", :rx => "11", 'stroke-linecap' => "round", :stroke => "#8256FF", "stroke-width" => "2", :width => "133", :x => "1", :y => "1", ':stroke-dasharray' => "673", ':stroke-dashoffset' => "673 - ((673 / card.maxDurability) * card.durability)"}
.flex.gap-4.justify-center.items-center
%svg{"v-if" => "card.type == 'mine'", :fill => "none", :height => "52", :viewbox => "0 0 52 52", :width => "52", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M22.2416 1.48711C23.194 0.534917 24.4857 0 25.8324 0C27.1792 0 28.4709 0.534917 29.4233 1.48711L50.1778 22.2416C51.13 23.194 51.6649 24.4857 51.6649 25.8324C51.6649 27.1792 51.13 28.4709 50.1778 29.4233L29.4233 50.1778C28.4709 51.13 27.1792 51.6649 25.8324 51.6649C24.4857 51.6649 23.194 51.13 22.2416 50.1778L1.48711 29.4233C0.534917 28.4709 0 27.1792 0 25.8324C0 24.4857 0.534917 23.194 1.48711 22.2416L22.2416 1.48711V1.48711Z", :fill => "#E5FF44"}
%path{:d => "M25.9998 34.6666V17.3333M18.4165 27.0833L25.9998 34.6666L33.5832 27.0833", :stroke => "#061B20", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.defence"}
%span.text-2xl.relative.z-10.text-blue {{ card.defence }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 44 51", :width => "44", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
.relative.flex.items-center.justify-center.w-12.h-12.mb-2{"v-if" => "card.attack"}
%span.text-2xl.relative.z-10.text-white {{ card.attack }}
%svg.absolute{:fill => "none", :height => "51", :viewbox => "0 0 50 51", :width => "50", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.flex.gap-1.items-center.absolute.top-2.right-3{"v-if" => "card.durability"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.text-md.relative.mt-px {{ card.durability < 500 ? card.durability : '∞'}}
%span.flex.gap-2.items-center{"v-if" => "card.value"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "20", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.text-2xl {{card.value}}
%h2.text-xl.text-center.w-full.mt-3.px-4 {{card.name}}
%h2.text-sm.text-center.w-full.mt-2.px-4.text-description {{card.description}}
%span.flex.gap-3.items-center.spin.mt-2.absolute.bottom-3{"v-if" => "card.type == 'relic' && card.affects"}
%div.flex.items-center.gap-1{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 12 12", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M11.9839 1.25836C11.9835 1.20862 11.9697 1.15992 11.9439 1.11758C11.9181 1.07523 11.8813 1.04087 11.8375 1.01823C11.7937 0.995596 11.7446 0.985556 11.6955 0.989209C11.6465 0.992861 11.5994 1.01007 11.5593 1.03895L10.5048 1.80358L10.4218 1.86386C9.28549 0.717269 7.72591 0 5.9976 0C3.64093 0 1.58407 1.31936 0.508449 3.26539L0.512707 3.26772C0.465073 3.37092 0.457375 3.48841 0.49113 3.59706C0.524885 3.70571 0.597646 3.79764 0.695082 3.85474L2.13847 4.69741C2.18985 4.72746 2.24659 4.74698 2.30544 4.75484C2.36429 4.7627 2.42409 4.75875 2.48143 4.74322C2.53876 4.72769 2.59251 4.70088 2.6396 4.66433C2.68669 4.62778 2.72619 4.58221 2.75584 4.53021C2.75691 4.52823 2.75744 4.52608 2.7585 4.52411C3.39557 3.37518 4.61028 2.59602 6.0031 2.59602C6.86867 2.59602 7.66222 2.90029 8.29414 3.40335L8.11656 3.53235L7.06134 4.29698C7.02148 4.32609 6.99031 4.36573 6.97123 4.41156C6.95216 4.45739 6.94591 4.50764 6.95318 4.55682C6.96046 4.606 6.98096 4.65221 7.01246 4.69039C7.04396 4.72857 7.08523 4.75725 7.13177 4.7733L11.6462 6.32858C11.6866 6.34239 11.7296 6.34627 11.7717 6.3399C11.8139 6.33353 11.8539 6.3171 11.8884 6.29196C11.923 6.26683 11.9512 6.23371 11.9706 6.19537C11.99 6.15703 12.0001 6.11456 12 6.07149L11.9839 1.25836V1.25836ZM11.3053 8.14544L11.3049 8.14526L9.86153 7.30258C9.81015 7.27253 9.75341 7.25302 9.69456 7.24516C9.63571 7.2373 9.57591 7.24125 9.51857 7.25678C9.46123 7.27231 9.40749 7.29912 9.3604 7.33567C9.31331 7.37222 9.27381 7.41779 9.24416 7.46979C9.24309 7.47177 9.24256 7.47392 9.2415 7.47589C8.60443 8.62482 7.38972 9.40398 5.99689 9.40398C5.13133 9.40398 4.33778 9.09971 3.70586 8.59665L3.88344 8.46765L4.93866 7.70302C4.97852 7.67391 5.00969 7.63427 5.02877 7.58844C5.04784 7.54261 5.05409 7.49236 5.04682 7.44318C5.03954 7.394 5.01904 7.3478 4.98754 7.30961C4.95604 7.27143 4.91477 7.24275 4.86823 7.2267L0.35375 5.67142C0.313408 5.65761 0.270392 5.65373 0.22827 5.6601C0.186149 5.66647 0.146136 5.6829 0.111551 5.70804C0.0769659 5.73317 0.0488054 5.76629 0.0294054 5.80463C0.0100054 5.84297 -7.49101e-05 5.88544 4.19108e-07 5.92851L0.0163217 10.7416C0.0166362 10.7914 0.0304509 10.8401 0.0562594 10.8824C0.0820678 10.9248 0.118879 10.9591 0.162677 10.9818C0.206476 11.0044 0.25558 11.0144 0.304635 11.0108C0.353689 11.0071 0.400809 10.9899 0.440857 10.9611L1.49537 10.1964L1.57839 10.1361C2.71468 11.2827 4.27427 12 6.00257 12C8.35925 12 10.4161 10.6806 11.4917 8.73461L11.4873 8.73246C11.535 8.62931 11.5427 8.51184 11.509 8.4032C11.4753 8.29456 11.4026 8.2026 11.3053 8.14544V8.14544Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].durability + player.boosts[offensiveCards[card.affects].name + 'Durability'] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'offensiveCards'"}
%svg{:fill => "none", :style => 'position: relative;left: 3px;top: -1px;', :height => "12", :viewbox => "0 0 50 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M25 -1.09278e-06L2.77826e-06 23.7109L9 23.7109L9 51L41 51L41 23.7109L50 23.7109L25 -1.09278e-06Z", :fill => "#8256FF"}
%span.relative.top-px {{ offensiveCards[card.affects].attack + player.boosts[offensiveCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'healthCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 36 36", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M13 12H23V24H13V12Z", :fill => "#00FFC2"}
%path{:d => "M32.4 7.2C32.4 5.2146 30.7854 3.6 28.8 3.6H25.2V0H21.6V3.6H14.4V0H10.8V3.6H7.2C5.2146 3.6 3.6 5.2146 3.6 7.2V10.8H0V14.4H3.6V21.6H0V25.2H3.6V28.8C3.6 30.7854 5.2146 32.4 7.2 32.4H10.8V36H14.4V32.4H21.6V36H25.2V32.4H28.8C30.7854 32.4 32.4 30.7854 32.4 28.8V25.2H36V21.6H32.4V14.4H36V10.8H32.4V7.2ZM7.2 28.8V7.2H28.8L28.8036 28.8H7.2Z", :fill => "#00FFC2"}
%span.relative.top-px {{ healthCards[card.affects].value + player.boosts[healthCards[card.affects].name] }}
%div.flex.items-center.gap-2{"v-if" => "card.affectGroup == 'defensiveCards'"}
%svg{:fill => "none", :height => "12", :viewbox => "0 0 44 51", :width => "12", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M42.8214 9.11818C39.2605 8.18351 35.7817 6.969 32.4186 5.48636C29.1098 4.07477 25.9157 2.41629 22.8643 0.525455L22 0L21.1514 0.540909C18.1 2.43175 14.9059 4.09022 11.5971 5.50182C8.22846 6.97996 4.74437 8.18931 1.17857 9.11818L0 9.41182V22.3009C0 42.9945 21.2614 50.7373 21.4657 50.8145L22 51L22.5343 50.8145C22.7543 50.8145 44 43.01 44 22.3009V9.41182L42.8214 9.11818Z", :fill => "#00D1FF"}
%span.relative.top-px {{ defensiveCards[card.affects].defence + player.boosts[defensiveCards[card.affects].name] }}
.gsc_trash
%h4.text-md.mb-8.text-white.mt-2 Format
.card.card--format.slot.droppable{"data-accepts" => "any"}
.game_stage__relics.text-center{":class" => "{'min': !game.upgradesMinimized, 'active': !game.mainMenu}"}
.relics_minimize.uppercase.text-white{"@click" => "game.upgradesMinimized = !game.upgradesMinimized"}
%span Upgrades
%span.relicCount {{ player.collectedRelics.length }}
%h4.text-2xl.mb-8.text-white
Upgrades
%h3.text-white.text-md{"v-if" => "player.listedRelics.length == 0"} No collected upgrades yet
%div.gap-8.grid.grid-cols-8
.relic.flex.gap-2.items-start{"v-for" => "(card, index) in player.listedRelics", ":data-index" => "index"}
%svg.h-6{:fill => "none", :height => "36", :viewbox => "0 0 36 36", :width => "36", :xmlns => "http://www.w3.org/2000/svg"}
%path{"clip-rule" => "evenodd", :d => "M21.3519 2.6325C20.4969 -0.8775 15.5019 -0.8775 14.6469 2.6325C14.5193 3.15994 14.2689 3.64978 13.9162 4.06217C13.5635 4.47457 13.1184 4.79786 12.6171 5.00573C12.1158 5.21361 11.5726 5.3002 11.0315 5.25845C10.4904 5.21671 9.96689 5.04781 9.50344 4.7655C6.41644 2.8845 2.88394 6.417 4.76494 9.504C5.97994 11.4975 4.90219 14.0985 2.63419 14.6497C-0.878062 15.5025 -0.878062 20.4998 2.63419 21.3503C3.16176 21.4781 3.6517 21.7287 4.06409 22.0817C4.47648 22.4347 4.79967 22.8801 5.00735 23.3816C5.21503 23.8831 5.30132 24.4266 5.25919 24.9678C5.21707 25.509 5.04772 26.0326 4.76494 26.496C2.88394 29.583 6.41644 33.1155 9.50344 31.2345C9.9668 30.9517 10.4904 30.7824 11.0316 30.7402C11.5728 30.6981 12.1163 30.7844 12.6178 30.9921C13.1194 31.1998 13.5648 31.523 13.9178 31.9354C14.2708 32.3477 14.5214 32.8377 14.6492 33.3653C15.5019 36.8775 20.4992 36.8775 21.3497 33.3653C21.4779 32.838 21.7288 32.3484 22.0819 31.9362C22.4349 31.5241 22.8802 31.2011 23.3816 30.9935C23.883 30.7859 24.4263 30.6995 24.9674 30.7414C25.5084 30.7833 26.032 30.9522 26.4954 31.2345C29.5824 33.1155 33.1149 29.583 31.2339 26.496C30.9517 26.0325 30.7827 25.509 30.7408 24.9679C30.699 24.4269 30.7854 23.8836 30.993 23.3822C31.2006 22.8808 31.5236 22.4355 31.9357 22.0824C32.3478 21.7293 32.8374 21.4785 33.3647 21.3503C36.8769 20.4975 36.8769 15.5002 33.3647 14.6497C32.8371 14.5219 32.3472 14.2713 31.9348 13.9183C31.5224 13.5653 31.1992 13.1199 30.9915 12.6184C30.7838 12.1169 30.6976 11.5734 30.7397 11.0322C30.7818 10.491 30.9512 9.96736 31.2339 9.504C33.1149 6.417 29.5824 2.8845 26.4954 4.7655C26.0321 5.04828 25.5085 5.21763 24.9673 5.25976C24.4261 5.30188 23.8826 5.21559 23.381 5.00791C22.8795 4.80024 22.4341 4.47704 22.0811 4.06465C21.7281 3.65226 21.4775 3.16233 21.3497 2.63475L21.3519 2.6325ZM17.9994 24.75C19.7896 24.75 21.5065 24.0388 22.7724 22.773C24.0383 21.5071 24.7494 19.7902 24.7494 18C24.7494 16.2098 24.0383 14.4929 22.7724 13.227C21.5065 11.9612 19.7896 11.25 17.9994 11.25C16.2092 11.25 14.4923 11.9612 13.2265 13.227C11.9606 14.4929 11.2494 16.2098 11.2494 18C11.2494 19.7902 11.9606 21.5071 13.2265 22.773C14.4923 24.0388 16.2092 24.75 17.9994 24.75V24.75Z", :fill => "#FFAD33", "fill-rule" => "evenodd"}
%div.text-left.relative
%h2.text-white.text-lg.mb-1 {{ card.name }}
%h2.text-description {{ card.description }}
%span.count{"v-if" => "card.count > 1"} x{{card.count}}
Raw
script.js
// To do
// change data mining to be easier to understand
// tutorial
// Initialise EnJin
const enJin = new EnJin();
// Audio and game data here https://codepen.io/jcoulterdesign/pen/zYRVpdw/4285e883d66c684da9d3bf3ed140cef7
// Add enJin modules
enJin.add('audio');
enJin.add('utilities');
// Set a default game seed
enJin.utils.setSeed('codepen.serv');
// Load the audio array into the audio controller module
enJin.audioController.load(_masterAudio);
document.addEventListener("click", function() {
// Any processed audio needs to be initialised on user interaction
enJin.audioController.postProcess('bgmusic');
enJin.audioController.playPostProcessed('bgmusic')
enJin.audioController.setFilterType('lowpass');
});
// --------------------------------------------------------------------------------
// Base player class
// --------------------------------------------------------------------------------
class Player {
constructor(health, currency, hand) {
this.maxHealth = health; // Max health player can have
this.health = this.maxHealth; // Current player health init at max health (can change this depending on difficulty)
this.currency = currency; // The players starting currency, used to purchase new cards
this.hand = hand; // Initial players hand
this.maxInventory = 6; // Maximum cards a player can hold at anyone time (initially)
this.shopCardTotal = 5;
this.shopDiscount = 0;
this.collectedRelics = [];
this.listedRelics = [];
this.pickedRelics = []
this.boosts = {
'Brute force' : 0,
'Data' : 0,
'StageHeal' : 0
};
offensiveCards.forEach(function(c) {
this.boosts[c.name] = 0;
this.boosts[c.name + 'Durability'] = 0;
}.bind(this))
defensiveCards.forEach(function(c) {
this.boosts[c.name] = 0;
}.bind(this))
healthCards.forEach(function(c) {
this.boosts[c.name] = 0;
}.bind(this))
this.armour = ''; // The players defensive item
this.position = 0; // Current position within the current level
this.level = 1; // Starting level of the player
this.stageComplete = false;
// Rest stuff
this.restHealPercentage = 25; // How much percentage you heal when you rest
this.restMaxHealthIncrease = 5; // How much your max health increases when you choose not to rest
// Other stuff
this.relicsAtEndOfStage = 3; // How many random relics do we pick after ending a stage
// Flags
this.alive = true;
this.attacking = false;
this.attacked = false;
this.shopping = false;
this.maxHandWarning = false;
this.resting = false;
this.shopRelicFlag = false;
}
// Move function.
// Compliments each stage cards 'deactivate' function by increasing the position count, revealing the next card and checking if the stage has ended
move() {
game.showintents = true;
this.position++; // Increase the players known position
// Check to see if the next card in the dungeon deck object exists
if(!dungeonDeck[this.position]) {
// If there are no more cards in this stage...
this.level++; // Increase the current level
this.position = 0; // Rest the position back to the start
pickRelics(this.relicsAtEndOfStage); // Pick 3 random relics
// Set stage as complete
player.stageComplete = !player.stageComplete;
enJin.audioController.play('stageComplete');
player.heal(player.boosts['StageHeal'])
game.completeAchievement('Its a UNIX system!');
if(player.collectedRelics.length == 0) {
game.completeAchievement('What upgrades?');
}
if(player.health == 1) {
game.completeAchievement('Skin of your teeth');
}
if(player.health == player.maxHealth) {
game.completeAchievement('Digital don');
}
if(player.level == game.totalLevels + 1) {
// Winner winner
game.won = true;
enJin.audioController.play('intro')
if(game.difficulty == 1) {
game.completeAchievement("We're in");
}
if(game.difficulty == 2) {
game.completeAchievement('I am invincible');
}
if(game.difficulty == 3) {
game.completeAchievement('There is no spoon');
if(enjin.utils.seedString == "SKYNET") {
game.completeAchievement('Judgement day prevented');
}
if(enjin.utils.seedString == "NASA") {
game.completeAchievement('McKinnon would be proud');
}
if(enjin.utils.seedString == "TREADSTONE") {
game.completeAchievement('Bourne to do this');
}
if(enjin.utils.seedString == "HAL9000") {
game.completeAchievement("I'm sorry, Dave");
}
}
}
} else {
// Else, reveal the next card
dungeonDeck[this.position].revealed = true;
}
}
// Utility function to heal player. Allows you to specify the amount as a percentage so long as percentage param = true. Rest parameter means the heal is at a rest site
heal(amount, percentage = false, rest = false) {
game.completeAchievement('Top up');
enJin.audioController.play('heal'); // Play heal audio
this.health += !percentage ? amount : Math.ceil((this.maxHealth / 100) * amount); // Add value to health
this.health = this.health > this.maxHealth ? this.maxHealth : this.health; // Clamp health
if(rest) { // If at a rest site.
game.finishResting();
}
}
// Utility function to adjust a players max health. Allows you to specify the amount as a percentage so long as percentage param = true. Rest parameter means the heal is at a rest site
adjustMaxHealth(amount, percentage = false, rest = false) {
enJin.audioController.play('heal'); // Play heal audio
this.maxHealth += !percentage ? amount : Math.ceil((this.maxHealth / 100) * amount); // Add value to health
this.health = this.health > this.maxHealth ? this.maxHealth : this.health; // Clamp health to max
if(this.maxHealth >= 40) {
game.completeAchievement('Absolute unit');
}
if(this.maxHealth >= 70) {
game.completeAchievement('Fort Knox');
}
if(this.maxHealth <= 5) {
game.completeAchievement('Who needs health');
}
if(rest) { // If at a rest site.
game.finishResting();
}
}
}
// --------------------------------------------------------------------------------
// Game class
// Contains all functions and methods related to the game
// --------------------------------------------------------------------------------
class Game {
constructor() {
this.lowerFrequency = 300; // Low pass frequency when in store etc
this.defaultFrequency = 15000; // Default low pass frequency
this.mainMenu = true;
this.gameCreation = false;
this.gameAchievements = false;
this.totalLevels = 9;
this.muted = false;
this.init = false;
this.shopMinimized = false;
this.endstageMinimized = false;
this.completedAchievementCount = 0;
this.showintents = true;
this.upgradesMinimized = true;
this.difficulty = 1;
this.won = false;
this.tutorialProgress = 0;
this.tutorial = true;
if(!localStorage.achievements) {
this.setAchievements()
}
if(localStorage.tutorial) {
this.tutorial = false;
}
}
tutorialDone() {
localStorage.setItem('tutorial', false);
}
setAchievements() {
let achievementsArray = [];
achievements.forEach(function(a) {
let ac = {
'name' : a.name,
'description' : a.description,
'complete' : false
}
achievementsArray.push(ac);
})
localStorage.setItem('achievements', JSON.stringify(achievementsArray));
}
updateAchievements() {
localStorage.setItem('achievements', JSON.stringify(vm.achievements));
}
completeAchievement(name) {
var targetAchievement = '';
vm.achievements.forEach(function(a) {
if(a.name == name) {
if(a.complete != true) {
a.complete = true;
achievements.forEach(function(a) {
if(a.name == name) {
targetAchievement = a
}
})
this.updateAchievements();
vm.completedAchievement = targetAchievement;
vm.achievementEarned = true;
enJin.audioController.play('achievement');
setTimeout(function() {
vm.achievementEarned = false;
}, 3500)
}
}
}.bind(this))
}
// Restart the game. Recreates a player, resets the vue instance and seed randoms
restart(newgame) {
game.mainMenu = false;
game.won = false;
player = new Player(20, 0, '');
player.hand = [new EquipableCard(startingCards[0]), new HealthCard(healthCards[0]), new MineCard(), new EquipableCard(defensiveCards[1]), new EquipableCard(offensiveCards[0])];
player.health = player.maxHealth
player.currency = 0;
player.progress = 0;
player.position = 0;
player.level = 1;
player.alive = true;
enJin.utils.resetSeed()
generateDungeonDeck(16); // Generate first stage deck
enJin.audioController.setFrequency(this.defaultFrequency); // Set music back to normal frequency
vm.reset(); // Reset the vue instance
// I really don't know why we need to do this...but we do
setTimeout(function() {
if(enJin.utils.seedString == 'CIA' || enJin.utils.seedString == 'cia') {
game.completeAchievement('Snowden');
}
},10)
createDraggables();
}
finishResting() {
enJin.audioController.play('heal');
enJin.audioController.setFrequency(this.defaultFrequency); // Set music back to normal frequency
player.resting = !player.resting;
dungeonDeck[player.position].deactivate();
player.move();
}
}
const game = new Game();
// ----------------------------------------
// Cards
// ----------------------------------------
// Base card class. All cards have some functions in common so all card types extend this class
class Card {
constructor() {
this.revealed = false;
this.active = true;
}
// Deactivate the card
deactivate() {
this.active = false;
}
// Take card function. All card, with the exception of 'currencies' should be 'takeable'.
// This means they are removed from the stage deck and placed into the players deck.
take(from, index) {
if(player.hand.length < player.maxInventory) { // First make sure the player has enough room in hand
let cardContext = from == 'field' ? dungeonDeck[index] : from == 'relics' ? player.pickedRelics[index] : dungeonDeck[index].drop; // We get the card in context
enJin.audioController.play('take');
player.hand.push(cardContext); // Push this card to our hand
cardContext.deactivate(); // Deactivate the current card
createDraggables(); // Re-initialise draggable elements
if(from == 'relics') {
player.stageComplete = !player.stageComplete;
generateDungeonDeck(16);
} else {
player.move(); // Move the player on
}
} else {
showMaxHand(); // Show the max hand warning
}
}
// Leave card function. All cards with the exception of 'currencies' should be 'leavable'. In other words
// deactivate the card and do not add it to hand
leave(from, index) {
enJin.audioController.play('trash');
let cardContext = from == 'field' ? dungeonDeck[index] : dungeonDeck[index].drop; // We get the card in context
cardContext.deactivate(); // Deactivate the current card
player.move(); // Move the player on
}
// Trash a card from the players hand
trash(index) {
enJin.audioController.play('trash');
player.hand.splice(index, 1);
}
// Buy a card from the shop
buy(index) {
if((player.currency - this.cost) >= 0) {
if(this.type == 'relic') {
enJin.audioController.play('buy');
this.deactivate(); // Deactivate this card
player.currency -= this.cost; // Deduct the cost of this card from the players currency
this.interact();
game.completeAchievement('I know Kung Fu');
this.bought = true;
} else {
if(player.hand.length < player.maxInventory) {
enJin.audioController.play('buy');
player.hand.push(this); // Add the card to the players hand
player.currency -= this.cost; // Deduct the cost of this card from the players currency
this.deactivate(); // Deactivate this card
createDraggables(); // Re-initialise draggable elements
game.completeAchievement('I know Kung Fu');
this.bought = true;
} else {
enJin.audioController.play('invalid');
if(player.hand.length >= player.maxInventory) {
showMaxHand();
}
}
}
} else {
enJin.audioController.play('invalid');
}
}
reset(index) {
if(this.attack && this.type != 'enemy') {
this.attack = this.baseAttack + player.boosts[this.name];
if(this.attack >= 9) {
game.completeAchievement('Maximum penetration');
}
}
if(this.value && this.type != 'enemy') {
this.value = this.baseValue + player.boosts[this.name];
}
if(this.defence && this.type != 'enemy') {
let used = this.maxDefence - this.defence;
this.defence = this.baseDefence + player.boosts[this.name] - used
this.maxDefence = this.baseDefence + player.boosts[this.name]
if(this.defence >= 12) {
game.completeAchievement('Impenetrable');
}
}
if(this.durability && this.type != 'enemy') {
let used = this.maxDurability - this.durability;
this.durability = this.baseDurability + player.boosts[this.name + 'Durability'] - used
this.maxDurability = this.baseDurability + player.boosts[this.name + 'Durability']
}
}
}
// Type classes
class EquipableCard extends Card {
constructor(...stats) {
super(); // Inherit methods from parent card class
for (let [key, value] of Object.entries(stats[0])) { // Map all stats
this[key] = value;
}
if(this.attack && player.boosts[this.name] != undefined) {
this.baseAttack = this.attack;
this.attack += player.boosts[this.name];
}
if(this.defence && player.boosts[this.name] != undefined) {
this.baseDefence = this.defence;
this.maxDefence = this.baseDefence + player.boosts[this.name];
this.defence += player.boosts[this.name];
}
if(this.durability && player.boosts[this.name] != undefined) {
this.baseDurability = this.durability;
this.maxDurability = this.baseDurability + player.boosts[this.name + 'Durability'];
this.durability += player.boosts[this.name + 'Durability'];
}
}
equip(index) {
let targetCard = this.type == "offensive" ? player.weapon : player.armour; // Get card type
// If there is already a card equipped, unequip that one first
if(targetCard) {
targetCard.unequip(true);
}
player.armour = player.hand[index];
enJin.audioController.play('defensiveEquipped');
player.hand.splice(index, 1);
}
unequip(overwrite) {
// Only unequip if there is enough space in the hand
let overflow = overwrite ? 1 : 0;
if(player.hand.length + 1 <= player.maxInventory + overflow) {
let targetCard = this.type == "offensive" ? player.weapon : player.armour;
// Update the player offensive or defensive items depending on what that selected
player.armour = ''; // Unset
// Push this card back into the players deck
player.hand.push(targetCard);
createDraggables(); // Re-initialise draggable elements
} else {
showMaxHand();
}
}
// The generic interact action for this card (what happens when its clicked when its part of the stage deck)
interact(index) {
player.hand.push(dungeonDeck[index]);
}
}
// Health cards. These cards replenish hit point to the player
class HealthCard extends Card {
constructor(...stats) {
super(); // Inherit methods from parent card class
for (let [key, value] of Object.entries(stats[0])) { // Map all stats
this[key] = value;
}
this.value += player.boosts[this.name];
}
use(index) {
player.heal(this.value);
player.hand.splice(index, 1);
}
}
// Currency card. Can be exchanged for other things. In this case, data -> cards
class CurrencyCard extends Card {
constructor(amount) {
super(); // Inherit methods from parent card class
this.name = 'Data'; // The name of our currency. Globally set
this.amount = amount; // Currency amount
this.description = 'Click to collect. Spend on the dark web'
}
// Generic card interaction when in stage deck
interact() {
enJin.audioController.play('data');
this.deactivate(); // Deactivate the card
player.currency += this.amount; // Increase the players currency by amount
player.move(); // Move the player
if(player.currency >= 30) {
game.completeAchievement('Gigabyte');
}
if(player.currency >= 100) {
game.completeAchievement('Terabyte');
}
if(player.currency >= 250) {
game.completeAchievement('Petabyte');
}
}
}
// Node cards. These are empty cards that serve no real purpose but pad out the stage deck
class NodeCard extends Card {
constructor(name) {
super(); // Inherit methods from parent card class
this.name = name; // Location name
this.dataAmount = enJin.utils.seedRandomBetween(4, 10);
this.dataAmount = Math.ceil((this.dataAmount / 100) * player.boosts['Data']) + this.dataAmount;
this.type = 'node';
this.description = 'Use a data miner on this to extract the data';
}
interact() {
enJin.audioController.play('node');
this.deactivate(); // Deactivate this card
player.move(); // Move the player
}
}
// Node cards. These are empty cards that serve no real purpose but pad out the stage deck
class MineCard extends Card {
constructor(name) {
super(); // Inherit methods from parent card class
this.name = 'Data miner'; // Location name
this.type = 'mine';
this.cost = 10;
this.description = 'Use this on a node to mine its data';
}
interact() {
enJin.audioController.play('node');
this.deactivate(); // Deactivate this card
player.move(); // Move the player
}
mine(node) {
let value = dungeonDeck[node].dataAmount;
game.completeAchievement('Mine, all mine');
dungeonDeck[node].interact();
enJin.audioController.play('mine');
player.currency += value; // Increase the players currency by amount
if(value >= 14) {
game.completeAchievement('Jackpot');
}
if(player.currency >= 30) {
game.completeAchievement('Gigabyte');
}
if(player.currency >= 100) {
game.completeAchievement('Terabyte');
}
if(player.currency >= 250) {
game.completeAchievement('Petabyte');
}
}
}
// Relic cards.
class RelicCard extends Card {
constructor(...stats) {
super(); // Inherit methods from parent card class
for (let [key, value] of Object.entries(stats[0])) { // Map all stats
this[key] = value;
}
}
// Whenever a relic is clicked on
interact(index, end) {
this.deactivate(); // Deactivate this card
enJin.audioController.play('takerelic');
// Trigger the relics effects
this.targets.forEach(function(t, index) {
eval(t + this.operator[index] + this.change[index]);
}.bind(this))
player.health = player.health > player.maxHealth ? player.maxHealth : player.health; // Clamp health
player.collectedRelics.push(this); // Add to relic collection
let alreadyGot = false;
if(player.listedRelics.length == 0) {
this.count = 1;
player.listedRelics.push(this)
} else {
player.listedRelics.forEach(function (t) {
if(this.name == t.name) {
alreadyGot = true
t.count++
}
}.bind(this))
if(alreadyGot) {
alreadyGot = false;
} else {
this.count = 1;
player.listedRelics.push(this); // Add to relic collection
}
}
if(this.name == "Quantum processor") {
game.completeAchievement('Dictionary attack');
}
player.hand.forEach(function(t) {
t.reset()
})
if(player.shopCards) {
player.shopCards.forEach(function(t) {
t.reset()
})
}
dungeonDeck.forEach(function(t) {
t.reset()
if(t.drop) {
t.drop.reset();
}
})
if(end) {
player.stageComplete = !player.stageComplete;
generateDungeonDeck(16);
} else {
if(!player.shopping) {
player.move(); // Move the player
}
}
if(player.collectedRelics.length >= 5) {
game.completeAchievement('Script kiddy')
}
if(player.collectedRelics.length >= 10) {
game.completeAchievement('Red hat')
}
if(player.collectedRelics.length >= 15) {
game.completeAchievement('Black hat')
}
if(player.collectedRelics.length >= 20) {
game.completeAchievement('Elite hacker')
}
if(player.maxInventory >= 8) {
game.completeAchievement('Kitted')
}
}
}
// Shop card. Opens up the shop interface
class ShopCard extends Card {
constructor() {
super();
this.name = 'Tor Browser';
this.description = 'Download new software'
}
openShop(index) {
player.shopRelicFlag = false
enJin.audioController.setFrequency(game.lowerFrequency);
enJin.audioController.play('openShop');
player.shopping = !player.shopping;
player.activeShop = index;
pickShopCards(player.shopCardTotal);
}
closeShop() {
enJin.audioController.setFrequency(game.defaultFrequency);
player.shopping = !player.shopping;
this.deactivate();
player.move();
}
interact(index) {
player.shopIndex = index;
this.openShop(index);
}
}
// Shop card. Opens up the shop interface
class RestCard extends Card {
constructor() {
super();
this.name = 'Enumerate';
this.description = 'Improve your integrity'
}
openRest() {
enJin.audioController.setFrequency(game.lowerFrequency);
enJin.audioController.play('openShop');
player.resting = !player.resting;
}
interact() {
this.openRest();
}
}
// Enemy card
class EnemyCard extends Card {
constructor(...stats) {
super(); // Inherit methods from parent card class
for (let [key, value] of Object.entries(stats[0])) { // Map all stats
this[key] = value;
}
this.health = this.health + Math.floor((player.level - 1) / 2);
this.attack = this.attack + Math.floor((player.level - 1) / 2);
this.baseHealth = this.baseHealth + Math.floor((player.level - 1) / 2);
this.generateDrop(); // Generate this enemies drop
}
// General interaction (in the stage deck)
interact(damage) {
damage = damage ? damage : 1; // Caluculate damage total
player.attacking = true; // Set attacking flag
player.attackAmount = damage;
setTimeout(function() {
player.attacking = false;
}, 250)
enJin.audioController.play('enemyHit');
// Take damage. Check if the hit would destory the target
if(this.health - damage > 0) {
this.health -= damage; // Deal damage
let _this = this; // Save context
setTimeout(function() {
_this.attackPlayer(_this.attack); // Fire the attack function for the enemy
}, 250)
} else {
// If the target is destroyed
game.showintents = false;
this.deactivate(); // Deactivate this enemy
enJin.audioController.play('enemyKilled');
game.completeAchievement('One down');
if(this.name == "Data Center") {
game.completeAchievement('Data dump');
}
if(this.name == "Security beacon") {
game.completeAchievement('Not so secure');
}
if(this.name == "Mainframe") {
game.completeAchievement('My kung fu is stronger');
}
if(this.name == "Antivirus") {
game.completeAchievement('Antivirus down');
}
if(this.name == "Firewall") {
game.completeAchievement('Through the fire and flame');
}
if(this.name == "Server") {
game.completeAchievement('Youve been served');
}
if(!this.drop) { // If this enemy does not have a drop, move to next card
player.move();
}
}
}
// Attack function
attackPlayer(attack) {
// Check if player has armour
player.attacked = true; // Set attacking flag
setTimeout(function() {
player.attacked = false;
}, 250)
if(player.armour) {
player.fleshDamage = 0;
player.armour.defence -= attack; // Remove durability from the defensive item
if(player.armour.defence <= 0) { // If this attack would destroy the defensive item...
player.health -= Math.abs(player.armour.defence); // ... calculate the overflow and deduct it from the players health
player.fleshDamage = Math.abs(player.armour.defence);
player.armour = ''; // Remove the players defensive item
player.shieldAmount = attack;
enJin.audioController.play('enemyAttackShield'); // Need a broken shield sound
} else {
enJin.audioController.play('enemyAttackShield');
player.shieldAmount = attack;
}
} else {
enJin.audioController.play('enemyAttackFlesh');
player.health -= attack; // No defensive item, take from health
player.shieldAmount = 0;
player.fleshDamage = attack;
if(player.fleshDamage >= 10) {
game.completeAchievement('They are on to you');
}
}
// Death check
if(player.health <= 0) {
game.completeAchievement('n00b');
enJin.audioController.setFrequency(game.lowerFrequency);
player.alive = false; // Set the player alive flag
}
}
// Generate drops. All drop are defined using the seed and thus are predetermined when the instance of the card is created
generateDrop() {
let roll = enJin.utils.seedRandomBetween(1, 100); // Roll a seeded random number between 1 and 100
dropRatios.forEach(function(ratio) {
if(roll > ratio.lowerRange && roll < ratio.upperRange) {
let type = ratio.name;
this.drop = getCardByType(type);
}
}.bind(this))
}
}
function getCardByType(type, cardPool) {
let card;
if(type == "offensive") { card = new EquipableCard(enJin.utils.seedRandomInArray(offensiveCards));}
if(type == "defensive") { card = new EquipableCard(enJin.utils.seedRandomInArray(defensiveCards));}
if(type == "enemy") { card = new EnemyCard(enJin.utils.seedRandomInArray(enemies));}
if(type == "healing") { card = new HealthCard(enJin.utils.seedRandomInArray(healthCards));}
if(type == "currency") { card = new CurrencyCard(enJin.utils.seedRandomBetween(1, 5));}
if(type == "relic") { card = new RelicCard(enJin.utils.seedRandomInArray(relicCards));}
if(type == "mine") { card = new MineCard(); }
if(type == "node") { card = new NodeCard(enJin.utils.seedRandomInArray(nodeCards).name); }
if(type == "mine") { card = new MineCard();}
if(!type) {
if(cardPool == "shop") { card = new ShopCard();}
else if(cardPool == "mine") { card = new MineCard();}
else if(cardPool == "rest") { card = new RestCard();}
else { card = new CurrencyCard(enJin.utils.seedRandomBetween(1, 5));}
}
return card;
}
// Create the player
var player = new Player(20, 0, '');
// Create a starting hand
const startingDeck = [new EquipableCard(startingCards[0]), new HealthCard(healthCards[0]), new MineCard(), new EquipableCard(defensiveCards[1]), new EquipableCard(offensiveCards[0])];
player.hand = startingDeck;
function showMaxHand() {
enJin.audioController.play('invalid');
player.maxHandWarning = true;
setTimeout(function() {
player.maxHandWarning = false;
}, 2000)
}
// ----------------------------------------
// Ratio tables
// ----------------------------------------
// Function to generate ratio ranges for a ratio table and push to an array.
// All of our drops, stages and shop cards are seeded random, but we want some to be more common than other. By creating a ratio table
// we can roll a random number and check which range it falls in. The wider the range, the more likely it will be 'chosen'
function generateRatios(ratioTable, target) {
let runningTotal = 0;
ratioTable.forEach(function(e) {
let ratioBand = {
name: Object.keys(e)[0], // Ratio band name
lowerRange: runningTotal, // Lower range
upperRange: runningTotal + Object.values(e)[0] // Upper range
}
runningTotal = runningTotal + Object.values(e)[0] + 1; // Update running total
target.push(ratioBand); // Push band to target
})
}
// Ratio tables
var dropTable;
if(game.difficulty == 1) {
dropTable = [{ offensive: 10 }, { defensive: 10 }, { healing: 12 }, { currency: 24 }, { relic: 8 }, {mine: 15}]; // Drop ratios for enemies
}
if(game.difficulty == 2) {
dropTable = [{ offensive: 8 }, { defensive: 8 }, { healing: 10 }, { currency: 20 }, { relic: 5 }, {mine: 11}]; // Drop ratios for enemies
}
if(game.difficulty == 3) {
dropTable = [{ offensive: 6 }, { defensive: 6 }, { healing: 8 }, { currency: 15 }, { relic: 3 }, {mine: 7}]; // Drop ratios for enemies
}
let dropRatios = [];
generateRatios(dropTable, dropRatios); // Generate ratio bands
const shopTable = [{ offensive: 10 }, { defensive: 10 }, { healing: 15 }, { relic: 65 }]; // Shop pick table. Should alway be 100 total otherwise some will be blank
let shopRatios = [];
generateRatios(shopTable, shopRatios); // Generate ratio bands
function pickRelics(amount) {
player.pickedRelics = [];
for(i = 0; i < amount; i++) {
let roll = enJin.utils.seedRandomBetween(1, 100); // Select seeded random number between 1 and 100
// Now check which ratio band our random number is in
shopRatios.forEach(function(ratio) {
if(roll >= ratio.lowerRange && roll <= ratio.upperRange) {
let type = ratio.name;
let card = getCardByType(type);
card.cost = Math.ceil(card.cost - ((card.cost / 100) * player.shopDiscount));
// Add this card to the shops array
player.pickedRelics.push(card);
}
}.bind(this))
}
}
// ----------------------------------------
// Shop card selection
// ----------------------------------------
// function to select the desired amount of cards and put them into the shop interface. Uses the shop ratios
function pickShopCards(amount) {
// First clear the shop cards array
player.shopCards = [];
// Now loop through the desired amount
for(i = 0; i < amount; i++) {
let roll = enJin.utils.seedRandomBetween(1, 100); // Select seeded random number between 1 and 100
// Now check which ratio band our random number is in
shopRatios.forEach(function(ratio) {
if(roll >= ratio.lowerRange && roll <= ratio.upperRange) {
let type = ratio.name;
let card = getCardByType(type);
card.cost = Math.ceil(card.cost - ((card.cost / 100) * player.shopDiscount));
// Add this card to the shops array
player.shopCards.push(card);
}
}.bind(this))
}
}
// ----------------------------------------
// Stage deck generation
// ----------------------------------------
// Generate dungeon deck
let dungeonDeck = []; // Create a blank array for the deck
// Deck generation requires a little more flexibility than complete randomness like the enemy drops.
// for our deck creation we specify a minimum and maximum of a card type (this can be a percentage or an int), then when all cards are added, we top up with
// node cards and add in a boss if needed
function selectCards(min, max, cardPool) {
// First select a random amount of the card from this card pool
let roll = enJin.utils.seedRandomBetween(min, max); // Random roll
// Now select that many cards
for(i = 0; i < roll; i++) {
// Select a random card type from the enemies pool
let type = cardPool[0].type;
let selectedCard;
selectedCard = getCardByType(type, cardPool);
// Add the card to the dungeon deck
dungeonDeck.push(selectedCard);
}
}
function generateDungeonDeck(size) {
dungeonDeck = []; // Clear the current deck
selectCards(1, 1, offensiveCards); // Offensive
selectCards(1, 1, defensiveCards); // Defensive
selectCards(1, 2, 'shop'); // Shop
if(game.difficulty == 1) {
selectCards(0, 1, relicCards); // Shop
selectCards(1, 1, 'rest'); // Shop
selectCards(1, 3, 'currency'); // Data
selectCards(3, 5, enemies); // Enemies
selectCards(1, 1, 'mine'); // Shop
}
if(game.difficulty == 2) {
selectCards(0, 0, relicCards); // Shop
selectCards(0, 1, 'rest'); // Shop
selectCards(1, 2, 'currency'); // Data
selectCards(3, 6, enemies); // Enemies
selectCards(0, 1, 'mine'); // Shop
}
if(game.difficulty == 3) {
selectCards(0, 0, relicCards); // Shop
selectCards(0, 1, 'rest'); // Shop
selectCards(0, 2, 'currency'); // Data
selectCards(3, 7, enemies); // Enemies
selectCards(0, 1, 'mine'); // Shop
}
selectCards(size - dungeonDeck.length, size - dungeonDeck.length, nodeCards); // Locations
// Shuffle the deck
for(i = 0; i < 10; i++) {
dungeonDeck = dungeonDeck.map(value => ({ value, sort: enJin.utils.seedRandomBetween(1000, 100000)})).sort((a, b) => a.sort - b.sort).map(({ value }) => value);
}
if(dungeonDeck[dungeonDeck.length - 1].name == 'Tor Browser') {
dungeonDeck.splice(dungeonDeck.length - 1, 1)
dungeonDeck.unshift(new ShopCard())
}
if(player.level == 1) {
dungeonDeck.unshift(new EnemyCard(enemies[0]));
}
// Set first card to revealed
dungeonDeck[0].revealed = true;
if(player.level % 3 == 0) {
// Select a random card type from the enemies pool
let card = new EnemyCard(enJin.utils.seedRandomInArray(bosses));
// Add the card to the dungeon deck
dungeonDeck.push(card);
}
// Reset the vm instance
if(player.level > 1) {
vm.reset();
}
}
// Generate the first stage deck
generateDungeonDeck(16);
// Vue instance
vm = new Vue({
el: '.game',
data() {
return {
player: player,
playersTurn: true,
dungeonDeck: dungeonDeck,
game: game,
seed: enJin.utils.seedString,
achievements: JSON.parse(localStorage.getItem('achievements')),
completedAchievement: '',
achievementEarned: false,
}
},
methods: {
// Reset data object. Used when updating the seed to re-evaluate all random properties using seed
reset() {
Object.assign(this.$data, this.$options.data.call(this));
},
getAchievementCount() {
let completed = 0;
this.achievements.forEach(function(a) {
if(a.complete) {
completed++;
}
})
return completed;
}
}
});
var droppables = document.getElementsByClassName('droppable');
var overlapThreshold = '10%';
function onDrop(dragged, dropped) {
let index = dragged.dataset.index;
let cardType = player.hand[index].type;
let accepts = dropped.dataset.accepts;
if(cardType == accepts) {
if(cardType == 'healing') {
player.hand[index].use(index);
}
if(cardType == 'defensive') {
player.hand[index].equip(index);
}
}
if(cardType == 'offensive' && accepts == 'enemy' || cardType == 'offensive' && accepts == 'boss') {
if(dungeonDeck[dropped?.dataset?.id].revealed) {
if(!player.shopping) {
let attack = player.hand[index].attack;
let id = dropped.dataset.id;
let playedCard = player.hand[index];
dungeonDeck[id]?.interact(attack);
playedCard.durability--;
if(playedCard.durability <= 0) {
player.hand.splice(index, 1);
}
}
}
}
if(cardType == 'mine' && accepts == 'node') {
if(dungeonDeck[dropped?.dataset?.id].revealed) {
player.hand[index].mine(dropped.dataset.id);
player.hand.splice(index, 1);
}
}
if(accepts == 'any') {
if(player.hand[index].name != 'Brute force') {
enJin.audioController.play('trash');
player.hand.splice(index, 1);
} else {
enJin.audioController.play('invalid');
}
}
}
function createDraggables() {
setTimeout(function() {
Draggable.create(".draggable", {
edgeResistance:0.80,
bounds: ".game",
onDragEnd: function(e) {
var i = droppables.length;
while (--i > -1) {
if (this.hitTest(droppables[i], overlapThreshold)) {
onDrop(this.target, droppables[i]);
} else {
TweenLite.to(this.target, 0.001, {
x: 0, y: 0
});
}
}
}
});
}, 240);
}
createDraggables();
Raw
scripts
<script src="https://codepen.io/jcoulterdesign/pen/e54f657bdb261a60a06bdf7c59e08eca.js"></script>
<script src="https://codepen.io/jcoulterdesign/pen/be0cddc1cbd7659676aed48b97afd57d.js"></script>
<script src="https://codepen.io/jcoulterdesign/pen/70920fa4550ed45e7c1ff28b643b6969.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://codepen.io/jcoulterdesign/pen/zYRVpdw/4285e883d66c684da9d3bf3ed140cef7.js"></script>
Raw
style.scss
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');
// Firefox fix
.inset-0 {
width: 100%;
height: 100%;
}
// Additional utility classes
.tut {
background: #00ffc2;
padding: 3px 10px;
position: relative;
top: -7px;
color: #061b20;
right: 4px;
cursor: pointer;
transition: all 300ms;
&:hover {
background: white;
}
}
.tutorial {
z-index: 10000000;
background: #031216ed;
opacity: 0;
pointer-events: none;
transition: all 300ms;
&.active {
opacity: 1;
pointer-events: all;
transition: all 300ms 1000ms;
}
&_screen {
height: 300px;
width: 700px;
pointer-events: none;
&.active {
pointer-events: all;
.gif {
transform: scale(1) translateY(-119px) translateX(-153px);
opacity: 1;
transition: all 250ms 250ms;
}
.content {
opacity: 1;
transform: scale(1);
transition: all 250ms 300ms;
}
}
.gif {
width: 400px;
opacity: 0;
box-shadow: 0 0 0 4px white;
height: 400px;
position: absolute;
transition: all 250ms 50ms;
z-index: 1;
transform: scale(0) translateY(-119px) translateX(-153px);
}
.content {
clip-path: polygon(0 0, 100% 0, 100% 84%, 92% 100%, 0 100%);
opacity: 0;
background: #072931;
padding: 60px 60px 60px 280px;
transition: all 250ms 0ms;
transform: scale(0);
color: white;
h2 {
font-size: 28px;
margin-bottom: 8px;
}
p {
font-size: 14px;
line-height: 18px !important;
}
}
}
}
.diffSelector {
padding-bottom: 20px;
width: 327px;
border-bottom: 2px solid #0e2328;
}
.difficulty {
background: #041316;
font-size: 16px;
padding: 6px 10px;
width: 33.33%;
opacity: 0.5;
transition: all 200ms;
cursor: pointer;
&:hover {
opacity: 1;
}
&.active {
background: #00ffc2;
color: #061b20;
opacity: 1;
}
}
.bought {
background: #051418d9;
padding: 10px;
color: #ffffff;
width: 90%;
left: 7px;
font-weight: bold;
padding: 89px 10px;
border-radius: 10px;
top: 50%;
font-size: 18px;
text-align: center;
transform: translateY(-50%);
}
.text-blue {
color: #061B20;
}
.text-pink {
color: #E82755;
}
.text-brightblue {
color: #00D1FF;
}
.text-green {
color: #00FFC2;
}
.bg-grey {
background: #102B32;
}
.bg-green {
background: #00FFC2;
}
.text-description {
color: #91C2CE;
font-size: 13px;
line-height: 16px !important;
}
.bg-blue {
background: #061B20;
}
.text-lightblue {
color: #092830;
}
.text-lightgrey {
color: #35464A;
}
.text-lime {
color: #E5FF44;
}
.line-height-small {
line-height: 16px;
}
.card {
&--hacker {
background-image: url('https://assets.codepen.io/217233/hack--hackercardback.png');
pointer-events: none;
}
&--firewall {
background-image: url('https://assets.codepen.io/217233/hack--cardbackempty.png');
&--active {
background-image: url('https://assets.codepen.io/217233/hack--firewallcardback_1.png');
animation: pump 200ms forwards;
}
}
&--defensive {
background-image: url('https://assets.codepen.io/217233/hack--firewallcardback_1.png');
}
&--enemy {
background-image: url('https://assets.codepen.io/217233/hack--enemycardback.png');
}
&--format {
background-image: url('https://assets.codepen.io/217233/hack--formatcardback.png');
}
&--node {
background-image: url('https://assets.codepen.io/217233/hack--datacardback.png');
}
&--mine,
&--healing,
&--undefined {
background-image: url('https://assets.codepen.io/217233/hack--genericcardback.png');
}
&--offensive {
background-image: url('https://assets.codepen.io/217233/hack--offensivecardback.png');
}
&--relic {
background-image: url('https://assets.codepen.io/217233/hack--upgradecardback.png');
}
}
.animationWrap {
&.damaged {
animation: shake 200ms forwards;
}
}
.shake {
animation: shake 200ms forwards;
}
.trimWrap {
left: -67px;
top: -44px;
}
@keyframes pump {
0%{transform: scale(1)}
50%{transform: scale(0.95)}
100%{transform: scale(1)}
}
@keyframes shake {
0%{transform: translateX(0)}
20%{transform: translateX(-10px)}
40%{transform: translateX(10px)}
60%{transform: translateX(-5px)}
80%{transform: translateX(0)}
}
@keyframes arrow {
0%{opacity: 1}
100%{opacity: 0}
}
.eject {
transition: all 200ms;
&:hover {
bottom: 8px;
}
}
@keyframes move {
0% {transform: translateX(0) translateY(0)}
50% {transform: translateX(100px) translateY(100px)}
100% {transform: translateX(0) translateY(0)}
}
@keyframes in {
0% {opacity: 0;}
100% {opacity: 0.15}
}
.hack--pattern {
opacity: 0;
right: -2700px;
// filter: blur(2px);
top: -900px;
transition: all 1400ms cubic-bezier(0.58, 0, 0.07, 1.01);
width: 3974.17px;
animation: in 2s 400ms forwards;
&.notBlurred {
pointer-events: none;
filter: blur(0px);
}
img{
max-width: auto;
animation: move 24s linear infinite;
}
&.active {
right: 800px;
top: -400px;
}
}
.spin {
// animation: spin 10s linear infinite;
}
.eq {
width: 2px;
height: 10px;
margin: 0 1px;
transform: scaleY(0.1);
transform-origin: 0 100%;
&.active {
@for $i from 1 through 4 {
&:nth-of-type(#{$i}) {
animation: eq 1s .2s * $i infinite;
}
}
}
}
@keyframes eq {
0% {transform: scaleY(.2);}
25% {transform: scaleY(1);}
50% {transform: scaleY(.4);}
75% {transform: scaleY(.7);}
100% {transform: scaleY(.2);}
}
.introWrapper.active {
pointer-events: none !important;
div {
pointer-events: none !important;
}
}
@keyframes spin {
from {transform: rotate(0)}
to {transform: rotate(360deg)}
}
.deckLimit {
color: #e82755;
font-size: 16px;
background: #e8275526;
padding: 10px 30px;
animation: flashit 2s infinite;
opacity: 1;
}
@keyframes flashit {
5%{opacity: 0}
10%{opacity: 1}
15%{opacity: 0}
20%{opacity: 1}
25%{opacity: 0}
30%{opacity: 1}
100%{opacity: 1}
}
.arrows {
img {
max-width: 30px;
opacity: 0.06;
}
&--three {
@for $i from 1 through 3 {
img:nth-of-type(#{4 - $i}) {
animation: arrow 1s (1 / 12) * $i + 0s infinite;
}
}
}
&--five {
@for $i from 1 through 35 {
img:nth-of-type(#{6 - $i}) {
animation: arrow 1s (1 / 12) * $i + 0s infinite;
}
}
}
}
// Intro stuff
.game_shop__cards,
.game_stageComplete {
.slot {
transition: all 200ms !important;
&:hover {
transform: translateY(-10px);
}
}
}
.game_enumerate,
.game_gameoverman,
.game_winner {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
background: #041b20f2;
transition: all 300ms;
&.active {
opacity: 1;
pointer-events: all;
}
}
.game_gameoverman,
.game_winner {
background: #041b20;
transition: all 1000ms 1000ms;
&.active {
transition: all 400ms;
}
}
.game_intro {
opacity: 0;
transition: opacity 1000ms;
background: #061b20;
pointer-events: none;
&.active {
opacity: 1;
pointer-events: all;
}
h3 {
&.active {
animation: flash 500ms forwards;
}
@keyframes flash {
0%{opacity:1}
20%{opacity:0}
40%{opacity:1}
60%{opacity:0}
80%{opacity:1}
100%{opacity:1}
}
}
}
.game_intro__achievements {
transition: transform 600ms 0ms cubic-bezier(0.55, 0.01, 0.01, 0.97);
position: absolute;
transform: translateX(100%);
left: 0;
right: 0;
width: 100%;
background: #0F272D;
&.active {
transition: transform 600ms 250ms cubic-bezier(0.55, 0.01, 0.01, 0.97);
transform: translateX(0%);
& .inner {
opacity: 1;
transition: all 600ms 600ms;
}
}
.inner {
max-width: 1250px;
margin: auto;
padding: 30px;
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #0d2329;
}
::-webkit-scrollbar-thumb {
background-color: #00fcc0;
}
.grid {
height: calc(100vh - 392px);
margin-bottom: 24px;
}
}
}
.ach {
transition: all 100ms;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.game_intro__newgame {
width: 0;
transition: all 600ms 600ms;
& .inner {
opacity: 0;
padding: 90px 0 90px 90px;
border-left: 2px solid #0e2328;
transition: width 600ms 0ms, opacity 600ms 0ms, margin 1ms 600ms;
}
&.active {
width: 500px;
transition: all 600ms 250ms;
& .inner {
margin-left: 90px;
opacity: 1;
transition: opacity 600ms 600ms, width 600ms 600ms;
}
}
input {
color: #00FFC2;
background: #0F272D;
padding: 8px 17px 8px 47px;
font-size: 20px;
outline: none;
margin-top: 4px;
}
button.random {
transition: all 200ms;
&:hover {
transform: rotate(180deg)
}
}
.net {
top: 16px;
}
}
button.hack {
color: #061b20;
padding: 6px 30px;
font-size: 18px;
margin-top: 20px;
transition: all 200ms;
font-weight: 500;
clip-path: polygon(18% 0, 100% 0, 100% 67%, 84% 100%, 0 100%, 0 35%);
&:hover {
background: #00ffc2;
}
}
button.skip {
clip-path: polygon(14% 0, 100% 0, 100% 70%, 86% 100%, 0 100%, 0 33%);
}
.backArrow {
opacity: 0.2;
transition: all 200ms;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.game_achievement {
background: #021114;
padding: 23px 40px 20px 40px;
h3 {
text-transform: uppercase;
font-size: 12px;
color: #00FCC0;
}
&__name {
font-size: 22px;
}
&__description {
font-size: 16px;
color: #607a81;
line-height: 18px;
}
}
.selection {
transition: all 300ms;
padding: 30px 30px;
background: #05181c;
&:hover {
background: #00ffc2;
h4, p {
color: #061b20;
}
svg path {
fill: #061b20;
}
}
}
.detected {
background: #00ffa308;
padding: 0px 60px;
margin: 30px 0;
}
.menu,
.game_gameover,
.game_gameoverman,
.game_winner {
h3, a {
cursor: pointer;
transition: all 150ms;
padding-top: 4px;
padding-bottom: 4px;
font-size: 20px;
display: block;
&:hover {
background: #00FFC2;
color: #061b20;
}
}
a {
padding: 0;
}
}
.game_achievement {
transform: translateY(100%);
transition: all 300ms;
&.active {
transform: translateY(0%);
}
}
body {
font-size: 14px;
background: #061B20;
font-family: 'Rajdhani', sans-serif;
overflow: hidden;
image-rendering: pixelated;
user-select: none;
font-weight: 500;
h1, h2, h3, h4, h5, h6, p {
line-height: 100% !important;
}
}
.constrain {
min-width: 1250px;
}
.screenCap {
z-index: 10000000;
width: 100%;
height: 100%;
background: #061b20;
display: none;
@media screen and (max-width: 1300px) {
display: flex;
}
@media screen and (max-height: 700px) {
display: flex;
}
}
.game_stage__relics {
position: absolute;
z-index: 10000;
bottom: 0;
left: 0;
width: 100%;
padding: 50px 50px 50px 50px;
background: #051418;
transform: translateY(100%);
transition: transform 300ms, opacity 300ms 0s;
opacity: 0;
&.active {
transition: transform 300ms, opacity 300ms 1s;
opacity: 1
}
.relic {
background: #071b20;
padding: 20px 16px;
border-radius: 14px;
svg {
height: 18px;
}
}
&.min {
transform: translateY(0%);
}
}
.count {
background: #00ffc2;
height: 24px;
width: 38px;
font-weight: 700;
text-align: center;
line-height: 25px;
display: inline-block;
color: #061b20;
border-radius: 100px;
position: absolute;
top: -31px;
right: -26px;
}
.game {
&_header {
z-index: 10000;
position: relative;
transition: all 600ms 600ms;
transform: translateY(-200px);
&.active {
transform: translateY(0px);
}
& > div {
}
}
&_stage {
max-width: 1250px;
opacity: 0;
transition: opacity 1s 1s;
&.active {
opacity: 1;
}
}
.slot {
width: 135px;
height: 215px;
transition: transform 600ms, opacity 600ms, width 150ms 100ms, margin 150ms 100ms;
&.inactive {
transform: scale(0);
opacity: 0;
width: 0;
margin-right:-16px;
& .back {
backface-visibility: visible
}
}
&.unrevealed {
background: #2c2c2c;
color:white;
}
}
.cardholder {
transform: rotateY(0deg);
transition: transform 0.4s 300ms, right 50ms 50ms;
backface-visibility: hidden;
&--inactive {
transform: rotateY(180deg);
}
}
.card {
height: 215px;
width: 135px;
border-radius: 6px;
cursor: pointer;
background-size: cover;
color: white;
&.trash {
background-image: url(https://assets.codepen.io/217233/cardBackTrash.png);
pointer-events: none;
}
&.back {
background-image: url(https://assets.codepen.io/217233/hack--cardback.png);
transform: rotateY(0deg);
transition: transform 0.4s 300ms;
pointer-events: none;
backface-visibility: hidden;
&.inactive {
transform: rotateY(180deg);
}
}
}
.damageNumber {
animation: damageNumber 350ms forwards;
}
@keyframes damageNumber {
from {
transform: translateY(-10px);
}
to {
transform: translateY(-50px);
}
}
}
.gsc_player__character,
.cardholder {
transition: all 50ms;
}
// shop
.relicCount {
background: #00ffc2;
height: 24px;
width: 24px;
font-weight: 700;
text-align: center;
line-height: 25px;
display: inline-block;
color: #061b20;
border-radius: 100px;
position: relative;
top: -1px;
left: 2px;
}
.game_minimize,
.relics_minimize {
width: 220px;
background: #051418;
padding: 20px 0;
text-align: center;
cursor: pointer;
margin-top: 40px;
transition: all 300ms;
position: absolute;
left: 0;
bottom: 0;
transform: translateY(100%);
clip-path: polygon(0% 0, 100% 0, 100% 67%, 91% 100%, 0 100%, 0 35%);
&:hover {
color: rgba(0,255,194,1);
//background: linear-gradient(0deg, rgba(0, 255, 194, 0.5) -250%, rgba(0, 255, 194, 0) 80%);
}
}
.relics_minimize {
bottom: auto;
top: -120px;
left: 0;
width: 160px;
right: auto;
margin: auto;
clip-path: polygon(90% 0, 100% 21%, 100% 100%, 0 100%, 0 0);
}
@keyframes pulseProgress {
from {box-shadow: 0 0 0 0px rgba(0, 255, 194, 1)}
to {box-shadow: 0 0 0 5px rgba(0, 255, 194, 0)}
}
.gsc_field {
min-width: 500px;
}
.progress {
margin-right: 1px;
&.active {
background: #00FFC2;
animation: pulseProgress 1s infinite;
svg path{
fill: #061b20;
}
}
&.inactive {
background: transparent;
border: 2px solid #053935;
}
&.complete {
background: #00ffc226;
}
}
.game_shop,
.game_stageComplete {
background: #051418;
padding: 60px 0 60px 0;
transform: translateY(-120%);
transition: all 300ms;
z-index: 2000;
button.hack {
clip-path: polygon(8% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 33%);
}
&.active {
transform: translateY(0%);
}
&.min {
transform: translateY(calc(-100% + 107px));
button {
display: none;
}
}
}
.game_stageComplete {
padding: 60px 0 110px 0;
}
.gameInit {
opacity: 0;
pointer-events: none;
.flash {
z-index: 10000;
pointer-events:none;
}
.menu,
.author,
.flash {
opacity: 0;
transition: all 1000ms 2200ms;
}
.author {
transition: all 1000ms 2000ms;
}
.logo {
transform: scale(10);
transition: all 100ms 900ms;
img {
opacity: 0;
transition: all 200ms 900ms;
}
}
&.active {
pointer-events: all;
opacity: 1;
.menu,
.author {
opacity: 1;
}
.flash {
animation: introflash 200ms 1000ms forwards
}
.logo {
transform: scale(1);
img {
opacity: 1;
}
}
}
}
@keyframes introflash {
0%{opacity: 0;}
25%{opacity: 1;}
50%{opacity: 0;}
75%{opacity: 1;}
100%{opacity: 0;}
}
.gamePreload {
opacity: 0;
transition: all 100ms;
pointer-events: none;
z-index: 10000000000;
&.active {
pointer-events: all;
opacity: 1;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment