monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-01-13 19:04:06 +08:00
Code Issues Projects Releases Packages Wiki Activity

added countdown element

Browse source 
progress update is now more direct
This commit is contained in:
Jack 2020-12-26 19:10:56 +00:00
parent c31bebcd1d
commit 65ef0eaa77
3 changed files with 258 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/js/tribe.js
View file

@ -1,6 +1,9 @@
let MP = {
state: -1,
socket: io("localhost:3000", { autoConnect: false, reconnectionAttempts: 3 }),
socket: io("http://localhost:3000", {
autoConnect: false,
reconnectionAttempts: 3,
}),
reconnectionAttempts: 0,
};
@ -282,6 +285,32 @@ function mp_testFinished(result) {
MP.socket.emit("mp_room_test_finished", { result: result });
}
function showCountdown() {
$("#tribeCountdownWrapper").removeClass("hidden");
}
function hideCountdown() {
$("#tribeCountdownWrapper").addClass("hidden");
}
function updateCountdown(text) {
$("#tribeCountdownWrapper #tribeCountdown").text(text);
}
function fadeoutCountdown() {
$("#tribeCountdownWrapper")
.css("opacity", 1)
.animate(
{
opacity: 0,
},
1000,
() => {
$("#tribeCountdownWrapper").addClass("hidden").css("opacity", 1);
}
);
}
MP.socket.on("connect", (f) => {
MP.state = 1;
MP.reconnectionAttempts = 0;
@ -426,20 +455,29 @@ MP.socket.on("mp_system_message", (data) => {
MP.socket.on("mp_room_test_start", (data) => {
// changePage('');
// mp_testCountdown();
startTest();
Misc.showNotification("test starting");
// startTest();
setTimeout(() => {
if (!testActive) {
startTest();
}
}, 500);
// Misc.showNotification("test starting");
updateCountdown("Go");
fadeoutCountdown();
});
MP.socket.on("mp_room_test_countdown", (data) => {
Misc.showNotification(`countdown ${data.val}`);
updateCountdown(data.val);
// Misc.showNotification(`countdown ${data.val}`);
});
MP.socket.on("mp_room_test_init", (data) => {
MP.room.testStats = {};
Math.seedrandom(data.seed);
seedrandom(data.seed);
mp_refreshTestUserList();
changePage("");
restartTest(false, true, true);
showCountdown();
});
MP.socket.on("mp_room_state_update", (data) => {
@ -447,6 +485,20 @@ MP.socket.on("mp_room_state_update", (data) => {
console.log(`state changed to ${data.newState}`);
});
MP.socket.on("mp_room_user_test_progress_update", (data) => {
$(`.tribePlayers [socketId=${data.socketId}] .wpm`).text(data.stats.wpm);
$(`.tribePlayers [socketId=${data.socketId}] .acc`).text(
Math.floor(data.stats.acc) + "%"
);
$(`.tribePlayers [socketId=${data.socketId}] .bar`).animate(
{
width: data.stats.progress + "%",
},
1000,
"linear"
);
});
MP.socket.on("mp_room_test_progress_update", (data) => {
if (data.length === 0) return;
MP.room.testStats = data.stats;

141
src/sass/style.scss
View file

@ -2062,6 +2062,24 @@ key {
.pageTest {
position: relative;
#tribeCountdownWrapper {
width: 100%;
height: 0;
display: flex;
justify-content: center;
#tribeCountdown {
z-index: 999;
width: 7rem;
height: 5rem;
font-size: 3rem;
color: var(--bg-color);
background-color: var(--main-color);
border-radius: var(--roundness);
line-height: 5rem;
text-align: center;
}
}
.ssWatermark {
font-size: 1.25rem;
color: var(--sub-color);
@ -2069,47 +2087,46 @@ key {
text-align: right;
}
.tribePlayers{
.tribePlayers {
// display: grid;
// gap: 0.5rem;
margin-bottom: 1rem;
.player{
.name{
.player {
.name {
color: var(--sub-color);
}
.progress{
.progress {
width: 100%;
padding: 0 1rem;
.barBg{
.barBg {
width: 100%;
height: .25rem;
height: 0.25rem;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--roundness);
.bar{
height: .25rem;
.bar {
height: 0.25rem;
background: var(--sub-color);
left: 0;
border-radius: var(--roundness);
}
}
}
.stats{
.stats {
text-align: right;
grid-template-columns: auto auto;
color: var(--sub-color);
display: flex;
justify-content: flex-end;
min-width: 90px;
.acc{
.acc {
margin-left: 1rem;
}
}
}
.player.me .barBg .bar{
.player.me .barBg .bar {
background: var(--main-color);
}
}
}
.pageLogin {
@ -2611,7 +2628,7 @@ key {
}
}
.pageTribe{
.pageTribe {
display: grid;
gap: 1rem;
.preloader {
@ -2620,167 +2637,169 @@ key {
display: grid;
justify-items: center;
gap: 1rem;
.text{
.text {
font-size: 1rem;
color: var(--sub-color);
}
}
.prelobby{
.prelobby {
display: grid;
grid-template-areas: "welcome welcome"
"mm priv";
grid-template-areas:
"welcome welcome"
"mm priv";
grid-template-columns: 1fr 1fr;
gap: 2rem;
.welcome{
.welcome {
font-size: 2rem;
color: var(--text-color);
}
.matchmaking{
.matchmaking {
grid-area: mm;
display: grid;
gap: 1rem;
.title{
.title {
color: var(--sub-color);
}
.buttons{
.buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
.button{
.button {
padding: 2rem 0;
}
}
}
.privateRooms{
.privateRooms {
grid-area: priv;
display: grid;
gap: 1rem;
.title{
.title {
color: var(--sub-color);
}
#createPrivateRoom{
#createPrivateRoom {
padding: 2rem 0;
}
}
#joinByCode{
#joinByCode {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
gap: 1rem;
.button{
padding: .7rem;
.button {
padding: 0.7rem;
}
input{
input {
position: absolute;
opacity: 0;
}
.customInput{
.customInput {
color: var(--sub-color);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
.byte{
transition: .125s;
&.focused{
.byte {
transition: 0.125s;
&.focused {
color: var(--main-color);
}
}
}
}
}
.lobby{
.lobby {
display: grid;
grid-template-areas: "currentsettings lobbyButtons"
"chat userlist"
"inviteLink inviteLink";
grid-template-areas:
"currentsettings lobbyButtons"
"chat userlist"
"inviteLink inviteLink";
gap: 2rem;
grid-template-columns: 3fr 1fr;
.title{
.title {
color: var(--sub-color);
}
.lobbyButtons{
.lobbyButtons {
grid-area: lobbyButtons;
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
.startTestButton{
.startTestButton {
background: var(--main-color);
color: var(--bg-color);
&:hover{
&:hover {
background: var(--text-color);
}
}
}
.currentSettings{
.currentSettings {
grid-area: currentsettings;
.groups{
.groups {
display: grid;
// grid-auto-flow: column;
justify-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr;
.group{
padding: .5rem;
.group {
padding: 0.5rem;
color: var(--text-color);
.fas,.far{
margin-right: .5rem;
.fas,
.far {
margin-right: 0.5rem;
color: var(--main-color);
}
}
}
}
.chat{
.chat {
grid-area: chat;
gap: 1rem;
.messages{
.messages {
height: 200px;
overflow-y: scroll;
.systemMessage{
.systemMessage {
color: var(--sub-color);
}
.message{
.message {
display: flex;
gap: .5rem;
gap: 0.5rem;
color: var(--text-color);
.author{
.author {
color: var(--main-color);
}
}
}
.input input{
.input input {
width: 100%;
}
}
.inviteLink{
.inviteLink {
grid-area: inviteLink;
text-align: center;
color: var(--sub-color);
.title{
.title {
line-height: 1rem;
font-size: 1rem;
}
.text{
.text {
font-size: 2rem;
line-height: 2rem;
color: var(--main-color);
cursor: pointer;
}
.link{
.link {
font-size: 0.75rem;
cursor: pointer;
}
}
.userlist{
.userlist {
grid-area: userlist;
}
}
}
.pageAccount {
display: grid;
gap: 1rem;
gap: 1rem;
.content {
display: grid;

121
static/index.html
View file

@ -851,6 +851,16 @@
<i class="fas fa-fw fa-crown"></i>
</div>
</div>
<div
class="icon-button"
tabindex="2"
href="/tribe"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-satellite-dish"></i>
</div>
</div>
<div
class="icon-button view-about"
tabindex="2"
@ -1004,6 +1014,7 @@
Caps Lock
</div>
<div id="testModesNotice"></div>
<table class="tribePlayers hidden"></table>
<div id="caret" class="default size15"></div>
<div id="paceCaret" class="default size15 hidden"></div>
<input id="wordsInput" class="" tabindex="0" autocomplete="off" />
@ -1022,6 +1033,9 @@
<div id="wordsWrapper">
<div id="words" class="size15"></div>
</div>
<div id="tribeCountdownWrapper" class="hidden">
<div id="tribeCountdown">Go</div>
</div>
<div class="keymap hidden">
<div class="row r1">
<div></div>
@ -3536,6 +3550,102 @@
</div>
</div>
</div>
<div class="page pageTribe hidden">
<div class="preloader">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
<div class="text">Waiting for login</div>
</div>
<div class="prelobby hidden">
<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>
<div class="buttons">
<div id="matchmake15" class="button">
<i class="fas fa-clock"></i>
Time 15
</div>
<div id="matchmake60" class="button">
<i class="fas fa-clock"></i>
Time 60
</div>
<div id="matchmakeQuote" class="button">
<i class="fas fa-quote-right"></i>
Quotes
</div>
</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">
<div class="title">current settings</div>
<div class="groups"></div>
</div>
<div class="lobbyButtons">
<div class="button startTestButton">
<i class="fas fa-keyboard"></i>
Start test
</div>
<div class="button leaveRoomButton">
<i class="fas fa-door-open"></i>
Leave room
</div>
</div>
<div class="chat">
<div class="title">chat</div>
<div class="messages"></div>
<div class="input">
<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 class="code">
<div class="title">room code</div>
<div class="text"></div>
</div>
<div class="link"></div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="commandLineMobileButton">
@ -3610,6 +3720,16 @@
</div>
</div>
</div>
<div
id="ad1"
class="hidden"
style="
display: flex;
justify-content: center;
width: 1px;
justify-self: center;
"
></div>
</div>
<div id="ad3" class="hidden"></div>
</div>
@ -3632,5 +3752,6 @@
<script src="js/jquery.cookie-1.4.1.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script src="js/monkeytype.js"></script>
</html>