415 lines
13 KiB
Plaintext
415 lines
13 KiB
Plaintext
<!-- Simple Styling for layout -->
|
|
<style>
|
|
.quests-container {
|
|
position: absolute;
|
|
width: 625px;
|
|
height: 645px;
|
|
top: 100px;
|
|
left: 450px;
|
|
border-style: solid;
|
|
border-color: rgba(0, 0, 0, .2);
|
|
border-radius: 15px;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
}
|
|
.menu-buttons {
|
|
width: 200px;
|
|
}
|
|
.quest-buttons {
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
#error-noClass {
|
|
padding: 15px;
|
|
margin-top: 5px;
|
|
margin-left: 22%;
|
|
}
|
|
#option1 {
|
|
width: 50px;
|
|
}
|
|
#myProgress {
|
|
position: relative;
|
|
height: 200px;
|
|
width: 200px;
|
|
background-color: #ddd;
|
|
border-style: solid;
|
|
border-color: rgba(0, 0, 0, .4);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
#quest-title {
|
|
position: absolute;
|
|
left: 720px;
|
|
top: 25px;
|
|
}
|
|
#myBar {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 1%;
|
|
background-color: #46c7f2;
|
|
transition: 1s;
|
|
}
|
|
#pro-pic {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 23px;
|
|
width: 150px;
|
|
height: 150px;
|
|
display: block;
|
|
border-style: solid;
|
|
border-width: 5px;
|
|
border-radius: 100px;
|
|
border-color: rgba(0, 0, 0, .4);
|
|
}
|
|
.student-container {
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 720px;
|
|
top: 25px;
|
|
left: 25px;
|
|
border: solid #5b94f0 2px;
|
|
border-style: solid;
|
|
border-radius: 10px;
|
|
background-color: rgba(112, 196, 255, .3);
|
|
}
|
|
.content {
|
|
margin-left: 25px;
|
|
}
|
|
.list-button {
|
|
margin-left: 25px;
|
|
margin-top: 25px;
|
|
}
|
|
.quest-box {
|
|
margin-top: 15px;
|
|
margin-left: 30px;
|
|
transition: .2s;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
li:last-child {
|
|
border: none;
|
|
}
|
|
li a {
|
|
text-decoration: none;
|
|
color: #000;
|
|
display: block;
|
|
width: 200px;
|
|
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
|
|
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
|
|
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
|
|
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
|
|
transition: font-size 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
li a:hover {
|
|
font-size: 30px;
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.quest-all {
|
|
position: absolute;
|
|
top: 770px;
|
|
right: 1145px;
|
|
}
|
|
#quest-title {
|
|
transform: translate(-125px, 0px);
|
|
}
|
|
.quest-container {
|
|
width: 400px;
|
|
border-style: solid;
|
|
border-color: rgba(0, 0, 0, .2);
|
|
border-radius: 15px;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="student-container">
|
|
<div class='content'>
|
|
<!-- Welcome message & Profile Picture/Progress bar -->
|
|
<h1 class="mt-4">Student Dashboard</h1>
|
|
<p class="lead mb-3">Welcome <%= user.name %></p>
|
|
<div>
|
|
<div id="myProgress">
|
|
<div id="myBar"></div>
|
|
<img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
|
|
<%=user.image.data.toString('base64')%>'>
|
|
</div>
|
|
<p stlye='text-align: right;' id='percent'></p>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- User Data -->
|
|
<div>
|
|
<h1 id='userRank'></h1>
|
|
<h1 id='userXP'>XP: <%= user.xp %></h1>
|
|
<p id='XP-Till'></p>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Action Buttons -->
|
|
<a href="/users/logout" class="btn btn-secondary">Logout</a>
|
|
<button onClick='passData()' class='btn btn-secondary'>Edit</button>
|
|
<a href="https://github.com/Braeden57/XP-System/issues" target="_blank" class='btn btn-danger'>Report Bug</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quest-all">
|
|
<h1 id="quest-title">Courses</h1>
|
|
<div class='quests-container'>
|
|
<div class='quest-buttons'>
|
|
<% if(courses.length == 0) { %>
|
|
<h2 id="error-noClass"">There are no classes yet :(</h2>
|
|
<% } else if(courses.length > 0) { %>
|
|
<select id="classes" onchange="showQuest()" class="form-control" style="margin-right: 5px;">
|
|
<option>--Please Select a Class--</option>
|
|
<% courses.forEach(function (course) { %>
|
|
<option value="<%= course.name %>"><%= course.name %></option>
|
|
<% }) %>
|
|
</select>
|
|
<% } %>
|
|
<div><ul id="class-quests"></ul></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
let socket = io.connect('http://localhost:5000');
|
|
|
|
socket.on("added:xp", function(data) {
|
|
if(data.userID == '<%= user._id %>') {
|
|
reCalculate(data.addXP);
|
|
}
|
|
});
|
|
|
|
// Global old variables
|
|
let currRank;
|
|
let rankUp;
|
|
let remain;
|
|
let goal;
|
|
let total;
|
|
let progress;
|
|
let percent;
|
|
let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
|
|
|
|
let xp = <%= user.xp %>;
|
|
|
|
window.onload = function() {
|
|
calculate()
|
|
}
|
|
|
|
// Passing user _id to edit page script
|
|
function passData() {
|
|
let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
|
|
document.location.href = url;
|
|
}
|
|
|
|
// Redirects to quest page to see quest
|
|
function redirect(id) {
|
|
let url = '/users/quests?id=' + encodeURIComponent(id);
|
|
document.location.href = url;
|
|
}
|
|
|
|
// Creates a list of Quest Objects
|
|
let allQuests = [];
|
|
let questObj;
|
|
<% quests.forEach(function (quest) { %>
|
|
questObj = {
|
|
_id: "<%= quest._id %>",
|
|
title: "<%= quest.title %>",
|
|
expiry: "<%= quest.expiry %>",
|
|
xp: <%= quest.xp %>,
|
|
instruction: `<%= quest.instruction %>`,
|
|
referenceClass: "<%= quest.referenceClass %>",
|
|
campaign: "<%= quest.campaign %>",
|
|
};
|
|
allQuests.push(questObj);
|
|
<% }) %>
|
|
|
|
// Shows quests only related to selected class
|
|
function showQuest() {
|
|
document.getElementById('class-quests').innerHTML = "";
|
|
let className = document.getElementById('classes').value;
|
|
for(let i = 0; i < allQuests.length; i++) {
|
|
if (allQuests[i]["referenceClass"] == className) {
|
|
document.getElementById('class-quests').innerHTML += `<li><button class="list-button btn btn-outline-success mt-2" onclick="redirect('${allQuests[i]["_id"]}')">${allQuests[i]["title"]}</button></li>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Global Ranks + RankXP
|
|
let ranks = [
|
|
{"Digital Noob": 0}, // index 0
|
|
{"Digital Novice": 48}, // index 1
|
|
{"Digital Novice II": 100}, // index 2
|
|
{"Digital Amature": 148}, // index 3
|
|
{"Digital Amature II": 200}, // index 4
|
|
{"Digital Apprentice": 248}, // index 5
|
|
{"Digital Apprentice II": 300}, // index 6
|
|
{"Digital Journeyman": 396}, // index 7
|
|
{"Digital Journeyman II": 476}, // index 8
|
|
{"Digital Journeyman III": 532}, // index 9
|
|
{"Digital Crafter": 580}, // index 10
|
|
{"Expert Digital Crafter": 648}, // index 11
|
|
{"Master Digital Crafter": 800} // index 12
|
|
]
|
|
|
|
// Initial calculate from 0 to current XP
|
|
function calculate() {
|
|
// Get current rank
|
|
if (xp < 800) {
|
|
for(let i = 0; i < ranks.length; i++) {
|
|
for (let rank in ranks[i]) {
|
|
let nextIndex = indexes[i];
|
|
// Gets rank after current rank
|
|
for (let nextRank in ranks[nextIndex]) {
|
|
// Verifies current XP is > currentRank xp level && current XP < nextRank xp level
|
|
if (xp >= ranks[i][rank] && xp < ranks[nextIndex][nextRank]) {
|
|
// Sets global old variables
|
|
currRank = rank;
|
|
currRankXP = ranks[i][rank]
|
|
// Calculate xp till next Rank
|
|
if (i < 12) {
|
|
i++;
|
|
let nextRank = ranks[i];
|
|
for (let r in nextRank) {
|
|
goal = nextRank[r];
|
|
rankUp = r;
|
|
remain = goal - xp;
|
|
// Calculate progress bar
|
|
total = goal - currRankXP;
|
|
progress = xp - currRankXP;
|
|
percent = (progress/total)*100;
|
|
let elem = document.getElementById("myBar");
|
|
elem.style.height = percent + '%';
|
|
document.getElementById('percent').innerHTML = progress + '|' + total;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if(xp >= 800) {
|
|
console.log('You are a coding master!');
|
|
// Display data for max level
|
|
document.getElementById('percent').innerHTML = '800|800';
|
|
currRank = "Master Digital Crafter";
|
|
remain = 0;
|
|
xp = 800;
|
|
rankUp = 'No higher Rank, Good Job!';
|
|
let elem = document.getElementById("myBar");
|
|
let percent = 100;
|
|
elem.style.height = percent + '%';
|
|
}
|
|
|
|
// Display Data
|
|
document.getElementById('userRank').innerHTML = currRank;
|
|
document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
|
|
}
|
|
|
|
// reCalculate function recaculates all the data with oldXP + addxp to newxp
|
|
function reCalculate(addXP) {
|
|
let newXP = xp + parseInt(addXP);
|
|
// Get current rank
|
|
if (newXP < 800) {
|
|
for(let i = 0; i < ranks.length; i++) {
|
|
for (let rank in ranks[i]) {
|
|
let nextIndex = indexes[i];
|
|
// Gets rank after current rank
|
|
for (let nextRank in ranks[nextIndex]) {
|
|
// Verifies current XP is > currentRank xp level && current XP < nextRank xp level
|
|
if (newXP >= ranks[i][rank] && newXP < ranks[nextIndex][nextRank]) {
|
|
// Sets new temporary variables
|
|
let newCurrRank = rank;
|
|
let newCurrRankXP = ranks[i][rank]
|
|
// Calculate xp till next Rank
|
|
if (i < 12) {
|
|
i++;
|
|
let newNextRank = ranks[i];
|
|
for (let r in newNextRank) {
|
|
// Initialize new temporary variables
|
|
let newRankUp = r;
|
|
let newPercent;
|
|
let diff = addXP;
|
|
let newProgress = progress+diff
|
|
let newRemain;
|
|
let newGoal;
|
|
let newTotal;
|
|
// If new Progress doesnt go over current total
|
|
if (newProgress < total) {
|
|
// Set new percent and new remain
|
|
let diffPercent=(diff/total)*100;
|
|
newRemain = remain - diff;
|
|
newTotal = total;
|
|
// Update Progress Bar
|
|
let elem = document.getElementById("myBar");
|
|
newPercent = percent + diffPercent;
|
|
elem.style.height = newPercent + "%";
|
|
document.getElementById('percent').innerHTML = newProgress + "|" + total;
|
|
// Update Display with new Data
|
|
document.getElementById('userXP').innerHTML = "XP: " + newXP;
|
|
document.getElementById('XP-Till').innerHTML = newRemain + "XP till your next Rank: " + rankUp;
|
|
document.getElementById('userRank').innerHTML = currRank;
|
|
// If new progress goes over current total
|
|
} else if (newProgress >= total) {
|
|
// Set new variables
|
|
newGoal = newNextRank[r];
|
|
newTotal = newGoal - newCurrRankXP;
|
|
newProgress = newXP - newCurrRankXP;
|
|
newRemain = newTotal - newProgress;
|
|
// Update percent from current percent to new percent
|
|
let elem = document.getElementById("myBar");
|
|
newPercent = Math.round((newProgress/newTotal)*100);
|
|
elem.style.height = newPercent + "%";
|
|
// Sets progress to new Progress
|
|
let progressDiff = total-progress;
|
|
document.getElementById('percent').innerHTML = newProgress + "|" + newTotal;
|
|
// Update Display with new Data
|
|
document.getElementById('XP-Till').innerHTML = newRemain + "XP till your next Rank: " + newRankUp;
|
|
document.getElementById('userXP').innerHTML = "XP: " + newXP;
|
|
document.getElementById('userRank').innerHTML = newCurrRank;
|
|
document.getElementById('percent').innerHTML = newProgress + "|" + newTotal;
|
|
}
|
|
// Set Main Variables to new values
|
|
currRank = newCurrRank;
|
|
rankUp = newRankUp;
|
|
remain = newRemain;
|
|
goal = newGoal;
|
|
total = newTotal;
|
|
progress = newProgress;
|
|
percent = newPercent;
|
|
xp = newXP;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (xp >= 800) {
|
|
console.log('You are a coding master!')
|
|
// Display data for max level
|
|
document.getElementById('percent').innerHTML = '800|800';
|
|
currRank = "Master Digital Crafter";
|
|
remain = 0;
|
|
xp = 800;
|
|
rankUp = 'No higher Rank, Good Job!';
|
|
let elem = document.getElementById("myBar");
|
|
let percent = 100;
|
|
elem.style.height = percent + '%';
|
|
// Display Data
|
|
document.getElementById('userXP').innerHTML = "XP: " + xp;
|
|
document.getElementById('userRank').innerHTML = currRank;
|
|
document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
|
|
}
|
|
}
|
|
</script>
|