Completed first revision of front end. Enabled CORS in spring. Allowed path variable to be optional.
This commit is contained in:
parent
c160703048
commit
e5a84268cc
GPG key ID:
0989A73D8C421174
11 changed files with 456 additions and 328 deletions
|
|
@ -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>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,15 +1,40 @@
|
|||
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 = () => {
|
||||
const loadPages = () => {
|
||||
pages = document.querySelectorAll(".page");
|
||||
}
|
||||
|
||||
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
145
frontend/webpage/scripts/template.js
Normal 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]);
|
||||
})();
|
||||
|
|
@ -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
40
frontend/webpage/templates/achievements_page.html.template
Normal 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
53
frontend/webpage/templates/games_page.html.template
Normal 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
135
frontend/webpage/templates/profile_page.html.template
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue