335 lines
7.4 KiB
HTML
335 lines
7.4 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %}Recipes{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
#content > h1 {
|
|
text-align: center;
|
|
width: 80%;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.recipes {
|
|
font-size: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
width: 80%;
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.recipe {
|
|
width: 20%;
|
|
align-self: stretch;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.ingredients {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.stats {
|
|
table {
|
|
tr.plus {
|
|
color: gold;
|
|
}
|
|
|
|
th {
|
|
padding: 8px;
|
|
}
|
|
|
|
td {
|
|
background-color: #4d4d4d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#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",
|
|
);
|
|
|
|
recipes.forEach(function (item, index) {
|
|
item.addEventListener("click", function () {
|
|
if (!hasSelection[typeIdx]) {
|
|
hasSelection[typeIdx] = true;
|
|
selectRecipe(item, typeIdx);
|
|
} else {
|
|
if (typeItem[typeIdx] != item) {
|
|
unselectRecipe(typeIdx);
|
|
selectRecipe(item, typeIdx);
|
|
} 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) {
|
|
typeItem[index] = item;
|
|
item.style["box-shadow"] = "0px 0px 10px rgba(0, 255, 0, 0.8)";
|
|
|
|
let stats = JSON.parse(item.dataset["stats"]);
|
|
addStats(stats);
|
|
}
|
|
|
|
function addStats(stats) {
|
|
globalStats.str += stats.str;
|
|
globalStats.mag += stats.mag;
|
|
globalStats.def += stats.def;
|
|
globalStats.hp += stats.hp;
|
|
globalStats.mp += stats.mp;
|
|
updateStats();
|
|
}
|
|
|
|
function removeStats(stats) {
|
|
globalStats.str -= stats.str;
|
|
globalStats.mag -= stats.mag;
|
|
globalStats.def -= stats.def;
|
|
globalStats.hp -= stats.hp;
|
|
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() {
|
|
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">
|
|
<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">
|
|
{% for recipe in recipes.starters %}
|
|
{% include "components/kh3/recipe.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<h1>Soups</h1>
|
|
<div class="recipes soups">
|
|
{% for recipe in recipes.soups %}
|
|
{% include "components/kh3/recipe.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<h1>Fish Dishes</h1>
|
|
<div class="recipes fish">
|
|
{% for recipe in recipes.fish %}
|
|
{% include "components/kh3/recipe.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<h1>Meat Dishes</h1>
|
|
<div class="recipes meat">
|
|
{% for recipe in recipes.meat %}
|
|
{% include "components/kh3/recipe.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<h1>Deserts</h1>
|
|
<div class="recipes deserts">
|
|
{% for recipe in recipes.deserts %}
|
|
{% include "components/kh3/recipe.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|