Init
This commit is contained in:
ahaas25
parent
bcade66f5d
commit
d4bf160271
162
assets/index.js
Normal file
162
assets/index.js
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
|
||||||
|
class vars {
|
||||||
|
static backgroundColor = `rgb(48,44,44)`;
|
||||||
|
static textColor = 'rgb(120, 236, 220)';
|
||||||
|
static testCompleteTexts = ["Test complete!", "Time Taken: ", "WPM: "];
|
||||||
|
}
|
||||||
|
|
||||||
|
function themePage() {
|
||||||
|
document.body.style.backgroundColor = vars.backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
function pageSetup() {
|
||||||
|
themePage();
|
||||||
|
var params = {
|
||||||
|
fullscreen: false,
|
||||||
|
fitted: true
|
||||||
|
};
|
||||||
|
elem = document.getElementById(`typing-game`);
|
||||||
|
two = new Two(params).appendTo(elem);
|
||||||
|
|
||||||
|
centerx = window.innerWidth / 2;
|
||||||
|
centery = (window.innerHeight / 2) - window.innerHeight * .025;
|
||||||
|
width = window.innerWidth * 0.90;
|
||||||
|
height = window.innerHeight * .80;
|
||||||
|
window.addEventListener('keydown', keydown, false);
|
||||||
|
two.bind('resize', draw);
|
||||||
|
getPrompt();
|
||||||
|
displayResults = false;
|
||||||
|
typing = false;
|
||||||
|
showCursor = true;
|
||||||
|
input = "";
|
||||||
|
|
||||||
|
cursorCounter = 0;
|
||||||
|
|
||||||
|
styles = {
|
||||||
|
family: 'proxima-nova, sans-serif',
|
||||||
|
size: 50,
|
||||||
|
leading: 50,
|
||||||
|
weight: 900
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPrompt() {
|
||||||
|
// this will be handled by the server
|
||||||
|
prompts = ["Hello world", "The quick brown fox jumps over the lazy dog", "lorem ipsum"];
|
||||||
|
prompt = prompts[Math.floor(Math.random()*prompts.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateVars() {
|
||||||
|
centerx = window.innerWidth / 2;
|
||||||
|
centery = (window.innerHeight / 2) - window.innerHeight * .025;
|
||||||
|
width = window.innerWidth * 0.90;
|
||||||
|
height = window.innerHeight * .80;
|
||||||
|
}
|
||||||
|
|
||||||
|
function curse() {
|
||||||
|
if (!typing) {
|
||||||
|
if (showCursor) {
|
||||||
|
var cursorHeight = height * 0.1;
|
||||||
|
var cursorWidth = cursorHeight * 0.1;
|
||||||
|
var cursor = two.makeRoundedRectangle(centerx, centery, cursorWidth, cursorHeight, 5);
|
||||||
|
// Instead of white, make it themed
|
||||||
|
cursor.fill = 'rgb(255,255,255)';
|
||||||
|
cursor.opacity = 1;
|
||||||
|
cursor.noStroke();
|
||||||
|
showCursor = !showCursor;
|
||||||
|
} else {
|
||||||
|
draw();
|
||||||
|
showCursor = !showCursor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
two.update();
|
||||||
|
setTimeout(curse, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
updateVars();
|
||||||
|
|
||||||
|
var rect = two.makeRoundedRectangle(centerx, centery, width, height, 5);
|
||||||
|
|
||||||
|
rect.fill = vars.backgroundColor;
|
||||||
|
rect.opacity = 1;
|
||||||
|
rect.noStroke();
|
||||||
|
|
||||||
|
var promptText = two.makeText(prompt, centerx, centery, styles);
|
||||||
|
promptText.fill = vars.textColor;
|
||||||
|
promptText.noStroke();
|
||||||
|
|
||||||
|
var userText = two.makeText(input, centerx, centery * 1.1, styles);
|
||||||
|
userText.fill = vars.textColor;
|
||||||
|
userText.noStroke();
|
||||||
|
|
||||||
|
if (displayResults) {
|
||||||
|
texts = calculateTestStats();
|
||||||
|
var resultsBackground = two.makeRoundedRectangle(centerx, centery, width / 2, height / 2, 5);
|
||||||
|
resultsBackground.fill = 'rgb(120, 236, 220)';
|
||||||
|
resultsBackground.opacity = 1;
|
||||||
|
resultsBackground.noStroke();
|
||||||
|
var x = centerx;
|
||||||
|
var y = centery;
|
||||||
|
for (ele in texts) {
|
||||||
|
var promptText = two.makeText(texts[ele], x, y, 'normal');
|
||||||
|
y += 30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
two.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetVars() {
|
||||||
|
displayResults = false;
|
||||||
|
typing = false;
|
||||||
|
input = "";
|
||||||
|
getPrompt();
|
||||||
|
}
|
||||||
|
|
||||||
|
function startTimer() {
|
||||||
|
startTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopTimer() {
|
||||||
|
endTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateTestStats() {
|
||||||
|
var toReturn = [];
|
||||||
|
var elapsedTime = (endTime - startTime);
|
||||||
|
var WPM = ((prompt.length / 5)/(elapsedTime / 1000)) * 100;
|
||||||
|
toReturn.push(vars.testCompleteTexts[0]);
|
||||||
|
toReturn.push(vars.testCompleteTexts[1] + (elapsedTime) / 1000 + "s");
|
||||||
|
toReturn.push(vars.testCompleteTexts[2] + WPM);
|
||||||
|
return toReturn;
|
||||||
|
}
|
||||||
|
|
||||||
|
function keydown(e) {
|
||||||
|
if (e.keyCode === 8) { // Backspace
|
||||||
|
if (input.length > 0) {
|
||||||
|
input = input.substring(0,input.length - 1)
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
} else if (e.keyCode === 9) { // Tab
|
||||||
|
resetVars();
|
||||||
|
event.preventDefault();
|
||||||
|
} else if (e.key.length === 1) {
|
||||||
|
if (input.length <= prompt.length) {
|
||||||
|
if (!typing) {
|
||||||
|
typing = !typing;
|
||||||
|
startTimer();
|
||||||
|
}
|
||||||
|
input += e.key;
|
||||||
|
if (input.length == prompt.length && input.charAt(input.length - 1) === prompt.charAt(input.length - 1)) {
|
||||||
|
// Finish test
|
||||||
|
displayResults = true;
|
||||||
|
stopTimer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
|
||||||
41
assets/style.css
Normal file
41
assets/style.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
.top-row {
|
||||||
|
color: rgb(120, 236, 220);
|
||||||
|
font-size: 2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aux-row {
|
||||||
|
color: rgba(120, 236, 220, .8);
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-row {
|
||||||
|
color: rgba(120, 236, 220, .7);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hud {
|
||||||
|
height: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-bar, #aux-bar, #selection-bar {
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
font-family: proxima-nova, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#typing-game {
|
||||||
|
height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-text {
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
0
assets/theme.js
Normal file
0
assets/theme.js
Normal file
10675
assets/two.js
Normal file
10675
assets/two.js
Normal file
File diff suppressed because it is too large
Load Diff
21
templates/about.ejs
Normal file
21
templates/about.ejs
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Typing Test</title>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="hud">
|
||||||
|
<%- include('topbar.ejs')%>
|
||||||
|
</div>
|
||||||
|
<div class="centered-text">
|
||||||
|
<h1>Keybinds</h1>
|
||||||
|
<p>Tab - restart test</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script>
|
||||||
|
themePage();
|
||||||
|
</script>
|
||||||
41
templates/index.ejs
Normal file
41
templates/index.ejs
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Typing Test</title>
|
||||||
|
<script src="two.js"></script>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="hud">
|
||||||
|
<%- include('topbar.ejs')%>
|
||||||
|
<div id="aux-bar">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="aux-row">Words</td>
|
||||||
|
<td class="aux-row">Timed</td>
|
||||||
|
<td class="aux-row">Prompt</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="selection-bar">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="select-row">5</td> <!-- Generate these -->
|
||||||
|
<td class="select-row">10</td> <!-- Generate these -->
|
||||||
|
<td class="select-row">25</td> <!-- Generate these -->
|
||||||
|
<td class="select-row">50</td> <!-- Generate these -->
|
||||||
|
<td class="select-row">100</td> <!-- Generate these -->
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="typing-game"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script>
|
||||||
|
pageSetup();
|
||||||
|
curse();
|
||||||
|
draw();
|
||||||
|
</script>
|
||||||
20
templates/leaderboard.ejs
Normal file
20
templates/leaderboard.ejs
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Typing Test</title>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="hud">
|
||||||
|
<%- include('topbar.ejs')%>
|
||||||
|
</div>
|
||||||
|
<div class="centered-text">
|
||||||
|
<h1>Leaderboard</h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script>
|
||||||
|
themePage();
|
||||||
|
</script>
|
||||||
20
templates/myStats.ejs
Normal file
20
templates/myStats.ejs
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Typing Test</title>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="hud">
|
||||||
|
<%- include('topbar.ejs')%>
|
||||||
|
</div>
|
||||||
|
<div class="centered-text">
|
||||||
|
<h1>My Stats</h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<script>
|
||||||
|
themePage();
|
||||||
|
</script>
|
||||||
10
templates/topbar.ejs
Normal file
10
templates/topbar.ejs
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<div id="top-bar">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td><a class="top-row" href="/">Play</a></td>
|
||||||
|
<td><a class="top-row" href="/stats">My Stats</a></td>
|
||||||
|
<td><a class="top-row" href="/leaderboard">Leaderboard</a></td>
|
||||||
|
<td><a class="top-row" href="/about">About</a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user