Removed the need for revealElement() and hideElement()

Infinite-Chess · Jan 3, 2025 · 1a8543c · 1a8543c
1 parent 89caa86
commit 1a8543c
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 76 deletions.
diff --git a/src/client/scripts/esm/game/gui/guiclock.js b/src/client/scripts/esm/game/gui/guiclock.js
@@ -63,13 +63,13 @@ const countdown = {
 
 function hideClocks() {
 	for (const color in element_timers) {
-		style.hideElement(element_timers[color].container);
+		element_timers[color].container.classList.add('hidden');
 	}
 }
 
 function showClocks() {
 	for (const color in element_timers) {
-		style.revealElement(element_timers[color].container);
+		element_timers[color].container.classList.remove('hidden');
 	}
 }
 

diff --git a/src/client/scripts/esm/game/gui/guidrawoffer.js b/src/client/scripts/esm/game/gui/guidrawoffer.js
@@ -30,17 +30,17 @@ let drawOfferUICramped = false;
 
 /** Reveals the draw offer UI on the bottom navigation bar */
 function open() {
-	style.revealElement(element_draw_offer_ui);
-	style.hideElement(element_whosturn);
+	element_draw_offer_ui.classList.remove('hidden');
+	element_whosturn.classList.add('hidden');
 	initDrawOfferListeners();
 	// Do the names and clocks need to be hidden to make room for the draw offer UI?
 	updateVisibilityOfNamesAndClocksWithDrawOffer();
 }
 
 /** Hides the draw offer UI on the bottom navigation bar */
 function close() {
-	style.hideElement(element_draw_offer_ui);
-	style.revealElement(element_whosturn);
+	element_draw_offer_ui.classList.add('hidden');
+	element_whosturn.classList.remove('hidden');
 	closeDrawOfferListeners();
 
 	if (!drawOfferUICramped) return;

diff --git a/src/client/scripts/esm/game/gui/guigameinfo.js b/src/client/scripts/esm/game/gui/guigameinfo.js
@@ -31,12 +31,12 @@ const element_playerBlack = document.getElementById('playerblack');
 
 function open() {
 	if (gameslot.getGamefile().gameConclusion) return;
-	style.revealElement(element_dot);
+	element_dot.classList.remove('hidden');
 }
 
 function hidePlayerNames() {
-	style.hideElement(element_playerWhite);
-	style.hideElement(element_playerBlack);
+	element_playerWhite.classList.add('hidden');
+	element_playerBlack.classList.add('hidden');
 }
 
 function setAndRevealPlayerNames(gameOptions) {
@@ -47,8 +47,8 @@ function setAndRevealPlayerNames(gameOptions) {
 		element_playerWhite.textContent = onlinegame.areWeColor('white') && white === translations.guest_indicator ? translations.you_indicator : white;
 		element_playerBlack.textContent = onlinegame.areWeColor('black') && black === translations.guest_indicator ? translations.you_indicator : black;
 	}
-	style.revealElement(element_playerWhite);
-	style.revealElement(element_playerBlack);
+	element_playerWhite.classList.remove('hidden');
+	element_playerBlack.classList.remove('hidden');
 }
 
 /**
@@ -74,7 +74,7 @@ function updateWhosTurn(gamefile) {
 
 	element_whosturn.textContent = textContent;
 
-	style.revealElement(element_dot);
+	element_dot.classList.remove('hidden');
 	if (color === 'white') {
 		element_dot.classList.remove('dotblack');
 		element_dot.classList.add('dotwhite');
@@ -90,7 +90,7 @@ function gameEnd(conclusion) {
 
 	const { victor, condition } = winconutil.getVictorAndConditionFromGameConclusion(conclusion);
 	const resultTranslations = translations.results;
-	style.hideElement(element_dot);
+	element_dot.classList.add('hidden');
 
 	if (onlinegame.areInOnlineGame()) {
 

diff --git a/src/client/scripts/esm/game/gui/guiguide.js b/src/client/scripts/esm/game/gui/guiguide.js
@@ -22,13 +22,13 @@ let fairyIndex = 0;
 const maxFairyIndex = element_FairyImg.querySelectorAll('picture').length - 1;
 
 function open() {
-	style.revealElement(element_Guide);
+	element_Guide.classList.remove('hidden');
 	initListeners();
 	loadAllImages();
 }
 
 function close() {
-	style.hideElement(element_Guide);
+	element_Guide.classList.add('hidden');
 	closeListeners();
 }
 
@@ -75,21 +75,21 @@ function callback_FairyForward(event) {
 function hideCurrentFairy() {
 	const allFairyImgs = element_FairyImg.querySelectorAll('picture');
 	const targetFairyImg = allFairyImgs[fairyIndex];
-	style.hideElement(targetFairyImg);
+	targetFairyImg.classList.add('hidden');
 
 	const allFairyCards = element_FairyCard.querySelectorAll('.fairy-card-desc');
 	const targetFairyCard = allFairyCards[fairyIndex];
-	style.hideElement(targetFairyCard);
+	targetFairyCard.classList.add('hidden');
 }
 
 function revealCurrentFairy() {
 	const allFairyImgs = element_FairyImg.querySelectorAll('picture');
 	const targetFairyImg = allFairyImgs[fairyIndex];
-	style.revealElement(targetFairyImg);
+	targetFairyImg.classList.remove('hidden');
 
 	const allFairyCards = element_FairyCard.querySelectorAll('.fairy-card-desc');
 	const targetFairyCard = allFairyCards[fairyIndex];
-	style.revealElement(targetFairyCard);
+	targetFairyCard.classList.remove('hidden');
 }
 
 function updateArrowTransparency() {

diff --git a/src/client/scripts/esm/game/gui/guinavigation.ts b/src/client/scripts/esm/game/gui/guinavigation.ts
@@ -116,7 +116,7 @@ function onToggleNavigationBar() {
 function open(gamefile: gamefile, { allowEditCoords = true }: { allowEditCoords?: boolean } = {}) {
 
 	activeGamefile = gamefile;
-	style.revealElement(element_Navigation);
+	element_Navigation.classList.remove('hidden');
 	initListeners_Navigation();
 	update_MoveButtons();
 	initCoordinates({ allowEditCoords });
@@ -139,7 +139,7 @@ function initCoordinates({ allowEditCoords }: { allowEditCoords: boolean }) {
 
 function close() {
 	activeGamefile = undefined;
-	style.hideElement(element_Navigation);
+	element_Navigation.classList.add('hidden');
 	closeListeners_Navigation();
 	navigationOpen = false;
 }

diff --git a/src/client/scripts/esm/game/gui/guipause.js b/src/client/scripts/esm/game/gui/guipause.js
@@ -48,7 +48,7 @@ function open() {
 	updateTextOfMainMenuButton();
 	updatePasteButtonTransparency();
 	updateDrawOfferButton();
-	style.revealElement(element_pauseUI);
+	element_pauseUI.classList.remove('hidden');
 	initListeners();
 }
 
@@ -142,7 +142,7 @@ function closeListeners() {
 function callback_Resume() {
 	if (!isPaused) return;
 	isPaused = false;
-	style.hideElement(element_pauseUI);
+	element_pauseUI.classList.add('hidden');
 	closeListeners();
 	frametracker.onVisualChange();
 }

diff --git a/src/client/scripts/esm/game/gui/guiplay.js b/src/client/scripts/esm/game/gui/guiplay.js
@@ -101,24 +101,24 @@ function isOpen() { return pageIsOpen; }
  */
 function getModeSelected() { return modeSelected; }
 
-function hideElement_joinPrivate() { style.hideElement(element_joinPrivate); }
-function showElement_joinPrivate() { style.revealElement(element_joinPrivate); }
-function hideElement_inviteCode() { style.hideElement(element_inviteCode); }
-function showElement_inviteCode() { style.revealElement(element_inviteCode); }
+function hideElement_joinPrivate() { element_joinPrivate.classList.add('hidden'); }
+function showElement_joinPrivate() { element_joinPrivate.classList.remove('hidden'); }
+function hideElement_inviteCode() { element_inviteCode.classList.add('hidden'); }
+function showElement_inviteCode() { element_inviteCode.classList.remove('hidden'); }
 
 function open() {
 	pageIsOpen = true;
-	style.revealElement(element_PlaySelection);
-	style.revealElement(element_menuExternalLinks);
+	element_PlaySelection.classList.remove('hidden');
+	element_menuExternalLinks.classList.remove('hidden');
 	changePlayMode('online');
 	initListeners();
 	invites.subscribeToInvites(); // Subscribe to the invites list subscription service!
 }
 
 function close() {
 	pageIsOpen = false;
-	style.hideElement(element_PlaySelection);
-	style.hideElement(element_menuExternalLinks);
+	element_PlaySelection.classList.add('hidden');
+	element_menuExternalLinks.classList.add('hidden');
 	hideElement_inviteCode();
 	closeListeners();
 	// This will auto-cancel our existing invite

diff --git a/src/client/scripts/esm/game/gui/guipromotion.ts b/src/client/scripts/esm/game/gui/guipromotion.ts
@@ -32,18 +32,18 @@ function isUIOpen() { return selectionOpen; }
 
 function open(color: string) {
 	selectionOpen = true;
-	style.revealElement(element_Promote!);
-	if (color === 'white') style.revealElement(element_PromoteWhite!);
-	else if (color === 'black') style.revealElement(element_PromoteBlack!);
+	element_Promote?.classList.remove('hidden');
+	if (color === 'white') element_PromoteWhite?.classList.remove('hidden');
+	else if (color === 'black') element_PromoteBlack?.classList.remove('hidden');
 	else throw new Error(`Promotion UI does not support color "${color}"`);
 }
 
 /** Closes the promotion UI */
 function close() {
 	selectionOpen = false;
-	style.hideElement(element_PromoteWhite!);
-	style.hideElement(element_PromoteBlack!);
-	style.hideElement(element_Promote!);
+	element_PromoteWhite?.classList.add('hidden');
+	element_PromoteBlack?.classList.add('hidden');
+	element_Promote?.classList.add('hidden');
 }
 
 /**

diff --git a/src/client/scripts/esm/game/gui/guititle.ts b/src/client/scripts/esm/game/gui/guititle.ts
@@ -31,14 +31,14 @@ const element_menuExternalLinks = document.getElementById('menu-external-links')
 
 // Call when title screen is loaded
 function open() {
-	style.revealElement(titleElement);
-	style.revealElement(element_menuExternalLinks);
+	titleElement.classList.remove('hidden');
+	element_menuExternalLinks.classList.remove('hidden');
 	initListeners();
 };
 
 function close() {
-	style.hideElement(titleElement);
-	style.hideElement(element_menuExternalLinks);
+	titleElement.classList.add('hidden');
+	element_menuExternalLinks.classList.add('hidden');
 	closeListeners();
 }
 

diff --git a/src/client/scripts/esm/game/gui/stats.js b/src/client/scripts/esm/game/gui/stats.js
@@ -43,12 +43,12 @@ function showMoves(durationSecs = 2.5) {
 	setTextContentOfMoves();
 	setTimeout(hideMoves, durationSecs * 1000);
 
-	if (visibilityWeight === 1) style.revealElement(elementStatusMoves);
+	if (visibilityWeight === 1) elementStatusMoves.classList.remove('hidden');
 }
 
 function hideMoves() {
 	visibilityWeight--;
-	if (visibilityWeight === 0) style.hideElement(elementStatusMoves);
+	if (visibilityWeight === 0) elementStatusMoves.classList.add('hidden');
 }
 
 function setTextContentOfMoves() {
@@ -65,7 +65,7 @@ function updateStatsCSS() {
 
 function showPiecesMesh() {
 	if (config.VIDEO_MODE) return;
-	style.revealElement(elementStatusPiecesMesh);
+	elementStatusPiecesMesh.classList.remove('hidden');
 }
 
 function updatePiecesMesh(percent) {
@@ -74,16 +74,16 @@ function updatePiecesMesh(percent) {
 }
 
 function hidePiecesMesh() {
-	style.hideElement(elementStatusPiecesMesh);
+	elementStatusPiecesMesh.classList.add('hidden');
 }
 
 function showFPS() {
 	if (config.VIDEO_MODE) return;
-	style.revealElement(elementStatusFPS);
+	elementStatusFPS.classList.remove('hidden');
 }
 
 function hideFPS() {
-	style.hideElement(elementStatusFPS);
+	elementStatusFPS.classList.add('hidden');
 }
 
 function updateFPS(fps) {
@@ -94,7 +94,7 @@ function updateFPS(fps) {
 
 function showRotateMesh() {
 	if (config.VIDEO_MODE) return;
-	style.revealElement(elementStatusRotateMesh);
+	elementStatusRotateMesh.classList.remove('hidden');
 }
 
 function updateRotateMesh(percent) {
@@ -103,19 +103,10 @@ function updateRotateMesh(percent) {
 }
 
 function hideRotateMesh() {
-	style.hideElement(elementStatusRotateMesh);
+	elementStatusRotateMesh.classList.add('hidden');
 }
 
-// NO LONGER USED. These were for the aynchronious checkmate algorithm.
-// showMoveLooking() {
-//     if (config.VIDEO_MODE) return;
-//     style.revealElement(elementStatusMoveLooking);
-// },
-// updateMoveLooking(percent) {
-//     const percentString = math.decimalToPercent(percent);
-//     showMoveLooking();
-//     elementStatusMoveLooking.textContent = `Looking for moves... ${percentString}`;
-// },
+
 
 export default {
 	showMoves,

diff --git a/src/client/scripts/esm/game/gui/style.js b/src/client/scripts/esm/game/gui/style.js
@@ -32,21 +32,6 @@ function reinstateClass(element, className) {
 
 // Hide and show elements...
 
-/**
- * Hides the provided document element by giving it a class with the property "display: none".
- * @param {HTMLElement} element - The document element
- */
-function hideElement(element) {
-	addClass(element, "hidden");
-}
-
-/**
- * Reveals the provided document element by **removing** the class with the property "display: none".
- * @param {HTMLElement} element - The document element
- */
-function revealElement(element) {
-	removeClass(element, "hidden");
-}
 
 
 // Other operations
@@ -107,8 +92,6 @@ function arrayToCssColor(colorArray) {
 
 
 export default {
-	hideElement,
-	revealElement,
 	setNavStyle,
 	getChildrenTextContents,
 	arrayToCssColor,