Leahnaya/entralinked
1
0
Fork 0
mirror of https://github.com/kuroppoi/entralinked.git synced 2026-09-08 16:55:16 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add visual item list to dashboard

Browse Source
This commit is contained in:
kuroppoi
2023-06-29 03:18:41 +02:00
parent 1ff56e2be0
commit 2d346ab9b6
6 changed files with 77 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/resources/dashboard/items.html Normal file
View File

@@ -0,0 +1,16 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/list.css">
</head>
<body onload="fillTableWithItems()">
<div id="main-container" class="root-container">
<label class="big-label">List of items that can be downloaded</label>
<label>NOTE: Item IDs greater than 626 are exclusive to Black Version 2 and White Version 2</label>
<table id="item-table">
<!-- Filled by list.js -->
</table>
</div>
</body>
<script src="scripts/list.js"></script>
</html>

2
src/main/resources/dashboard/profile.html
View File

@@ -165,7 +165,7 @@
<div class="content">
<button class="close-button" onclick="closeEncounterForm()">X</button>
<form id="item-form">
<label for="item-form-id">Item ID</label>
<label for="item-form-id">Item ID | </label><a href="/dashboard/items.html" target="_blank">View list</a>
<input id="item-form-id" name="id" type="number" value="1" min="1" max="626"/>
<label for="item-form-quantity">Quantity</label>
<input id="item-form-quantity" name="quantity" type="number" value="1" min="1" max="20"/>

53
src/main/resources/dashboard/scripts/list.js Normal file
View File

@@ -0,0 +1,53 @@
const AVAILABLE_GENERATION_V_POKEMON = new Array(
505, 507, 510, 511, 513, 515, 519, 523, 525, 527, 529, 531, 533, 535, 538, 539, 542, 545, 546, 548,
550, 553, 556, 558, 559, 561, 564, 569, 572, 575, 578, 580, 583, 587, 588, 594, 596, 600, 605, 607,
610, 613, 616, 618, 619, 621, 622, 624, 626, 628, 630, 631, 632);
function fillTable(tableId, rowSize, elementCount, htmlAppender) {
let tableHTML = "";
let index = 0;
for(let value = 1; value <= elementCount; value++) {
// Call the provided HTML appender to see what should be appended to the table
let toAppend = htmlAppender(value);
// If there is nothing to append (that is, the function has decided this element should be skipped)
// then continue to the next loop.
if(!toAppend) {
continue;
}
// Open a new table row if it should
if(index % rowSize == 0) {
tableHTML += "<tr>";
}
// Append the HTML data
tableHTML += toAppend;
// Close the table row if it has reached the maximum number of elements
if(index % rowSize == rowSize) {
tableHTML += "<tr>";
}
index++;
}
// Set the inner HTML
document.getElementById(tableId).innerHTML = tableHTML;
}
function fillTableWithSpecies() {
fillTable("species-table", 10, 649, (species) => {
// Skip this element if species is from Generation V and cannot be downloaded
if(species > 493 && !AVAILABLE_GENERATION_V_POKEMON.includes(species)) {
return false;
}
return "<td style='width:96px;height:96px;'><image src='/sprites/pokemon/normal/" + species + ".png'/><br>#" + species + "</td>";
});
}
function fillTableWithItems() {
fillTable("item-table", 20, 638, (item) => "<td style='width:48px;height:48px;'><image src='/sprites/items/" + item + ".png'/><br>#" + item + "</td>");
}

34
src/main/resources/dashboard/scripts/species.js
View File

@@ -1,34 +0,0 @@
const ELEMENT_SPECIES_TABLE = document.getElementById("species-table");
const AVAILABLE_GENERATION_V_POKEMON = new Array(
505, 507, 510, 511, 513, 515, 519, 523, 525, 527, 529, 531, 533, 535, 538, 539, 542, 545, 546, 548,
550, 553, 556, 558, 559, 561, 564, 569, 572, 575, 578, 580, 583, 587, 588, 594, 596, 600, 605, 607,
610, 613, 616, 618, 619, 621, 622, 624, 626, 628, 630, 631, 632);
function fillSpeciesTable() {
let tableHTML = "";
let index = 0;
for(let species = 1; species <= 649; species++) {
// Skip if this species is not available
if(species > 493 && !AVAILABLE_GENERATION_V_POKEMON.includes(species)) {
continue;
}
// Open new row if it should
if(index % 10 == 0) {
tableHTML += "<tr>";
}
tableHTML += "<td><image src='/sprites/pokemon/normal/" + species + ".png'/><br>#" + species + "</td>";
// Close current row if limit of 10 has been reached
if(index % 10 == 10) {
tableHTML += "</tr>";
}
index++;
}
ELEMENT_SPECIES_TABLE.innerHTML = tableHTML;
document.getElementById("main-container").style.display = "grid";
}

10
src/main/resources/dashboard/species.html
View File

@@ -1,16 +1,16 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles/species.css">
<link rel="stylesheet" href="styles/list.css">
</head>
<body onload="fillSpeciesTable()">
<div id="main-container" class="root-container" style="display:none;">
<body onload="fillTableWithSpecies()">
<div id="main-container" class="root-container"">
<label class="big-label">List of Pokémon species that can be downloaded</label>
<label>NOTE: Generation V Pokémon are exclusive to Black Version 2 and White Version 2</label>
<table id="species-table">
<!-- Filled by species.js -->
<!-- Filled by list.js -->
</table>
</div>
</body>
<script src="scripts/species.js"></script>
<script src="scripts/list.js"></script>
</html>

5
src/main/resources/dashboard/styles/species.css → src/main/resources/dashboard/styles/list.css
View File

@@ -9,7 +9,6 @@ label {
}
table {
width: 100%;
border-spacing: 8px;
margin-top: 15px;
margin-bottom: 20px;
@@ -18,15 +17,15 @@ table {
td {
background-color: #262626;
border-radius: 10px;
width: 96px;
height: 96px;
text-align: center;
}
.root-container {
display: grid;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
width: 1136; /* Hack-ish */
}
.big-label {