diff --git a/v1-com-officielle/glitcher/glitcher.css b/v1-com-officielle/glitcher/glitcher.css index 07f1fd5..c11813c 100644 --- a/v1-com-officielle/glitcher/glitcher.css +++ b/v1-com-officielle/glitcher/glitcher.css @@ -28,6 +28,12 @@ body, html { margin: 0; } +body { + width: 100vw; + height: 100vh; + overflow: hidden; +} + :root { --back-color: black; --main-color: white; @@ -41,6 +47,17 @@ body, html { font-weight: bold; } +body > *{ + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 15px; +} + +#welcome-panel { + text-align: center; +} + h1 { font-family: 'lineal', sans-serif; font-weight: bolder; @@ -48,8 +65,8 @@ h1 { #ui-canvas { display: block; + max-width: calc(100vw - 30px); + max-height: calc(100vh - 30px); margin-left: auto; margin-right: auto; - max-width: 100vw; - max-height: 100vh; } \ No newline at end of file diff --git a/v1-com-officielle/glitcher/glitcher.js b/v1-com-officielle/glitcher/glitcher.js index 99bd0dc..df39c63 100644 --- a/v1-com-officielle/glitcher/glitcher.js +++ b/v1-com-officielle/glitcher/glitcher.js @@ -9,11 +9,16 @@ async function updateFromForm(){ let image = data.get("image") if(image.size > 0){ - await UI_GLITCHER.setImage(image) - UI_GLITCHER.clearGlitch() + if(UI_GLITCHER.currentImageFile != image){ + await UI_GLITCHER.setImage(image) + UI_GLITCHER.clearGlitch() + } } else { UI_GLITCHER.clearImage() } + + document.getElementById("welcome-panel").hidden = image.size > 0 + document.getElementById("glitch-panel").hidden = image.size == 0 UI_GLITCHER.render() } @@ -27,6 +32,21 @@ FORM.addEventListener("submit", e => { updateFromForm() }) +FORM.addEventListener("reset", e => { + FORM.elements["image"].value = "" + updateFromForm() + }) + +document.getElementById("download-btn").addEventListener("click", async e => { + e.preventDefault(); + let data = await UI_GLITCHER.toBlob("image/jpeg", 0.9); + let a = document.createElement('a') + a.href = URL.createObjectURL(data) + a.download = UI_GLITCHER.currentImageFile.name + a.click() + setTimeout(() => URL.revokeObjectURL(a.href), 10000) +}) + CANVAS.addEventListener("pointerdown", e => { let pointerId = e.pointerId; diff --git a/v1-com-officielle/glitcher/index.html b/v1-com-officielle/glitcher/index.html index df9a2d5..a5ac87a 100644 --- a/v1-com-officielle/glitcher/index.html +++ b/v1-com-officielle/glitcher/index.html @@ -15,8 +15,12 @@ -