From e7747d48a2b9d5f172be9e7102c3ac5e9d22f9dd Mon Sep 17 00:00:00 2001 From: Andrew Opalach Date: Fri, 12 Dec 2025 15:39:20 -0500 Subject: PROJECT 04 --- website/static/index.html | 5 +++-- website/static/index.js | 34 ++++++++++++++++++++++++---------- website/static/style.css | 9 +++++++++ website/static/template.html | 4 ++-- 4 files changed, 38 insertions(+), 14 deletions(-) (limited to 'website/static') diff --git a/website/static/index.html b/website/static/index.html index 6394fcf..73d5cb9 100644 --- a/website/static/index.html +++ b/website/static/index.html @@ -8,13 +8,14 @@
- + +

-
+
diff --git a/website/static/index.js b/website/static/index.js index 22bfc20..869eb0b 100644 --- a/website/static/index.js +++ b/website/static/index.js @@ -1,25 +1,39 @@ -const IP = "http://:12444"; +function onUsernameChanged(usernameInput) { + var preview = document.getElementById('preview'); + if (!usernameInput.value) { + preview.src = ''; + return false; + } + preview.src = '/static/capes/' + usernameInput.value + '.png?t=' + new Date().getTime(); + return true; +} function init() { - document.getElementById('file').addEventListener('change', handleFileSelect, false); + var filePicker = document.getElementById('file'); + filePicker.addEventListener('change', handleFileSelect, false); + var usernameInput = document.getElementById('username'); + filePicker.disabled = !onUsernameChanged(usernameInput); + usernameInput.addEventListener('input', (event) => { + filePicker.disabled = !onUsernameChanged(event.target); + }); } function handleFileSelect(event) { - var username = document.getElementById('username').value - if (!username) { - return; - } + var username = document.getElementById('username').value; + if (!username) return; const reader = new FileReader(); - const url = IP + '/capes'; var formData = new FormData(); formData.append('username', username); formData.append('data', event.target.files[0]); - fetch(url, { - method : "POST", + fetch('/capes', { + method : 'POST', body: formData }).then((response) => { if (response.ok) { - document.getElementById('preview').src = IP + '/static/capes/' + username + '.png'; + document.getElementById('preview').src = '/static/capes/' + username + '.png?t=' + new Date().getTime(); + document.getElementById('status').innerText = 'Upload success.'; + } else { + document.getElementById('status').innerText = 'Failed to upload cape. Image not a .png? or greater than 1024x1024?'; } }); } diff --git a/website/static/style.css b/website/static/style.css index 242ced7..0bab63f 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -14,6 +14,15 @@ image-rendering: pixelated; } +#status { + margin: inherit; + padding: 4px; +} + +#status:empty { + display: none; +} + #template { width: 100%; display: flex; diff --git a/website/static/template.html b/website/static/template.html index f7d62de..dade2f9 100644 --- a/website/static/template.html +++ b/website/static/template.html @@ -7,7 +7,7 @@
- +

    Top

    @@ -48,7 +48,7 @@
-

Right click and "Save Image As...", edit, then upload here.

+

Right click and "Save Image As...", edit, then upload here.

If you don't want to edit the Elytra texture, you can crop it out.

Feel free to scale. Only use integer scaling (Multiply width/height by a whole number).

-- cgit v1.2.3-101-g0448