mikl/hollow-knight-silksong-completion-check
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

flexbox fixes, row, span with margin

Browse source
This commit is contained in:
ReznoRMichael 2020-09-27 22:04:36 +02:00
parent 8396fc5125
commit 81711b87a9
4 changed files with 46 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
HKCheckCompletion.js
View file

@ -13,13 +13,15 @@ let currentData = DATA_UNKNOWN;
let completionSymbol = SYMBOL_FALSE;
let divStart = [
"<div>"
"<div class='flex-container'>"
].join("\n");
let divEnd = [
"</div>"
].join("\n");
let pSpan = "<span class='p-left-small'></span>";
// ---------------- Hollow Knight Data Constant Objects ----------------- //
const DIV_ID = {
@ -347,7 +349,7 @@ const HK_GODMASTER_DOORS = [
const HK_ESSENTIAL = {
grubsCollected: ["Grubs Rescued", "out of 46 total", 46],
dreamOrbs: ["Essence Collected", "Dream Nail + 2400 for completion", 2400],
stationsOpened: ["Stag Stations opened", "out of 9 total", 9],
stationsOpened: ["Stag Stations opened", "out of 10 total", 10],
slyRescued: ["Sly Rescued", "Forgotten Crossroads"],
brettaRescued: ["Bretta Rescued", "Fungal Wastes"],
hasLantern: ["Lumafly Lantern", "Sly: 1800 Geo"],
@ -663,7 +665,7 @@ function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix
let b = ["<b>", "</b>"];
if (!textPrefix.length) b = ["", ""];
let span = ["<span class='location hidden'>", "</span>"];
let span = ["<span class='flex-row location hidden'>", "</span>"];
if (divId === DIV_ID.hints) {
span[0] = "<span>";
icon = SYMBOL_INFO;
@ -672,7 +674,7 @@ function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix
let dash = "";
if (textSuffix.length && textPrefix.length) dash = " — ";
document.getElementById(divId.id).innerHTML += divStart + icon + b[0] + textPrefix + b[1] + span[0] + dash + textSuffix + span[1] + divEnd;
document.getElementById(divId.id).innerHTML += divStart + icon + b[0] + textPrefix + b[1] + span[0] + pSpan + dash + textSuffix + span[1] + divEnd;
}
/**
@ -709,6 +711,13 @@ function CurrentDataInfo() {
completionSymbol = SYMBOL_INFO;
}
/**
* Switches global variable to no symbol (span with left padding)
*/
function CurrentDataBlank() {
completionSymbol = SYMBOL_EMPTY;
}
/**
* Fills HTML with the playTime value of the save file
* @param {object} divId ID of the HTML element for data appending
@ -725,7 +734,7 @@ function CheckPlayTime(divId, playTime) {
if (sec < 10) sec = "0" + sec;
if (minutes < 10) minutes = "0" + minutes;
let textFill = "Time Played: <b>" + hours + " h " + minutes + " min " + sec + " sec</b>";
let textFill = "Time Played:" + pSpan + "<b>" + hours + " h " + minutes + " min " + sec + " sec</b>";
document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd;
}
@ -739,7 +748,7 @@ function CheckCompletionPercent(divId, completionPercentage) {
(completionPercentage >= 112) ? CurrentDataTrue(): CurrentDataFalse();
let textFill = "Game Completion: <b>" + completionPercentage + " %</b> (out of " + divId.maxPercent + " %)";
let textFill = "Game Completion:" + pSpan + "<b>" + completionPercentage + " %</b>" + pSpan + "(out of " + divId.maxPercent + " %)";
document.getElementById(divId.id).innerHTML += divStart + completionSymbol + textFill + divEnd;
}
@ -752,7 +761,7 @@ function CheckCompletionPercent(divId, completionPercentage) {
function CheckHealthMasks(divId, masks, permadeathMode) {
let icon = SYMBOL_EMPTY;
let textFill = "Health:";
let textFill = "<span>Health:</span>";
let maskImages = "";
let maskNormal = "<img src='img/health-mask.png' class='health-mask'>";
let maskSteel = "<img src='img/health-mask-steel.png' class='health-mask'>";
@ -764,7 +773,7 @@ function CheckHealthMasks(divId, masks, permadeathMode) {
maskImages += maskImg;
}
document.getElementById(divId.id).innerHTML += "<div class='flex-container'>" + icon + textFill + maskImages + divEnd;
document.getElementById(divId.id).innerHTML += divStart + icon + textFill + maskImages + divEnd;
}
/**
@ -775,7 +784,7 @@ function CheckHealthMasks(divId, masks, permadeathMode) {
function CheckSoulOrbs(divId, totalSoul) {
let icon = SYMBOL_EMPTY;
let textFill = "Soul:";
let textFill = "<span>Soul:</span>";
let soulImages = "";
let soulNormal = "<img src='img/soul-orb.png' class='soul-orb'>";
let soulImg = soulNormal;
@ -784,7 +793,7 @@ function CheckSoulOrbs(divId, totalSoul) {
soulImages += soulImg;
}
document.getElementById(divId.id).innerHTML += "<div class='flex-container'>" + icon + textFill + soulImages + divEnd;
document.getElementById(divId.id).innerHTML += divStart + icon + textFill + soulImages + divEnd;
}
/**
@ -795,9 +804,9 @@ function CheckSoulOrbs(divId, totalSoul) {
function CheckGeo(divId, geoValue) {
let icon = SYMBOL_EMPTY;
let textFill = "Geo:<img src='img/geo.png' class='geo-symbol'><b>" + geoValue + "</b>";
let textFill = "<span>Geo:</span><img src='img/geo.png' class='geo-symbol'><b>" + geoValue + "</b>";
document.getElementById(divId.id).innerHTML += "<div class='flex-container'>" + icon + textFill + divEnd;
document.getElementById(divId.id).innerHTML += divStart + icon + textFill + divEnd;
}
/**
@ -914,13 +923,17 @@ function CheckAdditionalThings(divId, dataObject, playerData, worldData) {
case "nailDamage":
case "stationsOpened":
case "charmSlots":
textPrefix += ": " + playerData[i];
(playerData[i] >= dataObject[i][2]) ? CurrentDataTrue(): CurrentDataInfo();
let amount = playerData[i];
if (i === "stationsOpened") {
if (playerData.openedHiddenStation === true) amount++;
}
textPrefix += ": " + amount;
(amount >= dataObject[i][2]) ? CurrentDataTrue(): CurrentDataBlank();
break;
case "dreamOrbsSpent":
case "rancidEggs":
case "xunFlowerBrokeTimes":
CurrentDataInfo();
CurrentDataBlank();
textPrefix += ": " + Math.abs(playerData[i]);
break;
case "shopkeeperKey":
@ -961,7 +974,7 @@ function CheckAdditionalThings(divId, dataObject, playerData, worldData) {
case "relicsKingsIdol":
case "relicsArcaneEgg":
let total = playerData[dataObject[i][3]] + playerData[dataObject[i][4]];
(total >= dataObject[i][2]) ? CurrentDataTrue(): CurrentDataInfo();
(total >= dataObject[i][2]) ? CurrentDataTrue(): CurrentDataBlank();
textPrefix += ": " + total;
break;
default:

2
index.html
View file

@ -81,7 +81,7 @@
<p class="smalltext">
Work-In-Progress. Please report any incorrect data <a href="https://steamcommunity.com/app/367520/discussions/0/2915472677711090083/" target="_blank">here</a> or under the <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2209910193" target="_blank">Steam Guide</a>.<br>
Programmed, written and created by <a href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank">🉑 rezno[R]</a> © 2020<br>
Programmed, written and created by 🉑 <a href="https://github.com/ReznoRMichael/hollow-knight-completion-check" target="_blank">rezno[R]</a> © 2020<br>
<a href="https://www.paypal.me/ReznoRMichael" target="_blank">Support Tool development</a>
</p>

2
loadJson.js
View file

@ -44,7 +44,7 @@ function loadJSON(filename, callback) {
xobj.send(null);
}
loadJSON("save/" + fileName[3],
loadJSON("save/" + fileName[9],
function JSONparse(response) {
// Parse JSON string into object
jsonObj = JSON.parse(response);

21
style.css
View file

@ -160,10 +160,6 @@ p {
margin-bottom: 0.6rem;
}
.hidden {
display: none;
}
.horizontal-line {
margin: 1rem 0;
height: 1.5rem;
@ -206,14 +202,18 @@ a:hover {
.flex-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
}
.flex-row {
flex-direction: row;
}
.health-mask,
.soul-orb,
.geo-symbol {
display: flex;
width: auto;
height: 1.48rem;
margin: 0 0 0 0.3rem;
@ -228,8 +228,17 @@ a:hover {
}
.padding-left {
display: flex;
padding-left: 1.4rem;
height: 1.47rem;
}
.p-left-small {
padding-left: 0.3rem;
height: 1.47rem;
}
.hidden {
display: none;
}
.radio,