mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2026-01-12 02:14:34 +08:00
reworked prelobby
This commit is contained in:
Jack
parent
f386bc5703
commit
311e658340
4 changed files with 174 additions and 7 deletions
|
|
@ -2303,6 +2303,62 @@ key {
|
|||
color: var(--sub-color);
|
||||
}
|
||||
}
|
||||
.prelobby{
|
||||
display: grid;
|
||||
grid-template-areas: "welcome welcome"
|
||||
"mm priv";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
.welcome{
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.matchmaking{
|
||||
grid-area: mm;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
.title{
|
||||
color: var(--sub-color);
|
||||
}
|
||||
}
|
||||
.privateRooms{
|
||||
grid-area: priv;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
.title{
|
||||
color: var(--sub-color);
|
||||
}
|
||||
#createPrivateRoom{
|
||||
padding: 2rem 0;
|
||||
}
|
||||
}
|
||||
#joinByCode{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
.button{
|
||||
padding: .7rem;
|
||||
}
|
||||
input{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
.customInput{
|
||||
color: var(--sub-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5rem;
|
||||
.byte{
|
||||
transition: .125s;
|
||||
&.focused{
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.lobby{
|
||||
display: grid;
|
||||
grid-template-areas: "currentsettings lobbyButtons"
|
||||
|
|
@ -2359,6 +2415,20 @@ key {
|
|||
grid-area: inviteLink;
|
||||
text-align: center;
|
||||
color: var(--sub-color);
|
||||
.title{
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.text{
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
color: var(--main-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.link{
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.userlist{
|
||||
grid-area: userlist;
|
||||
|
|
|
|||
|
|
@ -3012,8 +3012,29 @@
|
|||
<div class="text">Waiting for login</div>
|
||||
</div>
|
||||
<div class="prelobby hidden">
|
||||
<div id="joinRandomRoom" class="button">Join random room</div>
|
||||
<div id="createPrivateRoom" class="button">Create room</div>
|
||||
<div class="welcome">
|
||||
Welcome to <span style="color: var(--main-color);">Tribe</span>.
|
||||
</div>
|
||||
<div class="matchmaking">
|
||||
<!-- <div id="joinRandomRoom" class="button">Join random room</div> -->
|
||||
<div class="title">matchmaking</div>
|
||||
<span style="text-align:center;color: var(--sub-color);">Coming soon...</span>
|
||||
</div>
|
||||
<div class="privateRooms">
|
||||
<div class="title">private rooms</div>
|
||||
<div id="createPrivateRoom" class="button"><i class="fas fa-users"></i>Create room</div>
|
||||
<div id="joinByCode">
|
||||
<div class="customInput">
|
||||
<span class="byte">--</span>
|
||||
/
|
||||
<span class="byte">--</span>
|
||||
/
|
||||
<span class="byte">--</span>
|
||||
</div>
|
||||
<input type="text" placeholder="Code" maxlength="6" class=""><div class="button"><i class="fas fa-chevron-right"></i>Join room</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="lobby hidden">
|
||||
<div class="currentSettings">
|
||||
|
|
@ -3027,14 +3048,22 @@
|
|||
<div class="title">chat</div>
|
||||
<div class="messages"></div>
|
||||
<div class="input">
|
||||
<input type="text">
|
||||
<input type="text" placeholder="Send a message">
|
||||
</div>
|
||||
</div>
|
||||
<div class="userlist">
|
||||
<div class="title">users</div>
|
||||
<div class="list"></div>
|
||||
</div>
|
||||
<div class="inviteLink"></div>
|
||||
<div class="inviteLink">
|
||||
<div class="code">
|
||||
<div class="title">
|
||||
room code
|
||||
</div>
|
||||
<div class="text"></div>
|
||||
</div>
|
||||
<div class="link"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -289,8 +289,9 @@ MP.socket.on('mp_room_joined', data => {
|
|||
//user is in prelobby and joined a room
|
||||
mp_applyRoomConfig(MP.room.config);
|
||||
mp_refreshConfig();
|
||||
let link = "www.monkey-type.com/tribe" + MP.room.id.substring(4);
|
||||
$(".pageTribe .lobby .inviteLink").text(link);
|
||||
let link = "www.monkeytype.com/tribe" + MP.room.id.substring(4);
|
||||
$(".pageTribe .lobby .inviteLink .code .text").text(MP.room.id.substring(5));
|
||||
$(".pageTribe .lobby .inviteLink .link").text(link);
|
||||
swapElements($(".pageTribe .prelobby"), $(".pageTribe .lobby"), 250, () => {
|
||||
MP.state = 10;
|
||||
// $(".pageTribe .prelobby").addClass('hidden');
|
||||
|
|
@ -367,4 +368,71 @@ $(".pageTribe .lobby .chat .input input").keyup(e => {
|
|||
});
|
||||
$(".pageTribe .lobby .chat .input input").val('');
|
||||
}
|
||||
})
|
||||
|
||||
$(".pageTribe .lobby .inviteLink .text").click(async e => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(
|
||||
$(".pageTribe .lobby .inviteLink .text").text()
|
||||
);
|
||||
showNotification("Code copied", 1000);
|
||||
} catch (e) {
|
||||
showNotification("Could not copy to clipboard: " + e, 5000);
|
||||
}
|
||||
})
|
||||
|
||||
$(".pageTribe .lobby .inviteLink .link").click(async e => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(
|
||||
$(".pageTribe .lobby .inviteLink .link").text()
|
||||
);
|
||||
showNotification("Link copied", 1000);
|
||||
} catch (e) {
|
||||
showNotification("Could not copy to clipboard: " + e, 5000);
|
||||
}
|
||||
})
|
||||
|
||||
$(".pageTribe .prelobby #joinByCode .customInput").click(e => {
|
||||
$(".pageTribe .prelobby #joinByCode input").focus();
|
||||
})
|
||||
|
||||
$(".pageTribe .prelobby #joinByCode input").focus(e => {
|
||||
$(".pageTribe .prelobby #joinByCode .customInput .byte").addClass('focused');
|
||||
})
|
||||
|
||||
$(".pageTribe .prelobby #joinByCode input").focusout(e => {
|
||||
$(".pageTribe .prelobby #joinByCode .customInput .byte").removeClass('focused');
|
||||
})
|
||||
|
||||
$(".pageTribe .prelobby #joinByCode .button").click(e => {
|
||||
let code = $(".pageTribe .prelobby #joinByCode input").val();
|
||||
if (code.length !== 6) {
|
||||
showNotification("Code required", 2000);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
})
|
||||
|
||||
$(".pageTribe .prelobby #joinByCode input").keyup(e => {
|
||||
setTimeout(t => {
|
||||
// let t1 = "xx";
|
||||
// let t2 = "xx";
|
||||
// let t2 = "xx";
|
||||
let v = $(".pageTribe .prelobby #joinByCode input").val();
|
||||
// let text = `${v[0] == undefined ? 'x' : v[0]}`;
|
||||
// let iv = 0;
|
||||
// for (let i = 0; i < 8; i++){
|
||||
// text[i] = v[iv] == undefined ? 'x' : v[iv];
|
||||
// if(![2,5].includes(i)) iv++;
|
||||
// }
|
||||
let code = [];
|
||||
for (let i = 0; i < 6; i++) {
|
||||
let char = v[i] == undefined ? '-' : v[i];
|
||||
code.push(char);
|
||||
}
|
||||
let text = code.join('');
|
||||
$($(".pageTribe .prelobby #joinByCode .customInput .byte")[0]).text(text.substring(0,2));
|
||||
$($(".pageTribe .prelobby #joinByCode .customInput .byte")[1]).text(text.substring(2,4));
|
||||
$($(".pageTribe .prelobby #joinByCode .customInput .byte")[2]).text(text.substring(4,6));
|
||||
},0)
|
||||
})
|
||||
|
|
@ -355,7 +355,7 @@ function setStopOnError(soe, nosave, mp = false) {
|
|||
config.confidenceMode = "off";
|
||||
}
|
||||
updateTestModesNotice();
|
||||
mp_syncConfig();]
|
||||
mp_syncConfig();
|
||||
if (!nosave) saveConfigToCookie();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue