add dialog to show post

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;

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 = `<a href="${skeetsUrl[selectedColumn]}" target="_blank">${skeetsUrl[selectedColumn]}</a>`;
+
+    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");

index.html

@@ -38,14 +38,32 @@
     <button id="showSettings">Settings</button>
     <button id="pauseButton">Pause</button>
   </div>
-  <dialog class="dialog-style" style="background-color: #00000045 !important;">
+  <dialog id="skeet-dialog" class="dialog-style" style="background-color: #00000045 !important;">
+    <div class="window active" style="background-color: #00000045 !important;">
+      <div class="title-bar">
+        <div class="title-bar-text">
+          Post
+        </div>
+        <div class="title-bar-buttons">
+          <button id="skeetCloseButton" data-close=""></button>
+        </div>
+      </div>
+      <div class="window-body" style="background-color: #00000045 !important;">
+        <div class="body-style skeet-message-dialog" style="background-color: #00000045 !important;">
+          <span id="skeetMessage"></span><br><br>
+          <span id="skeetUrl"></span>
+        </div>
+      </div>
+    </div>
+  </dialog>
+  <dialog id="settings-dialog" class="dialog-style" style="background-color: #00000045 !important;">
     <div class="window active" style="background-color: #00000045 !important;">
       <div class="title-bar">
         <div class="title-bar-text">
           Settings
         </div>
         <div class="title-bar-buttons">
-          <button id="closeButton" data-close=""></button>
+          <button id="settingsCloseButton" data-close=""></button>
         </div>
       </div>
       <div class="window-body" style="background-color: #00000045 !important;">