Skip to content

Commit

Permalink
rs-calc: rewrite using web components
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnInternetTroll
AnInternetTroll committed Sep 25, 2024
1 parent cfc252f commit 21c8e61
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 78 deletions.
25 changes: 1 addition & 24 deletions content/resources/rs-calculator.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ summary = 'Know where to place sand, and also to know when to load the sand'
tags = ["practice", "service"]
+++

<script defer src="../../rs-calc.js"></script>
<noscript>
For the calculator to work it is necessary to enable JavaScript.
Here are the <a href="https://www.enable-javascript.com/">
Expand All @@ -30,27 +29,5 @@ or further to unload the falling block when u die)
<button type="submit">
Calculate
</button>

<details>
<summary>Results</summary>
From X: <span class="spawnX"></span>
From Z: <span class="spawnZ"></span>
To X: <span class="spawnToX"></span>
To Z: <span class="spawnToZ"></span>
<br />
<br />
⬅️ : <span class="positiveX"></span>
⬆️ : <span class="positiveZ"></span>
<br />
➡️ : <span class="negativeX"></span>
⬇️ : <span class="negativeZ"></span>
<br />
↖️ : X: <span class="midPositiveX"></span> Z: <span class="midPositiveZ"></span>
<br />
↙️ : X: <span class="midPositiveX"></span> Z: <span class="midNegativeZ"></span>
<br />
↘️ : X: <span class="midNegativeX"></span> Z: <span class="midNegativeZ"></span>
<br />
↗️ : X: <span class="midNegativeX"></span> Z: <span class="midPositiveZ"></span>
</details>
</form>
<script defer src="../../rs-calc.js"></script>
148 changes: 94 additions & 54 deletions static/rs-calc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,98 @@ function calculateCoordinates(spawnX, spawnZ) {
};
}

class McbeCalculatorRsElement extends HTMLElement {
static tagName = /** @type {const} */ ("mcbe-calculator-rs");
static spawnNumberXName = /** @type {const} */ ("spawn-x-number");
static spawnNumberZName = /** @type {const} */ ("spawn-z-number");
static observedAttributes = /** @type {const} */ ([
McbeCalculatorRsElement.spawnNumberXName,
McbeCalculatorRsElement.spawnNumberZName,
]);
/** @type ShadowRoot */
#shadow;
/** @type HTMLDetailsElement */
#details;
/** @type HTMLStyleElement */
#styles;

constructor() {
super();
}

connectedCallback() {
this.#shadow = this.attachShadow({ mode: "open" });
this.#styles = document.createElement("style");
this.#details = document.createElement("details");
this.#shadow.appendChild(this.#styles);
this.#shadow.appendChild(this.#details);
this.#details.open = true;
this.#styles.innerHTML = `p {
margin-top: 0;
margin-bottom: 0;
}`;
this.#render();
}

attributeChangedCallback() {
this.#render();
}

#render() {
const spawnNumberX = parseFloat(
this.getAttribute(McbeCalculatorRsElement.spawnNumberXName),
);
const spawnNumberZ = parseFloat(
this.getAttribute(McbeCalculatorRsElement.spawnNumberZName),
);

if (Number.isNaN(spawnNumberX) || Number.isNaN(spawnNumberZ)) {
this.#details.style.display = "none";
return;
}

const result = calculateCoordinates(spawnNumberX, spawnNumberZ);
this.#details.style.display = "block";
this.#details.innerHTML = `
<summary>Results</summary>
<p>
From X: ${result.spawnX}
From Z: ${result.spawnZ}
To X: ${result.spawnToX}
To Z: ${result.spawnToZ}
</p>
<p>
⬅️ : ${result.positiveX}
⬆️ : ${result.positiveZ}
</p>
<p>
➡️ : ${result.negativeX}
⬇️ : ${result.negativeZ}
</p>
<p>
↖️ : X: ${result.midPositiveX} Z: ${result.midPositiveZ}
</p>
<p>
↙️ : X: ${result.midPositiveX} Z: ${result.midNegativeZ}
</p>
<p>
↘️ : X: ${result.midNegativeX} Z: ${result.midNegativeZ}
</p>
<p>
↗️ : X: ${result.midNegativeX} Z: ${result.midPositiveZ}
</p>`;
}
}

customElements.define(McbeCalculatorRsElement.tagName, McbeCalculatorRsElement);

/** @type {NodeListOf<HTMLFormElement>} */
const forms = document.querySelectorAll("form.rs-calc");

if (!forms.length) throw new Error("Form not found");

forms.forEach((e) =>
forms.forEach((e) => {
const calc = document.createElement(McbeCalculatorRsElement.tagName);
e.appendChild(calc);
e.addEventListener("submit", (e) => {
e.preventDefault();
/** @type {HTMLFormElement} */
Expand All @@ -77,55 +163,9 @@ forms.forEach((e) =>
const spawnX = data.get("spawn-x");
const spawnZ = data.get("spawn-z");

const spawnXNumber = Number(spawnX);
const spawnZNumber = Number(spawnZ);

const result = calculateCoordinates(spawnXNumber, spawnZNumber);

form
.querySelectorAll(".spawnX")
.forEach((e) => (e.innerText = result.spawnX));
form
.querySelectorAll(".spawnZ")
.forEach((e) => (e.innerText = result.spawnZ));

form
.querySelectorAll(".positiveX")
.forEach((e) => (e.innerText = result.positiveX));
form
.querySelectorAll(".positiveZ")
.forEach((e) => (e.innerText = result.positiveZ));

form
.querySelectorAll(".negativeX")
.forEach((e) => (e.innerText = result.negativeX));
form
.querySelectorAll(".negativeZ")
.forEach((e) => (e.innerText = result.negativeZ));

form
.querySelectorAll(".midPositiveX")
.forEach((e) => (e.innerText = result.midPositiveX));
form
.querySelectorAll(".midPositiveZ")
.forEach((e) => (e.innerText = result.midPositiveZ));

form
.querySelectorAll(".midNegativeX")
.forEach((e) => (e.innerText = result.midNegativeX));
form
.querySelectorAll(".midNegativeZ")
.forEach((e) => (e.innerText = result.midNegativeZ));

form
.querySelectorAll(".spawnToX")
.forEach((e) => (e.innerText = result.spawnToX));
form
.querySelectorAll(".spawnToZ")
.forEach((e) => (e.innerText = result.spawnToZ));

form
.querySelectorAll("details")
.forEach((e) => (e.open = true));
}),
);
const calc = form.querySelector(McbeCalculatorRsElement.tagName);

calc.setAttribute(McbeCalculatorRsElement.spawnNumberXName, spawnX);
calc.setAttribute(McbeCalculatorRsElement.spawnNumberZName, spawnZ);
});
});

0 comments on commit 21c8e61

Please sign in to comment.