sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: first pass at filter and game screen + some bug fixes

Browse Source
This commit is contained in:
Michael Green
2023-06-24 14:06:14 +10:00
parent a9dee0dd4c
commit 8112f9e9a7
17 changed files with 330 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
gaseous-server/wwwroot/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
gaseous-server/wwwroot/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
gaseous-server/wwwroot/images/unknowngame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

30
gaseous-server/wwwroot/index.html
View File

@@ -2,9 +2,35 @@
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="/styles/style.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/filterformating.js" type="text/javascript"></script>
<script src="/scripts/gamesformating.js" type="text/javascript"></script>
<title>Gaseous</title>
</head>
<body>
Hello World!
<div id="banner_icon">
<img src="/images/logo.png" alt="Gaseous" id="banner_icon_image" />
</div>
<div id="banner_header">
<div id="banner_header_label"></div>
</div>
<div id="content">
<div id="games_filter"></div>
<div id="games_library"></div>
</div>
<script type="text/javascript">
ajaxCall('/api/v1/Filter', 'GET', function (result) {
var filterElement = document.getElementById('games_filter');
formatFilterPanel(filterElement, result);
});
ajaxCall('/api/v1/Games', 'GET', function (result) {
var gameElement = document.getElementById('games_library');
formatGamesPanel(gameElement, result);
});
</script>
</body>
</html>

76
gaseous-server/wwwroot/scripts/filterformating.js Normal file
View File

@@ -0,0 +1,76 @@
function formatFilterPanel(targetElement, result) {
var panel = document.createElement('div');
panel.id = 'filter_panel_box';
panel.appendChild(buildFilterPanelHeader('filter', 'Filter'));
var containerPanelSearch = document.createElement('div');
containerPanelSearch.className = 'filter_panel_box';
var containerPanelSearchField = document.createElement('input');
containerPanelSearchField.type = 'text';
containerPanelSearch.appendChild(containerPanelSearchField);
panel.appendChild(containerPanelSearch);
if (result.platforms) {
panel.appendChild(buildFilterPanelHeader('platforms', 'Platforms'));
var containerPanelPlatform = document.createElement('div');
containerPanelPlatform.className = 'filter_panel_box';
for (var i = 0; i < result.platforms.length; i++) {
containerPanelPlatform.appendChild(buildFilterPanelItem(result.platforms[i].id, result.platforms[i].name));
}
panel.appendChild(containerPanelPlatform);
targetElement.appendChild(panel);
}
if (result.genres) {
panel.appendChild(buildFilterPanelHeader('genres', 'Genres'));
var containerPanelGenres = document.createElement('div');
containerPanelGenres.className = 'filter_panel_box';
for (var i = 0; i < result.genres.length; i++) {
containerPanelGenres.appendChild(buildFilterPanelItem(result.genres[i].id, result.genres[i].name));
}
panel.appendChild(containerPanelGenres);
targetElement.appendChild(panel);
}
}
function buildFilterPanelHeader(headerString, friendlyHeaderString) {
var header = document.createElement('div');
header.id = 'filter_panel_header_' + headerString;
header.className = 'filter_header';
header.innerHTML = friendlyHeaderString;
return header;
}
function buildFilterPanelItem(itemString, friendlyItemString) {
var filterPanelItem = document.createElement('div');
filterPanelItem.id = 'filter_panel_item_' + itemString;
filterPanelItem.className = 'filter_panel_item';
var filterPanelItemCheckBox = document.createElement('div');
var filterPanelItemCheckBoxItem = document.createElement('input');
filterPanelItemCheckBoxItem.id = 'filter_panel_item_checkbox_' + itemString;
filterPanelItemCheckBoxItem.type = 'checkbox';
filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox';
filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem);
var filterPanelItemLabel = document.createElement('label');
filterPanelItemLabel.id = 'filter_panel_item_label_' + itemString;
filterPanelItemLabel.className = 'filter_panel_item_label';
filterPanelItemLabel.setAttribute('for', filterPanelItemCheckBoxItem.id);
filterPanelItemLabel.innerHTML = friendlyItemString;
filterPanelItem.appendChild(filterPanelItemCheckBox);
filterPanelItem.appendChild(filterPanelItemLabel);
return filterPanelItem;
}

41
gaseous-server/wwwroot/scripts/gamesformating.js Normal file
View File

@@ -0,0 +1,41 @@
function formatGamesPanel(targetElement, result) {
for (var i = 0; i < result.length; i++) {
var game = renderGameIcon(result[i], true, false);
targetElement.appendChild(game);
}
}
function renderGameIcon(gameObject, showTitle, showRatings) {
var gameBox = document.createElement('div');
gameBox.className = 'game_tile';
var gameImage = document.createElement('img');
gameImage.className = 'game_tile_image';
if (gameObject.cover) {
gameImage.src = '/api/v1/Games/' + gameObject.id + '/cover/image';
} else {
gameImage.src = '/images/unknowngame.png';
gameImage.className = 'game_tile_image unknown';
}
gameBox.appendChild(gameImage);
if (showTitle == true) {
var gameBoxTitle = document.createElement('div');
gameBoxTitle.class = 'game_tile_label';
gameBoxTitle.innerHTML = gameObject.name;
gameBox.appendChild(gameBoxTitle);
}
if (showRatings == true) {
if (gameObject.ageRatings) {
for (var i = 0; i < gameObject.ageRatings.ids.length; i++) {
var ratingImage = document.createElement('img');
ratingImage.src = '/api/v1/Games/' + gameObject.id + '/agerating/' + gameObject.ageRatings.ids[i] + '/image';
ratingImage.className = 'rating_image_mini';
gameBox.appendChild(ratingImage);
}
}
}
return gameBox;
}

24
gaseous-server/wwwroot/scripts/main.js Normal file
View File

@@ -0,0 +1,24 @@
function ajaxCall(endpoint, method, successFunction) {
$.ajax({
// Our sample url to make request
url:
endpoint,
// Type of Request
type: method,
// Function to call when to
// request is ok
success: function (data) {
var x = JSON.stringify(data);
console.log(x);
successFunction(data);
},
// Error handling
error: function (error) {
console.log(`Error ${error}`);
}
});
}

121
gaseous-server/wwwroot/styles/style.css Normal file
View File

@@ -0,0 +1,121 @@
body {
background-color: #383838;
color: white;
font-family: "PT Sans", Arial, Helvetica, sans-serif;
font-kerning: normal;
font-style: normal;
font-weight: 100;
font-size: 13px;
}
#banner_icon {
background-color: white;
position: fixed;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 0px;
margin: 0px;
display: flex;
}
#banner_icon_image {
width: 30px;
height: 30px;
}
#banner_header {
background-color: #001638;
position: fixed;
top: 0px;
left: 40px;
height: 40px;
right: 0px;
align-items: center;
display: flex;
}
#banner_header_label {
display: inline;
padding: 10px;
font-size: 18pt;
font-weight: 700;
color: #edeffa;
}
#content {
display: flex;
padding-top: 45px;
padding-left: 5px;
padding-right: 5px;
}
#games_filter {
width: 200px;
border-style: solid;
border-width: 1px;
border-color: #2b2b2b;
margin-right: 10px;
}
.filter_header {
padding: 10px;
background-color: #2b2b2b;
}
.filter_panel_box {
padding: 10px;
}
.filter_panel_item {
display: flex;
padding: 3px;
}
.filter_panel_item_checkbox {
margin-right: 10px;
}
#games_library {
width: 90%;
border-style: solid;
border-width: 1px;
border-color: #2b2b2b;
padding: 10px;
}
.game_tile {
padding: 5px;
display: inline-block;
width: 220px;
align-items: center;
justify-content: center;
text-align: center;
vertical-align: top;
margin-bottom: 10px;
}
.game_tile:hover {
cursor: pointer;
text-decoration: underline;
background-color: #2b2b2b;
}
.game_tile_image {
max-width: 200px;
max-height: 200px;
}
.game_tile_image, .unknown {
background-color: white;
}
.rating_image_mini {
display: inline-block;
max-width: 32px;
max-height: 32px;
margin-right: 2px;
}