Gnarwhal/achievements_project
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Completed first revision of front end. Enabled CORS in spring. Allowed path variable to be optional.

Browse source
This commit is contained in:
Gnarwhal 2021-01-29 03:30:05 -05:00
parent c160703048
commit e5a84268cc
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
11 changed files with 456 additions and 328 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
backend/.gitignore vendored
View file

@ -19,3 +19,6 @@ gradlew.bat
# Local property file
src/main/resources/application-*.properties
# Server Keystore
src/main/resources/achievements-ssl-key.p12

15
backend/src/main/java/achievements/Application.java
View file

@ -3,6 +3,9 @@ package achievements;
import achievements.services.DbConnectionService;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@SpringBootApplication
public class Application {
@ -16,4 +19,16 @@ public class Application {
SpringApplication.exit(context, () -> 0);
}
}
@Bean
public WebMvcConfigurer configurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry
.addMapping("/*")
.allowedOrigins("*");
}
};
}
}

8
backend/src/main/java/achievements/controllers/Controller.java
View file

@ -21,8 +21,8 @@ public class Controller {
public Controller() {}
@RequestMapping(value = "/achievements/{Name}", method = GET, produces = "application/json")
public ResponseEntity<String> fetchAchievements(@PathVariable("Name") String getName) {
@RequestMapping(value = { "/achievements", "/achievements/{Name}" }, method = GET, produces = "application/json")
public ResponseEntity<String> fetchAchievements(@PathVariable(value = "Name", required = false) String getName) {
var achievements = (Achievements) null;
if (getName == null) {
achievements = db.getAchievements("%");
@ -42,8 +42,8 @@ public class Controller {
}
}
@RequestMapping(value = "/games/{Name}", method = GET, produces = "text/html")
public ResponseEntity<String> fetchGames(@PathVariable("Name") String getName) {
@RequestMapping(value = { "/games", "/games/{Name}" }, method = GET, produces = "application/json")
public ResponseEntity<String> fetchGames(@PathVariable(value = "Name", required = false) String getName) {
var games = (Games) null;
if (getName == null) {
games = db.getGames("%");

52
frontend/static_server.js
View file

@ -1,58 +1,16 @@
const express = require('express');
const morgan = require('morgan' );
const fs = require('fs' );
const http = require('http' );
const https = require('https' );
const config = require('./config.js').load(process.argv[2]);
if (config.build === 'debug') {
process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
}
const app = express();
app.use("/", morgan("dev"));
app.use("/", (request, response, next) => {
/*if (request.headers['accept'].split(',')[0] === 'text/html') {
let path = request.url;
if (path === '/') {
path = "/index.html";
}
path = 'webpage' + path;
fs.readFile(path, 'utf8', (err, fileData) => {
if (err) {
response.statusCode = 500;
response.statusMessage = 'Unkown file read error';
console.log(err);
}
if (path === 'webpage/index.html') {
console.log("ummmm");
dbRequest = http.get("http://localhost:4730/achievements", dbResponse => {
console.log("Yesting?");
dbResponse.on('data', achievementData => {
console.log("Hello?");
achievementData = JSON.parse(achievementData);
let list = "";
for (const achievement of achievementData.achievements) {
list = list +
`<div class="list-page-list-entry">
<img class="achievement-list-page-entry-icon" src="res/dummy_achievement.png" alt="Achievement Icon.png" />
<p class="achievement-list-page-entry-name">${achievement.name}</p>
<p class="achievement-list-page-entry-description">${achievement.description}</p>
<p class="achievement-list-page-entry-game">${achievement.gameID}</p>
</div>`;
}
response.statusCode = 200;
response.statusMessage = 'OK';
response.write(Buffer.from(fileDate.replace("\${list}", list), 'utf8'));
response.end();
});
});
}
});
} else {
next();
}*/
next();
});
app.use("/", express.static("webpage"));
app.listen(config.port);

271
frontend/webpage/index.html
View file

@ -1,272 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Achievements Project</title>
<meta charset="UTF-8" />
<title>Achievements Project</title>
<!-- Load Stylesheets -->
<link rel="stylesheet" href="styles/index.css" />
</head>
<body>
<div id="navbar">
<div id="navbar-left">
<div id="navbar-item-games" class="navbar-item" data-page-name="games">
Games
</diV>
<div id="navbar-item-achievement" class="navbar-item" data-page-name="achievements">
Achievements
</diV>
</div>
<div id="navbar-right">
<div id="navbar-item-profile" class="navbar-item" data-page-name="profile">
Profile
<template data-template="navbar: list">
<div id="navbar-section-${navbar[section]}" class="navbar-section">
<template data-template="navbar-section-${navbar[section]}: list">
<div id="navbar-item-${navbar-section-${navbar[section]}[item]}" class="navbar-item" data-page-name="${navbar-section-${navbar[section]}[item]}">
${navbar-section-${navbar[section]}[title]}
</div>
</template>
</div>
</div>
</template>
</div>
<div id="content-body">
<div id="games-page" class="page">
<div class="page-header">
<p class="page-header-text">Games</p>
<div class="page-header-separator"></div>
<div class="list-page-search">
<label for="game-search">Search</label>
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." name="game-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Games Owned</p>
</div>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-list-header">
<p class="game-list-page-entry-icon"></p>
<p class="game-list-page-entry-name">Name</p>
<p class="game-list-page-entry-description">Description</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<template data-template="content-body: list">
<div id="${content-body[page]}-page" class="page">
<div class="page-header">
<p class="page-header-text">${content-body[title]}</p>
<div class="page-header-separator"></div>
</div>
<template data-template="fetch-${content-body[page]}-page: fetch"></template>
</div>
</div>
<div id="achievements-page" class="page">
<div class="page-header">
<p class="page-header-text">Achievements</p>
<div class="page-header-separator"></div>
<div class="list-page-search">
<label for="achievement-search">Search</label>
<input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." name="achievement-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">From Games Owned</p>
</div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">In Progress</p>
</div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Completed</p>
</div>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-list-header">
<p class="achievement-list-page-entry-icon"></p>
<p class="achievement-list-page-entry-name">Name</p>
<p class="achievement-list-page-entry-description">Description</p>
<p class="achievement-list-page-entry-game">Game</p>
</div>
${list}
</div>
</div>
</div>
</div>
</div>
<div id="profile-page" class="page">
<div class="page-header">
<p class="page-header-text">Profile</p>
<div class="page-header-separator"></div>
</div>
<div id="profile-section-1">
<div id="profile-info">
<img id="profile-info-pfp" src="res/temp_pfp.png" alt="User's Profile Pictuer" />
<p id="profile-info-name">Jane Doe</p>
</div>
<div id="profile-platforms">
<p class="page-subheader-text">Platforms</p>
<div class="page-subheader-separator"></div>
<div class="profile-platform-entry connected">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/steam.png" alt="Steam Logo" />
<p class="profile-platform-name">Steam</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
<div class="profile-platform-entry">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/xbox.png" alt="Xbox Logo" />
<p class="profile-platform-name">Xbox Live</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
<div class="profile-platform-entry">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/psn.png" alt="PSN Logo" />
<p class="profile-platform-name">PSN</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
</div>
</div>
<div id="profile-section-2">
<div id="profile-games">
<p class="page-subheader-text">Games</p>
<div class="page-subheader-separator"></div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
</div>
<div id="profile-achievements">
<p class="page-subheader-text">Achievements</p>
<div class="page-subheader-separator"></div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
<!-- Load javascript -->
<script src="scripts/template.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

36
frontend/webpage/scripts/index.js
View file

@ -1,3 +1,28 @@
const expandTemplates = async () => {
template.register("navbar", [
{ section: "left" },
{ section: "right" }
]);
template.register("navbar-section-left", [
{ item: "games", title: "Games" },
{ item: "achievements", title: "Achievements" }
]);
template.register("navbar-section-right", [
{ item: "profile", title: "Profile" }
]);
template.register("content-body", [
{ page: "games", title: "Games" },
{ page: "achievements", title: "Achievements" },
{ page: "profile", title: "Profile" }
]);
template.register("fetch-games-page", "games_page" );
template.register("fetch-achievements-page", "achievements_page");
template.register("fetch-profile-page", "profile_page" );
template.registerFetch("achievements-page-list", "Achievements", "https://localhost:4730/achievements", { method: 'GET', mode: 'cors' });
await template.expand();
};
let pages = null;
const loadPages = () => {
pages = document.querySelectorAll(".page");
@ -6,10 +31,10 @@ const loadPages = () => {
const connectNavbar = () => {
const navItems = document.querySelectorAll(".navbar-item");
for (let item of navItems) {
for (const item of navItems) {
item.addEventListener("click", (clickEvent) => {
const navItemPageId = item.dataset.pageName + "-page"
for (page of pages) {
for (const page of pages) {
if (page.id === navItemPageId) {
page.style.display = "block";
} else {
@ -25,7 +50,7 @@ const connectProfile = () => {
const achievements = document.querySelector("#profile-achievements");
games.children[0].addEventListener("click", (clickEvent) => {
for (page of pages) {
for (const page of pages) {
if (page.id === "games-page") {
page.style.display = "block";
} else {
@ -34,7 +59,6 @@ const connectProfile = () => {
}
});
console.log(achievements.firstElement);
achievements.children[0].addEventListener("click", (clickEvent) => {
for (page of pages) {
if (page.id === "achievements-page") {
@ -59,7 +83,9 @@ const loadFilters = () => {
}
}
window.addEventListener("load", (loadEvent) => {
window.addEventListener("load", async (loadEvent) => {
await expandTemplates();
loadPages();
connectNavbar();

145
frontend/webpage/scripts/template.js Normal file
View file

@ -0,0 +1,145 @@
var template = template || {};
template.type = {};
template.type._entryMap = new Map();
template.type.register = (type, callback) => {
const asyncCallback = async function() {
await callback.apply(null, Array.from(arguments));
}
if (typeof type !== 'string') {
console.error(`'type' must be a string, recieved: `, type);
} else {
if (type === "") {
console.error(`'type' may not be empty`);
} else if (template.type._entryMap.get(type) === undefined) {
template.type._entryMap.set(type, asyncCallback);
} else {
console.error(`${type} is already a registered template!`);
}
}
};
/* Intrinsic Templates */
// Basic - Simple search and replace
template.type.register('basic', (template, map) => {
let html = template.element.innerHTML;
for (const key in map) {
html = html.replace(new RegExp(`(?:(?<!(?<!\\\\)\\\\)\\\${${key}})`, 'gm'), map[key]);
}
template.element.outerHTML = html.trim();
});
// Fetch - Retrieve template from webserver
template.type.register('fetch', (template, name) => {
return fetch(`templates/${name}.html.template`, {
method: 'GET',
mode: 'no-cors',
headers: {
'Content-Type': 'text/plain'
}
}).then(response => response.text().then((data) => {
template.element.outerHTML = data;
})).catch(error => {
console.error(`failed to retrieve template '${name}': `, error);
});
});
// List - Iterate over list and emit copy of child for each iteration
template.type.register('list', (template, arrayMap) => {
let cumulative = "";
for (const map of arrayMap) {
let html = template.element.innerHTML;
for (const key in map) {
html = html.replace(new RegExp(`(?:(?<!(?<!\\\\)\\\\)\\\${${template.id}\\[${key}\\]})`, 'gm'), map[key]);
}
cumulative = cumulative + html.trim();
}
template.element.outerHTML = cumulative;
});
template._entryMap = new Map();
template.register = function(pattern/*, arguments */) {
if (typeof pattern !== 'string') {
console.error('pattern must be a string, received: ', pattern);
} else {
const arrayArguments = Array.from(arguments);
arrayArguments.splice(0, 1);
template._entryMap.set(RegExp("^" + pattern + "$"), async () => arrayArguments);
}
};
template.registerFetch = function(pattern, path, url, fetchOptions) {
if (typeof pattern !== 'string') {
console.error('pattern must be a string, received: ', pattern);
} else {
let args = null;
template._entryMap.set(RegExp("^" + pattern + "$"), async () => {
if (args !== null) {
return Promise.resolve(args);
} else {
return fetch(url, fetchOptions)
.then(response => response.json())
.then(data => {
args = data;
path = path.split('\\.');
for (const id of path) {
args = args[id];
}
return args = [ args ];
});
}
});
}
};
(() => {
const findTemplates = (element) =>
Array
.from(element.querySelectorAll("template"))
.filter(child => Boolean(child.dataset.template))
.map(child => {
const data = child.dataset.template.split(/\s*:\s*/);
return {
id: data[0],
type: data.length > 1 ? data[1] : 'basic',
element: child
};
});
const expand = async (element) => {
let children = findTemplates(element);
let promises = [];
let parents = new Set();
for (const child of children) {
for (const [pattern, argCallbacks] of template._entryMap) {
await argCallbacks().then(args => {
if (pattern.test(child.id)) {
const callback = template.type._entryMap.get(child.type);
if (typeof callback !== 'function') {
console.error(`'${child.type}' is not a registered template type`);
} else {
let params = Array.from(args)
params.splice(0, 0, child);
let parent = child.element.parentElement;
if (!parents.has(parent)) {
parents.add(parent);
}
promises.push(callback.apply(null, params));
}
}
}).catch(error => {
console.error('failed to retrieve arguments: ', error);
});
}
}
await Promise.all(promises);
promises = [];
for (const parent of parents) {
promises.push(expand(parent));
}
await Promise.all(promises);
}
template.expand = async () => expand(document.children[0]);
})();

22
frontend/webpage/styles/index.css
View file

@ -52,17 +52,7 @@ html, body {
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);
}
#navbar-left {
width: max-content;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#navbar-right {
.navbar-section {
width: max-content;
height: 100%;
@ -363,7 +353,7 @@ html, body {
}
#games-page {
max-width: 2560px;
max-width: 1920px;
}
.game-list-page-entry-icon {
@ -404,7 +394,7 @@ html, body {
}
#achievements-page {
max-width: 2560px;
max-width: 1920px;
}
.achievement-list-page-entry-icon {
@ -425,7 +415,7 @@ html, body {
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 1;
flex-grow: 4;
flex-basis: 0px;
}
@ -440,11 +430,11 @@ html, body {
text-overflow: ellipsis;
white-space: nowrap;
flex-grow: 2;
flex-grow: 8;
flex-basis: 0px;
}
.achievement-list-page-entry-game {
.achievement-list-page-entry-stages {
box-sizing: border-box;
margin: 0;

40
frontend/webpage/templates/achievements_page.html.template Normal file
View file

@ -0,0 +1,40 @@
<div class="list-page-search">
<label for="achievement-search">Search</label>
<input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." name="achievement-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">From Games Owned</p>
</div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">In Progress</p>
</div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Completed</p>
</div>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-list-header">
<p class="achievement-list-page-entry-icon"></p>
<p class="achievement-list-page-entry-name">Name</p>
<p class="achievement-list-page-entry-description">Description</p>
<p class="achievement-list-page-entry-stages">Stages</p>
</div>
<template data-template="achievements-page-list: list">
<div class="list-page-list-entry">
<img class="achievement-list-page-entry-icon" src="res/dummy_achievement.png" alt="Achievement Thumbnail"></img>
<p class="achievement-list-page-entry-name">${achievements-page-list[Name]}</p>
<p class="achievement-list-page-entry-description">${achievements-page-list[Description]}</p>
<p class="achievement-list-page-entry-stages">${achievements-page-list[Stages]}</p>
</div>
</template>
</div>
</div>
</div>

53
frontend/webpage/templates/games_page.html.template Normal file
View file

@ -0,0 +1,53 @@
<div class="list-page-search">
<label for="game-search">Search</label>
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." name="game-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Games Owned</p>
</div>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-list-header">
<p class="game-list-page-entry-icon"></p>
<p class="game-list-page-entry-name">Name</p>
<p class="game-list-page-entry-description">Description</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-entry">
<img class="game-list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="game-list-page-entry-name">Latin</p>
<p class="game-list-page-entry-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>

135
frontend/webpage/templates/profile_page.html.template Normal file
View file

@ -0,0 +1,135 @@
<div id="profile-section-1">
<div id="profile-info">
<img id="profile-info-pfp" src="res/temp_pfp.png" alt="User's Profile Pictuer" />
<p id="profile-info-name">Jane Doe</p>
</div>
<div id="profile-platforms">
<p class="page-subheader-text">Platforms</p>
<div class="page-subheader-separator"></div>
<div class="profile-platform-entry connected">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/steam.png" alt="Steam Logo" />
<p class="profile-platform-name">Steam</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
<div class="profile-platform-entry">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/xbox.png" alt="Xbox Logo" />
<p class="profile-platform-name">Xbox Live</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
<div class="profile-platform-entry">
<div class="profile-platform-entry-left">
<img class="profile-platform-icon" src="res/psn.png" alt="PSN Logo" />
<p class="profile-platform-name">PSN</p>
</div>
<div class="profile-platform-entry-right">
<p class="profile-platform-connected">Connected</p>
</div>
</div>
</div>
</div>
<div id="profile-section-2">
<div id="profile-games">
<p class="page-subheader-text">Games</p>
<div class="page-subheader-separator"></div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
<div class="profile-game-entry">
<img class="profile-game-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-game-entry-name">Latin</p>
</div>
</div>
<div id="profile-achievements">
<p class="page-subheader-text">Achievements</p>
<div class="page-subheader-separator"></div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry completed">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
<div class="profile-achievement-entry">
<div class="profile-achievement-entry-left">
<img class="profile-achievement-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-achievement-entry-name">Lorem Ipsum</p>
</div>
<div class="profile-achievement-entry-right">
<p class="profile-achievement-completed">Completed</p>
</div>
</div>
</div>
</div>