HexCasting/doc/template.html

401 lines
13 KiB
HTML
Raw Normal View History

2022-05-21 17:49:55 +02:00
<html lang="en">
2022-05-26 00:13:57 +02:00
<head>
2022-05-21 17:49:55 +02:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The Hex Book, all in one place.">
<meta name="author" content="petrak@, Alwinfy">
2022-05-26 00:13:57 +02:00
<link rel="icon" href="icon.png">
2022-05-21 17:49:55 +02:00
<title>Hex Book</title>
2022-05-26 00:13:57 +02:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
2022-05-21 17:49:55 +02:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<style>
summary { display: list-item; }
details.spell-collapsible {
display: inline-block;
border: 1px solid #aaa;
border-radius: 4px;
padding: .5em .5em 0;
margin-bottom: .5em;
}
summary.collapse-spell {
font-weight: bold;
margin: -.5em -.5em 0;
padding: .5em;
}
details.spell-collapsible[open] {
padding: .5em;
}
details[open] summary.collapse-spell {
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
}
details .collapse-spell::before {
content: "Click to show spell";
}
details[open] .collapse-spell::before {
content: "Click to hide spell";
}
blockquote.crafting-info {
font-size: inherit;
}
a.permalink {
margin-left: 0.5em;
}
a.permalink:hover {
color: lightgray;
}
p {
margin: 0.5ex 0;
}
p.fake-li {
margin: 0;
}
p.fake-li::before {
content: "\2022";
margin: 1ex;
}
2022-05-21 21:18:26 +02:00
.linkout::before {
2022-05-21 17:49:55 +02:00
content: "Link: ";
}
p.todo-note {
font-style: italic;
color: lightgray;
}
.obfuscated {
filter: blur(1em);
}
2022-05-21 21:18:26 +02:00
.spoilered {
filter: blur(1ex);
-moz-transition: filter 0.04s linear;
2022-05-21 21:18:26 +02:00
}
.spoilered:hover {
filter: blur(0.5ex);
}
.spoilered.unspoilered {
filter: blur(0);
}
canvas.spell-viz {
2022-08-19 03:37:43 +02:00
--dot-color: #777f;
--dot-color: #777f;
--start-dot-color: #f009;
--moving-dot-color: #0fa9;
--path-color: darkgray;
--visited-path-color: #0c8;
--dot-scale: 0.0625;
--moving-dot-scale: 0.125;
--line-scale: 0.08333;
--pausetext-scale: 0.5;
2022-08-19 03:37:43 +02:00
--dark-mode: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #201a20;
color: #ddd;
}
.jumbotron {
background-color: #323;
}
canvas.spell-viz {
/* hack */
--dark-mode: 1;
}
}
2022-05-26 00:13:57 +02:00
2022-05-21 17:49:55 +02:00
</style>
<noscript>
2022-05-26 00:13:57 +02:00
<style>
/* for accessibility */
.spoilered {
filter: none !important;
}
2022-05-26 00:13:57 +02:00
</style>
</noscript>
2022-05-21 17:49:55 +02:00
<script>
"use strict";
const speeds = [0, 0.25, 0.5, 1, 2, 4];
const scrollThreshold = 100;
const rfaQueue = [];
2022-08-19 17:22:58 +02:00
const colorCache = new Map();
function getColorRGB(ctx, str) {
if (!colorCache.has(str)) {
ctx.fillStyle = str;
ctx.clearRect(0, 0, 1, 1);
ctx.fillRect(0, 0, 1, 1);
const imgData = ctx.getImageData(0, 0, 1, 1);
colorCache.set(str, imgData.data);
}
return colorCache.get(str);
}
2022-05-21 17:49:55 +02:00
function startAngle(str) {
switch (str) {
case "east": return 0;
case "north_east": return 1;
case "north_west": return 2;
case "west": return 3;
case "south_west": return 4;
case "south_east": return 5;
default: return 0;
}
}
function offsetAngle(str) {
switch (str) {
case "w": return 0;
case "q": return 1;
case "a": return 2;
case "s": return 3;
case "d": return 4;
case "e": return 5;
default: return -1;
}
}
function initializeElem(canvas) {
const str = canvas.dataset.string;
let angle = startAngle(canvas.dataset.start);
const perWorld = canvas.dataset.perWorld === "True";
// build geometry
const points = [[0, 0]];
let lastPoint = points[0];
let minPoint = lastPoint, maxPoint = lastPoint;
for (const ch of "w" + str) {
const addAngle = offsetAngle(ch);
if (addAngle < 0) continue;
angle = (angle + addAngle) % 6;
const trueAngle = Math.PI / 3 * angle;
const [lx, ly] = lastPoint;
const newPoint = [lx + Math.cos(trueAngle), ly - Math.sin(trueAngle)];
points.push(newPoint);
lastPoint = newPoint;
const [mix, miy] = minPoint;
minPoint = [Math.min(mix, newPoint[0]), Math.min(miy, newPoint[1])];
const [max, may] = maxPoint;
maxPoint = [Math.max(max, newPoint[0]), Math.max(may, newPoint[1])];
}
const size = Math.min(canvas.width, canvas.height) * 0.8;
const scale = size / Math.max(3, Math.max(maxPoint[1] - minPoint[1], maxPoint[0] - minPoint[0]));
const center = [(minPoint[0] + maxPoint[0]) * 0.5, (minPoint[1] + maxPoint[1]) * 0.5];
const truePoints = points.map(p => [canvas.width * 0.5 + scale * (p[0] - center[0]), canvas.height * 0.5 + scale * (p[1] - center[1])]);
let uniqPoints = [];
l1: for (const point of truePoints) {
for (const pt of uniqPoints) {
if (Math.abs(point[0] - pt[0]) < 0.00001 && Math.abs(point[1] - pt[1]) < 0.00001) {
continue l1;
}
}
uniqPoints.push(point);
}
// rendering code
const speed = 0.0025;
const context = canvas.getContext("2d");
const negaProgress = -3;
let progress = 0;
let scrollTimeout = 1e309;
let speedLevel = 3;
let speedIncrement = 0;
function speedScale() {
return speeds[speedLevel];
}
const style = getComputedStyle(canvas);
const getProp = n => style.getPropertyValue(n);
2022-05-21 17:49:55 +02:00
const tick = dt => {
scrollTimeout += dt;
if (canvas.offsetParent === null) return;
const strokeStyle = getProp("--path-color");
const strokeVisitedStyle = getProp("--visited-path-color");
const startDotStyle = getProp("--start-dot-color");
const dotStyle = getProp("--dot-color");
const movDotStyle = getProp("--moving-dot-color");
const strokeWidth = scale * +getProp("--line-scale");
const dotRadius = scale * +getProp("--dot-scale");
const movDotRadius = scale * +getProp("--moving-dot-scale");
const pauseScale = scale * +getProp("--pausetext-scale");
2022-08-19 03:37:43 +02:00
const bodyBg = scale * +getProp("--pausetext-scale");
const darkMode = +getProp("--dark-mode");
2022-08-19 17:22:58 +02:00
const bgColors = getColorRGB(context, getComputedStyle(document.body).backgroundColor);
2022-05-21 17:49:55 +02:00
if (!perWorld) {
progress += speed * dt * (progress > 0 ? speedScale() : Math.sqrt(speedScale()));
}
if (progress >= truePoints.length - 1) {
progress = negaProgress;
}
let ix = Math.floor(progress), frac = progress - ix, core = null, fadeColor = 0;
if (ix < 0) {
const rawFade = 2 * progress / negaProgress - 1;
fadeColor = 1 - Math.abs(rawFade);
context.strokeStyle = rawFade > 0 ? strokeVisitedStyle : strokeStyle;
ix = rawFade > 0 ? truePoints.length - 2 : 0;
frac = +(rawFade > 0);
} else {
context.strokeStyle = strokeVisitedStyle;
}
2022-05-21 17:49:55 +02:00
const [lx, ly] = truePoints[ix];
const [rx, ry] = truePoints[ix + 1];
core = [lx + (rx - lx) * frac, ly + (ry - ly) * frac];
2022-05-21 17:49:55 +02:00
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.lineWidth = strokeWidth;
context.moveTo(truePoints[0][0], truePoints[0][1]);
for (let i = 1; i < ix + 1; i++) {
context.lineTo(truePoints[i][0], truePoints[i][1]);
}
context.lineTo(core[0], core[1]);
context.stroke();
context.beginPath();
context.strokeStyle = strokeStyle;
context.moveTo(core[0], core[1]);
for (let i = ix + 1; i < truePoints.length; i++) {
context.lineTo(truePoints[i][0], truePoints[i][1]);
}
context.stroke();
for (let i = 0; i < uniqPoints.length; i++) {
context.beginPath();
context.fillStyle = (i == 0 && !perWorld) ? startDotStyle : dotStyle;
const radius = (i == 0 && !perWorld) ? movDotRadius : dotRadius;
2022-05-21 17:49:55 +02:00
context.arc(uniqPoints[i][0], uniqPoints[i][1], radius, 0, 2 * Math.PI);
context.fill();
}
2022-05-21 17:49:55 +02:00
if (!perWorld) {
context.beginPath();
context.fillStyle = movDotStyle;
context.arc(core[0], core[1], movDotRadius, 0, 2 * Math.PI);
2022-05-21 17:49:55 +02:00
context.fill();
}
if (fadeColor) {
2022-08-19 17:22:58 +02:00
context.fillStyle = `rgba(${bgColors[0]}, ${bgColors[1]}, ${bgColors[2]}, ${fadeColor})`;
2022-05-21 17:49:55 +02:00
context.fillRect(0, 0, canvas.width, canvas.height);
}
if (scrollTimeout <= 2000) {
context.fillStyle = `rgba(200, 200, 200, ${(2000 - scrollTimeout) / 1000})`;
context.font = `${pauseScale}px sans-serif`;
2022-05-21 17:49:55 +02:00
context.fillText(speedScale() ? speedScale() + "x" : "Paused", 0.2 * scale, canvas.height - 0.2 * scale);
}
};
rfaQueue.push(tick);
// scrolling input
2022-05-21 21:18:26 +02:00
if (!perWorld) {
canvas.addEventListener("wheel", ev => {
speedIncrement += ev.deltaY;
const oldSpeedLevel = speedLevel;
if (speedIncrement >= scrollThreshold) {
speedLevel--;
} else if (speedIncrement <= -scrollThreshold) {
speedLevel++;
}
if (oldSpeedLevel != speedLevel) {
speedIncrement = 0;
speedLevel = Math.max(0, Math.min(speeds.length - 1, speedLevel));
scrollTimeout = 0;
}
ev.preventDefault();
});
}
2022-05-21 17:49:55 +02:00
}
function hookLoad(elem) {
let init = false;
const canvases = elem.querySelectorAll("canvas");
elem.addEventListener("toggle", () => {
if (!init) {
canvases.forEach(initializeElem);
init = true;
}
});
}
function hookToggle(elem) {
const details = Array.from(document.querySelectorAll("details." + elem.dataset.target));
elem.addEventListener("click", () => {
if (details.some(x => x.open)) {
details.forEach(x => x.open = false);
} else {
details.forEach(x => x.open = true);
}
});
}
2022-05-21 21:18:26 +02:00
const params = new URLSearchParams(document.location.search);
function hookSpoiler(elem) {
if (params.get("nospoiler") !== null) {
elem.classList.add("unspoilered");
} else {
const thunk = ev => {
2022-05-22 04:37:56 +02:00
if (!elem.classList.contains("unspoilered")) {
ev.preventDefault();
ev.stopImmediatePropagation();
elem.classList.add("unspoilered");
}
2022-05-21 21:18:26 +02:00
elem.removeEventListener("click", thunk);
};
elem.addEventListener("click", thunk);
2022-05-22 04:37:56 +02:00
if (elem instanceof HTMLAnchorElement) {
const href = elem.getAttribute("href");
if (href.startsWith("#")) {
elem.addEventListener("click", () => document.getElementById(href.substring(1)).querySelector(".spoilered").classList.add("unspoilered"));
}
}
2022-05-21 21:18:26 +02:00
}
}
2022-05-21 17:49:55 +02:00
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('details.spell-collapsible').forEach(hookLoad);
document.querySelectorAll('a.toggle-link').forEach(hookToggle);
2022-05-22 04:37:56 +02:00
document.querySelectorAll('.spoilered').forEach(hookSpoiler);
2022-05-21 17:49:55 +02:00
function tick(prevTime, time) {
const dt = time - prevTime;
for (const q of rfaQueue) {
q(dt);
}
requestAnimationFrame(t => tick(time, t));
}
requestAnimationFrame(t => tick(t, t));
});
2022-05-26 00:13:57 +02:00
2022-05-21 17:49:55 +02:00
</script>
2022-05-26 00:13:57 +02:00
</head>
<body>
<div class="container" style="margin-top: 3em;">
2022-05-21 17:49:55 +02:00
<blockquote>
2022-05-26 00:13:57 +02:00
<h1>This is the online version of the Hexcasting documentation.</h1>
<p>Embedded images and patterns are included, but not crafting recipes or items. There's an in-game book for
those.</p>
<p>Additionally, this is built from the latest code on GitHub. It may describe <b>newer</b> features that you
may not necessarily have, even on the latest CurseForge version!</p>
<p><b>Entries which are blurred are spoilers</b>. Click to reveal them, but be aware that they may spoil endgame
progression. Alternatively, click <a href="?nospoiler">here</a> to get a version with all spoilers showing.
</p>
2022-05-21 17:49:55 +02:00
</blockquote>
2022-05-26 00:13:57 +02:00
</div>
2022-05-21 21:18:26 +02:00
#SPOILER hexcasting:opened_eyes hexcasting:y_u_no_cast_angy hexcasting:enlightenment
2022-05-21 17:49:55 +02:00
#DUMP_BODY_HERE
2022-05-26 00:13:57 +02:00
</body>
2022-05-21 17:49:55 +02:00
</html>