diff --git a/app.js b/app.js index 5f75fed..c6039fa 100644 --- a/app.js +++ b/app.js @@ -1,275 +1,609 @@ -const express = require('express'); // Express framework -const app = express(); - -let session = require('express-session'); -// Set up session with express -app.use(session({ - secret: 'secret', - resave: true, - saveUninitialized: true -})); -let path = require('path'); - -const sqlite3 = require('sqlite3'); // Interfaces with sqlite3 database -const db = new sqlite3.Database('database/JSFdatabase.db'); - -const bodyParser = require('body-parser'); // Parses data from http request bodies -//S et up bodyParser with express -app.use(bodyParser.urlencoded({ - extended: true -})); -app.use(bodyParser.json()); - -//Set up web folders -app.use(express.static("public")); - -app.listen(3001, function() { - console.log('Listening on port ' + 3001 + '.'); -}); - -/* -██ ██████ ██████ ██ ███ ██ -██ ██ ██ ██ ██ ████ ██ -██ ██ ██ ██ ███ ██ ██ ██ ██ -██ ██ ██ ██ ██ ██ ██ ██ ██ -███████ ██████ ██████ ██ ██ ████ -*/ - -app.get('/', function(request, response) { - if (request.session.loggedin) { - response.redirect('/home'); - } else { - response.redirect('/login'); - } - response.end(); -}); - -app.get('/login', function(request, response) { - response.sendFile(path.join(__dirname + '/public/login.html')); -}); - -app.post('/auth', function(request, response) { - let username = request.body.username; - let password = request.body.password; - if (username && password) { - db.get('SELECT * FROM jsf_accounts WHERE username = \'' + username + '\' AND password = \'' + password + '\';', function(err, results) { - if (err) - console.log(err); - if (results) { - request.session.loggedin = true; - request.session.username = username; - response.redirect('/home'); - } else { - response.send('Incorrect Username and/or Password!'); - } - response.end(); - }); - } else { - response.send('Please enter Username and Password!'); - response.end(); - } -}); - -app.get('/home', function(request, response) { - if (request.session.loggedin) { - response.send('Welcome back, ' + request.session.username + '!'); - } else { - response.redirect('/login'); - } - response.end(); -}); - -/* -███████ ██ ██████ ██ ██ ████████ ███████ ██████ -██ ██ ██ ██ ██ ██ ██ ██ ██ -█████ ██ ██ ███ ███████ ██ █████ ██████ -██ ██ ██ ██ ██ ██ ██ ██ ██ ██ -██ ██ ██████ ██ ██ ██ ███████ ██ ██ -*/ - - -app.get('/api/v0/fighter/list/', function(req, res) { - db.all("SELECT * FROM jsf_fighters;", function(err, results) { - if (err) { - console.log(err); - res.send(err); - } else { - console.log('Serving /fighter/list/ to ' + req.ip); - res.set('Content-Type', 'application/json'); - if (results != "") { - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); - -app.get('/api/v0/fighter/show/:fighterUID', function(req, res) { - db.get("SELECT * FROM jsf_fighters INNER JOIN jsf_players ON jsf_players.player_UID=jsf_fighters.fighter_player_UID WHERE fighter_UID = \'" + req.params.fighterUID + "\';", function(err, results) { - if (err) { - console.log(err); - res.send(err); - } else { - res.set('Content-Type', 'application/json'); - if (results != undefined) { - console.log('Serving /fighter/show/' + req.params.fighterUID + ' to ' + req.ip); - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); - -app.post('/api/v0/fighter/add/', function(req, res) { - db.get("SELECT * FROM jsf_players WHERE player_name = \'" + req.body.player_name + "\';", function(err, results) { - console.log(results); - console.log(err); - if (!results) { - console.log("No Player with that name."); - res.status(403).send("No Player with that name."); - } else { - db.run("INSERT INTO jsf_fighters (fighter_name, fighter_player_UID, stat_atk, stat_def, stat_tek, rec_wins, rec_losses) VALUES (\'" + req.body.fightername + "\', \'" + results.player_UID + "\', 5, 5, 5, 0, 0);", function(err) { - if (err) { - console.log("INSERT query: " + err); - res.status(403).send("INSERT query: " + err); - } else { - res.status(201).send("Success"); - } - }); - } - }); -}); - -app.post('/api/v0/fighter/edit/:fighterUID', function(req, res) { - -}); - -app.post('/api/v0/fighter/remove/:fighterUID', function(req, res) { - db.run("DELETE FROM jsf_fighters WHERE fighter_UID = \'" + req.params.fighterUID + "\';", function(err) { - if (err) { - console.log("DELETE query: " + err); - res.status(403).send("DELETE query: " + err); - } else { - res.status(201).send("Success"); - } - }); -}); - -app.get('/api/v0/fighter/search/:pattern', function(req, res) { - db.all("SELECT * FROM jsf_fighters WHERE fighter_name LIKE \'\%" + req.params.pattern + "\%\';", function(err, results) { - console.log(results); - if (err) { - console.log(err); - res.send(err); - } else { - res.set('Content-Type', 'application/json'); - if (results != undefined) { - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); - -/* -██████ ██ █████ ██ ██ ███████ ██████ -██ ██ ██ ██ ██ ██ ██ ██ ██ ██ -██████ ██ ███████ ████ █████ ██████ -██ ██ ██ ██ ██ ██ ██ ██ -██ ███████ ██ ██ ██ ███████ ██ ██ -*/ - -app.get('/api/v0/player/list/', function(req, res) { - db.all("SELECT * FROM jsf_players;", function(err, results) { - console.log(results); - if (err) { - console.log(err); - res.send(err); - } else { - res.set('Content-Type', 'application/json'); - if (results != "") { - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); - -app.get('/api/v0/player/show/:playerUID', function(req, res) { - db.all("SELECT * FROM jsf_fighters INNER JOIN jsf_players ON jsf_fighters.fighter_player_UID=jsf_players.player_UID WHERE jsf_players.player_UID = \'" + req.params.playerUID + "\';", function(err, results) { - console.log(results); - if (err) { - console.log(err); - res.send(err); - } else { - res.set('Content-Type', 'application/json'); - if (results != undefined) { - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); - -app.post('/api/v0/player/add/', function(req, res) { - db.get("SELECT player_name FROM jsf_players WHERE player_name = \'" + req.body.playername + "\';", function(err, results) { - console.log(results); - if (!results) { - db.run("INSERT INTO jsf_players (player_name) VALUES (\'" + req.body.playername + "\');", function(err) { - if (err) { - console.log("INSERT query: " + err); - } else { - res.status(201).send("Success"); - } - }); - } else { - res.status(403).send("User already exists"); - } - }); -}); - -app.post('/api/v0/player/edit/:playerID', function(req, res) { - -}); - -app.post('/api/v0/player/remove/:playerUID', function(req, res) { - // Delete all fighters first - db.run("DELETE FROM jsf_fighters WHERE fighter_player_UID = \'" + req.params.playerUID + "\';", function(err) { - if (err) { - console.log("DELETE query: " + err); - res.status(403).send("DELETE query: " + err); - } else { - // Then delete player - db.run("DELETE FROM jsf_players WHERE player_UID = \'" + req.params.playerUID + "\';", function(err) { - if (err) { - console.log("DELETE query: " + err); - res.status(403).send("DELETE query: " + err); - } else { - res.status(201).send("Success"); - } - }); - } - }); -}); - -app.get('/api/v0/player/search/:pattern', function(req, res) { - db.all("SELECT * FROM jsf_players WHERE player_name LIKE \'\%" + req.params.pattern + "\%\';", function(err, results) { - console.log(results); - if (err) { - console.log(err); - res.send(err); - } else { - res.set('Content-Type', 'application/json'); - if (results != undefined) { - res.send(JSON.stringify(results)); - } else { - res.send('undefined'); - } - } - }); -}); +const express = require('express'); // Express framework +const request = require('request'); // Express framework +const app = express(); + +let session = require('express-session'); + +// Set up session with express +app.use(session({ + secret: 'secret', + resave: true, + saveUninitialized: true +})); +let path = require('path'); + +const sqlite3 = require('sqlite3'); // Interfaces with sqlite3 database +const db = new sqlite3.Database('database/JSFdatabase.db'); + +const bodyParser = require('body-parser'); // Parses data from http request bodies +//S et up bodyParser with express +app.use(bodyParser.urlencoded({ + extended: true +})); +app.use(bodyParser.json()); + +//Set up web folders +app.use(express.static("public")); +//tells server to wait for a connection +app.listen(3001, function() { + console.log('Listening on port ' + 3001 + '.'); +}); + + +require('dns').lookup(require('os').hostname(), function (err, add, fam) { + console.log('addr: '+add); +}) + + + +//Set up PUG view engine +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'pug'); +app.use(express.static("public")); + + + + + + + + + +/* +██ ██████ ██████ ██ ███ ██ +██ ██ ██ ██ ██ ████ ██ +██ ██ ██ ██ ███ ██ ██ ██ ██ +██ ██ ██ ██ ██ ██ ██ ██ ██ +███████ ██████ ██████ ██ ██ ████ +*/ + +app.get('/', function(request, response) { + if (request.session.loggedin) { + response.redirect('/home'); + } else { + response.redirect('/login'); + } + response.end(); +}); + +app.get('/login', function(request, response) { + response.status(200).render('login', { + darkmode: request.session.darkmode + }); +}); + + +//sets path to to loggin screen +app.post('/auth', function(request, response) { + let username = request.body.username; + let password = request.body.password; + var playerName = request.body.username; + if (username && password) { + db.get('SELECT * FROM jsf_account WHERE username = \'' + username + '\' AND password = \'' + password + '\';', function(err, results) { + if (err) + console.log(err); + if (results) { + request.session.loggedin = true; + request.session.username = username; + request.session.accUID = results.account_UID; + if (results.account_color_theme == "dark") { + request.session.darkmode = true; + } else { + request.session.darkmode = false; + } + response.redirect('/home'); + console.log(playerName + "#" + results.account_UID + " logged in."); + } else { + response.send('Incorrect Username and/or Password!'); + } + response.end(); + }); + } else { + response.send('Please enter Username and Password!'); + response.end(); + } +}); +//sets home page +app.get('/home', function(request, response) { + // response.sendFile(path.join(__dirname + '/public/home.html')); + if (request.session.loggedin) { + // response.send('Welcome back, ' + request.session.username + '!'); + response.status(200).render('index', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); + } else { + response.redirect('/login'); + } + // response.end(); +}); + +app.get('/editor', function(request, response) { + response.status(200).render('editor', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); +}); +//set path to create account +app.get('/create', function(request, response) { + response.status(200).render('create', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); +}); +//sets path to modify account +app.get('/modify', function(request, response) { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + request.session.accUID + '\';', function(err, results) { + response.status(200).render('modify', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); +}); + +//sets path to createFighter +app.post('/createFighter', function(request, response) { + if (request.session.username != undefined) { + + + + + if ((request.body.name) && ((parseFloat(request.body.atk) + parseFloat(request.body.def) + parseFloat(request.body.tek)) == 90) && (parseFloat(request.body.atk) >= 5) && (parseFloat(request.body.def) >= 5) && (parseFloat(request.body.tek) >= 5) && (parseFloat(request.body.atk) <= 60) && (parseFloat(request.body.def) <= 60) && (parseFloat(request.body.tek) <= 60)) { + db.run("INSERT INTO jsf_fighters (fighter_name, fighter_player_UID, stat_atk, stat_def, stat_tek, rec_wins, rec_losses) VALUES ('" + request.body.name + "','" + request.session.accUID + "','" + request.body.atk + "','" + request.body.def + "','" + request.body.tek + "','" + "0" + "','" + "0" + "')", function(err) { + response.redirect('/create'); + if (err) { + console.log("ERROR:"); + console.log(err); + } else { + console.log(request.session.username + "#" + request.session.accUID + " created fighter: " + request.body.name); + } + }); + } + + } else { + console.log("ALERT: Someone tried to create a fighter while they weren't logged in"); + response.send("You aren't logged in"); + } +}); +//sets path to modifyFighter +app.post('/modifyFighter', function(request, response) { + if (request.session.username != undefined) { + + if ((request.body.name) && ((parseFloat(request.body.atk) + parseFloat(request.body.def) + parseFloat(request.body.tek)) == 90) && (parseFloat(request.body.atk) >= 5) && (parseFloat(request.body.def) >= 5) && (parseFloat(request.body.tek) >= 5) && (parseFloat(request.body.atk) <= 60) && (parseFloat(request.body.def) <= 60) && (parseFloat(request.body.tek) <= 60)) { + db.run("REPLACE INTO jsf_fighters (fighter_name, fighter_player_UID, stat_atk, stat_def, stat_tek, rec_wins, rec_losses) VALUES ('" + request.body.name + "','" + request.session.accUID + "','" + request.body.atk + "','" + request.body.def + "','" + request.body.tek + "','" + "0" + "','" + "0" + "')", function(err) { + response.redirect('/modify'); + if (err) { + console.log("ERROR:"); + console.log(err); + } else { + console.log(request.session.username + "#" + request.session.accUID + " modified fighter: " + request.body.name); + } + }); + } + } else { + console.log("ALERT: Someone tried to create a fighter while they weren't logged in"); + response.send("You aren't logged in"); + } +}); +// deletes fighter +app.post('/deleteFighter', function(request, response) { + if (request.session.username != undefined) { + db.get('DELETE FROM jsf_fighters WHERE fighter_player_UID = \'' + request.session.accUID + '\' AND fighter_name = \'' + request.body.name + '\';', function(err) { + if (err) { + console.log("ERROR:"); + console.log(err); + } else { + console.log(request.session.username + "#" + request.session.accUID + " deleted Fighter: " + request.body.name); + response.redirect('/delete'); + } + }); + + } else { + console.log("ALERT: Someone tried to delete a fighter while they weren't logged in"); + response.send("You aren't logged in"); + } +}); + +//creates path to the game selection +app.get('/game', function(request, response) { + response.status(200).sendFile(path.join(__dirname + '/public/JSFighter/index.html')); + console.log(request.session.username + " joined the game."); +}); + +app.get('/play', function(request, response) { + response.status(200).render('play', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); +}); +// path to the settings +app.get('/settings', function(request, response) { + response.status(200).render('settings', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); +}); +//creates path to the JSF game +app.get('/jsfighterGame', function(request, response) { + response.status(200).render('jsfighterGame', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); +}); +//to create the account +app.get('/accountCreation', function(request, response) { + response.status(200).render('account'); +}); + + + + + + +app.post('/createAccount', function(request, response) { + if ((request.body.username1) && (request.body.username2) && (request.body.password1) && (request.body.password2) && (request.body.password3) && (request.body.username1 == request.body.username2) && (request.body.password1 == request.body.password2) && (request.body.password2 == request.body.password3)) { + db.run("INSERT INTO jsf_account (username, password, account_wins, account_color_theme) VALUES ('" + request.body.username1 + "','" + request.body.password1 + "','" + "0" + "','" + "light" + "')", function(err) { + response.redirect('/login'); + if (err) { + console.log("ERROR:"); + console.log(err); + } else { + console.log("An account with the name of " + request.body.username1 + " was created."); + } + }); + } else { + console.log("Someone didn't confirm their account correctly :)"); + } +}); + +app.get('/leaderboards', function(request, response) { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_account', function(err, results) { + results.sort(function(a, b) { + return parseFloat(b.account_wins) - parseFloat(a.account_wins); + }); + response.status(200).render('leaderboards', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + accounts: results + }); + }); + } + }); +}); + +app.get('/delete', function(request, response) { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + results.account_UID + '\';', function(err, results) { + response.status(200).render('delete', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); +}); + + + + + +app.post('/darkmode', function(request, response) { + request.session.darkmode = true; + let page = request.body.page; + if (page == "modify") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + results.account_UID + '\';', function(err, results) { + response.status(200).render('modify', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); + } else if (page == "delete") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + results.account_UID + '\';', function(err, results) { + response.status(200).render('delete', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); + } else if (page == "leaderboards") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_account', function(err, results) { + results.sort(function(a, b) { + return parseFloat(b.account_wins) - parseFloat(a.account_wins); + }); + response.status(200).render('leaderboards', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + accounts: results + }); + }); + } + }); + } else { + response.status(200).render("" + page + "", { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); + } +}); + + + + + +app.post('/lightmode', function(request, response) { + request.session.darkmode = false; + let page = request.body.page; + if (page == "modify") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + results.account_UID + '\';', function(err, results) { + response.status(200).render('modify', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); + } else if (page == "delete") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + results.account_UID + '\';', function(err, results) { + response.status(200).render('delete', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); + } + }); + } else if (page == "leaderboards") { + db.get('SELECT account_UID FROM jsf_account WHERE username = \'' + request.session.username + '\';', function(err, results) { + if (err) { + console.log("ERROR:"); + console.log(err); + } + else if (results) { + db.all('SELECT * FROM jsf_account', function(err, results) { + results.sort(function(a, b) { + return parseFloat(b.account_wins) - parseFloat(a.account_wins); + }); + response.status(200).render('leaderboards', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + accounts: results + }); + }); + } + }); + } else { + response.status(200).render("" + page + "", { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode + }); + } +}); + + + + +app.get('/api/v0/fighter/search/:pattern', function(req, res) { + db.all("SELECT * FROM jsf_fighters WHERE fighter_name LIKE \'\%" + req.params.pattern + "\%\';", function(err, results) { + console.log(results); + if (err) { + console.log(err); + res.send(err); + } else { + res.set('Content-Type', 'application/json'); + if (results != undefined) { + res.send(JSON.stringify(results)); + } else { + res.send('undefined'); + } + } + }); +}); + +/* +██████ ██ █████ ██ ██ ███████ ██████ +██ ██ ██ ██ ██ ██ ██ ██ ██ ██ +██████ ██ ███████ ████ █████ ██████ +██ ██ ██ ██ ██ ██ ██ ██ +██ ███████ ██ ██ ██ ███████ ██ ██ +*/ + +app.get('/api/v0/player/list/', function(req, res) { + db.all("SELECT * FROM jsf_players;", function(err, results) { + console.log(results); + if (err) { + console.log(err); + res.send(err); + } else { + res.set('Content-Type', 'application/json'); + if (results != "") { + res.send(JSON.stringify(results)); + } else { + res.send('undefined'); + } + } + }); +}); + +app.get('/api/v0/player/show/:playerUID', function(req, res) { + db.all("SELECT * FROM jsf_fighters INNER JOIN jsf_players ON jsf_fighters.fighter_player_UID=jsf_players.player_UID WHERE jsf_players.player_UID = \'" + req.params.playerUID + "\';", function(err, results) { + console.log(results); + if (err) { + console.log(err); + res.send(err); + } else { + res.set('Content-Type', 'application/json'); + if (results != undefined) { + res.send(JSON.stringify(results)); + } else { + res.send('undefined'); + } + } + }); +}); + +app.post('/api/v0/player/add/', function(req, res) { + db.get("SELECT player_name FROM jsf_players WHERE player_name = \'" + req.body.playername + "\';", function(err, results) { + console.log(results); + if (!results) { + db.run("INSERT INTO jsf_players (player_name) VALUES (\'" + req.body.playername + "\');", function(err) { + if (err) { + console.log("INSERT query: " + err); + } else { + res.status(201).send("Success"); + } + }); + } else { + res.status(403).send("User already exists"); + } + }); +}); + +app.post('/api/v0/player/edit/:playerID', function(req, res) { + + +}); + +app.post('/api/v0/player/remove/:playerUID', function(req, res) { + // Delete all fighters first + db.run("DELETE FROM jsf_fighters WHERE fighter_player_UID = \'" + req.params.playerUID + "\';", function(err) { + if (err) { + console.log("DELETE query: " + err); + res.status(403).send("DELETE query: " + err); + } else { + // Then delete player + db.run("DELETE FROM jsf_players WHERE player_UID = \'" + req.params.playerUID + "\';", function(err) { + if (err) { + console.log("DELETE query: " + err); + res.status(403).send("DELETE query: " + err); + } else { + res.status(201).send("Success"); + } + }); + } + }); +}); + +app.get('/api/v0/player/search/:pattern', function(req, res) { + db.all("SELECT * FROM jsf_players WHERE player_name LIKE \'\%" + req.params.pattern + "\%\';", function(err, results) { + console.log(results); + if (err) { + console.log(err); + res.send(err); + } else { + res.set('Content-Type', 'application/json'); + if (results != undefined) { + res.send(JSON.stringify(results)); + } else { + res.send('undefined'); + } + } + }); +}); + + + + + + + + +var options = { + url: 'https://api.github.com/repos/andre2021537/JSFDB', + headers: { + 'User-Agent': 'request' + } +}; + +//selct Character from current player's id +app.get('selectCharacter', function(err, results){ + db.all('SELECT * FROM jsf_fighters WHERE fighter_player_UID = \'' + request.session.accUID + '\';', function(err, results) { + response.status(200).render('modify', { + username: request.session.username, + accountUID: request.session.accUID, + darkmode: request.session.darkmode, + fighters: results + }); + }); +}); + +//github test +app.get('/api/v0/github', function(req, res) { + request(options, function(request_err, request_res, request_body) { + res.status(200).send(request_body); + } + ) +}); diff --git a/database/JSFdatabase.db-journal b/database/JSFdatabase.db-journal new file mode 100644 index 0000000..66182aa Binary files /dev/null and b/database/JSFdatabase.db-journal differ diff --git a/ip.bat b/ip.bat new file mode 100644 index 0000000..af855ad --- /dev/null +++ b/ip.bat @@ -0,0 +1,2 @@ +ipconfig +pause diff --git a/package-lock.json b/package-lock.json index 3ebb4db..fa0910a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,19 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/babel-types": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.7.tgz", + "integrity": "sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==" + }, + "@types/babylon": { + "version": "6.16.5", + "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.5.tgz", + "integrity": "sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==", + "requires": { + "@types/babel-types": "*" + } + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -18,6 +31,26 @@ "negotiator": "0.6.2" } }, + "acorn": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", + "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=" + }, + "acorn-globals": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz", + "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=", + "requires": { + "acorn": "^4.0.4" + }, + "dependencies": { + "acorn": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", + "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=" + } + } + }, "ajv": { "version": "6.10.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", @@ -29,6 +62,26 @@ "uri-js": "^4.2.2" } }, + "align-text": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", + "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", + "requires": { + "kind-of": "^3.0.2", + "longest": "^1.0.1", + "repeat-string": "^1.5.2" + }, + "dependencies": { + "kind-of": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", + "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "requires": { + "is-buffer": "^1.1.5" + } + } + } + }, "ansi-align": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", @@ -137,6 +190,11 @@ "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, "asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -176,9 +234,34 @@ "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" }, "aws4": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", - "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz", + "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==" + }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "babel-types": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", + "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", + "requires": { + "babel-runtime": "^6.26.0", + "esutils": "^2.0.2", + "lodash": "^4.17.4", + "to-fast-properties": "^1.0.3" + } + }, + "babylon": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, "balanced-match": { "version": "1.0.0", @@ -380,6 +463,15 @@ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, + "center-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", + "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=", + "requires": { + "align-text": "^0.1.3", + "lazy-cache": "^1.0.3" + } + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -390,6 +482,14 @@ "supports-color": "^5.3.0" } }, + "character-parser": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz", + "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=", + "requires": { + "is-regex": "^1.0.3" + } + }, "chokidar": { "version": "2.1.8", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", @@ -440,11 +540,36 @@ } } }, + "clean-css": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", + "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", + "requires": { + "source-map": "~0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "cli-boxes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=" }, + "cliui": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", + "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", + "requires": { + "center-align": "^0.1.1", + "right-align": "^0.1.1", + "wordwrap": "0.0.2" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", @@ -508,6 +633,17 @@ "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, + "constantinople": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", + "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==", + "requires": { + "@types/babel-types": "^7.0.0", + "@types/babylon": "^6.16.2", + "babel-types": "^6.26.0", + "babylon": "^6.18.0" + } + }, "content-disposition": { "version": "0.5.3", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", @@ -536,6 +672,11 @@ "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, + "core-js": { + "version": "2.6.11", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", + "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==" + }, "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", @@ -580,6 +721,11 @@ "ms": "2.0.0" } }, + "decamelize": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" + }, "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", @@ -652,6 +798,11 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=" }, + "doctypes": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz", + "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=" + }, "dot-prop": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", @@ -694,6 +845,11 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, + "esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==" + }, "etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", @@ -1474,6 +1630,11 @@ } } }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", @@ -1584,6 +1745,14 @@ "har-schema": "^2.0.0" } }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "requires": { + "function-bind": "^1.1.1" + } + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -1696,9 +1865,9 @@ "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" }, "ipaddr.js": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz", - "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==" + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" }, "is-accessor-descriptor": { "version": "0.1.6", @@ -1774,6 +1943,22 @@ } } }, + "is-expression": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz", + "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=", + "requires": { + "acorn": "~4.0.2", + "object-assign": "^4.0.1" + }, + "dependencies": { + "acorn": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz", + "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=" + } + } + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -1853,11 +2038,24 @@ "isobject": "^3.0.1" } }, + "is-promise": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", + "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=" + }, "is-redirect": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz", "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=" }, + "is-regex": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", + "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "requires": { + "has": "^1.0.3" + } + }, "is-retry-allowed": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz", @@ -1898,6 +2096,11 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, + "js-stringify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz", + "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=" + }, "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", @@ -1929,6 +2132,15 @@ "verror": "1.10.0" } }, + "jstransformer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz", + "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=", + "requires": { + "is-promise": "^2.0.0", + "promise": "^7.0.1" + } + }, "kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", @@ -1942,6 +2154,21 @@ "package-json": "^4.0.0" } }, + "lazy-cache": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", + "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=" + }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, + "longest": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", + "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=" + }, "lowercase-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", @@ -2216,14 +2443,22 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, "npm-bundled": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", - "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz", + "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==", + "requires": { + "npm-normalize-package-bin": "^1.0.1" + } + }, + "npm-normalize-package-bin": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz", + "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==" }, "npm-packlist": { - "version": "1.4.6", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.6.tgz", - "integrity": "sha512-u65uQdb+qwtGvEJh/DgQgW1Xg7sqeNbmxYyrvlNznaVTjV3E5P6F/EFjM+BVHXl7JJlsdG8A64M0XI8FI/IOlg==", + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.7.tgz", + "integrity": "sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==", "requires": { "ignore-walk": "^3.0.1", "npm-bundled": "^1.0.1" @@ -2393,6 +2628,11 @@ "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" }, + "path-parse": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" + }, "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", @@ -2423,13 +2663,21 @@ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + }, "proxy-addr": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz", - "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", + "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==", "requires": { "forwarded": "~0.1.2", - "ipaddr.js": "1.9.0" + "ipaddr.js": "1.9.1" } }, "pseudomap": { @@ -2438,15 +2686,129 @@ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=" }, "psl": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.4.0.tgz", - "integrity": "sha512-HZzqCGPecFLyoRj5HLfuDSKYTJkAfB5thKBIkRHtGjWwY7p1dAyveIbXIq4tO0KYfDF2tHqPUgY9SDnGm00uFw==" + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.6.0.tgz", + "integrity": "sha512-SYKKmVel98NCOYXpkwUqZqh0ahZeeKfmisiLIcEZdsb+WbLv02g/dI5BUmZnIyOe7RzZtLax81nnb2HbvC2tzA==" }, "pstree.remy": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.7.tgz", "integrity": "sha512-xsMgrUwRpuGskEzBFkH8NmTimbZ5PcPup0LA8JJkHIm2IMUbQcpo3yeLNWVrufEYjh8YwtSVh0xz6UeWc5Oh5A==" }, + "pug": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.4.tgz", + "integrity": "sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==", + "requires": { + "pug-code-gen": "^2.0.2", + "pug-filters": "^3.1.1", + "pug-lexer": "^4.1.0", + "pug-linker": "^3.0.6", + "pug-load": "^2.0.12", + "pug-parser": "^5.0.1", + "pug-runtime": "^2.0.5", + "pug-strip-comments": "^1.0.4" + } + }, + "pug-attrs": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.4.tgz", + "integrity": "sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==", + "requires": { + "constantinople": "^3.0.1", + "js-stringify": "^1.0.1", + "pug-runtime": "^2.0.5" + } + }, + "pug-code-gen": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.2.tgz", + "integrity": "sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==", + "requires": { + "constantinople": "^3.1.2", + "doctypes": "^1.1.0", + "js-stringify": "^1.0.1", + "pug-attrs": "^2.0.4", + "pug-error": "^1.3.3", + "pug-runtime": "^2.0.5", + "void-elements": "^2.0.1", + "with": "^5.0.0" + } + }, + "pug-error": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.3.tgz", + "integrity": "sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==" + }, + "pug-filters": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.1.tgz", + "integrity": "sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==", + "requires": { + "clean-css": "^4.1.11", + "constantinople": "^3.0.1", + "jstransformer": "1.0.0", + "pug-error": "^1.3.3", + "pug-walk": "^1.1.8", + "resolve": "^1.1.6", + "uglify-js": "^2.6.1" + } + }, + "pug-lexer": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.1.0.tgz", + "integrity": "sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==", + "requires": { + "character-parser": "^2.1.1", + "is-expression": "^3.0.0", + "pug-error": "^1.3.3" + } + }, + "pug-linker": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.6.tgz", + "integrity": "sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==", + "requires": { + "pug-error": "^1.3.3", + "pug-walk": "^1.1.8" + } + }, + "pug-load": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.12.tgz", + "integrity": "sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==", + "requires": { + "object-assign": "^4.1.0", + "pug-walk": "^1.1.8" + } + }, + "pug-parser": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.1.tgz", + "integrity": "sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==", + "requires": { + "pug-error": "^1.3.3", + "token-stream": "0.0.1" + } + }, + "pug-runtime": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.5.tgz", + "integrity": "sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==" + }, + "pug-strip-comments": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz", + "integrity": "sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==", + "requires": { + "pug-error": "^1.3.3" + } + }, + "pug-walk": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.8.tgz", + "integrity": "sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==" + }, "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", @@ -2520,6 +2882,11 @@ "readable-stream": "^2.0.2" } }, + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + }, "regex-not": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", @@ -2595,6 +2962,14 @@ } } }, + "resolve": { + "version": "1.14.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.2.tgz", + "integrity": "sha512-EjlOBLBO1kxsUxsKjLt7TAECyKW6fOh1VRkykQkKGzcBbjjPIxBqGh0jf7GJ3k/f5mxMqW3htMD3WdTUVtW8HQ==", + "requires": { + "path-parse": "^1.0.6" + } + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -2605,6 +2980,14 @@ "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==" }, + "right-align": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", + "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=", + "requires": { + "align-text": "^0.1.1" + } + }, "rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", @@ -2864,9 +3247,9 @@ } }, "sqlite3": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-4.1.0.tgz", - "integrity": "sha512-RvqoKxq+8pDHsJo7aXxsFR18i+dU2Wp5o12qAJOV5LNcDt+fgJsc2QKKg3sIRfXrN9ZjzY1T7SNe/DFVqAXjaw==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-4.1.1.tgz", + "integrity": "sha512-CvT5XY+MWnn0HkbwVKJAyWEMfzpAPwnTiB3TobA5Mri44SrTovmmh499NPQP+gatkeOipqPlBLel7rn4E/PCQg==", "requires": { "nan": "^2.12.1", "node-pre-gyp": "^0.11.0", @@ -2984,6 +3367,11 @@ "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" }, + "to-fast-properties": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -3027,6 +3415,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" }, + "token-stream": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz", + "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=" + }, "touch": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", @@ -3083,6 +3476,22 @@ "mime-types": "~2.1.24" } }, + "uglify-js": { + "version": "2.8.29", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", + "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=", + "requires": { + "source-map": "~0.5.1", + "uglify-to-browserify": "~1.0.0", + "yargs": "~3.10.0" + } + }, + "uglify-to-browserify": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", + "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", + "optional": true + }, "uid-safe": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz", @@ -3242,6 +3651,11 @@ "extsprintf": "^1.2.0" } }, + "void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", + "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=" + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", @@ -3295,6 +3709,25 @@ } } }, + "window-size": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", + "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=" + }, + "with": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz", + "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=", + "requires": { + "acorn": "^3.1.0", + "acorn-globals": "^3.0.0" + } + }, + "wordwrap": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", + "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=" + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", @@ -3319,6 +3752,24 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + }, + "yargs": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", + "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=", + "requires": { + "camelcase": "^1.0.2", + "cliui": "^2.1.0", + "decamelize": "^1.0.0", + "window-size": "0.1.0" + }, + "dependencies": { + "camelcase": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", + "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=" + } + } } } } diff --git a/package.json b/package.json index 7bfd10a..3e64589 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "express": "^4.17.1", "express-session": "^1.16.2", "nodemon": "^1.19.2", - "sqlite3": "^4.1.0" + "pug": "^2.0.4", + "sqlite3": "^4.1.1" } } diff --git a/public/createIcon.png b/public/createIcon.png new file mode 100644 index 0000000..14fcaaa Binary files /dev/null and b/public/createIcon.png differ diff --git a/public/css/bg1.jpg b/public/css/bg1.jpg new file mode 100644 index 0000000..86636e4 Binary files /dev/null and b/public/css/bg1.jpg differ diff --git a/public/css/bg2.jpg b/public/css/bg2.jpg new file mode 100644 index 0000000..93b2252 Binary files /dev/null and b/public/css/bg2.jpg differ diff --git a/public/css/bg3.jpg b/public/css/bg3.jpg new file mode 100644 index 0000000..c07f3a1 Binary files /dev/null and b/public/css/bg3.jpg differ diff --git a/public/css/bg4.jpg b/public/css/bg4.jpg new file mode 100644 index 0000000..b206616 Binary files /dev/null and b/public/css/bg4.jpg differ diff --git a/public/css/bg5.jpg b/public/css/bg5.jpg new file mode 100644 index 0000000..e52fd45 Binary files /dev/null and b/public/css/bg5.jpg differ diff --git a/public/css/bg6.jpg b/public/css/bg6.jpg new file mode 100644 index 0000000..d1e3733 Binary files /dev/null and b/public/css/bg6.jpg differ diff --git a/public/css/bg7.jpg b/public/css/bg7.jpg new file mode 100644 index 0000000..933732d Binary files /dev/null and b/public/css/bg7.jpg differ diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..65617bd --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,1686 @@ + +/* Body Appearance */ +body { + + font-family: sans-serif; + text-align: center; + background-color: #f2f2f2; + overflow-x: hidden; + /* -webkit-animation: bgcolor 20s infinite; + animation: bgcolor 10s infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; */ + margin: 0px; + padding: 0px; + margin-top: 5px; +} + + + + +/* @keyframes bgcolor { + 0% { + background-color: #45a3e5 + } + + 30% { + background-color: #66bf39 + } + + 60% { + background-color: #eb670f + } + + 90% { + background-color: #f35 + } + + 100% { + background-color: #864cbf + } +} */ + + + + +html { + overflow-x: hidden; +} + +/* Removes scrollbar in chrome */ +::-webkit-scrollbar { + display: none; +} + + /* Removes auto underlining from Text */ +a { + text-decoration: inherit; +} + + /* Removes default blue highlight */ +button:focus {outline:0;} +Input:focus {outline:0;} + +.leaderboard { + /*Appearance*/ + background-color: transparent; + margin-left: 30%; + font-size: 200%; + /*Position*/ + display: center; + text-align: center; + display: flex; +} + +.leaderboardTop { + margin-top: 2%; +} + + + +.Sbutton { + font-size: 175%; + border: solid 0px black; + background-color: transparent; + color: #545454; + width: 102%; + position: absolute; + height: 160%; + left: -0.9% +} + + + +form { + display: inline-block; +} + +.left { + right: 2%; +} + +.right { + left: 2%; +} + + +.usernameBox { + /*Appearance*/ + color: #004869; + font-family: sans-serif; + font-size: 200%; + /*Position*/ + position: fixed; + float: right; + text-align: left; + margin-top: 19px; + right: 1%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.usernameBox:hover { + color: #7289DA!important; + cursor: pointer; +} + +.welcome { + /*Appearance*/ + color: #004869; + font-family: sans-serif; + font-size: 32px; + height: 1px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-left: 65px; + margin-top: -44px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.welcomeH { + /*Appearance*/ + font-family: sans-serif; + font-size: 200%; + color: #004869; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 15px; + margin-left: 10.5%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.logoutButton { + /*Appearance*/ + background-color: transparent; + font-family: sans-serif; + font-size: 28px; + border: solid 2px #f54242; + border-radius: 4px; + color: #f54242; + height: 37.5px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 0.2%; + margin-left: 15px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.logoutButton:hover { + background-color: #f54242; + cursor: pointer; +} + +.darkmodeButton { + /*Appearance*/ + background-color: transparent; + font-family: sans-serif; + font-size: 28px; + border: solid 2px #5630b0; + border-radius: 4px; + color: #5630b0; + height: 37.5px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 0.2%; + margin-left: 130px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.darkmodeButton:hover { + color: #f2f2f2; + background-color: #5630b0; + cursor: pointer; +} + + +.lightmodeButton { + /*Appearance*/ + background-color: transparent; + font-family: sans-serif; + font-size: 28px; + border: solid 2px #fcf803; + border-radius: 4px; + color: #fcf803; + height: 37.5px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 0.2%; + margin-left: 130px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.lightmodeButton:hover { + color: #23272A; + background-color: #fcf803; + cursor: pointer; +} + + + + + + +.darkmodeButtonH { + /*Appearance*/ + background-color: transparent; + font-family: sans-serif; + font-size: 28px; + border: solid 2px #5630b0; + border-radius: 4px; + color: #5630b0; + height: 37.5px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 0.2%; + margin-left: 20px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.darkmodeButtonH:hover { + color: #f2f2f2; + background-color: #5630b0; + cursor: pointer; +} + + +.lightmodeButtonH { + /*Appearance*/ + background-color: transparent; + font-family: sans-serif; + font-size: 28px; + border: solid 2px #fcf803; + border-radius: 4px; + color: #fcf803; + height: 37.5px; + /*Position*/ + position: fixed; + float: left; + text-align: left; + margin-top: 0.2%; + margin-left: 20px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.lightmodeButtonH:hover { + color: #23272A; + background-color: #fcf803; + cursor: pointer; +} + + + + + + + + + + + + +.backButton { + /*Appearance*/ + font-family: sans-serif; + color: #004869; + /*Position*/ + height: 1px; + position: fixed; + font-size: 40px; + margin-top: 10px; + margin-left: 9.5%; +} + +.backButton:hover { + color: #7289DA; + cursor: pointer; +} + +.nextButton { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 15px; + font-size: 150%; + display: block; + float: right; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.nextButton:hover { + color: #7289DA; + cursor: pointer; +} + +.prevButton { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 15px; + font-size: 150%; + display: block; + float: left; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.prevButton:hover { + color: #7289DA; + cursor: pointer; +} + +.displayNameModify { + margin-left: 120%; + position: absolute; +} + +.card { + /*Appearance*/ + background-color: transparent; + width: 20%; + height: 50%; + border: 0px solid black; + padding: 2%; + margin: 1%; + top: 1%; + right: 37%; + /*Position*/ + display: center; + position: absolute; +} + +.card2 { + /*Appearance*/ + background-color: #f2f2f2; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 12%; + height: 300px; + border: 2px solid #004869; + padding: 2%; + margin: 1%; + margin-top: 100px; + margin-left: 50%; + font-size: 150%; + /*Position*/ + position: absolute; + display: center; + text-align: center; +} + +.modifyFighter { + margin-top: 90px; + margin-left: 25px; + position: absolute; + margin-left: 10%; +} + +.hr { + background-color: #f2f2f2; + border-bottom: solid 2px #004869; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + height: 65px; + margin-left: -10%; + margin-top: -1%; + width: 150%; + position: fixed; + z-index: 1; +} + + + +.bar1 { + background-color: #f2f2f2; + border-bottom: solid 2px #004869; + border-top: solid 2px #004869; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + height: 50px; + margin-left: -15.5%; + margin-top: 80px; + margin-bottom: -1%; + width: 150%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.bar2 { + background-color: #f2f2f2; + border: solid 2px #004869; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + color: #004869; + height: 40px; + margin-left: -42%; + margin-top: 10px; + width: 50px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.bar2Display1 { + margin-top: 15px; + margin-left: 5px; + color: #004869; +} + +.bar2Display2 { + position: absolute; + margin-top: 15px; + margin-left: 63%; + color: #004869; +} + +.tab1 { + /*Appearance*/ + font-family: sans-serif; + font-size: 200%; + color: #004869; + border-right: solid 2px #004869; + border-bottom: solid 2px #004869; + height: 42px; + padding-top: 8px; + padding-right: 15px; + padding-left: 2%; + /*Position*/ + float: left; + text-align: left; + margin-top: 0px; + margin-left: 9.3%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.tab1:hover, .tab2:hover { + color: #7289DA!important; + cursor: pointer; +} + + + +.tab2 { + /*Appearance*/ + font-family: sans-serif; + font-size: 200%; + color: #004869; + border-right: solid 2px #004869; + border-bottom: solid 2px #004869; + height: 42px; + padding-top: 8px; + padding-right: 15px; + padding-left: 15px; + /*Position*/ + float: left; + text-align: left; + margin-top: 0px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.tab3 { + /*Appearance*/ + font-family: sans-serif; + font-size: 200%; + color: #004869; + height: 42px; + padding-top: 8px; + padding-right: 24.5%; + /*Position*/ + float: right; + text-align: left; + margin-top: 0px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + + + + + + + + + + + +.TWOcard2 { + /*Appearance*/ + background-color: transparent; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 20%; + /*Position*/ + display: center; + position: absolute; +} + +.TWOcard1 { + /*Appearance*/ + background-color: transparent; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 50%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard1 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard2 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard3 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + +.THREEcard4 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard5 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard6 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + +.THREEcard7 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard8 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard9 { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + + + + + + +/*DARK MODE VERSION*/ + + + + + +.TWOcard2D { + /*Appearance*/ + background-color: transparent; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 20%; + /*Position*/ + display: center; + position: absolute; +} + +.TWOcard1D { + /*Appearance*/ + background-color: transparent; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 50%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard1D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard2D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard3D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + top: 10%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + +.THREEcard4D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard5D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard6D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 70%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + +.THREEcard7D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 70%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard8D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 37.5%; + /*Position*/ + display: center; + position: absolute; +} + + +.THREEcard9D { + /*Appearance*/ + background-color: #f2f2f2; + border: solid 2px #ebebeb; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + width: 20%; + height: 40%; + padding: 2%; + margin: 1%; + margin-bottom: 50px; + top: 130%; + right: 5%; + /*Position*/ + display: center; + position: absolute; +} + + + + + + + + +.THREEcard1:before, .THREEcard2:before, .THREEcard3:before, .THREEcard4:before, .THREEcard5:before, .THREEcard6:before, .THREEcard7:before, .THREEcard8:before, .THREEcard9:before, .TWOcard2:before, .TWOcard1:before { + position:absolute; + bottom:-1em; left:0; + width:100%; +} + +.THREEcard1:after, .THREEcard1:before, .THREEcard2:after, .THREEcard2:before, .THREEcard3:after, .THREEcard3:before, .THREEcard4:after, .THREEcard4:before, .THREEcard5:after, .THREEcard5:before, .THREEcard6:after, .THREEcard6:before, .THREEcard7:after, .THREEcard7:before, .THREEcard8:after, .THREEcard8:before, .THREEcard9:after, .THREEcard9:before, .TWOcard2:after, .TWOcard2:before, .TWOcard1:after, .TWOcard1:before { + content: ''; + border-bottom: solid 3px #004869; + transform: scaleX(0); + transition: transform 250ms ease-in-out; +} + +.THREEcard1:hover:after, .THREEcard1:hover:before, .THREEcard2:hover:after, .THREEcard2:hover:before, .THREEcard3:hover:after, .THREEcard3:hover:before, .THREEcard4:hover:after, .THREEcard4:hover:before, .THREEcard5:hover:after, .THREEcard5:hover:before, .THREEcard6:hover:after, .THREEcard6:hover:before, .THREEcard7:hover:after, .THREEcard7:hover:before, .THREEcard8:hover:after, .THREEcard8:hover:before, .THREEcard9:hover:after, .THREEcard9:hover:before, .TWOcard2:hover:after, .TWOcard2:hover:before, .TWOcard1:hover:after, .TWOcard1:hover:before { + transform: scaleX(1); +} + + +/*DARK MODE VERSION*/ + + + +.THREEcard1D:before, .THREEcard2D:before, .THREEcard3D:before, .THREEcard4D:before, .THREEcard5D:before, .THREEcard6D:before, .THREEcard7D:before, .THREEcard8D:before, .THREEcard9D:before, .TWOcard2D:before, .TWOcard1D:before { + position:absolute; + bottom:-1em; left:0; + width:100%; +} + +.THREEcard1D:after, .THREEcard1D:before, .THREEcard2D:after, .THREEcard2D:before, .THREEcard3D:after, .THREEcard3D:before, .THREEcard4D:after, .THREEcard4D:before, .THREEcard5D:after, .THREEcard5D:before, .THREEcard6D:after, .THREEcard6D:before, .THREEcard7D:after, .THREEcard7D:before, .THREEcard8D:after, .THREEcard8D:before, .THREEcard9D:after, .THREEcard9D:before, .TWOcard2D:after, .TWOcard2D:before, .TWOcard1D:after, .TWOcard1D:before { + content: ''; + border-bottom: solid 3px #7289DA; + transform: scaleX(0); + transition: transform 250ms ease-in-out; +} + +.THREEcard1D:hover:after, .THREEcard1D:hover:before, .THREEcard2D:hover:after, .THREEcard2D:hover:before, .THREEcard3D:hover:after, .THREEcard3D:hover:before, .THREEcard4D:hover:after, .THREEcard4D:hover:before, .THREEcard5D:hover:after, .THREEcard5D:hover:before, .THREEcard6D:hover:after, .THREEcard6D:hover:before, .THREEcard7D:hover:after, .THREEcard7D:hover:before, .THREEcard8D:hover:after, .THREEcard8D:hover:before, .THREEcard9D:hover:after, .THREEcard9D:hover:before, .TWOcard2D:hover:after, .TWOcard2:hover:before, .TWOcard1:hover:after, .TWOcard1:hover:before { + transform: scaleX(1); +} + + + + + + + + + + + + + + + + + + + + + + + + + + + +.THREEcard5:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard5:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard5:hover .Sbutton { + color: #004869; + cursor: pointer; +} + + + +.THREEcard6:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard6:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard6:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard4:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard4:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard4:hover .Sbutton { + color: #004869; + cursor: pointer; +} + + + +.THREEcard7:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard7:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard7:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard8:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard8:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard8:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard9:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard9:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard9:hover .Sbutton { + color: #004869; + cursor: pointer; +} + + + + +.TWOcard2:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.TWOcard2:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.TWOcard2:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.TWOcard1:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.TWOcard1:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.TWOcard1:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard1:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard1:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard1:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard3:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard3:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard3:hover .Sbutton { + color: #004869; + cursor: pointer; +} + +.THREEcard2:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard2:hover input { + filter: sepia(100%) contrast(400%) saturate(200%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard2:hover .Sbutton { + color: #004869; + cursor: pointer; +} + + + + + + +/*DARK MODE VERSION*/ + + + +.THREEcard5D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard5D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard5D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + + + +.THREEcard6D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard6D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard6D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard4D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard4D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard4D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + + + +.THREEcard7D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard7D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard7D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard8D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard8D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard8D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard9D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard9D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard9D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + + + + +.TWOcard2D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.TWOcard2D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.TWOcard2D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.TWOcard1D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.TWOcard1D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.TWOcard1D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard1D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard1D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard1D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard3D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard3D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard3D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + +.THREEcard2D:hover { + border: solid 2px #e3e3e3; + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19); + cursor: pointer; +} + +.THREEcard2D:hover input { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); + cursor: pointer; +} + +.THREEcard2D:hover .Sbutton { + color: #7289DA; + cursor: pointer; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +.Pimg { + +} + +.Eimg { + +} + +.Simg { + +} + +.modifyInput { + margin-top: 10%; + margin-right: 50%; +} + +::placeholder { + color: #545454; +} + +::selection { + color: none; + background: none; +} + +.createFighter { + margin-top: 90px; + margin-left: 25px; + position: absolute; + margin-left: 32%; +} + +.Input0 { + border: 2px solid #004869; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: #f2f2f2; + color: #545454; + width: auto; + margin-bottom: 4px; + font-size: 250%; + display: block; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + + + +.Input0:hover { + color: #7289DA; +} + +.Input1 { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 6px; + font-size: 250%; + display: block; + float: right; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.Input0T { + border: 2px solid #004869; + background-color: #f2f2f2; + color: #545454; + width: auto; + margin-bottom: 15px; + margin-top: -15px; + font-size: 150%; + display: block; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.Input1R { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 6px; + font-size: 250%; + display: block; + float: left; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.Input1T { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 6px; + font-size: 150%; + display: block; + float: right; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.Input1RT { + background-color: transparent; + color: #545454; + margin-bottom: 6px; + margin-top: 6px; + font-size: 150%; + display: block; + float: left; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.Input3 { + border: 0px solid black; + background-color: transparent; + color: lime; + margin-bottom: 4px; + margin-top: -4px; + font-size: 250%; + display: block; + float: left; +} + +.Input3:hover { + color: #7289DA!important; +} + +.Input4 { + border: 0px solid black; + background-color: transparent; + color: red; + margin-top: 3.5%; + margin-left: 5px; + font-size: 250%; + position: absolute; +} + +.Input5 { + border: 0px solid black; + background-color: transparent; + color: red; + margin-top: 10%; + margin-left: 5px; + font-size: 250%; + position: absolute; +} + +.Input2 { + border: 0px solid black; + background-color: transparent; + color: lime; + margin-bottom: 4px; + font-size: 250%; + display: block; + float: right; + margin-left: 15px; +} + + +.slider { + -webkit-appearance: none; + width: 100%; + height: 15px; + border-radius: 5px; + background: black; + opacity: 0.4; + outline: none; + margin-left: auto; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 50%; + background: black; + cursor: pointer; +} + +.slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 50%; + cursor: pointer; +} + +.highlight:hover { + filter: sepia(100%) contrast(100%) saturate(300%) hue-rotate(180deg); +} + +.settings { + background-color: transparent; + color: #004869; + margin-bottom: 6px; + margin-top: 6px; + margin-left: 15px; + font-size: 200%; + display: block; + float: left; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.lightBox { + /*Appearance*/ + background-color: #f2f2f2; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + font-family: sans-serif; + font-size: 28px; + border: solid 2px #ebebeb; + border-radius: 4px; + color: #004869; + height: 37.5px; + /*Position*/ + float: left; + text-align: left; + margin-top: 0.5%; + margin-left: 25px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.darkBox { + /*Appearance*/ + background-color: #f2f2f2; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + font-family: sans-serif; + font-size: 28px; + border: solid 2px #ebebeb; + border-radius: 4px; + color: #23272A; + height: 37.5px; + /*Position*/ + float: left; + text-align: left; + margin-top: 0.5%; + margin-left: 25px; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} + +.lightBox:hover { + color: #f2f2f2; + background-color: #004869; + cursor: pointer; +} + +.darkBox:hover { + color: #f2f2f2; + background-color: #23272A; + cursor: pointer; +} diff --git a/public/css/layout.css b/public/css/layout.css index 1069fb6..6180feb 100644 --- a/public/css/layout.css +++ b/public/css/layout.css @@ -19,3 +19,16 @@ border: 0; box-sizing: border-box; } + + +.NAbutton { + font-size: 100%; + text-decoration: underline; + border: solid 0px black; + background-color: transparent; + color: #4d4d4d; +} + +::selection { + color: #7289DA; +} diff --git a/public/css/style.css b/public/css/style.css index 42f2b71..a584902 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -14,3 +14,16 @@ font-weight: bold; color: #ffffff; } + +.NAbutton { + font-size: 100%; + text-decoration: underline; + border: solid 0px black; + background-color: transparent; + color: #dddddd; + cursor: pointer; +} + +/* Removes default blue highlight */ +button:focus {outline:0;} +Input:focus {outline:0;} diff --git a/public/deleteIcon.png b/public/deleteIcon.png new file mode 100644 index 0000000..bbddeff Binary files /dev/null and b/public/deleteIcon.png differ diff --git a/public/editorIcon.png b/public/editorIcon.png new file mode 100644 index 0000000..162bfe3 Binary files /dev/null and b/public/editorIcon.png differ diff --git a/public/leaderboardIcon.png b/public/leaderboardIcon.png new file mode 100644 index 0000000..ef925f2 Binary files /dev/null and b/public/leaderboardIcon.png differ diff --git a/public/left.png b/public/left.png new file mode 100644 index 0000000..9f42d4f Binary files /dev/null and b/public/left.png differ diff --git a/public/login.html b/public/login.html deleted file mode 100644 index 18f628a..0000000 --- a/public/login.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - Login - - - - - -
-

Login Form

-
- - - -
-
- - - diff --git a/public/modifyIcon.png b/public/modifyIcon.png new file mode 100644 index 0000000..6230489 Binary files /dev/null and b/public/modifyIcon.png differ diff --git a/public/playIcon.png b/public/playIcon.png new file mode 100644 index 0000000..1be301e Binary files /dev/null and b/public/playIcon.png differ diff --git a/public/right.png b/public/right.png new file mode 100644 index 0000000..d7b71f2 Binary files /dev/null and b/public/right.png differ diff --git a/public/selectIcon.png b/public/selectIcon.png new file mode 100644 index 0000000..755df6c Binary files /dev/null and b/public/selectIcon.png differ diff --git a/public/settingsIcon.png b/public/settingsIcon.png new file mode 100644 index 0000000..fa886f7 Binary files /dev/null and b/public/settingsIcon.png differ diff --git a/public/unknownIcon.png b/public/unknownIcon.png new file mode 100644 index 0000000..807c00b Binary files /dev/null and b/public/unknownIcon.png differ diff --git a/run.bat b/run.bat new file mode 100644 index 0000000..d7d0044 --- /dev/null +++ b/run.bat @@ -0,0 +1,2 @@ +node app.js +pause diff --git a/views/account.pug b/views/account.pug new file mode 100644 index 0000000..c7e83a5 --- /dev/null +++ b/views/account.pug @@ -0,0 +1,70 @@ +html + head + title JSBrowser Login + link(rel='stylesheet' href='/css/style.css') + link(rel='stylesheet' href='/css/layout.css') + link(rel='stylesheet' href='/css/home.css') + body + div(class="hr" id="hr") + div(class="usernameBox" id="username")= 'Guest' + div(class="welcomeH" id="welcome")= 'JSBrowser' + button(class="lightmodeButtonH" id="light" onclick="lightMode();")= 'Light Mode' + button(class="darkmodeButtonH" id="dark" onclick="darkMode();")= 'Dark Mode' + script. + let darkCheck = 0; + document.getElementById("light").style.visibility = "hidden"; + function darkMode() { + darkCheck = 1; + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.body.style.background = "#2C2F33"; + + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + } + function lightMode() { + darkCheck = 0; + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + + document.body.style.background = "#f2f2f2"; + + document.getElementById('hr').style.backgroundColor = "#f2f2f2"; + document.getElementById('hr').style.borderColor = "#004869"; + document.getElementById('welcome').style.color = "#004869"; + document.getElementById('username').style.color = "#004869"; + } + + + + + + + .login-form + h1(style="margin-top: 20%;") Account Form + form(action='createAccount' method='POST') + input(type='text' name='username1' id="username1" placeholder='Username' required='') + input(type='text' name='username2' id="username2" placeholder='Confirm Username' required='') + input(type='password' name='password1' id="password1" placeholder='Password' required='') + input(type='password' name='password2' id="password2" placeholder='Confirm Password' required='') + input(type='password' name='password3' id="password3" placeholder='Confirm Confirmed Password' required='') + input(type='submit' onclick="check();") + div(id="submitCheck" style="margin-top: 15px;")='' + script. + + + + function check() { + if (document.getElementById("username1").value != document.getElementById("username2").value) { + document.getElementById("submitCheck").innerHTML = "Usernames Don't Match!" + } else if (document.getElementById("password1").value != document.getElementById("password2").value) { + document.getElementById("submitCheck").innerHTML = "Passwords Don't Match!" + } else if (document.getElementById("password2").value != document.getElementById("password3").value) { + document.getElementById("submitCheck").innerHTML = "Passwords Don't Match!" + } + } diff --git a/views/create.pug b/views/create.pug new file mode 100644 index 0000000..a08f776 --- /dev/null +++ b/views/create.pug @@ -0,0 +1,152 @@ +html + head + title JSF Creator + link(rel='stylesheet', href='/css/home.css') + body + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='editor'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="create") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="create") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + document.body.style.background = "#2C2F33"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } + div(class="createFighter") + form(action="/createFighter" method="POST" autocomplete="off") + Input(class="input0" placeholder="Name" name="name" id="name") + div(class="highlight") + div(class="input1R" id="atkR2")= 'Attack:' + div(class="input1" id="atkR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="atkS" name="atk") + div(class="highlight") + div(class="input1R" id="defR2")= 'Defense:' + div(class="input1" id="defR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="defS" name="def") + div(class="highlight") + div(class="input1R" id="tekR2")= 'Technique:' + div(class="input1" id="tekR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="tekS" name="tek") + Input(class="input3" type="submit" value="Create" id="create" onclick="submitCheck()") + div(class="input2" id="total")= 'Total: 90' + div(class="input5" id="check")= '' + + + + + script. + var total = 90; + var atkS = document.getElementById("atkS"); + var defS = document.getElementById("defS"); + var tekS = document.getElementById("tekS"); + document.getElementById("atkR"); + document.getElementById("defR"); + document.getElementById("tekR"); + + + atkS.oninput = function() { + document.getElementById("atkR").innerHTML = atkS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + defS.oninput = function() { + document.getElementById("defR").innerHTML = defS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + tekS.oninput = function() { + document.getElementById("tekR").innerHTML = tekS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + function submitCheck() { + if (total != 90) { + document.getElementById("check").innerHTML = "Total doesn't add up to 90"; + } + if (!document.getElementById("name").value) { + document.getElementById("check").innerHTML = "No name selected"; + } + } + script. + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('name').style.borderColor = "#2c3236"; + document.getElementById('name').style.backgroundColor = "#23272A"; + document.getElementById('name').style.color = "#99AAB5"; + } diff --git a/views/delete.pug b/views/delete.pug new file mode 100644 index 0000000..218bc77 --- /dev/null +++ b/views/delete.pug @@ -0,0 +1,270 @@ +html + head + title JSF Modifier + link(rel='stylesheet', href='/css/home.css') + body + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='editor'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="modify") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="modify") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + document.body.style.background = "#2C2F33"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } + each fighter in fighters + div(class="card2" id="0") + input(type="hidden" name="accUID" value=fighter.fighter_player_UID) + div(class="input0T" id="A")= fighter.fighter_name + div(class="input1RT")= 'Attack:' + div(class="input1T")= fighter.stat_atk + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="input1RT")= 'Defense:' + div(class="input1T")= fighter.stat_def + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="input1RT")= 'Technique:' + div(class="input1T")= fighter.stat_tek + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="nextButton" onclick="swapF()")='≫' + div(class="prevButton" onclick="swapB()")='≪' + p(id="name" style="visibility:hidden")=fighter.fighter_name + p(id="atk" style="visibility:hidden")=fighter.stat_atk + p(id="def" style="visibility:hidden")=fighter.stat_def + p(id="tek" style="visibility:hidden")=fighter.stat_tek + p(id="selection" style="visibility:hidden")='0' + div(class="modifyFighter") + form(action="/deleteFighter" method="POST" class="right" autocomplete="off") + Input(class="input0" placeholder="Name" name="name" id="nameS" value="None Selected" readonly) + div(class="highlight") + div(class="input1R" id="atkR2")= 'Attack:' + div(class="input1" id="atkR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="atkS" name="atk") + div(class="highlight") + div(class="input1R" id="defR2")= 'Defense:' + div(class="input1" id="defR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="defS" name="def") + div(class="highlight") + div(class="input1R" id="tekR2")= 'Technique:' + div(class="input1" id="tekR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="tekS" name="tek") + Input(class="input3" type="submit" value="Delete" id="create" onclick="submitCheck()") + div(class="input2" id="total")= 'Total: 90' + div(class="input5" id="check")= '' + script. + + var total = 90; + var atkS = document.getElementById("atkS"); + var defS = document.getElementById("defS"); + var tekS = document.getElementById("tekS"); + document.getElementById("atkR"); + document.getElementById("defR"); + document.getElementById("tekR"); + + + atkS.oninput = function() { + document.getElementById("atkR").innerHTML = atkS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + defS.oninput = function() { + document.getElementById("defR").innerHTML = defS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + tekS.oninput = function() { + document.getElementById("tekR").innerHTML = tekS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + function submitCheck() { + if (total != 90) { + document.getElementById("check").innerHTML = "Total doesn't add up to 90"; + } + if (!document.getElementById("name").value) { + document.getElementById("check").innerHTML = "No name selected"; + } + } + + + + + + + + + + let selection = 0; + let counter = 0; + let counterA = "A0"; + let nameCounter = "name0"; + let atkCounter = "atk0"; + let defCounter = "def0"; + let tekCounter = "tek0"; + let cardNumber = 0; + + function switcher() { + + document.getElementsByClassName("card2")[counter].id = counter; + document.getElementById("name").id = nameCounter; + document.getElementById("atk").id = atkCounter; + document.getElementById("def").id = defCounter; + document.getElementById("tek").id = tekCounter; + document.getElementById("A").id = counterA; + + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById(counter).style.color = "#99AAB5"; + document.getElementById(counter).style.backgroundColor = "#23272A"; + document.getElementById(counter).style.borderColor = "#2c3236"; + document.getElementById("A" + counter).style.color = "#99AAB5"; + document.getElementById("A" + counter).style.backgroundColor = "#23272A"; + document.getElementById("A" + counter).style.borderColor = "#2c3236"; + } + + counter = counter + 1; + nameCounter = "name" + counter; + atkCounter = "atk" + counter; + defCounter = "def" + counter; + tekCounter = "tek" + counter; + counterA = "A" + counter; + console.log(counter) + console.log(nameCounter) + } + for (i = 0; i < 100; i++) { + switcher(); + document.getElementById(i).style.visibility = "hidden"; + document.getElementById(0).style.visibility = "visible"; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + + + + + + function swapF() { + if (cardNumber < (counter - 1)) { + cardNumber = cardNumber + 1; + let oldCard = cardNumber - 1; + document.getElementById(oldCard).style.visibility = "hidden"; + document.getElementById(cardNumber).style.visibility = "visible"; + console.log(cardNumber); + selection = cardNumber; + document.getElementById("selection").innerHTML = selection; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + } + function swapB() { + if (cardNumber > 0) { + cardNumber = cardNumber - 1; + let oldCard = cardNumber + 1; + document.getElementById(oldCard).style.visibility = "hidden"; + document.getElementById(cardNumber).style.visibility = "visible"; + console.log(cardNumber); + selection = cardNumber; + document.getElementById("selection").innerHTML = selection; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + } + script. + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('nameS').style.borderColor = "#2c3236"; + document.getElementById('nameS').style.backgroundColor = "#23272A"; + document.getElementById('nameS').style.color = "#99AAB5"; + } diff --git a/views/editor.pug b/views/editor.pug new file mode 100644 index 0000000..899e1e7 --- /dev/null +++ b/views/editor.pug @@ -0,0 +1,87 @@ +html + head + title JSF Editor + link(rel='stylesheet', href='/css/home.css') + body + form(action="create" method="GET" class="THREEcard1" id="card1") + input(type="image" src="createIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") Create + form(action="modify" method="GET" class="THREEcard2" id="card2") + input(type="image" src="modifyIcon.png" class="Simg" height="120" width="120") + button(class="Sbutton") Modify + form(action="delete" method="GET" class="THREEcard3" id="card3") + input(type="image" src="deleteIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Delete + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='jsfighterGame'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="editor") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="editor") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.getElementById('card1').className = "THREE" + document.getElementById('card1').id + "D" + document.getElementById('card2').className = "THREE" + document.getElementById('card2').id + "D" + document.getElementById('card3').className = "THREE" + document.getElementById('card3').id + "D" + + document.body.style.background = "#2C2F33"; + document.getElementById('card1').style.backgroundColor = "#23272A"; + document.getElementById('card1').style.borderColor = "#2c3236"; + document.getElementById('card2').style.backgroundColor = "#23272A"; + document.getElementById('card2').style.borderColor = "#2c3236"; + document.getElementById('card3').style.backgroundColor = "#23272A"; + document.getElementById('card3').style.borderColor = "#2c3236"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } diff --git a/views/index.pug b/views/index.pug new file mode 100644 index 0000000..7bb5af3 --- /dev/null +++ b/views/index.pug @@ -0,0 +1,63 @@ +html + head + title Home - JSBrowser + link(rel='stylesheet', href='/css/home.css') + body(class="body") + form(action="play" method="GET" class="THREEcard1" id="card1") + input(type="image" src="playIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") Play + form(action="settings" method="GET" class="THREEcard2" id="card2") + input(type="image" src="settingsIcon.png" class="Simg" height="120" width="120") + button(class="Sbutton") Settings + form(action="details" method="GET" class="THREEcard3" id="card3") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Details + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="welcomeH" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter()" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="index") + button(class="lightmodeButton" id="light")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="index") + button(class="darkmodeButton" id="dark")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.getElementById('card1').className = "THREE" + document.getElementById('card1').id + "D" + document.getElementById('card2').className = "THREE" + document.getElementById('card2').id + "D" + document.getElementById('card3').className = "THREE" + document.getElementById('card3').id + "D" + + document.body.style.background = "#2C2F33"; + document.getElementById('card1').style.backgroundColor = "#23272A"; + document.getElementById('card1').style.borderColor = "#2c3236"; + document.getElementById('card2').style.backgroundColor = "#23272A"; + document.getElementById('card2').style.borderColor = "#2c3236"; + document.getElementById('card3').style.backgroundColor = "#23272A"; + document.getElementById('card3').style.borderColor = "#2c3236"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } diff --git a/views/indexbackup.txt b/views/indexbackup.txt new file mode 100644 index 0000000..6724692 --- /dev/null +++ b/views/indexbackup.txt @@ -0,0 +1,27 @@ +html + head + title JS Browser + link(rel='stylesheet', href='/css/home.css') + body + div(class="usernameBox")= 'Logged in as: ' + username + form(action="game" method="GET" class="Pcard") + img(src="http://192.168.24.89:3001/playIcon.png" class="Pimg") + button(onclick="play()" class="Sbutton") Play + form(action="settings" method="GET" class="Scard") + img(src="http://192.168.24.89:3001/settingsIcon.png" class="Simg" height="180" width="180") + button(onclick="modify()" class="Sbutton") Settings + form(action="modify" method="GET" class="Ecard") + img(src="http://192.168.24.89:3001/editorIcon.png" class="Eimg" height="150" width="150") + button(onclick="modify()" class="Sbutton") Character Editor + + + + + + script. + function play() { + + } + function modify() { + + } diff --git a/views/jsfighterGame.pug b/views/jsfighterGame.pug new file mode 100644 index 0000000..639e16b --- /dev/null +++ b/views/jsfighterGame.pug @@ -0,0 +1,89 @@ +html + head + title JSFighter Menu + link(rel='stylesheet', href='/css/home.css') + body + form(action="game" method="GET" class="THREEcard1" id="card1") + input(type="image" src="createIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") Fight + form(action="editor" method="GET" class="THREEcard2" id="card2") + input(type="image" src="editorIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Fighter Editor + form(action="leaderboards" method="GET" class="THREEcard3" id="card3") + input(type="image" src="leaderboardIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Leaderboards + form(action="selectCharacter" method="selectCharacter" class="THREEcard3" id="card3") + button(class="Sbutton") Character Select + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='play'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="jsfighterGame") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="jsfighterGame") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.getElementById('card1').className = "THREE" + document.getElementById('card1').id + "D" + document.getElementById('card2').className = "THREE" + document.getElementById('card2').id + "D" + document.getElementById('card3').className = "THREE" + document.getElementById('card3').id + "D" + + document.body.style.background = "#2C2F33"; + document.getElementById('card1').style.backgroundColor = "#23272A"; + document.getElementById('card1').style.borderColor = "#2c3236"; + document.getElementById('card2').style.backgroundColor = "#23272A"; + document.getElementById('card2').style.borderColor = "#2c3236"; + document.getElementById('card3').style.backgroundColor = "#23272A"; + document.getElementById('card3').style.borderColor = "#2c3236"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } diff --git a/views/leaderboards.pug b/views/leaderboards.pug new file mode 100644 index 0000000..725af8e --- /dev/null +++ b/views/leaderboards.pug @@ -0,0 +1,192 @@ +html + head + title JSF Leaderboards + link(rel='stylesheet', href='/css/home.css') + body(onload="startTab();") + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='jsfighterGame'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave();")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="leaderboards") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="leaderboards") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + document.body.style.background = "#2C2F33"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } + function startTab() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("tab1").style.borderBottomColor = "#23272A"; + } else { + document.getElementById("tab1").style.borderBottomColor = "#ebebeb"; + } + document.getElementById("tabDisplay").innerHTML = document.getElementById("tab1").innerHTML; + } + function tab(x) { + let borderColor; + let clearColor; + if (document.getElementById("darkmode").innerHTML == "true") { + borderColor = "#2c3236"; + clearColor = "#23272A"; + } else { + borderColor = "#004869"; + clearColor = "#ebebeb"; + } + document.getElementById("tab" + x).style.borderBottomColor = clearColor; + document.getElementById("tabDisplay").innerHTML = document.getElementById("tab" + x).innerHTML; + if (x == 1) { + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + document.getElementById("tab5").style.borderBottomColor = borderColor; + } else if (x == 2) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + document.getElementById("tab5").style.borderBottomColor = borderColor; + } else if (x == 3) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + document.getElementById("tab5").style.borderBottomColor = borderColor; + } else if (x == 4) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab5").style.borderBottomColor = borderColor; + } else if (x == 5) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + } + } + + + + + + + div(class="bar1" id="bar1") + div(class="tab1" id="tab1" onclick="tab(1)")='Wins' + div(class="tab2" id="tab2" onclick="tab(2)")='Losses' + div(class="tab2" id="tab3" onclick="tab(3)")='Logs' + div(class="tab2" id="tab4" onclick="tab(4)")='Cakes' + div(class="tab2" id="tab5" onclick="tab(5)")='Work Done' + div(class="tab3" id="tabDisplay")='' + div(class="leaderboardTop") + each account in accounts + div(class="leaderboard" id="bar2") + div(class="bar2" id="rank")='' + div(class="bar2Display1" id="D")=account.username + div(class="bar2Display2" id="DD")=account.account_wins + //- p(id="wins")=account.account_wins + script. + + + let counter = "rank0"; + let counterD1 = "D0"; + let counterD2 = "DD0"; + function rankList(x) { + document.getElementById("rank").id = counter; + document.getElementById("D").id = counterD1; + document.getElementById("DD").id = counterD2; + document.getElementById(counter).innerHTML = x; + counter = "rank" + x; + counterD1 = "D" + x; + counterD2 = "DD" + x; + + } + for (i = 1; i < 100; i++) { + rankList(i); + } + + script. + + + + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('bar1').style.backgroundColor = "#23272A"; + document.getElementById('bar1').style.borderColor = "#2c3236"; + document.getElementById('tab1').style.borderColor = "#2c3236"; + document.getElementById('tab2').style.borderColor = "#2c3236"; + document.getElementById('tab3').style.borderColor = "#2c3236"; + document.getElementById('tab4').style.borderColor = "#2c3236"; + document.getElementById('tab5').style.borderColor = "#2c3236"; + document.getElementById('tabDisplay').style.color = "#99AAB5"; + document.getElementById('tab1').style.color = "#99AAB5"; + document.getElementById('tab2').style.color = "#99AAB5"; + document.getElementById('tab3').style.color = "#99AAB5"; + document.getElementById('tab4').style.color = "#99AAB5"; + document.getElementById('tab5').style.color = "#99AAB5"; + let barCounter = "rank0"; + let barCounterD1 = "D0"; + let barCounterD2 = "DD0"; + function rankDarkmode(x) { + document.getElementById(barCounter).style.backgroundColor = "#23272A"; + document.getElementById(barCounter).style.borderColor = "#2c3236"; + document.getElementById(barCounter).style.color = "#99AAB5"; + document.getElementById(barCounterD1).style.color = "#99AAB5"; + document.getElementById(barCounterD2).style.color = "#99AAB5"; + barCounter = "rank" + x; + barCounterD1 = "D" + x; + barCounterD2 = "DD" + x; + } + for (i = 1; i < 100; i++) { + rankDarkmode(i); + } + } + + + diff --git a/views/links.txt b/views/links.txt new file mode 100644 index 0000000..24a5345 --- /dev/null +++ b/views/links.txt @@ -0,0 +1,2 @@ +settings: http://pluspng.com/gear-logo-vector-png-6542.html +select: https://www.vexels.com/png-svg/preview/143466/simple-magnifying-glass diff --git a/views/login.pug b/views/login.pug new file mode 100644 index 0000000..b95a265 --- /dev/null +++ b/views/login.pug @@ -0,0 +1,56 @@ +html + head + title JSBrowser Login + link(rel='stylesheet' href='/css/style.css') + link(rel='stylesheet' href='/css/layout.css') + link(rel='stylesheet' href='/css/home.css') + body + div(class="hr" id="hr") + div(class="usernameBox" id="username")= 'Guest' + div(class="welcomeH" id="welcome")= 'JSBrowser' + button(class="lightmodeButtonH" id="light" onclick="lightMode();")= 'Light Mode' + button(class="darkmodeButtonH" id="dark" onclick="darkMode();")= 'Dark Mode' + script. + let darkCheck = 0; + document.getElementById("light").style.visibility = "hidden"; + function darkMode() { + darkCheck = 1; + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.body.style.background = "#2C2F33"; + + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + } + function lightMode() { + darkCheck = 0; + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + + document.body.style.background = "#f2f2f2"; + + document.getElementById('hr').style.backgroundColor = "#f2f2f2"; + document.getElementById('hr').style.borderColor = "#004869"; + document.getElementById('welcome').style.color = "#004869"; + document.getElementById('username').style.color = "#004869"; + } + + + + + + + + .login-form + h1(style="margin-top: 20%;") Login Form + form(action='auth' method='POST') + input(type='text' name='username' placeholder='Username' required='') + input(type='password' name='password' placeholder='Password' required='') + input(type='submit' style="cursor: pointer") + form.Ecard(action='accountCreation' method='GET') + button.NAbutton Create Account diff --git a/views/modify.pug b/views/modify.pug new file mode 100644 index 0000000..cbdd2c7 --- /dev/null +++ b/views/modify.pug @@ -0,0 +1,270 @@ +html + head + title JSF Modifier + link(rel='stylesheet', href='/css/home.css') + body + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='editor'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="modify") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="modify") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + document.body.style.background = "#2C2F33"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } + each fighter in fighters + div(class="card2" id="0") + input(type="hidden" name="accUID" value=fighter.fighter_player_UID) + div(class="input0T" id="A")= fighter.fighter_name + div(class="input1RT")= 'Attack:' + div(class="input1T")= fighter.stat_atk + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="input1RT")= 'Defense:' + div(class="input1T")= fighter.stat_def + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="input1RT")= 'Technique:' + div(class="input1T")= fighter.stat_tek + Input(type="range" min="5" max="60" value="30" class="slider" style="visibility:hidden") + div(class="nextButton" onclick="swapF()")='≫' + div(class="prevButton" onclick="swapB()")='≪' + p(id="name" style="visibility:hidden")=fighter.fighter_name + p(id="atk" style="visibility:hidden")=fighter.stat_atk + p(id="def" style="visibility:hidden")=fighter.stat_def + p(id="tek" style="visibility:hidden")=fighter.stat_tek + p(id="selection" style="visibility:hidden")='0' + div(class="modifyFighter") + form(action="/modifyFighter" method="POST" class="right" autocomplete="off") + Input(class="input0" placeholder="Name" name="name" id="nameS" value="None Selected" readonly) + div(class="highlight") + div(class="input1R" id="atkR2")= 'Attack:' + div(class="input1" id="atkR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="atkS" name="atk") + div(class="highlight") + div(class="input1R" id="defR2")= 'Defense:' + div(class="input1" id="defR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="defS" name="def") + div(class="highlight") + div(class="input1R" id="tekR2")= 'Technique:' + div(class="input1" id="tekR")= '30' + Input(type="range" min="5" max="60" value="30" class="slider" id="tekS" name="tek") + Input(class="input3" type="submit" value="Apply" id="create" onclick="submitCheck()") + div(class="input2" id="total")= 'Total: 90' + div(class="input5" id="check")= '' + script. + + var total = 90; + var atkS = document.getElementById("atkS"); + var defS = document.getElementById("defS"); + var tekS = document.getElementById("tekS"); + document.getElementById("atkR"); + document.getElementById("defR"); + document.getElementById("tekR"); + + + atkS.oninput = function() { + document.getElementById("atkR").innerHTML = atkS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + defS.oninput = function() { + document.getElementById("defR").innerHTML = defS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + tekS.oninput = function() { + document.getElementById("tekR").innerHTML = tekS.value; + total = parseFloat(atkS.value) + parseFloat(defS.value) + parseFloat(tekS.value); + document.getElementById("total").innerHTML = 'Total: ' + total; + if (total == 90) { + document.getElementById("total").style.color = "lime"; + document.getElementById("create").style.color = "lime"; + } else { + document.getElementById("total").style.color = "red"; + document.getElementById("create").style.color = "red"; + } + } + + function submitCheck() { + if (total != 90) { + document.getElementById("check").innerHTML = "Total doesn't add up to 90"; + } + if (!document.getElementById("name").value) { + document.getElementById("check").innerHTML = "No name selected"; + } + } + + + + + + + + + + let selection = 0; + let counter = 0; + let counterA = "A0"; + let nameCounter = "name0"; + let atkCounter = "atk0"; + let defCounter = "def0"; + let tekCounter = "tek0"; + let cardNumber = 0; + + function switcher() { + + document.getElementsByClassName("card2")[counter].id = counter; + document.getElementById("name").id = nameCounter; + document.getElementById("atk").id = atkCounter; + document.getElementById("def").id = defCounter; + document.getElementById("tek").id = tekCounter; + document.getElementById("A").id = counterA; + + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById(counter).style.color = "#99AAB5"; + document.getElementById(counter).style.backgroundColor = "#23272A"; + document.getElementById(counter).style.borderColor = "#2c3236"; + document.getElementById("A" + counter).style.color = "#99AAB5"; + document.getElementById("A" + counter).style.backgroundColor = "#23272A"; + document.getElementById("A" + counter).style.borderColor = "#2c3236"; + } + + counter = counter + 1; + nameCounter = "name" + counter; + atkCounter = "atk" + counter; + defCounter = "def" + counter; + tekCounter = "tek" + counter; + counterA = "A" + counter; + console.log(counter) + console.log(nameCounter) + } + for (i = 0; i < 100; i++) { + switcher(); + document.getElementById(i).style.visibility = "hidden"; + document.getElementById(0).style.visibility = "visible"; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + + + + + + function swapF() { + if (cardNumber < (counter - 1)) { + cardNumber = cardNumber + 1; + let oldCard = cardNumber - 1; + document.getElementById(oldCard).style.visibility = "hidden"; + document.getElementById(cardNumber).style.visibility = "visible"; + console.log(cardNumber); + selection = cardNumber; + document.getElementById("selection").innerHTML = selection; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + } + function swapB() { + if (cardNumber > 0) { + cardNumber = cardNumber - 1; + let oldCard = cardNumber + 1; + document.getElementById(oldCard).style.visibility = "hidden"; + document.getElementById(cardNumber).style.visibility = "visible"; + console.log(cardNumber); + selection = cardNumber; + document.getElementById("selection").innerHTML = selection; + + document.getElementById("nameS").value = document.getElementById("name" + selection).innerHTML; + document.getElementById("atkS").value = document.getElementById("atk" + selection).innerHTML; + document.getElementById("atkR").innerHTML = document.getElementById("atk" + selection).innerHTML; + document.getElementById("defS").value = document.getElementById("def" + selection).innerHTML; + document.getElementById("defR").innerHTML = document.getElementById("def" + selection).innerHTML; + document.getElementById("tekS").value = document.getElementById("tek" + selection).innerHTML; + document.getElementById("tekR").innerHTML = document.getElementById("tek" + selection).innerHTML; + } + } + script. + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('nameS').style.borderColor = "#2c3236"; + document.getElementById('nameS').style.backgroundColor = "#23272A"; + document.getElementById('nameS').style.color = "#99AAB5"; + } diff --git a/views/play.pug b/views/play.pug new file mode 100644 index 0000000..6ee4cf3 --- /dev/null +++ b/views/play.pug @@ -0,0 +1,123 @@ +html + head + title Game Selection + link(rel='stylesheet', href='/css/home.css') + body + form(action="jsfighterGame" method="GET" class="THREEcard1" id="card1") + input(type="image" src="createIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") JSFighter + form(action="pongGame" method="GET" class="THREEcard2" id="card2") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Pong + form(action="hangmanGame" method="GET" class="THREEcard3" id="card3") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Hangman + form(action="tictactoeGame" method="GET" class="THREEcard4" id="card4") + input(type="image" src="unknownIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") Tic Tac Toe + form(action="dicerollGame" method="GET" class="THREEcard5" id="card5") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Dice Roll + form(action="rockpaperscissorsGame" method="GET" class="THREEcard6" id="card6") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Rock Paper Scissors + form(action="magic8ballGame" method="GET" class="THREEcard7" id="card7") + input(type="image" src="unknownIcon.png" class="Pimg" height="120" width="120") + button(class="Sbutton") Magic 8Ball + form(action="riddlerGame" method="GET" class="THREEcard8" id="card8") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Riddler + form(action="codechallengerGame" method="GET" class="THREEcard9" id="card9") + input(type="image" src="unknownIcon.png" class="Eimg" height="120" width="120") + button(class="Sbutton") Code Challenger + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='home'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave()")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="play") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="play") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + + document.getElementById('card1').className = "THREE" + document.getElementById('card1').id + "D" + document.getElementById('card2').className = "THREE" + document.getElementById('card2').id + "D" + document.getElementById('card3').className = "THREE" + document.getElementById('card3').id + "D" + document.getElementById('card4').className = "THREE" + document.getElementById('card4').id + "D" + document.getElementById('card5').className = "THREE" + document.getElementById('card5').id + "D" + document.getElementById('card6').className = "THREE" + document.getElementById('card6').id + "D" + document.getElementById('card7').className = "THREE" + document.getElementById('card7').id + "D" + document.getElementById('card8').className = "THREE" + document.getElementById('card8').id + "D" + document.getElementById('card9').className = "THREE" + document.getElementById('card9').id + "D" + + document.body.style.background = "#2C2F33"; + document.getElementById('card1').style.backgroundColor = "#23272A"; + document.getElementById('card1').style.borderColor = "#2c3236"; + document.getElementById('card2').style.backgroundColor = "#23272A"; + document.getElementById('card2').style.borderColor = "#2c3236"; + document.getElementById('card3').style.backgroundColor = "#23272A"; + document.getElementById('card3').style.borderColor = "#2c3236"; + document.getElementById('card4').style.backgroundColor = "#23272A"; + document.getElementById('card4').style.borderColor = "#2c3236"; + document.getElementById('card5').style.backgroundColor = "#23272A"; + document.getElementById('card5').style.borderColor = "#2c3236"; + document.getElementById('card6').style.backgroundColor = "#23272A"; + document.getElementById('card6').style.borderColor = "#2c3236"; + document.getElementById('card7').style.backgroundColor = "#23272A"; + document.getElementById('card7').style.borderColor = "#2c3236"; + document.getElementById('card8').style.backgroundColor = "#23272A"; + document.getElementById('card8').style.borderColor = "#2c3236"; + document.getElementById('card9').style.backgroundColor = "#23272A"; + document.getElementById('card9').style.borderColor = "#2c3236"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } diff --git a/views/settings.pug b/views/settings.pug new file mode 100644 index 0000000..527b56e --- /dev/null +++ b/views/settings.pug @@ -0,0 +1,140 @@ +html + head + title Settings - JSBrowser + link(rel='stylesheet', href='/css/home.css') + body(onload="startTab();") + div(class="hr" id="hr") + div(class="usernameBox" id="username")= username + div(class="backButton" onclick="location.href='home'" height="60" width="60" id="back" onmouseenter="backEnter();" onmouseleave="backLeave();")='≪' + div(class="welcome" id="welcome")= 'JSBrowser' + form(action="login" method="GET") + button(class="logoutButton" id="logout" onmouseenter="logoutEnter(); backFake();" onmouseleave="logoutLeave();")= 'Logout' + form(action="lightmode" method="POST") + input(type="hidden" name="page" value="settings") + button(class="lightmodeButton" id="light" onmouseenter="backFake();")= 'Light Mode' + form(action="darkmode" method="POST") + input(type="hidden" name="page" value="settings") + button(class="darkmodeButton" id="dark" onmouseenter="backFake();")= 'Dark Mode' + p(style="visibility:hidden" id="darkmode")=darkmode + script. + if (document.getElementById("darkmode").innerHTML == "true") { + console.log("Darkmode: true"); + document.getElementById("dark").style.visibility = "hidden"; + document.getElementById("light").style.visibility = "visible"; + document.body.style.background = "#2C2F33"; + document.getElementById('hr').style.backgroundColor = "#23272A"; + document.getElementById('hr').style.borderColor = "#2c3236"; + document.getElementById('welcome').style.color = "#99AAB5"; + document.getElementById('username').style.color = "#99AAB5"; + document.getElementById('back').style.color = "#99AAB5"; + } + if (document.getElementById("darkmode").innerHTML == "false") { + console.log("Darkmode: false"); + document.getElementById("dark").style.visibility = "visible"; + document.getElementById("light").style.visibility = "hidden"; + } + function backEnter() { + document.getElementById("back").style.color = "#7289DA"; + document.getElementById("welcome").style.color = "#7289DA"; + } + function backLeave() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("back").style.color = "#99AAB5"; + document.getElementById("welcome").style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function backFake() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('back').style.color = "#99AAB5"; + document.getElementById('welcome').style.color = "#99AAB5"; + } else { + document.getElementById("back").style.color = "#004869"; + document.getElementById("welcome").style.color = "#004869"; + } + } + function logoutEnter() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("logout").style.color = "#23272A"; + } else { + document.getElementById("logout").style.color = "#f2f2f2"; + } + } + function logoutLeave() { + document.getElementById("logout").style.color = "#f54242"; + } + function startTab() { + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById("tab1").style.borderBottomColor = "#23272A"; + } else { + document.getElementById("tab1").style.borderBottomColor = "#ebebeb"; + } + } + function tab(x) { + let borderColor; + let clearColor; + if (document.getElementById("darkmode").innerHTML == "true") { + borderColor = "#2c3236"; + clearColor = "#23272A"; + } else { + borderColor = "#004869"; + clearColor = "#ebebeb"; + } + document.getElementById("tab" + x).style.borderBottomColor = clearColor; + if (x == 1) { + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + } else if (x == 2) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + } else if (x == 3) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab4").style.borderBottomColor = borderColor; + } else if (x == 4) { + document.getElementById("tab1").style.borderBottomColor = borderColor; + document.getElementById("tab2").style.borderBottomColor = borderColor; + document.getElementById("tab3").style.borderBottomColor = borderColor; + } + } + + + + + + + div(class="bar1" id="bar1") + div(class="tab1" id="tab1" onclick="tab(1)")='General' + div(class="tab2" id="tab2" onclick="tab(2)")='Display' + div(class="tab2" id="tab3" onclick="tab(3)")='Privacy/Security' + div(class="tab2" id="tab4" onclick="tab(4)")='Account' + div(class="leaderboardTop") + div(class="settings" id="theme")='Default Theme:' + form(action="themeSetLight" method="POST" style="float: left") + button(class="lightBox")='Standard Light' + form(action="themeSetDark" method="POST" style="float: left") + button(class="darkBox")='Standard Dark' + + script. + if (document.getElementById("darkmode").innerHTML == "true") { + document.getElementById('bar1').style.backgroundColor = "#23272A"; + document.getElementById('bar1').style.borderColor = "#2c3236"; + document.getElementById('tab1').style.borderColor = "#2c3236"; + document.getElementById('tab2').style.borderColor = "#2c3236"; + document.getElementById('tab3').style.borderColor = "#2c3236"; + document.getElementById('tab4').style.borderColor = "#2c3236"; + document.getElementById('tab1').style.color = "#99AAB5"; + document.getElementById('tab2').style.color = "#99AAB5"; + document.getElementById('tab3').style.color = "#99AAB5"; + document.getElementById('tab4').style.color = "#99AAB5"; + document.getElementById('theme').style.color = "#99AAB5"; + } + + + + +