Skip to content

Commit 01f74ff

Browse files
MiodecMiodec
committed
- added version to the bottom of the page
- added version history popup - fixed a bug where livewpm still would be drawn on top
1 parent 99be40a commit 01f74ff

3 files changed

Lines changed: 111 additions & 10 deletions

File tree

‎public/css/style.scss‎

Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,60 @@ a:hover {
5353
top: -5rem;
5454
}
5555

56+
#versionHistoryWrapper{
57+
width: 100%;
58+
height: 100%;
59+
background: rgba(0, 0, 0, 0.75);
60+
position: fixed;
61+
left: 0;
62+
top: 0;
63+
z-index: 1000;
64+
display: grid;
65+
justify-content: center;
66+
align-items: start;
67+
padding: 5rem 0;
68+
#versionHistory{
69+
width: 75vw;
70+
height: 100%;
71+
background: var(--bg-color);
72+
border-radius: var(--roundness);
73+
padding: 2rem;
74+
display: grid;
75+
gap: 1rem;
76+
overflow-y: scroll;
77+
.tip{
78+
text-align: center;
79+
color: var(--sub-color);
80+
}
81+
.releases{
82+
display: grid;
83+
gap: 2rem;
84+
.release{
85+
display: grid;
86+
grid-template-areas: "title date"
87+
"body body";
88+
.title{
89+
grid-area: title;
90+
font-size: 2rem;
91+
color: var(--sub-color);
92+
}
93+
.date{
94+
grid-area: date;
95+
text-align: right;
96+
color: var(--sub-color);
97+
align-self: center;
98+
}
99+
.body{
100+
grid-area: body;
101+
}
102+
&:last-child{
103+
margin-bottom: 2rem;
104+
}
105+
}
106+
}
107+
}
108+
}
109+
56110
#commandLineWrapper {
57111
width: 100%;
58112
height: 100%;
@@ -201,7 +255,7 @@ a:hover {
201255
}
202256

203257
#liveWpm {
204-
position: absolute;
258+
position: relative;
205259
// font-size: 1.7rem;
206260
// line-height: 1.7rem;
207261
// color: var(--sub-color);
@@ -483,6 +537,14 @@ key {
483537
.keyTips{
484538
margin-bottom: 1rem;
485539
}
540+
.version{
541+
opacity: 0;
542+
transition: .25s;
543+
&:hover{
544+
cursor: pointer;
545+
color: var(--main-color);
546+
}
547+
}
486548
}
487549

488550
#top.focus {
@@ -497,13 +559,6 @@ key {
497559
opacity: 0 !important;
498560
}
499561

500-
#middle {
501-
/* display:grid; */
502-
/* align-items: center; */
503-
/* justify-content: center; */
504-
z-index: 999;
505-
}
506-
507562
#result {
508563
display: grid;
509564
// height: 200px;
@@ -622,6 +677,7 @@ key {
622677
}
623678

624679
#restartTestButton {
680+
position: relative;
625681
opacity: 0;
626682
border-radius: var(--roundness);
627683
padding: 1rem 5rem;

‎public/index.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,26 @@
99
<link rel="stylesheet" href="css/style.css">
1010
<link rel="stylesheet" href="themes/dark.css" id="currentTheme">
1111
<link rel="shortcut icon" href="favicon.png">
12-
1312
</head>
14-
1513
<body>
1614
<div class="notification">Signed in</div>
15+
<div id="versionHistoryWrapper" class="hidden">
16+
<div id="versionHistory">
17+
<div class="tip">Click anywhere to dismiss</div>
18+
<div class="releases">
19+
<div class="release">
20+
<div class="title">v1</div>
21+
<div class="date">010101</div>
22+
<div class="body">test</div>
23+
</div>
24+
<div class="release">
25+
<div class="title">v2</div>
26+
<div class="date">010101</div>
27+
<div class="body">test</div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
1732
<div id="commandLineWrapper" class="hidden">
1833
<div id="commandLine">
1934
<input type="text" class="input" placeholder="Command">
@@ -307,6 +322,7 @@ <h1>theme</h1>
307322
<div>
308323
Contribute to this project on <a href="https://github.com/Miodec/monkey-type">GitHub</a>
309324
</div>
325+
<div class="version">version</div>
310326
</div>
311327

312328
</div>

‎public/js/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,24 @@ function test() {
4545
});
4646
}
4747

48+
function getReleasesFromGitHub() {
49+
$.getJSON("https://api.github.com/repos/Miodec/monkey-type/releases", data => {
50+
$('#bottom .version').text(data[0].name).css('opacity', 1);
51+
$("#versionHistory .releases").empty();
52+
data.forEach(release => {
53+
if (!release.draft && !release.prerelease) {
54+
$("#versionHistory .releases").append(`
55+
<div class="release">
56+
<div class="title">${release.name}</div>
57+
<div class="date">${moment(release.published_at).format('DD MMM YYYY')}</div>
58+
<div class="body">${release.body.replace(/\r\n/g, '<br>')}</div>
59+
</div>
60+
`);
61+
}
62+
})
63+
})
64+
}
65+
4866
function getLastChar(word) {
4967
return word.charAt(word.length - 1);
5068
}
@@ -828,6 +846,16 @@ $(document.body).on("click", "#restartTestButton", (event) => {
828846
restartTest();
829847
});
830848

849+
$(document.body).on("click", ".version", (event) => {
850+
$("#versionHistoryWrapper").css('opacity', 0).removeClass('hidden').animate({ opacity: 1 }, 125);
851+
});
852+
853+
$(document.body).on("click", "#versionHistoryWrapper", (event) => {
854+
$("#versionHistoryWrapper").css('opacity', 1).animate({ opacity: 0 }, 125, () => {
855+
$("#versionHistoryWrapper").addClass('hidden');
856+
});
857+
});
858+
831859
$("#wordsInput").keypress((event) => {
832860
event.preventDefault();
833861
});
@@ -992,6 +1020,7 @@ $(document).keydown((event) => {
9921020
});
9931021

9941022
loadConfigFromCookie();
1023+
getReleasesFromGitHub();
9951024

9961025
$(document).ready(() => {
9971026
$('body').css('transition', '.25s');

0 commit comments

Comments
 (0)