diff options
| author | Star Rauchenberger <fefferburbia@gmail.com> | 2024-11-04 12:47:51 -0500 |
|---|---|---|
| committer | Star Rauchenberger <fefferburbia@gmail.com> | 2024-11-04 12:47:51 -0500 |
| commit | 8b81f0dd97139af79f692c683d4ed8a06144a1bd (patch) | |
| tree | 86fb0de42baa6e3a29236a95de815f8790e4c17a | |
| parent | 8375f92802d3aa7667bfc6f22f6d2a72361c9808 (diff) | |
| download | wizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.tar.gz wizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.tar.bz2 wizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.zip | |
Create static webapp
| -rw-r--r-- | web/index.html | 27 | ||||
| -rw-r--r-- | web/wizard.css | 18 | ||||
| -rw-r--r-- | web/wizard.js | 20 |
3 files changed, 65 insertions, 0 deletions
| diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..59b0013 --- /dev/null +++ b/web/index.html | |||
| @@ -0,0 +1,27 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html> | ||
| 3 | <head> | ||
| 4 | <title>Wizard Card Generator - Four Island</title> | ||
| 5 | <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | ||
| 6 | <script type="text/javascript" src="wizard.js"></script> | ||
| 7 | <link rel="stylesheet" href="wizard.css" /> | ||
| 8 | </head> | ||
| 9 | <body> | ||
| 10 | <div id="preamble"> | ||
| 11 | <h1>Wizard</h1> | ||
| 12 | <p><strong>Wizard</strong> is a tool that allows you to create joke images with Magic: the Gathering cards. Given some input text, Wizard will find a string of MtG cards whose names span the input text, and glue them together, to comedic effect.</p> | ||
| 13 | <p>Wizard was created by <a href="https://www.fourisland.com/">Hatkirby</a>, mostly in 2018, but was only connected to a webpage in 2024. It was inspired by a meme I saw in 2018, but I have no way of finding it because of the sands of time. The source code is available <a href="https://code.fourisland.com/wizard/">here</a>, which includes both a standalone generator, as well as the server that powers this webpage.</p> | ||
| 14 | </div> | ||
| 15 | <div id="form"> | ||
| 16 | <p> | ||
| 17 | <label for="card_text">Text:</label> | ||
| 18 | <input type="text" id="card_text"/> | ||
| 19 | </p> | ||
| 20 | <p> | ||
| 21 | <button type="button" id="send_request">Submit</button> | ||
| 22 | </p> | ||
| 23 | <p id="status"></p> | ||
| 24 | </div> | ||
| 25 | <ul id="images"></div> | ||
| 26 | </body> | ||
| 27 | </html> | ||
| diff --git a/web/wizard.css b/web/wizard.css new file mode 100644 index 0000000..bbfb2a1 --- /dev/null +++ b/web/wizard.css | |||
| @@ -0,0 +1,18 @@ | |||
| 1 | #preamble, #form { | ||
| 2 | width: 50%; | ||
| 3 | min-width: 600px; | ||
| 4 | margin: 0 auto 1em; | ||
| 5 | } | ||
| 6 | |||
| 7 | #images { | ||
| 8 | text-indent: 0; | ||
| 9 | } | ||
| 10 | |||
| 11 | #images li { | ||
| 12 | display: block; | ||
| 13 | text-align: center; | ||
| 14 | } | ||
| 15 | |||
| 16 | #images li img { | ||
| 17 | max-height: 400px; | ||
| 18 | } | ||
| diff --git a/web/wizard.js b/web/wizard.js new file mode 100644 index 0000000..758ff22 --- /dev/null +++ b/web/wizard.js | |||
| @@ -0,0 +1,20 @@ | |||
| 1 | $(document).ready(function() { | ||
| 2 | $("#send_request").on("click", function() { | ||
| 3 | var socket = new WebSocket("ws://localhost:9002"); | ||
| 4 | |||
| 5 | socket.addEventListener("open", (event) => { | ||
| 6 | const msg = {"cmd": "generate", "text": $("#card_text").val()}; | ||
| 7 | socket.send(JSON.stringify(msg)); | ||
| 8 | }); | ||
| 9 | |||
| 10 | socket.addEventListener("message", (event) => { | ||
| 11 | var msg = JSON.parse(event.data); | ||
| 12 | if (msg.hasOwnProperty("msg")) { | ||
| 13 | $("#status").html(msg["msg"]); | ||
| 14 | } | ||
| 15 | if (msg.hasOwnProperty("image")) { | ||
| 16 | $("#images").prepend("<li><img src=\"data:image/png;base64, " + msg["image"] + "\" /></li>"); | ||
| 17 | } | ||
| 18 | }); | ||
| 19 | }); | ||
| 20 | }); | ||