wynd
/
khguide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Stats diagram for KH3 food

master
Wynd 2025-01-27 19:15:38 +02:00
parent 62be9ca44f
commit 907305858a
2 changed files with 212 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/kh3.rs
View File

@ -24,9 +24,9 @@ struct Recipe {
impl Recipe {
fn stats(&self, is_plus: &bool) -> &FoodStats {
if *is_plus {
&self.normal
} else {
&self.plus
} else {
&self.normal
}
}
}

194
templates/pages/kh3-recipes.html
View File

@ -6,6 +6,8 @@
<style>
#content > h1 {
text-align: center;
width: 80%;
margin-left: auto;
}
.recipes {
@ -15,6 +17,9 @@
justify-content: center;
align-items: baseline;
gap: 16px;
width: 80%;
margin-right: 0;
margin-left: auto;
}
.recipe {
@ -47,13 +52,30 @@
}
}
}
#stats {
position: fixed;
}
svg > text {
stroke-width: 0;
fill: white;
}
#hearty-meal-wrapper {
text-align: center;
width: 80%;
}
</style>
<script>
let globalStats = { str: 0, mag: 0, def: 0, hp: 0, mp: 0 };
const types = ["starters", "soups", "fish", "meat", "deserts"];
let typeItem = [];
let hasSelection = [false, false, false, false, false];
document.addEventListener("DOMContentLoaded", (event) => {
updateStats();
types.forEach(function (type, typeIdx) {
const recipes = document.querySelectorAll(
"div.recipes." + type + " .recipe",
@ -71,25 +93,62 @@
} else {
hasSelection[typeIdx] = false;
unselectRecipe(typeIdx);
updateStats();
}
}
});
});
});
document
.getElementById("hearty-meal")
.addEventListener("click", function () {
console.log(this);
if (this.checked) {
let bonusStr = Math.ceil(globalStats.str * 0.25);
let bonusMag = Math.ceil(globalStats.mag * 0.25);
let bonusDef = Math.ceil(globalStats.def * 0.25);
let bonusHP = Math.ceil(globalStats.hp * 0.25);
let bonusMP = Math.ceil(globalStats.mp * 0.25);
let stats = {
str: bonusStr,
mag: bonusMag,
def: bonusDef,
hp: bonusHP,
mp: bonusMP,
};
addStats(stats);
} else {
let bonusStr = Math.ceil(globalStats.str * 0.2);
let bonusMag = Math.ceil(globalStats.mag * 0.2);
let bonusDef = Math.ceil(globalStats.def * 0.2);
let bonusHP = Math.ceil(globalStats.hp * 0.2);
let bonusMP = Math.ceil(globalStats.mp * 0.2);
let stats = {
str: bonusStr,
mag: bonusMag,
def: bonusDef,
hp: bonusHP,
mp: bonusMP,
};
removeStats(stats);
updateStats();
}
});
});
function unselectRecipe(index) {
typeItem[index].style["box-shadow"] =
"0px 0px 10px rgba(0, 0, 0, 0.4)";
let stats = JSON.parse(typeItem[index].dataset["stats"]);
removeStats(stats);
}
function selectRecipe(item, index) {
if (typeItem[index] != undefined) {
let prevStats = JSON.parse(
typeItem[index].dataset["stats"],
);
removeStats(prevStats);
}
typeItem[index] = item;
item.style["box-shadow"] = "0px 0px 10px rgba(0, 255, 0, 0.8)";
@ -114,16 +173,129 @@
globalStats.mp -= stats.mp;
}
const STR_MAX = 5;
const MAG_MAX = 5;
const DEF_MAX = 5;
const HP_MAX = 63;
const MP_MAX = 50;
const CENTER_POINT = [150, 120];
const STR_MAX_POINT = [150, 20];
const MAG_MAX_POINT = [50, 100];
const DEF_MAX_POINT = [250, 100];
const HP_MAX_POINT = [210, 210];
const MP_MAX_POINT = [90, 210];
function updateStats() {
const elem = document.getElementById("stats");
console.log(elem);
let strProgress = globalStats.str / STR_MAX;
let magProgress = globalStats.mag / MAG_MAX;
let defProgress = globalStats.def / DEF_MAX;
let hpProgress = globalStats.hp / HP_MAX;
let mpProgress = globalStats.mp / MP_MAX;
let poly = document.getElementById("stats-mod");
updatePoint(
poly,
0,
STR_MAX_POINT,
strProgress,
globalStats.str,
"stat-str",
);
updatePoint(
poly,
4,
MAG_MAX_POINT,
magProgress,
globalStats.mag,
"stat-mag",
);
updatePoint(
poly,
1,
DEF_MAX_POINT,
defProgress,
globalStats.def,
"stat-def",
);
updatePoint(
poly,
2,
HP_MAX_POINT,
hpProgress,
globalStats.hp,
"stat-hp",
);
updatePoint(
poly,
3,
MP_MAX_POINT,
mpProgress,
globalStats.mp,
"stat-mp",
);
}
function updatePoint(poly, statId, max, progress, value, statElem) {
poly.points[statId].x =
CENTER_POINT[0] + (max[0] - CENTER_POINT[0]) * progress;
poly.points[statId].y =
CENTER_POINT[1] + (max[1] - CENTER_POINT[1]) * progress;
document.getElementById(statElem).innerHTML = "+" + value;
}
});
</script>
{% endblock %}
{% block content %}
<div id="stats"></div>
<div id="stats">
<svg width="360" height="430">
{# clockwise points #}
<polygon
points="150,20 250,100 210,210 90,210 50,100"
style="fill:gray;stroke:black;stroke-width:3"
/>
<polygon
id="stats-mod"
points="150,20 250,100 210,210 90,210 50,100"
style="fill:rgba(152, 255, 224, 0.8)"
/>
<text x="134" y="15">STR</text>
<text x="5" y="100">MAG</text>
<text x="255" y="100">DEF</text>
<text x="210" y="230">HP</text>
<text x="60" y="230">MP</text>
<text x="100" y="280">Strength</text>
<text x="175" y="280" id="stat-str">+0</text>
<text x="100" y="310">Magic</text>
<text x="155" y="310" id="stat-mag">+0</text>
<text x="100" y="340">Defense</text>
<text x="170" y="340" id="stat-def">+0</text>
<text x="100" y="370">HP</text>
<text x="130" y="370" id="stat-hp">+0</text>
<text x="100" y="400">MP</text>
<text x="130" y="400" id="stat-mp">+0</text>
<line x1="150" y1="120" x2="150" y2="20" stroke="black" />
<line x1="150" y1="120" x2="50" y2="100" stroke="black" />
<line x1="150" y1="120" x2="250" y2="100" stroke="black" />
<line x1="150" y1="120" x2="210" y2="210" stroke="black" />
<line x1="150" y1="120" x2="90" y2="210" stroke="black" />
Sorry, your browser does not support inline SVG.
</svg>
<div id="hearty-meal-wrapper">
<input type="checkbox" id="hearty-meal" name="hearty-meal" />
<label for="hearty-meal">Hearty Meal</label>
</div>
</div>
<h1>Starters</h1>
<div class="recipes starters">