309 lines
9.0 KiB
Plaintext
309 lines
9.0 KiB
Plaintext
<!-- Simple Syling for layout -->
|
|
<style>
|
|
.quests-container {
|
|
position: absolute;
|
|
width: 650px;
|
|
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: 25px;
|
|
margin-top: 10px;
|
|
}
|
|
#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;
|
|
}
|
|
#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;
|
|
}
|
|
</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>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>
|
|
<h1 id="quest-title">Quests</h1>
|
|
<div class='quests-container'>
|
|
<div class='quest-buttons'>
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
<label onClick="showHTML()" class="menu-buttons btn btn-info active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> HTML
|
|
</label>
|
|
<label onClick="showCSS()" class="menu-buttons btn btn-info">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> CSS
|
|
</label>
|
|
<label onClick="showJS()" class="menu-buttons btn btn-info">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> JavaScript
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class='quests-content'>
|
|
<div style="display: none;" id="HTML-Display">
|
|
<ul>
|
|
<% quests.forEach(function (quest) { %>
|
|
<% if(quest.campaign == "HTML") { %>
|
|
<!-- Creates Quest Button link -->
|
|
<li><button class='list-button btn btn-outline-success mt-2' onclick="redirect('<%= quest._id %>')"><%= quest.title %></button></li>
|
|
<% } %>
|
|
<% }) %>
|
|
</ul>
|
|
</div>
|
|
<div style="display: none;" id="CSS-Display">
|
|
<ul>
|
|
<% quests.forEach(function (quest) { %>
|
|
<% if(quest.campaign == "CSS") { %>
|
|
<!-- Creates Quest Button link -->
|
|
<li><button class='list-button btn btn-outline-success mt-2' onclick="redirect('<%= quest._id %>')"><%= quest.title %></button></li>
|
|
<% } %>
|
|
<% }) %>
|
|
</ul>
|
|
</div>
|
|
<div style="display: none;" id="JS-Display">
|
|
<ul>
|
|
<% quests.forEach(function (quest) { %>
|
|
<% if(quest.campaign == "JS") { %>
|
|
<!-- Creates Quest Button link -->
|
|
<li><button class='list-button btn btn-outline-success mt-2' onclick="redirect('<%= quest._id %>')"><%= quest.title %></button></li>
|
|
<% } %>
|
|
<% }) %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quest Display -->
|
|
<script>
|
|
function showHTML() {
|
|
let state = document.getElementById('HTML-Display').style.display;
|
|
if (state == "block") {
|
|
document.getElementById('HTML-Display').style.display = 'none';
|
|
} else {
|
|
document.getElementById('JS-Display').style.display = 'none';
|
|
document.getElementById('CSS-Display').style.display = 'none';
|
|
document.getElementById('HTML-Display').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function showCSS() {
|
|
let state = document.getElementById('CSS-Display').style.display;
|
|
if (state == "block") {
|
|
document.getElementById('CSS-Display').style.display = 'none';
|
|
} else {
|
|
document.getElementById('HTML-Display').style.display = 'none';
|
|
document.getElementById('JS-Display').style.display = 'none';
|
|
document.getElementById('CSS-Display').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function showJS() {
|
|
let state = document.getElementById('JS-Display').style.display;
|
|
if (state == "block") {
|
|
document.getElementById('JS-Display').style.display = 'none';
|
|
} else {
|
|
document.getElementById('HTML-Display').style.display = 'none';
|
|
document.getElementById('CSS-Display').style.display = 'none';
|
|
document.getElementById('JS-Display').style.display = 'block';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Passing user _id to edit page script -->
|
|
<script>
|
|
function passData() {
|
|
let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
|
|
|
|
document.location.href = url;
|
|
}
|
|
</script>
|
|
|
|
<!-- Calculate Rank Data Script -->
|
|
<script>
|
|
let xp = <%= user.xp %>;
|
|
let currRank;
|
|
let rankUp;
|
|
let remain;
|
|
|
|
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
|
|
]
|
|
|
|
// Get current rank
|
|
let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
|
|
if (xp < 800) {
|
|
for(var i = 0; i < ranks.length; i++) {
|
|
for (let rank in ranks[i]) {
|
|
let nextIndex = indexes[i];
|
|
for (let nextRank in ranks[nextIndex]) {
|
|
if (xp >= ranks[i][rank] && xp < ranks[nextIndex][nextRank]) {
|
|
currRank = rank;
|
|
currRankXP = ranks[i][rank]
|
|
// Calculate xp till next Rank
|
|
if (i < 12) {
|
|
i++;
|
|
let nextRank = ranks[i];
|
|
for (let r in nextRank) {
|
|
let goal = nextRank[r];
|
|
rankUp = r;
|
|
remain = goal - xp;
|
|
// Calculate progress bar
|
|
let total = goal - currRankXP;
|
|
let progress = xp - currRankXP;
|
|
let percent = (progress/total)*100;
|
|
let elem = document.getElementById("myBar");
|
|
elem.style.height = percent + '%';
|
|
document.getElementById('percent').innerHTML = progress + '|' + total;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// Display data for max level
|
|
document.getElementById('percent').innerHTML = '800|800';
|
|
currRank = "Master Digital Crafter";
|
|
remain = 0;
|
|
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;
|
|
|
|
function redirect(id) {
|
|
let url = '/users/quests?id=' + encodeURIComponent(id);
|
|
|
|
document.location.href = url;
|
|
}
|
|
</script>
|