HTML/Abilities.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Abilities — Keep Talking and Nobody Explodes Module</title>
    <link rel="stylesheet" type="text/css" href="css/font.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="js/ktane-utils.js"></script>
    <script src="js/jquery.3.7.0.min.js"></script>
    <script>
    $(function() {
        const names = [
            "90 Caliber Net", "Above and Below", "Abscond / Abduct", "Absolute Zero", "Abyssal Dive", "Acceleration Gate", "Ace in the Hole", "Aegis Assault", "All Out", "Allure", "Alpha Strike", "Ambush", "Apotheosis", "Apprehend",
            "Aqua Prison", "Arcane Shift", "Arcanopulse", "Arctic Assault", "Ardent Blaze", "Aria of Perseverance", "Arise!", "Aspect of the Cougar", "Assassin’s Path", "Astral Flight", "Astral Infusion", "Audacious Charge",
            "Audacity", "Avengerang", "Bailout", "Baleful Strike", "Bandage Toss", "Barrel Roll", "Bastion", "Battle Dance", "Battle Roar", "Beartrap on a Rope", "Beat Drop", "Behind Enemy Lines", "Bellows Breath",
            "Biggest Snowball Ever!", "Binding Eclipse", "Bio-Arcane Barrage", "Black Shield", "Blade Whirl", "Blade of the Exile", "Blade of the Ruined King", "Blade’s Reach", "Bladecaller", "Bladesurge", "Bladework",
            "Blazing Stampede", "Blighted Quiver", "Blinding Dart", "Blinding Assault", "Blood Hunt", "Blood Rush", "Bloodlust", "Blooming Blows", "Blooming Burst", "Blunt Force Trauma", "Body Slam", "Bola Strike",
            "Bone Skewer", "Boomerang Blade", "Boomerang Throw", "Boulder Toss", "Bouncing Blade", "Bouncing Bomb", "Bountiful Harvest", "Bramble Smash", "Breath of Life", "Breath of Light", "Broken Wings",
            "Brushmaker", "Bullet Time", "Burnout", "Burrow", "Burst Fire", "Bushwhack", "Buster Shot", "CH-2 Electron Storm Grenade", "CH-3X Lightning Grenade", "Call of the Forge God", "Call of the Void",
            "Cannon Barrage", "Captive Audience", "Caretaker’s Shrine", "Cataclysm", "Caustic Spittle", "Cease and Desist", "Celestial Blessing", "Chaaaaaaaarge!!!", "Chain Lash", "Chain of Corruption", "Chaos Storm",
            "Charm", "Chomp", "Chronobreak", "Chronoshift", "Chum the Waters", "Cocoon", "Collateral Damage", "Comet Spear", "Comeuppance", "Command: Attack", "Command: Dissonance", "Command: Protect",
            "Command: Shockwave", "Condemn", "Conflagration", "Conquering Sands", "Consume", "Contaminate", "Corrosive Charge", "Cosmic Binding", "Cosmic Radiance", "Counter Strike", "Courage", "Cozy Campfire", "Crescendo",
            "Crescent Guard", "Crescent Strike", "Cripple", "Crippling Strike", "Crowstorm", "Crunch", "Crushing Blow", "Crystal Slash", "Crystalline Exoskeleton", "Crystallize", "Cull the Meek", "Curse of the Black Mist",
            "Curse of the Sad Mummy", "Curtain Call", "Cyclone", "Daisy!", "Dance of Arrows", "Dancing Grenade", "Dark Binding", "Dark Matter", "Dark Passage", "Dark Procession", "Dark Sphere", "Dawning Shadow",
            "Dazzle", "Deadly Flourish", "Deadly Plumage", "Deadly Spines", "Death Lotus", "Death Mark", "Death Ray", "Death Sentence", "Death from Below", "Death’s Grasp", "Death’s Hand", "Deceive",
            "Decimate", "Decimating Smash", "Decisive Strike", "Defensive Ball Curl", "Defiance", "Defiant Dance", "Defile", "Demacian Justice", "Demacian Standard", "Demonic Ascension", "Denting Blows", "Depth Charge",
            "Despair", "Destiny", "Devastating Charge", "Devour", "Disdain", "Disintegrate", "Distortion", "Divine Judgement", "Dominus", "Double Daggers", "Double Up", "Dragon Strike", "Dragon’s Descent",
            "Dragon’s Rage", "Dredge Line", "Drunken Rage", "Duskbringer", "Duskwave", "Ebb and Flow", "Eclipse", "Edge of Ixtal", "Elastic Slingshot", "Electrical Surge", "Electro Harpoon", "Emperor’s Divide",
            "Empower", "Enchanted Crystal Arrow", "Encore", "End of the Line", "Endless Banquet", "Equinox", "Essence Flux", "Ethereal Chains", "Eulogy of the Isles", "Event Horizon", "Explosive Cask",
            "Explosive Charge", "Eye of Destruction", "Eye of the Storm", "Facebreaker", "Falling Star", "Fate Sealed", "Fate’s Call", "Fear Beyond Death", "Feast", "Featherstorm", "Feral Scream", "Ferromancy: Crash Down",
            "Ferromancy: Mount Up", "Final Chapter", "Final Hour", "Final Spark", "Five Point Strike", "Flair", "Flame Breath", "Flame Chompers!", "Flamespitter", "Flash Frost", "Flawless Duet", "Flay", "Fling", "Focused Resolve",
            "Footwork", "Force Pulse", "Force of Will", "Formless Blade", "Fox-Fire", "Fracture", "Frenzied Maul", "Frenzying Taunt", "Frostbite", "Frozen Domain", "Frozen Tomb", "Full Tilt", "Furious Bite", "Fury of the Sands",
            "GNAR!", "Gatling Gun", "Ghostwater Dive", "Glacial Fissure", "Glacial Path", "Glacial Prison", "Glacial Storm", "Gleaming Quill", "Glitterlance", "Going Rogue", "Golden Aegis", "Grand Challenge",
            "Grand Entrance", "Grand Starfall", "Grandmaster-At-Arms", "Grasping Roots", "Gravity Field", "Ground Slam", "H-28G Evolution Turret", "H-28Q Apex Turret", "Hail of Arrows", "Hallowed Mist", "Hallucinate",
            "Hammer Shock", "Handshake", "Harrowed Path", "Harsh Lesson", "Hate Spike", "Hawkshot", "Haymaker", "Headbutt", "Heart Zapper", "Heartbreaker", "Heightened Senses", "Help, Pix!", "Hemoplague", "Hero’s Entrance",
            "Heroic Charge", "Heroic Swing", "Hexplosive Minefield", "Hextech Micro-Rockets", "Hextech Rocket Swarm", "High Note", "Highlander", "Hijack", "Hookshot", "Hop", "Hostile Takeover", "Howling Gale",
            "Hymn of Valor", "Hyper Charge", "Hyper", "Icathian Rain", "Ice Shard", "Impale", "Incinerate", "Indestructible", "Infected Bonesaw", "Infernal Chains", "Inferno Trigger", "Infinite Duress", "Inner Flame",
            "Insanity Potion", "Inspire", "Iron Mantle", "Iron Will", "Jack in the Box", "Javelin Toss", "Jaws of the Beast", "Jousting", "Jubilant Veil", "Judgment", "Justice Punch", "Keeper’s Verdict", "Ki Burst",
            "Killer Instinct", "Kingslayer", "Knuckle Down", "Lamb’s Respite", "Last Breath", "Last Caress", "Last Embrace", "Last Rites", "Lay Waste", "Leap Strike", "Leap of Faith", "Leap", "Let’s Bounce!",
            "Life Form Disintegration Ray", "Light Binding", "Lightning Crash", "Lightning Field", "Lightning Rush", "Lilting Lullaby", "Living Artillery", "Living Shadow", "Looming Darkness", "Loyalty Program",
            "Lucent Singularity", "Lunar Rush", "Lunge", "Magical Journey", "Magnet Storm", "Make It Rain", "Malefic Visions", "Mantra", "Maximum Dosage", "Meditate", "Mega Adhesive", "Mega Inferno Bomb",
            "Miasma", "Mimic", "Missile Barrage", "Mistral Bolt", "Mocking Shout", "Molten Shield", "Monsoon", "Moonfall", "Moonlight Vigil", "Moonshot", "Mortal Steel", "Mounting Dread", "Mourning Mist",
            "Move Quick", "Mystic Shot", "Nature’s Grasp", "Needlework", "Nether Blade", "Nether Grasp", "Neurotoxin", "Nevermove", "Nimbus Strike", "Noxian Diplomacy", "Noxian Guillotine", "Noxious Blast", "Noxious Trap",
            "Ntofo Strikes", "Null Sphere", "Obliterate", "On the Hunt", "Onslaught of Shadows", "Onslaught", "Orb of Deception", "Overdrive", "Overload", "Paddle Star", "Pale Cascade", "Parallel Convergence", "Paranoia",
            "Parrrley", "Path Maker", "Perfect Execution", "Permafrost", "Personal Space", "Petrifying Gaze", "Phantom Undertow", "Phase Dive", "Phosphorus Bomb", "Pick a Card", "Pierce", "Piercing Arrow", "Piercing Darkness",
            "Piercing Light", "Pillar of Flame", "Pillar of Ice", "Piltover Peacemaker", "Plasma Fission", "Playful / Trickster", "Pocket Pistol", "Poison Trail", "Pop Blossom", "Portal Jump", "Pounce", "Powder Keg", "Power Fist",
            "Powerball", "Precision Protocol", "Preparation", "Prey Seeker", "Primal Howl", "Primal Surge", "Primordial Burst", "Prismatic Barrier", "Prowling Projectile", "Pulverize", "Purge", "Pyroclasm", "Queen’s Wrath",
            "Quickdraw", "Radiant Blast", "Ragnarok", "Rake", "Rampage", "Rampant Growth", "Ranger’s Focus", "Rapid Fire", "Rappel", "Razor Shuriken", "Realm Warp", "Realm of Death", "Reap", "Reaping Slash", "Reckless Swing",
            "Relentless Force", "Relentless Pursuit", "Remove Scurvy", "Rend", "Renewal", "Requiem", "Resonating Strike", "Rewind", "Ricochet", "Riftwalk", "Ring of Frost", "Riposte", "Riptide", "Rite of the Arcane",
            "Roar of the Slayer", "Rocket Grab", "Rocket Jump", "Rootcaller", "Royal Maelstrom", "Rune Prison", "Rupture", "Ruthless Predator", "Safeguard", "Sanguine Pool", "Sapling Toss", "Satchel Charge", "Savagery",
            "Scatter the Weak", "Scrap Shield", "Sear", "Searing Charge", "Seastone Trident", "Seismic Shard", "Seismic Shove", "Sentinel", "Sentry", "Shadow Assault", "Shadow Dash", "Shadow Slash", "Shadow Step", "Shadow Surge",
            "Shapesplitter", "Shattering Strike", "Shield Vault", "Shield of Daybreak", "Shield of Durand", "Shifting Sands", "Shock Blast", "Shocking Orb", "Shroud of Darkness", "Shunpo", "Shuriken Flip", "Sigil of Malice",
            "Silver Bolts", "Singularity", "Siphon Power", "Siphoning Strike", "Skip ‘n Slash", "Skittering Frenzy", "Sky Splitter", "Sleepy Trouble Bubble", "Slice and Dice", "Slicing Maelstrom", "Slipstream", "Smoke Screen",
            "Snip Snip!", "Snowball Barrage", "Soaring Slam", "Solar Flare", "Song of Celerity", "Sonic Wave", "Soul Furnace", "Soul Shackles", "Soul Unbound", "Soulflare", "Spark Surge", "Spectral Maw", "Spell Flux",
            "Spell Shield", "Spell Thief", "Spider Form", "Spinning Axe", "Spinning Slash", "Spirit Cleave", "Spirit Fire", "Spirit Rush", "Spirit of Dread", "Spirit’s Refuge", "Spray and Pray", "Stacked Deck",
            "Stand Aside", "Stand Behind Me", "Stand United", "Starcall", "Starfire Spellblade", "Starlight’s Touch", "Static Field", "Steadfast Presence", "Steel Tempest", "Stormbringer", "Stranglethorns",
            "Stretching Strikes", "Strut", "Subjugate", "Summon: Tibbers", "Super Mega Death Rocket!", "Supercharge", "Supreme Display of Talent", "Surround Sound", "Sweeping Blade", "Swipe", "Swirlseed", "Switcheroo!",
            "Tactical Sweep", "Takedown", "Tangle-Barbs", "Tantrum", "Taste Their Fear", "Tectonic Disruption", "Tempered Fate", "Tempest", "Tentacle Smash", "Terrashape", "Terrify", "Test of Spirit", "The Box",
            "The Culling", "The Darkin Blade", "The Equalizer", "The Hextech Ultimatum", "The Quickness", "The Show Stopper", "Thick Skin", "Threaded Volley", "Three Talon Strike", "Thrill of the Hunt", "Thunderclap",
            "Thundering Blow", "Thundering Shuriken", "Thundering Smash", "Tidal Wave", "Tidecaller’s Blessing", "Tides of Blood", "Time Bomb", "Time Warp", "Timewinder", "Titan’s Wrath", "To the Skies!", "Tongue Lash", "Tormented Shadow",
            "Tough It Out", "Toxic Shot", "Trample", "Transform Mercury Cannon", "Transform Mercury Hammer", "Transfusion", "Triggerseed", "Trueshot Barrage", "Tumble", "Tunnel", "Twilight Assault", "Twilight Shroud", "Twin Bite",
            "Twin Fang", "Twisted Advance", "Two-Shiv Poison", "UPGRADE!!!", "Ultra Mega Fire Kick", "Ultrashock Laser", "Umbral Dash", "Umbral Trespass", "Unbreakable Will", "Unbreakable", "Unburrow", "Undertow", "Undying Rage",
            "Unleashed Power", "Unraveled Earth", "Unspeakable Horror", "Unstable Matter", "Unstoppable Force", "Unstoppable Onslaught", "Urchin Strike", "Valkyrie", "Valor", "Vanguard’s Edge", "Vault Breaker", "Vault",
            "Venom Cask", "Venomous Bite", "Violent Tendencies", "Vision of Empire", "Void Assault", "Void Ooze", "Void Rift", "Void Rush", "Void Seeker", "Void Spike", "Void Surge", "Void Swarm", "Volatile Spiderling",
            "Volcanic Rupture", "Volley", "Vorpal Spikes", "Wall of Pain", "Wallop", "Warm Hugs", "Warrior Trickster", "Watch Out! Eep!", "Weaver’s Wall", "Whimsy", "Whiplash", "Whirling Death", "Wild Cards",
            "Wild Growth", "Wild Rush", "Wilding Claw", "Wind Becomes Lightning", "Wind Wall", "Winds of War", "Wingborne Storm", "Winter’s Bite", "Winter’s Wrath", "Wish", "Wither", "Wolf’s Frenzy",
            "World Ender", "Wuju Style", "Yordle Snap Trap", "You and Me!", "Zap!", "Zenith Blade", "Zephyr", "Zoomies"
        ].sort();

        const ROWS_PER_PAGE = 12;
        const ROWS = names.length;
        let body = $("div.section");
        let pageNum = 2;

        for (let p = 0; p < ROWS;) {
            let page = $("<div>").addClass(`page page-bg-0${pageNum % 7 + 1}`).appendTo(body);
            $('<div class="page-header"><span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span><span class="page-header-section-title">A: Abilities</span></div>')
                .appendTo(page);
            let content = $("<div>").addClass(`page-content page-0${pageNum - 1}`).appendTo(page);
            let table = $("<table>").addClass("icons").appendTo(content);
            let i = p;
            for (; i < (p + ROWS_PER_PAGE) && i < ROWS; i++) {
                let tr = $("<tr>").appendTo(table);
                $(`<th><img src="img/Abilities/${names[i].replace(":",";").replace(" / "," ").replace("’","'").replace("‘","'")}.png"></th>`).appendTo(tr);
                $("<th>").text(names[i]).appendTo(tr);
            }
            p = i;
            $("<div>").addClass("page-footer relative-footer").text(pageNum).appendTo(page);
            pageNum++;
        }
        $(".page-01 table").prepend($('<h2>Appendix A: Abilities</h2>'));
    });
    </script>
    <style>
        .dark table, table {
            margin: 1em auto;
            border: none;
        }

        .page-footer::before { content: 'Page '; }
        .page-footer::after { content: ' of 58'; }

        table { width: 100%; }
    </style>
</head>
<body>
    <div class="section">
        <div class="page page-bg-01">
            <div class="page-header">
                <span class="page-header-doc-title">Keep Talking and Nobody Explodes Mod</span>
                <span class="page-header-section-title">Abilities</span>
            </div>
            <div class="page-content">
                <img src="img/Component/Abilities.svg" class="diagram">
                <h2>On the Subject of Abilities</h2>
                <p class="flavour-text">“Imagine if I had a real weapon!” -Jax</p>
                <ul>
                    <li>The module exists of a screen and a selection box.</li>
                    <li>The screen will display an ability icon from <a href="https://www.leagueoflegends.com/en-us/champions/">League of Legends</a>.</li>
                    <li>Determine which name matches with the ability that is shown.</li>
                    <li>Press the left and right arrow buttons to cycle between possible answers.</li>
                    <li>Press the centre button to submit the current ability name.</li>
                    <li>Submitting the wrong ability name will cause a strike and a new ability will be generated.</li>
                </ul>
            </div>
            <div class="page-footer relative-footer">1</div>
        </div>
    </div>
</body>
</html>