mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-11-11 18:03:30 +08:00
431 lines
No EOL
12 KiB
JavaScript
431 lines
No EOL
12 KiB
JavaScript
$(".pageLogin .register input").keyup(e => {
|
|
if (e.key == "Enter") {
|
|
signUp();
|
|
}
|
|
})
|
|
|
|
$(".pageLogin .register .button").click(e => {
|
|
signUp();
|
|
})
|
|
|
|
$(".pageLogin .login input").keyup(e => {
|
|
if (e.key == "Enter") {
|
|
signIn();
|
|
}
|
|
})
|
|
|
|
$(".pageLogin .login .button").click(e => {
|
|
signIn();
|
|
})
|
|
|
|
$(".signOut").click(e => {
|
|
signOut();
|
|
})
|
|
|
|
function showSignOutButton() {
|
|
$(".signOut").removeClass('hidden').css("opacity",1);
|
|
}
|
|
|
|
function hideSignOutButton() {
|
|
$(".signOut").css("opacity",0).addClass('hidden');
|
|
}
|
|
|
|
function signIn() {
|
|
$(".pageLogin .preloader").removeClass('hidden');
|
|
let email = $(".pageLogin .login input")[0].value;
|
|
let password = $(".pageLogin .login input")[1].value;
|
|
|
|
firebase.auth().signInWithEmailAndPassword(email, password).then(e => {
|
|
changePage('account');
|
|
}).catch(function(error) {
|
|
showNotification(error.message, 5000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
}
|
|
|
|
function signUp() {
|
|
$(".pageLogin .preloader").removeClass('hidden');
|
|
let name = $(".pageLogin .register input")[0].value;
|
|
let email = $(".pageLogin .register input")[1].value;
|
|
let password = $(".pageLogin .register input")[2].value;
|
|
let passwordVerify = $(".pageLogin .register input")[3].value;
|
|
|
|
if (name == "") {
|
|
showNotification("Name is required", 3000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
return;
|
|
}
|
|
|
|
if (password != passwordVerify) {
|
|
showNotification("Passwords do not match", 3000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
return;
|
|
}
|
|
|
|
firebase.auth().createUserWithEmailAndPassword(email, password).then(user => {
|
|
// Account has been created here.
|
|
let usr = user.user;
|
|
usr.updateProfile({
|
|
displayName: name
|
|
}).then(function() {
|
|
// Update successful.
|
|
showNotification("Account created", 2000);
|
|
firebase.analytics().logEvent("accountCreated", usr.uid);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
changePage('account');
|
|
}).catch(function(error) {
|
|
// An error happened.
|
|
usr.delete().then(function() {
|
|
// User deleted.
|
|
showNotification("Name invalid", 2000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
}).catch(function(error) {
|
|
// An error happened.
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
});
|
|
}).catch(function(error) {
|
|
// Handle Errors here.
|
|
var errorCode = error.code;
|
|
var errorMessage = error.message;
|
|
showNotification(errorMessage, 5000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function signOut() {
|
|
firebase.auth().signOut().then(function() {
|
|
showNotification("Signed out", 2000);
|
|
updateAccountLoginButton();
|
|
changePage('login');
|
|
}).catch(function(error) {
|
|
showNotification(error.message, 5000);
|
|
});
|
|
}
|
|
|
|
firebase.auth().onAuthStateChanged(function(user) {
|
|
if (user) {
|
|
// User is signed in.
|
|
var displayName = user.displayName;
|
|
var email = user.email;
|
|
var emailVerified = user.emailVerified;
|
|
var photoURL = user.photoURL;
|
|
var isAnonymous = user.isAnonymous;
|
|
var uid = user.uid;
|
|
var providerData = user.providerData;
|
|
showNotification('Signed in', 2000);
|
|
$(".pageLogin .preloader").addClass('hidden');
|
|
updateAccountLoginButton()
|
|
}
|
|
});
|
|
|
|
var resultHistoryChart = new Chart($(".pageAccount #resultHistoryChart"), {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "words 10",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#f44336',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(244,67,54,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 25",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FF5722',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,87,34,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 50",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FF9800',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,152,0,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 100",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FFC107',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,193,7,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "words 200",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#FFEB3B',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(255,235,59,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 15",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#3F51B5',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(63,81,181,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 30",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#2196F3',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(33,150,243,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 60",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#03A9F4',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(3,169,244,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "time 120",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#00BCD4',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(0,188,212,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
},
|
|
{
|
|
label: "custom",
|
|
fill: false,
|
|
data: [],
|
|
borderColor: '#4CAF50',
|
|
borderWidth: 2,
|
|
// trendlineLinear: {
|
|
// style: "rgba(76,175,80,.25)",
|
|
// lineStyle: "solid",
|
|
// width: 1
|
|
// }
|
|
}
|
|
],
|
|
},
|
|
options: {
|
|
tooltips: {
|
|
titleFontFamily: "Roboto Mono",
|
|
bodyFontFamily: "Roboto Mono"
|
|
},
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
fontFamily: "Roboto Mono",
|
|
fontColor: "#ffffff"
|
|
}
|
|
},
|
|
responsive: true,
|
|
// maintainAspectRatio: false,
|
|
// tooltips: {
|
|
// mode: 'index',
|
|
// intersect: false,
|
|
// },
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
ticks: {
|
|
fontFamily: "Roboto Mono"
|
|
},
|
|
type: 'time',
|
|
time: {
|
|
tooltipFormat:'DD MMM YYYY HH:mm'
|
|
},
|
|
bounds: 'ticks',
|
|
distribution: 'series',
|
|
display: false,
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: 'Date'
|
|
},
|
|
}],
|
|
yAxes: [{
|
|
ticks: {
|
|
fontFamily: "Roboto Mono"
|
|
},
|
|
display: true,
|
|
scaleLabel: {
|
|
display: false,
|
|
labelString: 'Words per Minute'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
function refreshAccountPage() {
|
|
|
|
function cont(){
|
|
|
|
let testModes = {
|
|
words10: [],
|
|
words25: [],
|
|
words50: [],
|
|
words100: [],
|
|
words200: [],
|
|
time15: [],
|
|
time30: [],
|
|
time60: [],
|
|
time120: [],
|
|
custom: []
|
|
}
|
|
|
|
|
|
let topWpm = 0;
|
|
let topMode = '';
|
|
|
|
let testCount = dbSnapshot.length;
|
|
$(".pageAccount .history table tbody").empty();
|
|
dbSnapshot.forEach(result => {
|
|
let withpunc = '';
|
|
if (result.punctuation) {
|
|
withpunc = ', with punctuation';
|
|
}
|
|
$(".pageAccount .history table tbody").append(`
|
|
<tr>
|
|
<td>${result.wpm}</td>
|
|
<td>${result.acc}%</td>
|
|
<td>${result.correctChars}</td>
|
|
<td>${result.incorrectChars}</td>
|
|
<td>${result.mode} ${result.mode2}${withpunc}</td>
|
|
<td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
|
|
</tr>`)
|
|
if (result.mode == "words" && result.mode2 == 10) {
|
|
testModes.words10.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 25) {
|
|
testModes.words25.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 50) {
|
|
testModes.words50.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 100) {
|
|
testModes.words100.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "words" && result.mode2 == 200) {
|
|
testModes.words200.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 15) {
|
|
testModes.time15.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 30) {
|
|
testModes.time30.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 60) {
|
|
testModes.time60.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "time" && result.mode2 == 120) {
|
|
testModes.time120.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
if (result.mode == "custom") {
|
|
testModes.custom.push({ x: result.timestamp, y: result.wpm });
|
|
}
|
|
|
|
if (result.wpm > topWpm) {
|
|
let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
|
|
topWpm = result.wpm;
|
|
topMode = result.mode + " " + result.mode2 + puncsctring;
|
|
}
|
|
})
|
|
|
|
let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
|
|
|
|
resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor = subColor;
|
|
resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor = subColor;
|
|
resultHistoryChart.options.legend.labels.fontColor = subColor;
|
|
|
|
resultHistoryChart.data.datasets[0].data = testModes.words10;
|
|
resultHistoryChart.data.datasets[1].data = testModes.words25;
|
|
resultHistoryChart.data.datasets[2].data = testModes.words50;
|
|
resultHistoryChart.data.datasets[3].data = testModes.words100;
|
|
resultHistoryChart.data.datasets[4].data = testModes.words200;
|
|
resultHistoryChart.data.datasets[5].data = testModes.time15;
|
|
resultHistoryChart.data.datasets[6].data = testModes.time30;
|
|
resultHistoryChart.data.datasets[7].data = testModes.time60;
|
|
resultHistoryChart.data.datasets[8].data = testModes.time120;
|
|
resultHistoryChart.data.datasets[9].data = testModes.custom;
|
|
|
|
$(".pageAccount .highestWpm .val").text(topWpm);
|
|
$(".pageAccount .highestWpm .mode").html(topMode);
|
|
|
|
$(".pageAccount .testsTaken .val").text(testCount);
|
|
|
|
let favMode = testModes.words10;
|
|
let favModeName = 'words10';
|
|
$.each(testModes, (key, mode) => {
|
|
if (mode.length > favMode.length) {
|
|
favMode = mode;
|
|
favModeName = key;
|
|
}
|
|
})
|
|
if (favModeName == 'words10' && testModes.words10.length == 0) {
|
|
//new user
|
|
$(".pageAccount .favouriteTest .val").text(`-`);
|
|
} else {
|
|
$(".pageAccount .favouriteTest .val").text(`${favModeName} (${Math.floor((favMode.length/testCount) * 100)}%)`);
|
|
}
|
|
|
|
|
|
resultHistoryChart.update({ duration: 0 });
|
|
|
|
swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
|
|
}
|
|
|
|
if (dbSnapshot == null) {
|
|
// console.log('no db snap');
|
|
db_getUserResults().then(data => {
|
|
cont();
|
|
})
|
|
} else {
|
|
// console.log('using db snap');
|
|
cont();
|
|
}
|
|
} |