feat: support for games with no rating (#5)

README.md

@@ -1,5 +1,9 @@
 # Protonfox
-Protonfox is an extension for [Firefox](https://firefox.com) that displays ProtonDB ratings on Steam.
+Protonfox is an extension for [Firefox](https://firefox.com) that displays [ProtonDB](https://protondb.com) ratings on Steam.
+
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/mxgic1337/protonfox/build-check.yml?style=flat-square) ![GitHub package.json version](https://img.shields.io/github/package-json/v/mxgic1337/protonfox?style=flat-square)
+
+![preview.png](.github/assets/preview.png)
 
 # Building:
 Requirements:
@@ -11,4 +15,6 @@ Requirements:
 
 To build the extension:
 - Run `pnpm install` to install dependencies.
-- Run `pnpm run build` to build the extension.
+- Run `pnpm run build` to build the extension.
+
+This extension is not affiliated with ProtonDB and/or Valve Corporation.

package.json

@@ -1,11 +1,11 @@
 {
 	"name": "protonfox",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Displays information about game compatibility with Proton on Steam.",
 	"main": "index.js",
 	"type": "module",
 	"scripts": {
-		"build": "webpack --mode production && cp src/manifest.json dist/"
+		"build": "webpack --mode production && node scripts/manifest.cjs"
 	},
 	"keywords": [],
 	"author": "mxgic1337_",

scripts/manifest.cjs

@@ -0,0 +1,13 @@
+const fs = require('node:fs')
+const path = require('path')
+
+const packageJsonContent = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json')).toString())
+
+const manifestPath = path.join(__dirname, '..', 'src', 'manifest.json')
+const manifestDistPath = path.join(__dirname, '..', 'dist', 'manifest.json')
+
+let manifestContent = fs.readFileSync(manifestPath).toString();
+manifestContent = manifestContent.replaceAll('{{ version }}', packageJsonContent.version);
+manifestContent = manifestContent.replaceAll('{{ description }}', packageJsonContent.description);
+
+fs.writeFileSync(manifestDistPath, manifestContent)

src/manifest.json

@@ -1,8 +1,8 @@
 {
 	"manifest_version": 2,
 	"name": "Protonfox",
-	"version": "0.1.0",
-	"description": "Displays information about game compatibility with Proton on Steam.",
+	"version": "{{ version }}",
+	"description": "{{ description }}",
 	"content_scripts": [
 		{
 			"matches": [

src/steam.ts

@@ -8,9 +8,14 @@ function getGameID() {
 
 const gameId = getGameID();
 fetch(`https://www.protondb.com/api/v1/reports/summaries/${gameId}.json`).then(async (res) => {
-	const json = await res.json() as ProtonDBSummary;
-	addStoreRatingBadge(gameId, json.tier)
-	addSystemRequirementsRating(gameId, json.tier)
+	if (res.ok) {
+		const json = await res.json() as ProtonDBSummary;
+		addStoreRatingBadge(gameId, json.tier)
+		addSystemRequirementsRating(gameId, json.tier)
+	}else{
+		addStoreRatingBadge(gameId, ProtonDBRating.PENDING)
+		addSystemRequirementsRating(gameId, ProtonDBRating.PENDING)
+	}
 
 	let native = false;
 	for (const tab of document.getElementsByClassName('sysreq_tab')) {

src/styles/steam.less

@@ -1,4 +1,5 @@
 @native: rgb(142, 214, 41);
+@pending: rgb(187, 187, 187);
 @platinum: rgb(180, 199, 220);
 @gold: rgb(207, 181, 59);
 @silver: rgb(166, 166, 166);
@@ -33,6 +34,7 @@
 }
 
 .native { .rating(@native) }
+.pending { .rating(@pending) }
 .platinum { .rating(@platinum) }
 .gold { .rating(@gold) }
 .silver { .rating(@silver) }

src/utils/utils.ts

@@ -5,6 +5,7 @@ export enum ProtonDBRating {
 	SILVER = 'silver',
 	BRONZE = 'bronze',
 	BORKED = 'borked',
+	PENDING = 'pending',
 }
 
 export interface ProtonDBSummary {