Add button to hide earned achievements on global page; add prettier

Fixes #182 Co-Authored-By: Mykola Talko <[email protected]>
SteamDatabase · Jun 27, 2024 · 315d1e6 · 315d1e6
1 parent fedc734
commit 315d1e6
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 39 deletions.
diff --git a/options/options.css b/options/options.css
@@ -17,7 +17,14 @@ html {
 
 body {
 	margin: 0;
-	font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font:
+		1rem/1.5 -apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif;
 	color: #c6d4df;
 }
 
@@ -98,8 +105,8 @@ summary:hover {
 }
 
 header {
-	padding-top: .5rem;
-	padding-bottom: .5rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
 	border-bottom: 1px solid #0197cf;
 	background-color: #000;
 	color: #fff;
@@ -120,8 +127,8 @@ header svg {
 }
 
 #localization .container {
-	padding-top: .3rem;
-	padding-bottom: .3rem;
+	padding-top: 0.3rem;
+	padding-bottom: 0.3rem;
 }
 
 footer {
@@ -144,15 +151,15 @@ footer p {
 
 .checkbox {
 	display: flex;
-	gap: .4rem;
-	margin-top: .4rem;
+	gap: 0.4rem;
+	margin-top: 0.4rem;
 }
 
 .checkbox > input {
 	width: 1rem;
 	height: 1rem;
 	margin: 0;
-	margin-top: .3rem;
+	margin-top: 0.3rem;
 	flex-shrink: 0;
 }
 
@@ -174,7 +181,7 @@ footer p {
 #permissions {
 	background: #000;
 	color: #fff;
-	border-bottom: .4rem solid red;
+	border-bottom: 0.4rem solid red;
 	margin-top: 1rem;
 	padding: 1rem;
 	border-top-left-radius: 1rem;

diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
 		"start:firefoxdev": "web-ext run --firefox=firefoxdeveloperedition --source-dir ./",
 		"build": "node build.js",
 		"version": "node version.js",
-		"test": "eslint . && stylelint \"**/*.css\"",
+		"test": "eslint . && stylelint \"**/*.css\" && prettier \"**/*.css\" --check",
 		"test:ext": "web-ext lint",
 		"test:locale": "chromex-locale-lint",
-		"fix": "eslint . --fix && stylelint \"**/*.css\" --fix"
+		"fix": "eslint . --fix && stylelint \"**/*.css\" --fix && prettier \"**/*.css\" --write"
 	},
 	"devDependencies": {
 		"@types/chrome": "^0.0.268",
@@ -21,6 +21,7 @@
 		"chromex-locale-lint": "^0.1.0",
 		"eslint": "^8.47.0",
 		"eslint-config-standard": "^17.0.0",
+		"prettier": "^3.3.2",
 		"stylelint": "^16.5.0",
 		"stylelint-config-standard": "^36.0.0",
 		"web-ext": "^8.0.0"

diff --git a/scripts/community/achievements.js b/scripts/community/achievements.js
@@ -113,6 +113,11 @@ function InitAchievements( items, isPersonal )
 		extraTabs.append( link );
 	}
 
+	if( !isPersonal )
+	{
+		extraTabs.append( CreateHideEarnedButton() );
+	}
+
 	extraTabs.append( CreateFoldButton( true ) );
 
 	if( window.innerWidth < 600 )
@@ -242,11 +247,15 @@ function InitAchievements( items, isPersonal )
 
 	function OnToggleAllGamesClick( e )
 	{
+		e.preventDefault();
+
 		ToggleDetailsElements( e, document.querySelector( '.steamdb_achievements_container' ) );
 	}
 
 	function OnToggleGameClick( e )
 	{
+		e.preventDefault();
+
 		ToggleDetailsElements( e, this.closest( '.steamdb_achievements_group' ) );
 	}
 
@@ -273,6 +282,41 @@ function InitAchievements( items, isPersonal )
 		return btn;
 	}
 
+	function OnToggleEarnedClick( e )
+	{
+		e.preventDefault();
+
+		const container = document.getElementById( 'mainContents' );
+		const state = container.classList.contains( 'steamdb_hide_earned_achievements' );
+
+		const ToggleEarned = () =>
+		{
+			container.classList.toggle( 'steamdb_hide_earned_achievements', !state );
+		};
+
+		StartViewTransition( ToggleEarned );
+
+		SessionStorageSet( 'steamdb_ach_hide_earned', state );
+	}
+
+	function CreateHideEarnedButton()
+	{
+		const btn = document.createElement( 'button' );
+		btn.type = 'button';
+		btn.className = 'steamdb_done_button';
+		btn.addEventListener( 'click', OnToggleEarnedClick );
+
+		// https://lucide.dev/icons/check-check
+		btn.innerHTML = `
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M18 6 7 17l-5-5"/>
+				<path d="m22 10-7.5 7.5L13 16"/>
+			</svg>
+		`;
+
+		return btn;
+	}
+
 	function ProcessGameAchievements( response, achievementUpdates )
 	{
 		if( !response || !response.response || !response.response.achievements )
@@ -490,12 +534,13 @@ function InitAchievements( items, isPersonal )
 
 				if( player.unlock )
 				{
+					element.classList.add( 'steamdb_earned_achievement' );
+
 					checkmark.innerHTML = `
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
 							<path d="M31.09 4.38L13 22.46L5.41 14.88L1.88 18.41L13 29.54L34.62 7.91L31.09 4.38Z"/>
 						</svg>
 					`;
-
 					if( achievement.global_unlock < 0.1 )
 					{
 						image.classList.add( 'steamdb_achievement_image_glow' );
@@ -799,7 +844,13 @@ function InitAchievements( items, isPersonal )
 
 				oldAchievementRows[ 0 ].insertAdjacentElement( 'beforebegin', newContainer );
 
-				document.getElementById( 'mainContents' ).classList.add( 'steamdb_global_achievements_page' );
+				const container = document.getElementById( 'mainContents' );
+				container.classList.add( 'steamdb_global_achievements_page' );
+
+				if( IsSessionStorageSet( 'steamdb_ach_hide_earned' ) )
+				{
+					container.classList.add( 'steamdb_hide_earned_achievements' );
+				}
 			}
 
 			gameLogoElement.hidden = true;
@@ -811,14 +862,7 @@ function InitAchievements( items, isPersonal )
 			document.querySelector( '.es-sortbox' )?.setAttribute( 'hidden', true );
 		};
 
-		if( document.startViewTransition )
-		{
-			document.startViewTransition( ReplaceAchievements );
-		}
-		else
-		{
-			ReplaceAchievements();
-		}
+		StartViewTransition( ReplaceAchievements );
 
 		if( sortButton )
 		{
@@ -1053,14 +1097,7 @@ function HookSortButton( sortButton, achievementUpdates, oldAchievementRows, Cre
 					}
 				};
 
-				if( document.startViewTransition )
-				{
-					document.startViewTransition( RedrawSortedAchievements );
-				}
-				else
-				{
-					RedrawSortedAchievements();
-				}
+				StartViewTransition( RedrawSortedAchievements );
 			} )
 			.catch( e =>
 			{
@@ -1082,21 +1119,38 @@ function IsSessionStorageSet( key )
 	}
 }
 
-function OnToggleDetails()
+function SessionStorageSet( key, state )
 {
 	try
 	{
-		if( this.open )
+		if( state )
 		{
-			sessionStorage.removeItem( this.id );
+			sessionStorage.removeItem( key );
 		}
 		else
 		{
-			sessionStorage.setItem( this.id, '1' );
+			sessionStorage.setItem( key, '1' );
 		}
 	}
 	catch
 	{
 		//
 	}
 }
+
+function OnToggleDetails()
+{
+	SessionStorageSet( this.id, this.open );
+}
+
+function StartViewTransition( callback )
+{
+	if( document.startViewTransition )
+	{
+		document.startViewTransition( callback );
+	}
+	else
+	{
+		callback();
+	}
+}
diff --git a/styles/achievements.css b/styles/achievements.css
@@ -112,7 +112,8 @@ html {
 	height: 40px;
 }
 
-.steamdb_fold_button {
+.steamdb_fold_button,
+.steamdb_done_button {
 	margin-left: auto;
 	background: none;
 	border: none;
@@ -123,19 +124,31 @@ html {
 	padding: 0;
 }
 
+.steamdb_hide_earned_achievements .steamdb_done_button {
+	color: #5aa9d6;
+}
+
 .steamdb_fold_button:hover,
-.steamdb_fold_button:focus {
+.steamdb_fold_button:focus,
+.steamdb_done_button:hover,
+.steamdb_done_button:focus {
 	color: #1a9fff;
 }
 
-.steamdb_stats_extra_tabs .steamdb_fold_button {
+.steamdb_stats_extra_tabs .steamdb_fold_button,
+.steamdb_stats_extra_tabs .steamdb_done_button {
 	margin-left: 30px;
 }
 
-.steamdb_stats_extra_tabs_mobile .steamdb_fold_button {
+.steamdb_stats_extra_tabs_mobile .steamdb_fold_button,
+.steamdb_stats_extra_tabs_mobile .steamdb_done_button {
 	margin-left: auto;
 }
 
+.steamdb_stats_extra_tabs .steamdb_done_button + .steamdb_fold_button {
+	margin-left: 0;
+}
+
 .steamdb_achievements_list {
 	font-weight: 700;
 	color: #83868a;
@@ -176,7 +189,9 @@ html {
 }
 
 .steamdb_achievement_image_glow {
-	box-shadow: 0 0 2px 1px rgb(255 184 78 / 60%), 0 0 16px 1px rgb(255 184 78 / 40%);
+	box-shadow:
+		0 0 2px 1px rgb(255 184 78 / 60%),
+		0 0 16px 1px rgb(255 184 78 / 40%);
 }
 
 .steamdb_achievement h3 {
@@ -201,6 +216,10 @@ html {
 	color: #8b929a;
 }
 
+.steamdb_hide_earned_achievements .steamdb_earned_achievement {
+	display: none;
+}
+
 .steamdb_achievement_checkmark {
 	display: flex;
 	align-items: center;

diff --git a/styles/global.css b/styles/global.css
@@ -11,7 +11,8 @@
 	background-color: #c0392b;
 	line-height: 24px;
 	padding: 10px;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Helvetica, Arial, sans-serif;
 	font-size: 20px;
 	text-align: center;
 }