From 311e658340f941bb1edeeaa98ccb6ab994d98bcb Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 12 Oct 2020 22:44:20 +0100 Subject: [PATCH] reworked prelobby --- public/css/style.scss | 70 +++++++++++++++++++++++++++++++++++++++ public/index.html | 37 ++++++++++++++++++--- public/js/tribe.js | 72 +++++++++++++++++++++++++++++++++++++++-- public/js/userconfig.js | 2 +- 4 files changed, 174 insertions(+), 7 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 704e4f239..b12400504 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -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; diff --git a/public/index.html b/public/index.html index 6537e50ac..adeebf3cd 100644 --- a/public/index.html +++ b/public/index.html @@ -3012,8 +3012,29 @@
Waiting for login
diff --git a/public/js/tribe.js b/public/js/tribe.js index 09cbd1218..2f90af20d 100644 --- a/public/js/tribe.js +++ b/public/js/tribe.js @@ -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) }) \ No newline at end of file diff --git a/public/js/userconfig.js b/public/js/userconfig.js index b769e732d..6e993da65 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -355,7 +355,7 @@ function setStopOnError(soe, nosave, mp = false) { config.confidenceMode = "off"; } updateTestModesNotice(); - mp_syncConfig();] + mp_syncConfig(); if (!nosave) saveConfigToCookie(); }