Improvements! (see README)

README.md

@@ -8,6 +8,10 @@ Get the price of the sims 4, including all DLCs, live!
 
 If you include the steam game ID in the fragment (`site.example/#game_id`), you can fetch the price of any game and all of its DLCs. For example: <https://howmuchdoesthesims4cost.nexy7574.co.uk/#255710>.
 
+**New!** (2024-09-02) You can now also include the game ID in the search parameters. For example: <https://howmuchdoesthesims4cost.nexy7574.co.uk/?app_id=255710>.
+There is also now a form included at the bottom of the page, above the footer, that allows you to put an ID in.
+You can *also* now just pass a steam store URL into the site. Technological advancements!
+
 ## Running your own
 
 Running your own instance is rather easy. The entire site is static, apart from one API endpoint that is needed as a transformer proxy.

server.py

@@ -1,4 +1,3 @@
-#!/bin/env python3
 # This code is licensed under GNU AGPLv3. See $PROJECT/LICENSE for more info.
 # The $PROJECT/static/* content is licensed under CC BY-NC-SA - see $PROJECT/static/LICENSE for info.
 import fastapi

static/index.html

@@ -31,6 +31,13 @@
         </div>
     </main>
     <noscript><p>(You need to enable JavaScript to load this)</p></noscript>
+    <div>
+        <form action="#">
+            <label for="app_id">Want to view the price of another game?</label>
+            <input type="text" id="app_id" name="app_id" placeholder="Steam app ID or URL" required>
+            <button type="submit">View</button>
+        </form>
+    </div>
     <footer>
             <p>This site was made by <a href="https://nexy7574.co.uk/" target="_blank">@nex</a></p>
             <p>Source is available at <a href="https://git.i-am.nexus/nex/howmuchdoesthesims4cost.lol" target="_blank">git.i-am.nexus</a></p>

static/script.js

@@ -1,14 +1,20 @@
 // This code is licensed under GNU AGPLv3.
 const BASE_URL = "/api/appinfo";
-var TS4_APP_ID = 1222670;
+const ORIGINAL_TS4_APP_ID = 1222670;
 const APPID_REGEX = /#((http(s)?:\/\/store\.steampowered\.com\/app\/)?(?<appID>\d{4,10})(.*))/
-if(APPID_REGEX.test(window.location.hash)===true) {
-    let matches = APPID_REGEX.exec(window.location.hash);
-    TS4_APP_ID = parseInt(matches.groups.appID);
-    console.debug("Set app ID to " + TS4_APP_ID);
-} else {
-    console.debug("No custom ID set or does not match regex.");
-}
+
+function discover_app_id() {
+    let search = new URLSearchParams(window.location.search);
+    console.debug("Search params, parsed:", search);
+    let matches = APPID_REGEX.exec("#" + (search.get("app_id") || window.location.hash.slice(1)));
+    console.debug("Matches:", matches);
+    const decision = parseInt(matches?.groups?.appID || ORIGINAL_TS4_APP_ID);
+    console.debug("Decision:", decision);
+    return decision;
+};
+
+const APP_ID = discover_app_id();
+
 const PRICE_ELEMENT = document.getElementById("price");
 const NAME_ELEMENT = document.getElementById("name");
 
@@ -116,7 +122,7 @@ async function calculate_price(ids) {
     let _price = 0.0;
     let unit = "£";
     for (let value of Object.values(data)) {
-        console.debug("Value:", value)
+        console.debug("calculate_price(%s) value:", ids, value)
         if (value.price_overview == null) {
             continue;
         }
@@ -143,7 +149,7 @@ async function main() {
     console.debug("Fetching app info for base game");
     let root;
     try {
-        root = await get_app_info(TS4_APP_ID);
+        root = await get_app_info(APP_ID);
     } catch (e) {
         alert(`Error fetching information from Steam: ${e}`);
         window.location.reload();
@@ -185,4 +191,4 @@ async function main() {
     };
 }
 
-document.addEventListener("DOMContentLoaded", main);
+window.addEventListener("load", main);

static/style.css

@@ -60,3 +60,10 @@ h1, span img {
     background: var(--var-background-inverted);
     color: inverted(var(--var-color));
 }
+
+footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}