Created
May 17, 2025 19:28
-
-
Save skoon/a7814c08c35afe09f009d2bf15eb4157 to your computer and use it in GitHub Desktop.
Dumb little deck drawing page
This file contains hidden or 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> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gamemaster deck helper</title> | |
| <style> | |
| .card { | |
| display:block; | |
| width:auto; | |
| height:auto; | |
| max-width:99%; | |
| max-height:auto; | |
| margin:10px auto; | |
| object-fit:contain; | |
| } | |
| #cardHolder { | |
| width:90%; | |
| height:90%; | |
| } | |
| </style> | |
| <script> | |
| let selectedDeck = "GMA Base VTT"; | |
| document.addEventListener("DOMContentLoaded", (event) => { | |
| var drawButton = document.querySelector('#draw'); | |
| drawButton.addEventListener("click", drawButtonClicked); | |
| var deckTypeSelector = document.querySelector("#deckType"); | |
| deckTypeSelector.addEventListener("change", newDeckSelected); | |
| }); | |
| function drawButtonClicked(event) { | |
| var newNum = Math.floor(Math.random() * 119) + 1; | |
| const newCard = "images/" + selectedDeck +"/" + selectedDeck +"_Part" + newNum + ".jpg"; | |
| console.log(newCard); | |
| var cardImage = document.querySelector(".card"); | |
| cardImage.src = newCard; | |
| } | |
| function newDeckSelected(event) { | |
| console.log(event.target.value); | |
| selectedDeck = event.target.value; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="cardHolder"> | |
| <select id="deckType"> | |
| <option value="GMA Base VTT">Base</option> | |
| <option value="GMA Fantasy VTT">Fantasy</option> | |
| <option value="GMA Horror VTT">Horror</option> | |
| <option value="GMA SciFi VTT">SciFi</option> | |
| <option value="GMA Steampunk VTT">Steampunk</option> | |
| </select> | |
| <button id="draw">Draw</button> | |
| <img class="card" src="images/GMA Base VTT/GMA Base VTT_Part1.jpg"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment