Skip to content

Commit

Permalink
Finish expanded mode info
Browse files Browse the repository at this point in the history
  • Loading branch information
@Not-A-Normal-Robot
Not-A-Normal-Robot committed May 14, 2024
1 parent 2977949 commit 45ff395
Show file tree
Hide file tree
Showing 6 changed files with 358 additions and 120 deletions.
109 changes: 89 additions & 20 deletions data/lang/articles/en/modes.master_ph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,120 @@ <h3>Section 2 - 12 ~ 25 points</h3>
<h3>Section 3 - 26 ~ 41 points</h3>
In this section, 10 lines of garbage appear. <br>
This isn't your usual multiplayer cheese garbage; it's closer to the "Type B" kind of garbage. <br>
Significantly less garbage blocks appear the lower your stack is when you enter this section. <br>
The lower your stack is when you enter this section, the less garbage blocks appear. <br>
If you enter this section without using hold up to this point, you get an extra life as a reward. <br>
You are required to clear all 10 rows of garbage to continue.

<h3>Section 4 - 42 ~ 61 points</h3>
This section is a regular 20G + bone blocks section. The Hold mechanic is also disabled. Not much to say here.
This section is a regular 20G + bone blocks section. <br>
The Hold mechanic is also disabled. <br>
You gain a life upon entering this section.

<h3>Section 5 - 62 ~ 125 points</h3>
This section disables move-reset, making it harder to survive. The speed here is comparable to the middle stages of Master FINAL.
This section disables move-reset, making it harder to survive. <br>
The speed here is comparable to the middle stages of Master FINAL. <br>
You gain a life upon entering this section.

<h3>Section 6 - 126 ~ 161 points</h3>
The game speeds up significantly in this section. Not much else changes.
The game speeds up significantly in this section. <br>
You gain a life upon entering this section.

<h3>Section 7 - 162 ~ 225 points</h3>
The game speeds up even more in this section. <br>
The Hold mechanic is re-enabled. <br>
Placed blocks fade away slowly.
Placed blocks fade away slowly. <br>
You gain a life upon entering this section.

<h3>Section 8 - 226 ~ 258 points</h3>
The bone block mechanic is disabled in this section. <br>
Placed blocks fade away faster.
Placed blocks fade away faster. <br>
You gain a life upon entering this section.

<h3>Section 9 - 259 ~ 260 points</h3>
The pieces' colors are randomized upon entering this section. <br>
Placed blocks fade away nearly instantly. <br>
Placed blocks fade away even faster. <br>
You have to clear 8 more Techrashes to finally finish the mode. <br>
You don't have to clear the Techrashes in a row; unlike the first section, getting any other kind of line clear doesn't end the game prematurely.
You don't have to clear the Techrashes in a row; unlike the first section, getting any other kind of line clear doesn't end the game prematurely. <br>
You gain a life upon entering this section.

<h2>Speed table</h2>

Note: times are measured in frames. The game runs at 60 FPS (16.6 ms per frame).
<table>
<tr>
<th>Section</th>
<th>Lock delay</th>
<th>Move reset</th>
<th>Entry delay</th>
<th>Line delay</th>
<th>Invisible time</th>
<th>#</th>
<th>Lock</th>
<th>Reset</th>
<th><small>Spawn/Line delay</small></th>
<th>Fade time</th>
<th><small>Stage entry delay</small></th>
<th>Next</th>
<th>Hold</th>
<th>DAS</th>
<th>Block skin</th>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>15</td>
<td rowspan="4">Move</td>
<td>10</td>
<td rowspan="6">None</td>
<td>---</td>
<td>2</td>
<td rowspan="3">Yes</td>
<td rowspan="9">5</td>
<td>Normal</td>
</tr>
<tr>
<td>2</td>
<td>14</td>
<td>7</td>
<td>30</td>
<td>4</td>
<td>Swapped</td>
</tr>
<tr>
<td>3</td>
<td>13</td>
<td rowspan="2">6</td>
<td>45</td>
<td>5</td>
<td>Normal</td>
</tr>
<tr>
<td>4</td>
<td>11</td>
<td>30</td>
<td rowspan="6">6</td>
<td rowspan="3">No</td>
<td rowspan="4">Bone</td>
</tr>
<tr>
<td>5</td>
<td>13</td>
<td rowspan="5">Step</td>
<td>5</td>
<td rowspan="5">0</td>
</tr>
<tr>
<td>6</td>
<td>11</td>
<td rowspan="4">4</td>
</tr>
<tr>
<td>7</td>
<td rowspan="2">10</td>
<td>180</td>
<td rowspan="3">Yes</td>
</tr>
<tr>
<td>8</td>
<td>90</td>
<td>Normal</td>
</tr>
<tr>
<td>9</td>
<td>15</td>
<td>40</td>
<td>Random</td>
</tr>
</table>
3 changes: 2 additions & 1 deletion data/lang/en.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export default {
map: {
unfocused: "Unfocused - click here to focus",
latest_version: "latest version",
not_available: "N/A"
},
modes: {
sprint_10l: {
Expand Down
2 changes: 1 addition & 1 deletion js/lang.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function getLangFilePath(lang) {
}
export function getLanguageEntry(key, fallback) {
if(typeof key !== 'string') throw new Error("Key must be a string!");
fallback ??= key;
if(fallback === undefined) fallback = key;

let keys = key.split('.');
let scope = langEntries;
Expand Down
103 changes: 79 additions & 24 deletions js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,31 @@ import * as LANG from "./lang.js";
const CROSSHAIR = document.getElementById("crosshair");

const MODE_INFO_ELEMENT = document.getElementById("mode-info");
const MODE_INFO_TITLE = MODE_INFO_ELEMENT.querySelector(".title");
const MODE_INFO_SUBTITLE = MODE_INFO_ELEMENT.querySelector(".subtitle");
const MODE_INFO_VERSION = MODE_INFO_ELEMENT.querySelector(".version-info");
const MODE_INFO_DESCRIPTION = MODE_INFO_ELEMENT.querySelector(".description");
const MODE_INFO_NAME = MODE_INFO_ELEMENT.querySelector(".name");
const MODE_INFO_RANK_REQS = MODE_INFO_ELEMENT.querySelector(".rank-reqs");
const MODE_INFO_RANK_REQ_ELEMENTS = MODE_RANK_DISPLAY_CLASSES.map(c => document.getElementsByClassName(c));
const MODE_INFO_EXPAND_BUTTON = document.getElementById("expand-mode-info");
const MODE_INFO_CLOSE_BUTTON = document.getElementById("close-mode-info");
const MODE_INFO_COLLAPSE_BUTTON = document.getElementById("collapse-mode-info");

const MODE_INFO_ELEMENTS = {
outer: MODE_INFO_ELEMENT,
title: MODE_INFO_ELEMENT.querySelector(".title"),
subtitle: MODE_INFO_ELEMENT.querySelector(".subtitle"),
version: MODE_INFO_ELEMENT.querySelector(".version-info"),
description: MODE_INFO_ELEMENT.querySelector(".description"),
name: MODE_INFO_ELEMENT.querySelector(".name"),
rankReqs: MODE_INFO_ELEMENT.querySelector(".rank-reqs"),
rankReqElements: MODE_RANK_DISPLAY_CLASSES.map(c => document.getElementsByClassName(c)),
expandButton: document.getElementById("expand-mode-info"),
closeButton: document.getElementById("close-mode-info"),
collapseButton: document.getElementById("collapse-mode-info"),
article: document.getElementById("mode-article"),
featuredVideo: document.getElementById("featured-video"),
featuredVideoText: document.getElementById("featured-video-text"),
cards: {
diff: document.getElementById("difficulty-card"),
diffContent: document.getElementById("difficulty-card-content"),
length: document.getElementById("length-card"),
lengthContent: document.getElementById("length-card-content"),
version: document.getElementById("version-card"),
versionContent: document.getElementById("version-card-content")
}
}

const DIAMOND_SVG =
`<svg class="border" xmlns="http://www.w3.org/2000/svg" viewBox="-4.5 -4.5 109 109">
Expand Down Expand Up @@ -409,19 +424,58 @@ import * as LANG from "./lang.js";
if(!selected) return;
const mode = map.modes[selected];

MODE_INFO_TITLE.innerText = LANG.getLanguageEntry(`modes.${selected}.title`);
MODE_INFO_SUBTITLE.innerText = LANG.getLanguageEntry(`modes.${selected}.subtitle`, "");
MODE_INFO_DESCRIPTION.innerText = LANG.getLanguageEntry(`modes.${selected}.description`, "");
MODE_INFO_VERSION.innerText = LANG.getLanguageEntry(`modes.${selected}.version_info`, "");
MODE_INFO_NAME.innerText = LANG.getModeFullName(selected);
MODE_INFO_ELEMENTS.title.innerText = LANG.getLanguageEntry(`modes.${selected}.title`);
MODE_INFO_ELEMENTS.subtitle.innerText = LANG.getLanguageEntry(`modes.${selected}.subtitle`, "");
MODE_INFO_ELEMENTS.description.innerText = LANG.getLanguageEntry(`modes.${selected}.description`, "");
MODE_INFO_ELEMENTS.version.innerText = LANG.getLanguageEntry(`modes.${selected}.version_info`, "");
MODE_INFO_ELEMENTS.name.innerText = LANG.getModeFullName(selected);

for(let rank = 0; rank < MODE_INFO_RANK_REQ_ELEMENTS.length; rank++) {
for(let rank = 0; rank < MODE_INFO_ELEMENTS.rankReqElements.length; rank++) {
const req = LANG.getLanguageEntry(`modes.${selected}.rank_reqs.${rank}`, "(impossible)");
for(let i = 0; i < MODE_INFO_RANK_REQ_ELEMENTS[rank].length; i++) {
MODE_INFO_RANK_REQ_ELEMENTS[rank][i].textContent = req;
for(let i = 0; i < MODE_INFO_ELEMENTS.rankReqElements[rank].length; i++) {
MODE_INFO_ELEMENTS.rankReqElements[rank][i].textContent = req;
}
}
}
function updateExpandedModeInfo() {
LANG.getArticle(`modes.${selected}`, "Article unavailable")
.then(article => {
MODE_INFO_ELEMENTS.article.innerHTML = article;
})
.catch(err => {
const errMsg = `Error loading article 'modes.${selected}': `
console.error(errMsg, err);
alert(errMsg + "\n" + err);
});

const vid = LANG.getLanguageEntry(`modes.${selected}.featured_video`, false);
const vidElement = MODE_INFO_ELEMENTS.featuredVideo,
vidText = MODE_INFO_ELEMENTS.featuredVideoText;

if(vid) {
vidElement.classList.remove("hide-important");
vidText.classList.remove("hide-important");
vidElement.src = vid;
} else {
vidElement.classList.add("hide-important");
vidText.classList.add("hide-important");
}

const cards = MODE_INFO_ELEMENTS.cards;

let diff = LANG.getLanguageEntry(`modes.${selected}.diff`, null) ??
LANG.getLanguageEntry(`map.not_available`);

let length = LANG.getLanguageEntry(`modes.${selected}.length`, null) ??
LANG.getLanguageEntry(`map.not_available`);

let version = LANG.getLanguageEntry(`modes.${selected}.version_info`, null) ??
LANG.getLanguageEntry(`map.latest_version`);

cards.diffContent.textContent = diff;
cards.lengthContent.textContent = length;
cards.versionContent.textContent = version;
}

function unselectMode() {
if(selected) {
Expand All @@ -445,6 +499,7 @@ import * as LANG from "./lang.js";
classes.add("expand-full", "expand-full-anim");
classes.remove("expand", "expand-anim", "collapse-anim", "collapse-full-anim");
modeInfoExpansionState = "expanded";
updateExpandedModeInfo();
}
function modeInfoCollapseToNothing() {
const classes = MODE_INFO_ELEMENT.classList;
Expand Down Expand Up @@ -497,7 +552,7 @@ import * as LANG from "./lang.js";

// Mouse events
window.addEventListener("mousedown", (event) => {
if(event.button === 0 && !MODE_INFO_RANK_REQS.contains(event.target) && modeInfoExpansionState !== "expanded") {
if(event.button === 0 && !MODE_INFO_ELEMENTS.rankReqs.contains(event.target) && modeInfoExpansionState !== "expanded") {
isDragging = true;
CROSSHAIR.style.display = "none";
}
Expand All @@ -523,7 +578,7 @@ import * as LANG from "./lang.js";
isDragging = false;
});
window.addEventListener("wheel", (event) => {
if(MODE_INFO_RANK_REQS.contains(event.target) || modeInfoExpansionState === "expanded") return;
if(MODE_INFO_ELEMENTS.rankReqs.contains(event.target) || modeInfoExpansionState === "expanded") return;

event.preventDefault();

Expand All @@ -534,7 +589,7 @@ import * as LANG from "./lang.js";
// Touch events
let prevTouches = [];
window.addEventListener("touchstart", (event) => {
if(event.touches.length === 1 && !MODE_INFO_RANK_REQS.contains(event.target) && modeInfoExpansionState !== "expanded") {
if(event.touches.length === 1 && !MODE_INFO_ELEMENTS.rankReqs.contains(event.target) && modeInfoExpansionState !== "expanded") {
isDragging = true;
CROSSHAIR.style.display = "none";
}
Expand Down Expand Up @@ -589,9 +644,9 @@ import * as LANG from "./lang.js";
});

// Button events
MODE_INFO_CLOSE_BUTTON?.addEventListener("click", unselectMode);
MODE_INFO_EXPAND_BUTTON?.addEventListener("click", modeInfoExpandFull);
MODE_INFO_COLLAPSE_BUTTON?.addEventListener("click", modeInfoCollapseToSmall);
MODE_INFO_ELEMENTS.closeButton?.addEventListener("click", unselectMode);
MODE_INFO_ELEMENTS.expandButton?.addEventListener("click", modeInfoExpandFull);
MODE_INFO_ELEMENTS.collapseButton?.addEventListener("click", modeInfoCollapseToSmall);

// Timed events
setInterval(updateDebugInfo, 1000);
Expand Down
Loading

0 comments on commit 45ff395

Please sign in to comment.