commit ec7abfa44ec9f09a767a11dd750671ba8fae128c
Author: Friedel Schön <[email protected]>
Date: Sun, 18 Jun 2023 15:26:16 +0200
week 5
Diffstat:
| A | backend.js | 61 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | img/restart.png | 0 | |
| A | leesopdracht.txt | 5 | +++++ |
| A | login.html | 27 | +++++++++++++++++++++++++++ |
| A | login.js | 69 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | main.css | 191 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | memory.html | 67 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | memory.js | 169 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | settings.html | 31 | +++++++++++++++++++++++++++++++ |
| A | settings.js | 84 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
10 files changed, 704 insertions(+), 0 deletions(-)
diff --git a/backend.js b/backend.js
@@ -0,0 +1,60 @@
+function callBackend(method, endpoint, data = null, headers = {}) {
+ let token = localStorage.getItem('token');
+ if (token) {
+ headers['Authorization'] = 'Bearer ' + token;
+ }
+ if (data) {
+ data = JSON.stringify(data);
+ headers['Content-Type'] = 'application/json';
+ } else {
+ data = undefined;
+ }
+ return fetch('http://localhost:8000/' + endpoint, {
+ method: method,
+ headers: {
+ 'Accept': 'application/json', // responding content-type
+ ...headers
+ },
+ body: data
+ }).then(res => res.json()).catch(e => ({}));
+}
+
+function parseJWT(token) {
+ var base64 = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+ var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(c =>
+ '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+ ).join(''));
+
+ return JSON.parse(jsonPayload);
+}
+
+function getUser() {
+ let token = localStorage.getItem('token');
+ if (!token)
+ return Promise.resolve(null);
+
+ let { sub: id, username: name, roles } = parseJWT(token);
+
+ return callBackend('GET', `api/player/${id}/email`).then(() => {
+ return { id, name, roles, token };
+ }).catch(e => null);
+}
+
+function login(username, password) {
+ return callBackend('POST', 'api/login_check', { username, password })
+ .then(({ token, code, message }) => {
+ if (token) {
+ localStorage.setItem('token', token);
+ return {};
+ }
+ return { code, message };
+ });
+}
+
+function register(username, email, password) {
+ return callBackend('POST', 'register', { username, email, password });
+}
+
+function logout() {
+ localStorage.removeItem('token');
+}
+\ No newline at end of file
diff --git a/img/restart.png b/img/restart.png
Binary files differ.
diff --git a/leesopdracht.txt b/leesopdracht.txt
@@ -0,0 +1,5 @@
+Een JWT is een string seriële data die ondertekend is met een sleutel. Eigenlijk is het een soort van cookie die allerlei informatie kan bevatten. Deze data worden in JSON-formaat verstuurd immers de naam JSON Web Token.E
+Een JWT kan worden gebruikt als een authenticatie middel. Door gebruikersinformatie in de JWT te stoppen en dan deze informatie te ondertekenen. Vervolgens de JWT naar de gebruiker te versturen. Daarna stuurt de gebruiker de JWT mee bij de volgende requests. De server leest de JWT daarna uit en verifieert dat het om een authentieke JWT gaat omdat de sleutel klopt. Omdat de gebruikers informatie in de JWT staat hoeft de server geen database query te doen.
+Dit is ook het sterke punt van een JWT omdat de informatie in de cookie staat en de JWT op de client side is opgeslagen kan een JWT worden gebruikt om met een account op meerder websites in te loggen. Wat ook weer een nadeel met zich meebrengt omdat de JWT veel informatie bevat kost het veel bandbreedte om deze te versturen bij elke request.
+Als laatste maar zeker niet als minste. Een JWT mag nooit in local storage worden opgeslagen vanwege cross site scripting. Een JWT die in local storage staat kan worden gebruikt door andere scripts. Gebruik een JWT alleen als httpOnly cookie die niet gelezen of beschreven kan worden door javascript aan de gebruikerskant.
+Toepassingen op de projecten Memory en IWA. Bij memory heeft het gebruik van een JWT weinig toegevoegde waarde omdat het prima zou werken met een server managed session. Bij IWA-project is het anders omdat het voor het gebruik van een API wel toegevoegde waarde heeft. De API-token kan ook worden gebruikt als sleutel waardoor de server weet dat het een specifieke klant is.
diff --git a/login.html b/login.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Memory</title>
+ <link rel='stylesheet' href='main.css' />
+ <meta name='viewport' content='width=device-width, initial-scale=1' />
+ </head>
+ <body>
+ <div class='container' id='login'>
+ <span id='message'></span>
+ <form>
+ <input type='text' id='username' placeholder='Username' /><br>
+ <input type='text' id='email' placeholder='Email' style='display: none' /><br>
+ <input type='password' id='password' placeholder='Password' /><br>
+ <input type='password' id='password-again' placeholder='Retype Password' style='display: none' /><br>
+ <input type='checkbox' id='do-register' />
+ <label for="do-register">Do Register?</label><br>
+ <button type='button' id='submit'>submit</button>
+ </form>
+ <button id='logout'>logout</button>
+ </div>
+
+ <script type='text/javascript' src='backend.js'></script>
+ <script type='text/javascript' src='login.js'></script>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/login.js b/login.js
@@ -0,0 +1,68 @@
+document.getElementById('submit').addEventListener('click', () => {
+ let username = document.getElementById('username').value;
+ let email = document.getElementById('email').value;
+ let password = document.getElementById('password').value;
+ let password_again = document.getElementById('password-again').value;
+ let do_register = document.getElementById('do-register').checked;
+
+ if (!do_register) {
+ login(username, password).then(({ code, message }) => {
+ if (code == 401) {
+ window.location.href = 'login.html?m=error-login';
+ return;
+ }
+ window.location.href = 'memory.html';
+ });
+ } else {
+ if (password != password_again) {
+ window.location.href = 'login.html?m=unequals-password';
+ return;
+ }
+ register(username, email, password).then(() => {
+ window.location.href = 'login.html?m=register-done';
+ });
+ }
+});
+
+document.getElementById('do-register').addEventListener('change', () => {
+ if (event.target.checked) {
+ document.getElementById('email').style.display = null;
+ document.getElementById('password-again').style.display = null;
+ } else {
+ document.getElementById('email').style.display = 'none';
+ document.getElementById('password-again').style.display = 'none';
+ }
+});
+
+document.getElementById('logout').addEventListener('click', () => {
+ logout();
+ window.location.href = 'login.html?m=logout';
+});
+
+function updateMessage() {
+ let span = document.getElementById('message');
+
+ if (!window.location.search.startsWith('?'))
+ return;
+
+ let code = new URLSearchParams(window.location.search).get('m');
+
+ switch (code) {
+ case 'restricted':
+ span.innerText = 'Login required to access this page';
+ break;
+ case 'error-login':
+ span.innerText = 'Username or Password invalid';
+ break;
+ case 'unequals-password':
+ span.innerText = 'Password fields didn\'t match';
+ break;
+ case 'register-done':
+ span.innerText = 'Registration succeed! You can login now';
+ break;
+ case 'logout':
+ span.innerText = 'You are logged out';
+ }
+}
+
+updateMessage();
+\ No newline at end of file
diff --git a/main.css b/main.css
@@ -0,0 +1,190 @@
+body{
+ margin: 0;
+ padding: 0;
+}
+.container{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ background: #282828;
+}
+
+.header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width:100%;
+ height:65px;
+ margin-bottom: 5px;
+}
+.menu{
+ display: flex;
+ width: 95%;
+ flex-direction: column;
+ color: #fea400;
+}
+
+.menu div{
+ border-bottom: 1px solid #8a8a82;
+ margin: 2px;
+ padding: 2px;
+}
+.menu_btn{
+ cursor: pointer;
+ margin-left: 20px;
+ height: 40px;
+ width: 40px;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+}
+
+.line{
+ display: block;
+ height: 5px;
+ width: 100%;
+ border-radius: 10px;
+ background: #fea400;
+}
+.title{
+ font-size:x-large;
+ font-weight: bold;
+ color:#fea400;
+}
+.restart_button{
+ cursor: pointer;
+ height: 40px;
+ margin-right: 20px;
+}
+.restart{
+ width: 40px;
+ height: 40px;
+}
+
+.game_state{
+ display: grid;
+ width: 95%;
+ grid-template-columns: auto auto;
+ margin: 10px;
+ font-weight: bold;
+ color:#fea400;
+ justify-content: space-between;
+}
+#game_time{
+ grid-row: 1;
+}
+#found_pairs{
+ grid-row: 1;
+}
+
+#progress_bar{
+ grid-row: 2;
+ grid-column-start: 1;
+ grid-column-end: 3;
+ margin-top:10px;
+ display: block;
+ height: 5px;
+ width: 100%;
+ border-radius: 10px;
+ background: #fea400;
+}
+.game_info .div{
+ margin: 5px;
+}
+.game_board{
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-wrap: wrap;
+ aspect-ratio: 1 / 1;
+ width: 95%;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.card{
+ cursor: pointer;
+ width: calc(16.66% - 10px);
+ height: calc(16.66% - 10px);
+ margin: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:#df9a06;
+ box-shadow: 1px 1px 1px rgba(42, 42, 42, 0.3);
+}
+
+.card p{
+ color: #282828;
+}
+
+.card.inactive {
+ background:#278704;
+}
+
+.card.open {
+ background:#5e3ccdd5;
+}
+
+.footer{
+ color:#fea400;
+ width: 95%;
+ justify-content: center;
+ display: flex;
+ margin-bottom: 25px;
+}
+
+.footer ul{
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+@media (orientation: landscape) {
+ .game_board{
+ width: 80vh;
+ }
+ .header{
+ width: 650px;
+ }
+}
+
+@media (min-width: 650px) {
+ .game_board{
+ width: 630px;
+ }
+ .game_state{
+ width: 600px;
+ }
+ .header{
+ width: 650px;
+ }
+ .menu{
+ width: 630px;
+ }
+}
+
+@media (min-width: 1400px) {
+ .footer{
+ position: absolute;
+ width: auto;
+ top: 100px;
+ right: 5%;
+ flex-direction: column;
+ }
+}
+
+.done {
+ border: 5px solid green;
+ box-sizing: border-box;
+}
+
+.clicked {
+ border: 5px solid red;
+ box-sizing: border-box;
+}
+
+#login {
+ color: white;
+}
+\ No newline at end of file
diff --git a/memory.html b/memory.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Memory</title>
+ <link rel="stylesheet" href="main.css" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ </head>
+ <body>
+ <div class ="container">
+ <div class ="header">
+ <div class ="menu_btn">
+ <div class="line"></div>
+ <div class="line"></div>
+ <div class="line"></div>
+ </div>
+ <div class="title">Memory</div>
+ <div class="restart_button">
+ <span id='login'></span>
+ <img class="restart" src="img/restart.png" alt="restart button">
+ </div>
+ </div>
+ <div class="menu">
+ <div id="theme">
+ <select name="theme" id="theme">
+ <option value="nature">Colors</option>
+ <option value="nature">Nature</option>
+ <option value="cars">Cars</option>
+ <option value="food">Food</option>
+ </select>
+ <label for="theme">Select a theme</label>
+ </div>
+
+ <div id="card_color">
+ <input type="color" id="closed_card" name="closed_card" value="#df9a06" onchange="colorChange()">
+ <label for="closed_card">Closed card</label>
+ </div>
+ </div>
+ <div class="game_state">
+ <div id="game_time">Time: 0sec</div>
+ <div id="picture_choose">
+ <select id="picture-select" onchange="onSelect()">
+ <option value="none">Select Picture Set:</option>
+ <option value="dog">Doggos</option>
+ <option value="cat">Kitties</option>
+ </select>
+ </div>
+ <div id="found_pairs">Pairs: <span id='pairs'>0</span></div>
+ <div id="progress_bar"></div>
+ </div>
+
+ <div aria-label="game board" class ="game_board" id="game_board">
+
+ </div>
+ <div class ="footer">
+ <div class="high_scores">
+ <h2> Top 5 </h2>
+ <ul id="top_5" aria-label="Top 5">
+ </ul>
+ </div>
+ <div id="average_time"><h2>Average playtime: 420s</h2></div>
+ </div>
+ </div>
+ <script type="text/javascript" src="backend.js"></script>
+ <script type="text/javascript" src="memory.js"></script>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/memory.js b/memory.js
@@ -0,0 +1,168 @@
+// UTILITIES
+// =========
+
+function shuffleArray(array) {
+ let currentIndex = array.length,
+ randomIndex;
+
+ // While there remain elements to shuffle.
+ while (currentIndex != 0) {
+
+ // Pick a remaining element.
+ randomIndex = Math.floor(Math.random() * currentIndex);
+ currentIndex--;
+
+ // And swap it with the current element.
+ [ array[currentIndex], array[randomIndex] ] = [ array[randomIndex], array[currentIndex] ];
+ }
+
+ return array;
+}
+
+// CONSTANTS
+// =========
+
+const DOG_API = "https://dog.ceo/api/breeds/image/random";
+const CAT_API = "https://cataas.com/api/cats?limit=";
+const CAT_API_PREFIX = "https://cataas.com/cat/";
+
+const BOARD_SIZE = 36;
+
+
+// GLOBALS
+// =======
+
+let buttons, done, openButton, pairs, time, interval =null;
+
+// HELPERS
+// =======
+
+function getButton(btn) {
+ return buttons[btn.id];
+}
+
+function makeBoard(res) {
+ let board = document.getElementById("game_board");
+
+ time = 0;
+
+ if (interval)
+ clearInterval(interval);
+
+ interval = setInterval(() =>
+ document.getElementById('game_time').innerText = `Time: ${time++}sec`
+ , 1000);
+
+ let i = 0;
+ for (let img of shuffleArray(res.concat(res))) {
+ var btn = document.createElement("div");
+ btn.setAttribute('area-label', 'card');
+ btn.classList.add('card');
+
+ btn.id = 'card-' + i;
+ btn.addEventListener('click', onCardClick);
+
+ board.appendChild(btn);
+
+ buttons['card-' + i] = {
+ state: 'closed',
+ img: img,
+ };
+ i++;
+ }
+}
+
+
+// HANDLERS
+// ========
+
+function onSelect() {
+ let board = document.getElementById("game_board");
+ board.innerHTML = '';
+
+ buttons = {};
+ openButton = null;
+ done = [];
+ pairs = 0;
+
+ let select = document.getElementById('picture-select');
+ switch (select.value) {
+ case 'dog':
+ let promises = [];
+ for (let i = 0; i < BOARD_SIZE / 2; i++) {
+ promises.push(fetch(DOG_API).then(res => res.json()).then(res => res.message));
+ }
+ Promise.all(promises).then(makeBoard);
+ break;
+ case 'cat':
+ fetch(CAT_API + (BOARD_SIZE / 2), { mode: 'cors' }).then(res => res.json()).then(res =>
+ makeBoard(res.map(x => CAT_API_PREFIX + x._id))
+ );
+ break;
+ default:
+ return;
+ }
+}
+
+function onCardClick(evt) {
+ if (done.includes(this))
+ return;
+
+ this.innerHTML = `<img width=100% height=100% src='${getButton(this).img}' />`;
+
+ if (openButton) {
+ if (this != openButton && getButton(openButton).img == getButton(this).img) {
+ done.push(openButton);
+ done.push(this);
+ pairs++;
+ document.getElementById('pairs').innerHTML = pairs;
+
+ this.classList.add('done');
+ openButton.classList.add('done');
+
+ if (pairs >= BOARD_SIZE / 2) {
+ alert("GEFELICITEERD!!!");
+ }
+ }
+ openButton.classList.remove('clicked');
+ openButton = null;
+ } else {
+ openButton = this;
+ this.classList.add('clicked');
+ }
+}
+
+function colorChange() {
+ let color = document.getElementById("closed_card").value;
+
+ for (let x of document.getElementsByClassName("card"))
+ x.style.backgroundColor = color;
+}
+
+function updateTop() {
+ let list = document.getElementById("top_5");
+ list.innerHTML = '';
+
+ let players = callBackend('GET', 'scores').then(res =>
+ res.sort((a, b) => b.score - a.score).slice(0, 5).forEach(({ username, score }) => {
+ let entry = document.createElement('li');
+ entry.innerText = `${username} (${score})`;
+ list.appendChild(entry);
+ })
+ );
+}
+
+function updateLogin() {
+ let span = document.getElementById('login');
+
+ let user = getUser().then(user => {
+ if (!user) {
+ window.location.href = 'login.html?m=restricted';
+ }
+
+ span.innerText = `Logged in as ${user.name}`;
+ });
+}
+
+updateTop();
+updateLogin();
+\ No newline at end of file
diff --git a/settings.html b/settings.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Memory</title>
+ <link rel='stylesheet' href='main.css' />
+ <meta name='viewport' content='width=device-width, initial-scale=1' />
+ </head>
+ <body>
+ <div class='container'>
+ <span id='message'></span>
+ <span id='login'></span>
+ <form>
+ <input type='text' id='email' /><br>
+ <select id="api">
+ <option value="none">Select Picture Set:</option>
+ <option value="dog">Doggos</option>
+ <option value="cat">Kitties</option>
+ </select><br>
+ <label for='color-found'>Color found</label>
+ <input type='color' id='color-found' /><br>
+ <label for='color-closed'>Color closed</label>
+ <input type='color' id='color-closed' /><br>
+ <button type='button' id='submit'>submit</button>
+ </form>
+ </div>
+
+ <script type='text/javascript' src='backend.js'></script>
+ <script type='text/javascript' src='settings.js'></script>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/settings.js b/settings.js
@@ -0,0 +1,83 @@
+function toFullColor(col) {
+ // expecting either '#rrggbb' or '#rgb' and converting to '#rrggbb'
+
+ if (col.length == 7)
+ return col;
+
+ let r = col[1],
+ g = col[2],
+ b = col[3];
+
+ return '#' + r + r + g + g + b + b;
+}
+
+function updateLogin() {
+ let span = document.getElementById('login');
+
+ getUser().then(user => {
+ if (!user) {
+ window.location.href = 'login.html?m=restricted';
+ }
+
+ span.innerText = `Logged in as ${user.name}`;
+ });
+}
+
+function updateForm() {
+ getUser().then(user => {
+ callBackend('GET', `api/player/${user.id}/email`).then(mail => {
+ document.getElementById('email').value = mail;
+ });
+
+ callBackend('GET', `api/player/${user.id}/preferences`).then(({ color_found, color_closed, preferred_api }) => {
+ if (!preferred_api)
+ preferred_api = 'none';
+ if (!color_found)
+ color_found = '#00ff00';
+ if (!color_closed)
+ color_closed = '#ffff00';
+
+ document.getElementById('color-found').value = toFullColor(color_found);
+ document.getElementById('color-closed').value = toFullColor(color_closed);
+ document.getElementById('api').value = preferred_api;
+ });
+ });
+}
+
+document.getElementById('submit').addEventListener('click', () => {
+ getUser().then(user => {
+ let set_pref = callBackend('POST', `api/player/${user.id}/preferences`, {
+ id: user.id,
+ color_found: document.getElementById('color-found').value,
+ color_closed: document.getElementById('color-closed').value,
+ api: document.getElementById('api').value
+ });
+
+ let set_email = callBackend('PUT', `api/player/${user.id}/email`, {
+ email: document.getElementById('email').value
+ });
+
+ return Promise.all([ set_email, set_pref ]);
+ }).then(() => {
+ window.location.href = 'settings.html?m=success'
+ });
+});
+
+function updateMessage() {
+ let span = document.getElementById('message');
+
+ if (!window.location.search.startsWith('?'))
+ return;
+
+ let code = new URLSearchParams(window.location.search).get('m');
+
+ switch (code) {
+ case 'success':
+ span.innerText = 'Succeed';
+ break;
+ }
+}
+
+updateMessage();
+updateLogin();
+updateForm();
+\ No newline at end of file
