summary refs log tree commit diff stats
path: root/web
diff options
context:
space:
mode:
authorStar Rauchenberger <fefferburbia@gmail.com>2024-11-04 12:47:51 -0500
committerStar Rauchenberger <fefferburbia@gmail.com>2024-11-04 12:47:51 -0500
commit8b81f0dd97139af79f692c683d4ed8a06144a1bd (patch)
tree86fb0de42baa6e3a29236a95de815f8790e4c17a /web
parent8375f92802d3aa7667bfc6f22f6d2a72361c9808 (diff)
downloadwizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.tar.gz
wizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.tar.bz2
wizard-8b81f0dd97139af79f692c683d4ed8a06144a1bd.zip
Create static webapp
Diffstat (limited to 'web')
-rw-r--r--web/index.html27
-rw-r--r--web/wizard.css18
-rw-r--r--web/wizard.js20
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});