|
|
@@ -12,93 +12,62 @@ const getSprite = (() => {
|
|
|
}
|
|
|
})();
|
|
|
|
|
|
+const renderStatPair = (lbl, val, valueClass = "value") => `
|
|
|
+ <span class="pkmn-tile_label">${lbl}</span>
|
|
|
+ <span class="pkmn-tile_${valueClass}">${val}</span>
|
|
|
+`;
|
|
|
+
|
|
|
+const renderStatRow = lines => `
|
|
|
+ <div class="pkmn-tile_row">
|
|
|
+ ${lines.join("\n")}
|
|
|
+ </div>
|
|
|
+`;
|
|
|
+
|
|
|
const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
|
|
|
const textColor = getContrastingTextColor(mu.hex);
|
|
|
- return String.raw`
|
|
|
- <div
|
|
|
- class="pkmn-tile_stats"
|
|
|
- style="grid-area: ${area}; color: ${textColor}; background-color: ${mu.hex};"
|
|
|
- >
|
|
|
- <div class="pkmn-tile_row" style="justify-content: center;">
|
|
|
- ${(100 * scores.size / totalSize).toFixed(2)}% ${mu.hex}
|
|
|
- </div>
|
|
|
- <div class="toggle-on">
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">σ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.sigma.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">δ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.delta.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">M =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.manhattan.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">Ч =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.ch.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">Θ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.bigTheta.toFixed(2)}°</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">θ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.theta.toFixed(2)}°</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">ϕ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.phi.toFixed(2)}°</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">ℓ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.lightnessDiff.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <hr style="width: 80%; color: ${textColor}"/>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">μ =</span>
|
|
|
- <span class="pkmn-tile_value">(${mu.vector[0].toFixed(2)},</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label"></span>
|
|
|
- <span class="pkmn-tile_value">${mu.vector[1].toFixed(2)},</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label"></span>
|
|
|
- <span class="pkmn-tile_value">${mu.vector[2].toFixed(2)})</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">I =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.inertia.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">ℒ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.lightness.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">ν =</span>
|
|
|
- <span class="pkmn-tile_value">(${nu[0].toFixed(2)},</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label"></span>
|
|
|
- <span class="pkmn-tile_value">${nu[1].toFixed(2)},</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label"></span>
|
|
|
- <span class="pkmn-tile_value">${nu[2].toFixed(2)})</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">V =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.muNuAngle.toFixed(2)}°</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">N =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.size}px</span>
|
|
|
+ return `
|
|
|
+ <div
|
|
|
+ class="pkmn-tile_stats"
|
|
|
+ style="grid-area: ${area}; color: ${textColor}; background-color: ${mu.hex};"
|
|
|
+ >
|
|
|
+ <div class="pkmn-tile_row" style="justify-content: center;">
|
|
|
+ ${(100 * scores.size / totalSize).toFixed(2)}% ${mu.hex}
|
|
|
+ </div>
|
|
|
+ <div class="toggle-on">
|
|
|
+ ${
|
|
|
+ [ ["σ =", scores.sigma.toFixed(2)],
|
|
|
+ ["δ =", scores.delta.toFixed(2)],
|
|
|
+ ["M =", scores.manhattan.toFixed(2)],
|
|
|
+ ["Ч =", scores.ch.toFixed(2)],
|
|
|
+ ["Θ =", scores.bigTheta.toFixed(2) + "°"],
|
|
|
+ ["θ =", scores.theta.toFixed(2) + "°"],
|
|
|
+ ["ϕ =", scores.phi.toFixed(2) + "°"],
|
|
|
+ ["ℓ =", scores.lightnessDiff.toFixed(2)],
|
|
|
+ ]
|
|
|
+ .map(([lbl, val]) => renderStatPair(lbl, val))
|
|
|
+ .map(ls => renderStatRow([ls]))
|
|
|
+ .join("\n")
|
|
|
+ }
|
|
|
+ <hr style="width: 80%; color: ${textColor}"/>
|
|
|
+ ${
|
|
|
+ [ ["μ =", `(${mu.vector[0].toFixed(2)},`],
|
|
|
+ ["", mu.vector[1].toFixed(2) + ","],
|
|
|
+ ["", mu.vector[2].toFixed(2) + ")"],
|
|
|
+ ["I =", scores.inertia.toFixed(2)],
|
|
|
+ ["ℒ =", scores.lightness.toFixed(2) + "°"],
|
|
|
+ ["ν =", `(${nu[0].toFixed(2)},`],
|
|
|
+ ["", nu[1].toFixed(2) + ","],
|
|
|
+ ["", nu[2].toFixed(2) + ")"],
|
|
|
+ ["V =", scores.muNuAngle.toFixed(2)],
|
|
|
+ ["N =", scores.size],
|
|
|
+ ]
|
|
|
+ .map(([lbl, val]) => renderStatPair(lbl, val))
|
|
|
+ .map(ls => renderStatRow([ls]))
|
|
|
+ .join("\n")
|
|
|
+ }
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-`
|
|
|
+ `;
|
|
|
};
|
|
|
|
|
|
const clusterToggles = {};
|
|
|
@@ -107,7 +76,7 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
|
|
|
const clusterToggleId = `${name}-${kind}-pkmn-expand-toggle`;
|
|
|
const textColor = getContrastingTextColor(mu.hex);
|
|
|
|
|
|
- return String.raw`
|
|
|
+ return `
|
|
|
<div class="pkmn-tile toggle-box">
|
|
|
<input
|
|
|
autocomplete="off"
|
|
|
@@ -134,43 +103,33 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
|
|
|
${mu.hex}
|
|
|
</div>
|
|
|
<div class="toggle-on">
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">σ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.sigma.toFixed(2)}</span>
|
|
|
- <span class="pkmn-tile_label">δ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.delta.toFixed(2)}</span>
|
|
|
- <span class="pkmn-tile_label">M =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.manhattan.toFixed(2)}</span>
|
|
|
- <span class="pkmn-tile_label">Ч =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.ch.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">Θ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.bigTheta.toFixed(2)}°</span>
|
|
|
- <span class="pkmn-tile_label">θ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.theta.toFixed(2)}°</span>
|
|
|
- <span class="pkmn-tile_label">ϕ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.phi.toFixed(2)}°</span>
|
|
|
- <span class="pkmn-tile_label">ℓ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.lightnessDiff.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
+ ${ renderStatRow(
|
|
|
+ [ ["σ =", scores.total.sigma.toFixed(2)],
|
|
|
+ ["δ =", scores.total.delta.toFixed(2)],
|
|
|
+ ["M =", scores.total.manhattan.toFixed(2)],
|
|
|
+ ["Ч =", scores.total.ch.toFixed(2)],
|
|
|
+ ].map(([lbl, val]) => renderStatPair(lbl, val))
|
|
|
+ )}
|
|
|
+ ${ renderStatRow(
|
|
|
+ [ ["Θ =", scores.total.bigTheta.toFixed(2) + "°"],
|
|
|
+ ["θ =", scores.total.theta.toFixed(2) + "°"],
|
|
|
+ ["ϕ =", scores.total.phi.toFixed(2) + "°"],
|
|
|
+ ["ℓ =", scores.total.lightnessDiff.toFixed(2)],
|
|
|
+ ].map(([lbl, val]) => renderStatPair(lbl, val))
|
|
|
+ )}
|
|
|
<hr style="width: 80%; color: ${textColor}"/>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">μ =</span>
|
|
|
- <span class="pkmn-tile_vector">(${mu.vector.map(c => c.toFixed(2)).join(", ")})</span>
|
|
|
- <span class="pkmn-tile_label">I =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.inertia.toFixed(2)}</span>
|
|
|
- <span class="pkmn-tile_label">ℒ =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.lightness.toFixed(2)}</span>
|
|
|
- </div>
|
|
|
- <div class="pkmn-tile_row">
|
|
|
- <span class="pkmn-tile_label">ν =</span>
|
|
|
- <span class="pkmn-tile_vector">(${nu.map(c => c.toFixed(2)).join(", ")})</span>
|
|
|
- <span class="pkmn-tile_label">V =</span>
|
|
|
- <span class="pkmn-tile_value">${scores.total.muNuAngle.toFixed(2)}°</span>
|
|
|
- <span class="pkmn-tile_label">N =</span>
|
|
|
- <span class="pkmn-tile_value">${size}px</span>
|
|
|
- </div>
|
|
|
+ ${ renderStatRow(
|
|
|
+ [ ["μ =", `(${mu.vector.map(c => c.toFixed(2)).join(", ")})`, "vector"],
|
|
|
+ ["I =", scores.total.inertia.toFixed(2)],
|
|
|
+ ["ℒ =", scores.total.lightness.toFixed(2)],
|
|
|
+ ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
|
|
|
+ )}
|
|
|
+ ${ renderStatRow(
|
|
|
+ [ ["ν =", `(${nu.map(c => c.toFixed(2)).join(", ")})`, "vector"],
|
|
|
+ ["V =", scores.total.muNuAngle.toFixed(2)],
|
|
|
+ ["N =", size],
|
|
|
+ ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, size, c, scores.clusters[i])).join("\n")}
|
