Last active
March 31, 2020 10:48
-
-
Save hsjunnesson/04d90fe5890442ce522f0453a2c491e3 to your computer and use it in GitHub Desktop.
A web tool to show Seraphon Warscrolls. Just download to your computer and open in a browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
| <title>Seraphon Warscrolls</title> | |
| <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> | |
| <script> | |
| const data = [ | |
| ["Slann Starmaster", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Slann-Starmaster-en.pdf"], | |
| ["Lord Kroak", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Lord-Kroak-en.pdf"], | |
| ["Saurus Oldblood", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Oldblood-en.pdf"], | |
| ["Saurus Sunblood", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Sunblood-en.pdf"], | |
| ["Saurus Oldblood on Carnosaur", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Oldblood-on-Carnosaur-en.pdf"], | |
| ["Saurus Eternity Warden", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Eternity-Warden-en.pdf"], | |
| ["Saurus Guard", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Guard-en.pdf"], | |
| ["Saurus Scar-Veteran on Carnosaur", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Scar-Veteran-on-Carnosaur-en.pdf"], | |
| ["Saurus Scar-Veteran on Cold One", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Scar-Veteran-on-Cold-One-en.pdf"], | |
| ["Saurus Warriors", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Warriors-en.pdf"], | |
| ["Saurus Astrolith Bearer", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Astrolith-Bearer-en.pdf"], | |
| ["Saurus Knights", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Saurus-Knights-en.pdf"], | |
| ["Skink Starseer", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Skink-Starseer-en.pdf"], | |
| ["Skink Starpriest", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Skink-Starpriest-en.pdf"], | |
| ["Skink Oracle on Troglodon", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Skink-Oracle-on-Troglodon-en.pdf"], | |
| ["Skink Priest", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Skink-Priest-en.pdf"], | |
| ["Skinks", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Skinks-en.pdf"], | |
| ["Chameleon Skinks", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Chameleon-Skinks-en.pdf"], | |
| ["Salamander Hunting Pack", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Salamander-Hunting-Pack-en.pdf"], | |
| ["Razordon Hunting Pack", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Razordon-Hunting-Pack-en.pdf"], | |
| ["Kroxigor", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Kroxigors-en.pdf"], | |
| ["Bastiladon", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Bastiladon-en.pdf"], | |
| ["Terradon Riders", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Terradon-Riders-en.pdf"], | |
| ["Ripperdactyl Riders", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Ripperdactyl-Chief-en.pdf"], | |
| ["Terradon Chief", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Terradon-Chief-en.pdf"], | |
| ["Ripperdactyl Chief", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Ripperdactyl-Chief-en.pdf"], | |
| ["Stegadon", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Stegadon-en.pdf"], | |
| ["Engine of the Gods", "https://www.games-workshop.com/resources/PDF/AoS_Warscrolls//Seraphon_warscroll_Engine-of-the-Gods-en.pdf"], | |
| ] | |
| function get_filter() { | |
| return JSON.parse(localStorage ? localStorage["filter"] || "[]" : "[]") | |
| } | |
| function setup_filter() { | |
| const filter = get_filter() | |
| for (const [title, url] of data) { | |
| const checked = filter.length == 0 || filter.includes(title) | |
| $("#filter").append($(` | |
| <div class="form-group"> | |
| <div class="form-check"> | |
| <input type="checkbox" class="form-check-input" id="${title}" ${checked ? "checked=true" : ""}> | |
| <label class="form-check-label" for="${title}">${title}</label> | |
| </div> | |
| </div> | |
| `)) | |
| } | |
| $(".dropdown-menu").click(function(e) { | |
| e.stopPropagation() | |
| }) | |
| } | |
| function check_all_filters() { | |
| $("#filter input:checkbox").prop('checked', true) | |
| } | |
| function clear_filter() { | |
| $("#filter input:checkbox").prop('checked', false) | |
| } | |
| function apply_filters() { | |
| let filter = $("#filter :checked").map(function() {return this.id}).get() | |
| if (localStorage) { | |
| localStorage["filter"] = JSON.stringify(filter) | |
| } | |
| if (filter.length == 0) { | |
| filter = null | |
| } | |
| $("#filter").closest("nav").dropdown('hide') | |
| update_warscrolls(filter) | |
| } | |
| function update_warscrolls(filter) { | |
| const Item = function(title, url) { | |
| return ` | |
| <div class="col mb-4"> | |
| <div class="card"> | |
| <iframe class="card-img-top" style="height: 22.25vw" src="${url}#view=FitH&toolbar=0"></iframe> | |
| </div> | |
| </div> | |
| ` | |
| } | |
| $("#collection").empty() | |
| for (const [title, url] of data) { | |
| if (!filter || filter.includes(title)) { | |
| $("div#collection").append(Item(title, url)) | |
| } | |
| } | |
| } | |
| $(function() { | |
| setup_filter() | |
| update_warscrolls(get_filter()) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> | |
| <h1 class="my-0 mr-md-auto font-weight-normal">Seraphon Warscrolls</h1> | |
| <nav class="my-2 my-md-0 mr-md-3"> | |
| <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Filter</button> | |
| <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | |
| <form id="filter" class="px-4 py-3"> | |
| </form> | |
| <div class="dropdown-divider"></div> | |
| <button class="dropdown-item" onclick="check_all_filters()">Check all</button> | |
| <button class="dropdown-item" onclick="clear_filter()">Clear selection</button> | |
| <button class="dropdown-item" onclick="apply_filters()">Apply</button> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="container-fluid"> | |
| <div id="collection" class="row row-cols-1 row-cols-md-3"> | |
| </div> | |
| <hr class="featurette-divider" /> | |
| </div> | |
| <footer class="container-fluid"> | |
| <p class="font-weight-light"> | |
| This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. | |
| All trademarks, logos, and copyrights are property of their respective owners.</p> | |
| </div> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment