Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -293,4 +305,4 @@ <h4>Important Notice</h4>
<script src="/script.js"></script>
</body>

</html>
</html>
45 changes: 44 additions & 1 deletion client/screen.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -1748,4 +1791,4 @@ code {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s
}
}
132 changes: 132 additions & 0 deletions client/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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(
Expand Down Expand Up @@ -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
Expand All @@ -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(
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down