Dangoware/confetti-box
1
0
Fork 0
mirror of https://github.com/Dangoware/confetti-box.git synced 2025-04-19 23:32:58 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved user interaction with button

Browse source
This commit is contained in:
G2-Games 2025-02-28 00:19:26 -06:00
parent aca4765b3d
commit 8990ec0e47
3 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
confetti-box/Cargo.toml
View file

@ -16,7 +16,7 @@ chrono = { version = "0.4", features = ["serde"] }
ciborium = "0.2" ciborium = "0.2"
file-format = { version = "0.26", features = ["reader"] } file-format = { version = "0.26", features = ["reader"] }
log = "0.4" log = "0.4"
maud = { version = "0.26", features = ["rocket"] } maud = { version = "0.27", features = ["rocket"] }
rand = "0.8" rand = "0.8"
rocket = { version = "0.5", features = ["json"] } rocket = { version = "0.5", features = ["json"] }
rocket_ws = "0.1" rocket_ws = "0.1"

6
confetti-box/web/main.css
View file

@ -55,7 +55,7 @@ hr {
h1 { h1 {
font-size: 3em; font-size: 3em;
font-weight: bolder; font-weight: bold;
} }
p { p {
@ -75,6 +75,7 @@ button {
cursor: pointer; cursor: pointer;
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 5px;
color: black;
} }
button.button { button.button {
@ -209,12 +210,15 @@ h2 code {
.upload_failed { .upload_failed {
color: black; color: black;
background-color: #ffb2ae; background-color: #ffb2ae;
a:link { a:link {
all: revert; all: revert;
} }
a:visited { a:visited {
all: revert; all: revert;
} }
a:hover { a:hover {
all: revert; all: revert;
} }

26
confetti-box/web/request.js
View file

@ -17,6 +17,11 @@ async function formSubmit() {
} }
async function dragDropSubmit(evt) { async function dragDropSubmit(evt) {
fileButton.style.backgroundColor = "#84E5FF";
fileButton.style.removeProperty("transitionDuration");
fileButton.style.removeProperty("scale");
fileButton.style.removeProperty("transitionTimingFunction");
const form = document.getElementById("uploadForm"); const form = document.getElementById("uploadForm");
const duration = form.elements.duration.value; const duration = form.elements.duration.value;
const maxSize = form.elements.fileUpload.dataset.maxFilesize; const maxSize = form.elements.fileUpload.dataset.maxFilesize;
@ -101,9 +106,13 @@ async function sendFiles(files, duration, maxSize) {
let end = performance.now(); let end = performance.now();
console.log(end - start); console.log(end - start);
try {
wakeLock.release().then(() => { wakeLock.release().then(() => {
wakeLock = null; wakeLock = null;
}); });
} catch (err) {
console.warn("Failed to modify wake-lock!");
}
} }
async function uploadFileChunked(file, duration, maxSize) { async function uploadFileChunked(file, duration, maxSize) {
@ -209,7 +218,7 @@ async function uploadFileWebsocket(file, duration, maxSize) {
new_uri += "/upload/websocket?name=" + file.name +"&size=" + file.size + "&duration=" + parseInt(duration); new_uri += "/upload/websocket?name=" + file.name +"&size=" + file.size + "&duration=" + parseInt(duration);
const socket = new WebSocket(new_uri); const socket = new WebSocket(new_uri);
const chunkSize = 10_000_000; const chunkSize = 5_000_000;
socket.addEventListener("open", (_event) => { socket.addEventListener("open", (_event) => {
for (let chunk_num = 0; chunk_num < Math.floor(file.size / chunkSize) + 1; chunk_num ++) { for (let chunk_num = 0; chunk_num < Math.floor(file.size / chunkSize) + 1; chunk_num ++) {
const offset = Math.floor(chunk_num * chunkSize); const offset = Math.floor(chunk_num * chunkSize);
@ -359,7 +368,20 @@ document.addEventListener("DOMContentLoaded", function(_event) {
let fileButton = document.getElementById("fileButton"); let fileButton = document.getElementById("fileButton");
document.addEventListener("drop", (e) => {e.preventDefault();}, false); document.addEventListener("drop", (e) => {e.preventDefault();}, false);
document.addEventListener("dragover", (e) => {e.preventDefault()}, false); document.addEventListener("dragover", (e) => {e.preventDefault()}, false);
fileButton.addEventListener("dragover", (e) => {e.preventDefault();}, false); fileButton.addEventListener("dragover", (e) => {
e.preventDefault();
fileButton.style.backgroundColor = "#9cff7e";
fileButton.style.transitionDuration = "0.5s";
fileButton.style.scale = "1.1";
fileButton.style.transitionTimingFunction = "cubic-bezier(.23,-0.09,.52,1.62)";
}, false);
fileButton.addEventListener("dragleave", (e) => {
e.preventDefault();
fileButton.style.backgroundColor = "#84E5FF";
fileButton.style.removeProperty("transitionDuration");
fileButton.style.removeProperty("scale");
fileButton.style.removeProperty("transitionTimingFunction");
}, false);
fileButton.addEventListener("drop", dragDropSubmit, false); fileButton.addEventListener("drop", dragDropSubmit, false);
initEverything(); initEverything();