From 94fd9ebd9263a80dd7cf7c3641e41418404d18db Mon Sep 17 00:00:00 2001 From: syxanash Date: Mon, 16 Dec 2024 17:03:06 +0000 Subject: [PATCH] add dialog to show post --- assets/css/style.css | 10 +++++++++ assets/js/bluerain.js | 52 +++++++++++++++++++++++++++++++++++-------- index.html | 22 ++++++++++++++++-- 3 files changed, 73 insertions(+), 11 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 50c6c2d..2a39bbd 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -44,6 +44,7 @@ canvas { } .corner-buttons { + font-size: 1.2rem; position: absolute; bottom: 20px; right: 20px; @@ -95,6 +96,15 @@ canvas { width: 150px; } +.skeet-message-dialog { + overflow-wrap: break-word; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} + .credits { position: absolute; right: 10px; diff --git a/assets/js/bluerain.js b/assets/js/bluerain.js index 4e8e3ea..4a07f2b 100644 --- a/assets/js/bluerain.js +++ b/assets/js/bluerain.js @@ -3,9 +3,11 @@ const ws = new WebSocket( ); const cornerButtons = document.querySelector(".corner-buttons"); -const dialog = document.querySelector("dialog"); +const settingsDialog = document.getElementById("settings-dialog"); +const skeetDialog = document.getElementById("skeet-dialog"); const showButton = document.getElementById("showSettings"); -const closeButton = document.getElementById("closeButton"); +const settingsCloseButton = document.getElementById("settingsCloseButton"); +const skeetCloseButton = document.getElementById("skeetCloseButton"); const toggleFullscreenButton = document.getElementById("toggleFullscreen"); const pauseButton = document.getElementById("pauseButton"); const showEmojisButton = document.getElementById("showEmojisButton"); @@ -63,6 +65,7 @@ ctx.font = `${fontSize}px ${rainFonts[0]}`; const drops = Array(columns).fill(1); const skeets = Array(columns).fill(""); +const skeetsUrl = Array(columns).fill(""); const skeetsIndex = Array(columns).fill(0); const sanitizeForEmojis = (string) => @@ -91,15 +94,18 @@ function resizeCanvas() { const oldDrops = [...drops]; const oldSkeets = [...skeets]; + const oldSkeetsUrl = [...skeetsUrl]; const oldSkeetsIndex = [...skeetsIndex]; drops.length = newColumns; skeets.length = newColumns; + skeetsUrl.length = newColumns; skeetsIndex.length = newColumns; for (let i = 0; i < newColumns; i++) { drops[i] = oldDrops[i] || 1; skeets[i] = oldSkeets[i] || ""; + skeetsUrl[i] = oldSkeetsUrl[i] || ""; skeetsIndex[i] = oldSkeetsIndex[i] || 0; } @@ -174,10 +180,11 @@ function loop(timestamp) { requestAnimationFrame(loop); } -function addWord(word) { +function addPost(postMessage, postUrl) { for (let j = 0; j < drops.length; j++) { if (skeetsIndex[j] === 0 && skeets[j] === "") { - skeets[j] = word; + skeets[j] = postMessage; + skeetsUrl[j] = postUrl; skeetsIndex[j] = 0; drops[j] = 1; @@ -209,7 +216,13 @@ ws.addEventListener("message", async (event) => { const message = JSON.parse(event.data); if (message?.commit && message?.commit.operation === "create") { - addWord(message?.commit.record.text); + const postMessage = message?.commit.record.text; + + const did = message?.did; + const postId = message?.commit.rkey; + const postUrl = `https://bsky.app/profile/${did}/post/${postId}`; + + addPost(postMessage, postUrl); } }); @@ -240,7 +253,7 @@ showEmojisButton.addEventListener("click", () => { toggleFullscreenButton.addEventListener("click", () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); - dialog.close(); + settingsDialog.close(); toggleActiveButton(toggleFullscreenButton, true); } else if (document.exitFullscreen) { @@ -284,12 +297,33 @@ colorDropdown.addEventListener("change", () => { if (colors[selectedColor]) rainColor = colors[selectedColor]; }); +canvas.addEventListener("mousedown", function (e) { + let rect = canvas.getBoundingClientRect(); + let x = e.clientX - rect.left; + + const skeetMessageSpan = document.getElementById("skeetMessage"); + const skeetUrlSpan = document.getElementById("skeetUrl"); + + const selectedColumn = Math.floor(x / Math.floor(canvas.width / columns)); + + if (skeets[selectedColumn]) { + skeetMessageSpan.innerText = skeets[selectedColumn]; + skeetUrlSpan.innerHTML = `${skeetsUrl[selectedColumn]}`; + + skeetDialog.showModal(); + } +}); + showButton.addEventListener("click", () => { - dialog.showModal(); + settingsDialog.showModal(); +}); + +settingsCloseButton.addEventListener("click", () => { + settingsDialog.close(); }); -closeButton.addEventListener("click", () => { - dialog.close(); +skeetCloseButton.addEventListener("click", () => { + skeetDialog.close(); }); console.log("%chttps://github.com/syxanash/bluerain", "font-size: medium"); diff --git a/index.html b/index.html index 6c81718..e287de2 100644 --- a/index.html +++ b/index.html @@ -38,14 +38,32 @@ - + +
+
+
+ Post +
+
+ +
+
+
+
+

+ +
+
+
+ +
Settings
- +