User Preview, Random Color, Custom Hex on USER SET Modal

client/index.html

@@ -166,9 +166,12 @@
       </div>
       <div id="age" class="dialog">
         <h4>Important Notice</h4>
-        <p>In accordance with our updated Terms of Service, MultiplayerPiano.net is implementing a mandatory Age Verification Protocol (AVP) effective immediately. Our Trust & Safety team now requires all users to confirm their date of birth before connecting to our servers.</p>
+        <p>In accordance with our updated Terms of Service, MultiplayerPiano.net is implementing a mandatory Age
+          Verification Protocol (AVP) effective immediately. Our Trust & Safety team now requires all users to confirm
+          their date of birth before connecting to our servers.</p>
         <p style="font-size: 14pt;">- The MultiplayerPiano.net Trust & Safety Team</p>
-        <p><label>Date of Birth: &nbsp;<input style="width: 48px;" type="text" name="year" maxlength="4" value="2026"></label></p>
+        <p><label>Date of Birth: &nbsp;<input style="width: 48px;" type="text" name="year" maxlength="4"
+              value="2026"></label></p>
         <p><a class="read-more" target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Read more...</a></p>
         <button class="submit">SUBMIT</button>
       </div>
@@ -195,8 +198,17 @@ <h4>Important Notice</h4>
         <button class="submit">APPLY</button>
       </div>
       <div id="rename" class="dialog">
-        <p><input type="text" name="name" placeholder="My Fancy New Name" maxlength="40" class="text" />
+        <div style="display: block; background-color: #abcdef;" id="namediv-preview"
+          class="name-preview" title="This is an authorized bot." translated="">
+          <div class="nametag" style="background-color: rgb(85, 85, 255);" id="nametag-preview">BOT</div>
+          <div class="nametext" id="nametext-preview" style="float: left;">aeiou</div>
+        </div>
+        <p>
+          <input type="text" name="name" placeholder="My Fancy New Name" maxlength="40" class="text" style="font-size: 25px; height: 25px;" />
           <input type="color" name="color" placeholder="" maxlength="7" class="color" />
+          <hr>
+          <button id="rename-random-color" class="rename-random">Random Color</button>
+          <input type="text" name="hexColor" placeholder="#abcdef" class="rename-hex">
         </p>
         <button class="submit">USER SET</button>
       </div>
@@ -293,4 +305,4 @@ <h4>Important Notice</h4>
   <script src="/script.js"></script>
 </body>
 
-</html>
+</html>

client/screen.css

@@ -99,6 +99,29 @@ table {
     max-width: 100%;
 }
 
+.name-preview {
+    font-size: 12px;
+    padding: 4px;
+    margin: auto;
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    min-width: 50px;
+    width: fit-content;
+    text-align: center;
+    cursor: pointer;
+    min-height: 15px;
+    line-height: 15px;
+}
+
+.name-preview::after {
+    content: "Preview";
+    position: absolute;
+    top: 1px;
+    font-size: 10px;
+    left: 45%;
+}
+
 #names .name.me:after {
     content: "Me";
     position: absolute;
@@ -996,6 +1019,26 @@ input[type="range"]:hover {
     -o-transition: all .25s;
 }
 
+.dialog#rename {
+    height: 113px;
+}
+
+.rename-hex {
+    width: 60px;
+}
+
+.rename-random, .rename-hex {
+    background: #333;
+    color: white;
+    border: 1px solid #fff;
+    border-radius: 2px;
+}
+
+.rename-hex.wrong {
+    border: 1px solid #fff;
+    color: red;
+}
+
 #language {
     height: 50px;
 }
@@ -1748,4 +1791,4 @@ code {
     left: 90%;
     -webkit-animation-delay: 3s, 1.5s;
     animation-delay: 3s, 1.5s
-}
+}

client/script.js

@@ -1286,7 +1286,10 @@ $(function () {
             "You are too young to use MultiplayerPiano.net. Users must be 13 years of age or older to use the platform. Please read our updated Terms of Service.",
           );
 
+        if (age < 0) throw new Error("The Terminator");
+
         localStorage.age = age;
+        localStorage.dob = year;
         closeModal();
         gClient.start();
       } catch (err) {
@@ -1304,6 +1307,15 @@ $(function () {
     });
 
     gClient.emit("status", "Verifying age...");
+
+    (() => {
+      if (!localStorage.age) return;
+      const year = parseInt(localStorage.dob);
+      console.log(year);
+      console.log(isNaN(year));
+      if (!isNaN(year)) $("#age input[name=year]").val(year);
+    })();
+
     openModal("#age");
 
     $("#room-settings").append(
@@ -1377,10 +1389,13 @@ $(function () {
       spoop();
     }, Math.random() * 36e5);
 
+    // this is causing the sound selector to break for some people
+    /*
     gSoundSelector.addPacks([
       "https://hri7566.github.io/Dog/",
       "https://hri7566.github.io/RobloxDeathSound/",
     ]);
+    */
   })();
 
   // Show moderator buttons
@@ -1396,6 +1411,7 @@ $(function () {
       document.getElementById("motd-text").innerHTML = msg.motd;
       openModal("#motd");
       $(document).on("keydown", modalHandleEsc);
+      updatePreview(msg.u)
       var user_interact = function (evt) {
         if (
           (evt.path || (evt.composedPath && evt.composedPath())).includes(
@@ -1422,6 +1438,114 @@ $(function () {
 
   var participantTouchhandler; //declare this outside of the smaller functions so it can be used below and setup later
 
+  // Handle Preview
+  function updatePreview(userObject) {
+    var previewDiv = document.querySelector("#namediv-preview")
+    var previewTag = document.querySelector("#nametag-preview")
+    var previewName = document.querySelector("#nametext-preview")
+
+    const nameInput = document.querySelector("#rename input[name=name]");
+    const colorInput = document.querySelector("#rename input[name=color]");
+    const hexInput = document.querySelector("#rename input[name=hexColor]");
+
+    if(!userObject.name && !userObject.color) return;
+
+    previewName.innerText = userObject.name;
+    nameInput.value = userObject.name;
+    hexInput.value = userObject.color;
+    colorInput.value = userObject.color;
+    previewDiv.style["background-color"] = userObject.color;
+
+    if(userObject.tag) {
+      switch (typeof userObject.tag) {
+        case "object":
+          if(!userObject.tag.text || !userObject.tag.color) return;
+          previewTag.innerText = userObject.tag.text;
+          previewTag["background-color"] = userObject.tag.color;
+          break;
+        case "string": 
+          previewTag.innerText = userObject.tag;
+          previewTag["background-color"] = tagColor(userObject.tag)
+          break;
+        default:
+          previewTag.style.display = "none"; //don't render because userobject is broken or there's just nothing there
+          break;
+      }
+    } else {
+      previewTag.style.display = "none";
+    }
+  }
+
+  //event handlers for preview
+  (function () {
+    function isValidHex(hex) {
+      if (typeof hex !== 'string' || hex[0] !== '#' || (hex.length !== 4 && hex.length !== 7)) {
+        return false;
+      }
+      const validChars = '0123456789abcdefABCDEF';
+      for (let i = 1; i < hex.length; i++) {
+        if (validChars.indexOf(hex[i]) === -1) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    const nameInput = document.querySelector("#rename input[name=name]");
+    const colorInput = document.querySelector("#rename input[name=color]");
+    const hexInput = document.querySelector("#rename input[name=hexColor]");
+    const randomHexBtn = document.querySelector("#rename button[id=rename-random-color]");
+
+    randomHexBtn.addEventListener("click", () => {
+      const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+
+      hexInput.value = randomColor;
+
+      updatePreview({
+        name: nameInput.value, 
+        color: hexInput.value,
+        tag: gClient.user.tag || null
+      });
+    })
+
+    hexInput?.addEventListener("input", (v) => {
+      const target = v.target;
+
+      if(!isValidHex(target.value)) {
+        hexInput.classList.add("wrong")
+        return;
+      } else {
+        hexInput.classList.remove("wrong")
+      }
+
+      updatePreview({
+        name: nameInput.value, 
+        color: target.value,
+        tag: gClient.user.tag || null
+      });
+    });
+
+    nameInput?.addEventListener("input", (v) => {
+      const target = v.target;
+
+      updatePreview({
+        name: target.value, 
+        color: colorInput.value,
+        tag: gClient.user.tag || null
+      });
+    });
+
+    colorInput?.addEventListener("input", (v) => {
+      const target = v.target;
+
+      updatePreview({
+        name: nameInput.value, 
+        color: target.value,
+        tag: gClient.user.tag || null
+      });
+    })
+  })();
+
   // Handle changes to participants
   (function () {
     function setupParticipantDivs(part) {
@@ -1659,6 +1783,9 @@ $(function () {
       if (shouldHideUser(part)) return;
       var name = part.name || "";
       var color = part.color || "#777";
+      if(part.id == gClient.user.id) {
+        updatePreview(part)
+      }
       setupParticipantDivs(part);
       $(part.cursorDiv).find(".name .nametext").text(name);
       $(part.cursorDiv).find(".name").css("background-color", color);
@@ -2516,6 +2643,11 @@ $(function () {
         var id = target.participantId;
         if (id == gClient.participantId) {
           openModal("#rename", "input[name=name]");
+          updatePreview({
+            name: gClient.user.name,
+            color: gClient.user.color,
+            tag: gClient.user.tag || null
+          })
           setTimeout(function () {
             $("#rename input[name=name]").val(
               gClient.ppl[gClient.participantId].name,