From 6e5890efd70cc7961b12db472c418a498d3bd508 Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Mon, 1 Jun 2026 20:04:00 +0300
Subject: [PATCH 1/9] have-you-played: Remove <style> element from <table>

---
 www/ifdb.css                                | 4 ++++
 www/viewgame-components/have-you-played.php | 6 +-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/ifdb.css b/www/ifdb.css
index 2618b79b..3cfbff88 100644
--- a/www/ifdb.css
+++ b/www/ifdb.css
@@ -564,6 +564,10 @@ td.coverart {
     white-space: nowrap;
 }
 
+.viewgame__playedSection {
+    margin: 1.25ex 0 0.75ex 0;
+}
+
 /*
 We use the "authorProfileLink" style for hyperlinks to author profiles,
 as shown in the author section of a game listing.  We show these without
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index eee0ed7b..3ecf591b 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -63,10 +63,6 @@ function updateUnwishList(id, stat)
 
     initStarControls();
     global $nonce;
-    echo "<style nonce='$nonce'>\n"
-        . ".viewgame__playedSection { margin: 1.25ex 0 0.75ex 0; }\n"
-        . "#submitRating { display: none; }\n"
-        . "</style>\n";
 
     echo "<div class=indented>"
 
@@ -74,7 +70,7 @@ function updateUnwishList(id, stat)
         . "<span id=\"ratingCaption\"><b>Rate it:</b></span> "
         . showStarCtl("ratingStars", $currentUserRating,
                       "updateRating", "mouseOutRating")
-        . "<button id='submitRating' class='fancy-button'>Submit Rating</button>"
+        . "<button id='submitRating' class='fancy-button hidden'>Submit Rating</button>"
         . "<script nonce='$nonce'>\n"
         . "let arrowKeys = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);"
         . "ratingStars.addEventListener('keydown', e => {\n"

From af8b8928452677bb7451b798d0f482e914e83458 Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Fri, 15 Aug 2025 11:06:49 +0300
Subject: [PATCH 2/9] Remove initStarControls, move setStarCtlValue to
 ifdbutis.js

---
 www/editgame                                |  1 -
 www/ifdbutil.js                             |  9 +++++++++
 www/review                                  |  1 -
 www/starctl.php                             | 18 ------------------
 www/viewgame-components/have-you-played.php |  1 -
 5 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/www/editgame b/www/editgame
index a9ecf49b..63d24617 100644
--- a/www/editgame
+++ b/www/editgame
@@ -521,7 +521,6 @@ if ($errMsg) {
                    scriptSrc('/gridform.js'),
                    false);
 
-        initStarControls();
         imageUploadScripts();
 ?>
 
diff --git a/www/ifdbutil.js b/www/ifdbutil.js
index 0695224b..274e4dc9 100644
--- a/www/ifdbutil.js
+++ b/www/ifdbutil.js
@@ -280,3 +280,12 @@ async function check_ifid_in_ifwiki(ifid) {
     } catch (e) {}
     return false;
 }
+
+function setStarCtlValue(id, value) {
+    if (value) {
+        document.getElementById(`${id}__rating${value}`).checked = true;
+    } else {
+        const checked = [...document.querySelectorAll(`#${id} input[type=radio]`)].filter(i => i.checked)[0];
+        if (checked) checked.checked = false;
+    }
+}
diff --git a/www/review b/www/review
index 100dab41..b9c3b417 100644
--- a/www/review
+++ b/www/review
@@ -752,7 +752,6 @@ if (isset($missingFields['rating']))
 
    <b>1. Rate this game on a scale of 1 to 5 stars (5 is best):</b>
    <?php
-        initStarControls();
         echo showStarCtl("ratingStars", $rating, "");
    ?>
 
diff --git a/www/starctl.php b/www/starctl.php
index 1295e08e..cbf66ec1 100644
--- a/www/starctl.php
+++ b/www/starctl.php
@@ -1,23 +1,5 @@
 <?php
 
-function initStarControls()
-{
-    // Standard version - use the animated javascript star control,
-    // with automatic mouse rollover highlighting.
-    ?>
-    <script type="text/javascript" nonce="<?php global $nonce; echo $nonce; ?>">
-        function setStarCtlValue(id, value) {
-            if (value) {
-                document.getElementById(`${id}__rating${value}`).checked = true;
-            } else {
-                var checked = [...document.querySelectorAll(`#${id} input[type=radio]`)].filter(i => i.checked)[0];
-                if (checked) checked.checked = false;
-            }
-        }
-    </script>
-    <?php
-}
-
 function showStarCtl($id, $init, $clickFunc)
 {
     
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index 3ecf591b..c693174c 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -61,7 +61,6 @@ function updateUnwishList(id, stat)
         list($myCrossRecs) = mysql_fetch_row($result);
     }
 
-    initStarControls();
     global $nonce;
 
     echo "<div class=indented>"

From ca873e3e8979d33e51a09d445a05ad768a4726ea Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Tue, 7 Oct 2025 22:44:09 +0300
Subject: [PATCH 3/9] Remove unused argument to showStarCtl

---
 www/editgame                                | 3 +--
 www/viewgame-components/have-you-played.php | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/www/editgame b/www/editgame
index 63d24617..0a4e4375 100644
--- a/www/editgame
+++ b/www/editgame
@@ -1736,8 +1736,7 @@ function onComboSelectReviewSite(val)
                   <input id="extrevSourceUrl" type=text size=80><br><br>
 
                   <b>Rating:</b> <?php
-                      echo showStarCtl("extrevStarCtl", 0,
-                                       "setExtRevRating", "null");
+                      echo showStarCtl("extrevStarCtl", 0, "setExtRevRating");
                   ?> <br>
                   <input type=hidden name=extrevRating id=extrevRating value=0>
                   <span class=details>If the site uses a different rating
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index c693174c..44a43650 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -67,8 +67,7 @@ function updateUnwishList(id, stat)
 
         . "<div class='viewgame__playedSection'>"
         . "<span id=\"ratingCaption\"><b>Rate it:</b></span> "
-        . showStarCtl("ratingStars", $currentUserRating,
-                      "updateRating", "mouseOutRating")
+        . showStarCtl("ratingStars", $currentUserRating, "updateRating")
         . "<button id='submitRating' class='fancy-button hidden'>Submit Rating</button>"
         . "<script nonce='$nonce'>\n"
         . "let arrowKeys = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);"

From 5078e2af8d3f8568869b48a2e05cd2bf036401b0 Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Tue, 7 Oct 2025 22:43:12 +0300
Subject: [PATCH 4/9] Allow having multiple have-you-played widgets in a page

---
 www/editgame                                |   4 +-
 www/ifdbutil.js                             | 207 ++++++++++++++++-
 www/pagetpl.php                             |  30 ---
 www/review                                  |   2 +-
 www/starctl.php                             |   8 +-
 www/viewgame                                |  18 +-
 www/viewgame-components/have-you-played.php | 244 ++++----------------
 7 files changed, 257 insertions(+), 256 deletions(-)

diff --git a/www/editgame b/www/editgame
index 0a4e4375..b6d4d01d 100644
--- a/www/editgame
+++ b/www/editgame
@@ -1036,7 +1036,7 @@ function saveReviewPopup()
             rowDisp = "";
     }
 }
-function setExtRevRating(rating)
+function setExtRevRating(gameId, rating)
 {
     document.getElementById("extrevRating").value = rating;
 }
@@ -1736,7 +1736,7 @@ function onComboSelectReviewSite(val)
                   <input id="extrevSourceUrl" type=text size=80><br><br>
 
                   <b>Rating:</b> <?php
-                      echo showStarCtl("extrevStarCtl", 0, "setExtRevRating");
+                      echo showStarCtl($id, "extrevStarCtl", 0, "setExtRevRating");
                   ?> <br>
                   <input type=hidden name=extrevRating id=extrevRating value=0>
                   <span class=details>If the site uses a different rating
diff --git a/www/ifdbutil.js b/www/ifdbutil.js
index 274e4dc9..a372af70 100644
--- a/www/ifdbutil.js
+++ b/www/ifdbutil.js
@@ -224,7 +224,7 @@ function forceDarkMode(force) {
     }
 }
 
-async function jsonSend(url, statusSpanID, cbFunc, content, silentMode)
+async function jsonSend(url, statusSpanID, cbFunc, content, silentMode, cbFuncArgs)
 {
     if (statusSpanID)
         document.getElementById(statusSpanID).innerHTML = "";
@@ -267,7 +267,7 @@ async function jsonSend(url, statusSpanID, cbFunc, content, silentMode)
                    + "Please try again later.");
     }
     if (cbFunc && response?.ok) {
-        cbFunc(jsonResponse);
+        cbFunc(jsonResponse, cbFuncArgs);
     }
 }
 
@@ -289,3 +289,206 @@ function setStarCtlValue(id, value) {
         if (checked) checked.checked = false;
     }
 }
+
+// Used by the have-you-played widget
+
+function ckboxGetObj(id)
+{
+    return document.getElementById('ckBox' + id);
+}
+function ckboxClick(id, onUpdateFunc)
+{
+    const elem = ckboxGetObj(id);
+    if (onUpdateFunc)
+        onUpdateFunc(id, elem.checked);
+}
+function updateRating(game_id, rating)
+{
+    const submitRating = document.getElementById(`submitRating_${game_id}`);
+    if (rating) {
+        if (submitRating.style.display === 'block') return;
+    } else {
+        submitRating.style.display = 'none';
+    }
+    jsonSend(`setrating?game=${game_id}&rating=${rating}`,
+             `rating_${game_id}_SaveMsg`);
+}
+function updatePlayed(id, stat)
+{
+    const elem = ckboxGetObj(id);
+    const game_id = elem.closest('[data-gameid]').dataset.gameid;
+    jsonSend(`setplayed?game=${game_id}&played=`
+             + (elem.checked ? "1" : "0"),
+             `${id}_SaveMsg`, (d) => {if (typeof updatePlaylistCount == "function") updatePlaylistCount(d.newCount);});
+}
+function updateWishlist(id, stat)
+{
+    const elem = ckboxGetObj(id);
+    const game_id = elem.closest('[data-gameid]').dataset.gameid;
+    jsonSend(`setwishlist?game=${game_id}&add=`
+             + (elem.checked ? "1" : "0"),
+             `${id}_SaveMsg`, (d) => {if (typeof updateWishlistCount == "function") updateWishlistCount(d.newCount)});
+}
+function updateUnwishlist(id, stat)
+{
+    const elem = ckboxGetObj(id);
+    const game_id = elem.closest('[data-gameid]').dataset.gameid;
+    jsonSend(`setunwishlist?game=${game_id}&add=`
+             + (elem.checked ? "1" : "0"),
+             `${id}_SaveMsg`);
+}
+
+// When the user clicks the "Submit Time" button, get the input 
+// from the hours and minutes fields, validate it, convert it to 
+// minutes only, and save it to the database (with the note, if present).
+function submitTime() {
+    const gameElem = event.target.closest('[data-gameid]');
+    const game_id = gameElem.dataset.gameid;
+
+    let new_hours = gameElem.querySelector('.timeSection_hours').value;
+    let new_minutes = gameElem.querySelector('.timeSection_minutes').value;
+    const time_note = gameElem.querySelector('.timeNote').value.trim();
+    if (new_hours == "") {    // If the hours field was blank, interpret it as 0
+        new_hours = 0;
+    }
+    if (new_minutes == "") {  // If the minutes field was blank, interpret it as 0
+        new_minutes = 0;
+    }
+
+    const saveMsgId = `time_SaveMsg_${game_id}`;
+    const saveMsgElem = document.getElementById(saveMsgId);
+
+    const hours_are_digits = isOnlyDigits(new_hours); 
+    const minutes_are_digits = isOnlyDigits(new_minutes);
+    if (hours_are_digits == false || minutes_are_digits == false) {
+        saveMsgElem.innerHTML="Please enter valid numbers.";
+        return;
+    }
+    if (new_hours > 200) {     // Negative numbers will hopefully be eliminated by "Digits only"
+        saveMsgElem.innerHTML="For hours, please enter a number from 0 to 200.";
+        return;
+    }
+    if (new_minutes > 59) {
+        saveMsgElem.innerHTML="For minutes, please enter a number from 0 to 59.";
+        return;
+    }
+    const new_time = convertToMinutes(new_hours, new_minutes);
+    if (new_time < 1) {
+        saveMsgElem.innerHTML="The total time must be at least one minute.";
+        return;
+    }
+    // Time is valid, as far as we can tell.
+    // If the game isn't already on the user's list of played games, add it.
+    const played_it_checkbox = document.getElementById(`ckBoxckPlayed_${game_id}`);
+    if (!played_it_checkbox.checked) {
+        played_it_checkbox.checked = true;
+        updatePlayed(`ckPlayed_${game_id}`);
+    }
+    // Submit the time.
+    jsonSend(`settime?game=${game_id}&newtime=${new_time}&note=${encodeURIComponent(time_note)}`, saveMsgId, swapTimeSections, null, false, {'gameid': game_id});
+}
+
+// Remove the user's time for this game from the database.
+function removeTime() {
+    const game_id = event.target.closest('[data-gameid]').dataset.gameid;
+    jsonSend(`settime?game=${game_id}&newtime=0`, `time_SaveMsg_${game_id}`, swapTimeSections, null, false, {'gameid': game_id});
+}
+
+// Check whether a string contains only digits.
+function isOnlyDigits(a_string) {
+    if (/^\d+$/.test(a_string)) {
+        return true;
+    }
+    return false;
+}
+
+
+// Take hours and minutes and convert them into just minutes
+// so we can store the time as minutes in the database.
+function convertToMinutes(hours, minutes) {
+    // They need to be integers so they don't get concatenated when we're trying to add them
+    hours = Number(hours); 
+    minutes = Number(minutes);
+    hours_into_minutes = hours * 60;
+    total_minutes = hours_into_minutes + minutes;
+    return total_minutes;
+}
+
+
+// The Estimated Play Time control panel has a "submitTimeSection," a "removeTimeSection," and
+// a "timeSavedSection." Only one of the sections should be visible at a time. These functions
+// show and hide the sections.
+
+function showSubmitTimeSection(game_id) { 
+    document.querySelector(`[data-gameid='${game_id}'] .submitTimeSection`).style.display = "block";
+    document.querySelector(`[data-gameid='${game_id}'] .removeTimeSection`).style.display  = "none";
+    document.querySelector(`[data-gameid='${game_id}'] .timeSavedSection`).style.display = "none";
+}
+
+function showRemoveTimeSection(game_id) { 
+    document.querySelector(`[data-gameid='${game_id}'] .submitTimeSection`).style.display = "none";
+    document.querySelector(`[data-gameid='${game_id}'] .removeTimeSection`).style.display = "block";
+    document.querySelector(`[data-gameid='${game_id}'] .timeSavedSection`).style.display = "none";
+}
+
+function showTimeSavedSection(game_id) {
+    document.querySelector(`[data-gameid='${game_id}'] .submitTimeSection`).style.display = "none";
+    document.querySelector(`[data-gameid='${game_id}'] .removeTimeSection`).style.display = "none";
+    document.querySelector(`[data-gameid='${game_id}'] .timeSavedSection`).style.display = "block";
+}
+
+// After successfully submitting or removing a time, hide or show 
+// the appropriate sections of the estimated play time control panel.
+function swapTimeSectionsEventListener(event) {
+    const game_id = event.target.closest('[data-gameid]').dataset.gameid;
+    swapTimeSections(null, {'gameid': game_id});
+}
+
+function swapTimeSections(_response, args) {
+    const game_id = args.gameid;
+
+    if (document.getElementById(`time_SaveMsg_${game_id}`).innerHTML == "Saved") { 
+        if (document.querySelector(`[data-gameid='${game_id}'] .submitTimeSection`).style.display == "block") { 
+            //The submit time section is visible, which means we just successfully saved a new time.        
+            showTimeSavedSection(game_id);
+        } else if (document.querySelector(`[data-gameid='${game_id}'] .removeTimeSection`).style.display == "block") {
+            //The remove time section is visible, which means we just successfully removed our time.  
+            showSubmitTimeSection(game_id);
+        }
+    } // Don't swap the time controls if there was an error saving.
+}
+
+function prepareHaveYouPlayedBox(game_id) {
+    // Set up star rating control so it submits as soon as a star is clicked
+    const arrowKeys = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);
+    const ratingStars = document.getElementById(`ratingStars_${game_id}`);
+    const submitRating = document.getElementById(`submitRating_${game_id}`);
+    ratingStars.addEventListener('keydown', e => {
+        if (arrowKeys.has(e.key)) submitRating.style.display = 'block';
+    });
+    submitRating.addEventListener('click', () => {
+        submitRating.style.display = 'none';
+        updateRating(game_id, ratingStars.querySelector('input:checked').value);
+    });
+
+    // Attach the submitTime function to the "Submit Time" button.
+    document.querySelector(`[data-gameid='${game_id}'] .submitTimeButton`).addEventListener("click", submitTime);
+
+
+    // Attach the removeTime function to the Remove Time button.
+    document.querySelector(`[data-gameid='${game_id}'] .removeTimeButton`).addEventListener("click", removeTime);
+
+
+    // Attach the swapTimeSections function to the timeVoteControls div.
+    document.querySelector(`[data-gameid='${game_id}'] .timeVoteControls`).addEventListener("load", swapTimeSectionsEventListener);
+
+
+    // Show the relevant time controls based on whether the user has a time already stored for this game.
+    // To find out, we check whether there's a message displaying the user's time.
+    const your_time_message = document.querySelector(`[data-gameid='${game_id}'] .yourTime`).innerHTML;
+    if (your_time_message == "") {
+        showSubmitTimeSection(game_id);
+    } else {
+        showRemoveTimeSection(game_id);
+    }
+}
diff --git a/www/pagetpl.php b/www/pagetpl.php
index 092c9273..1acb85d4 100644
--- a/www/pagetpl.php
+++ b/www/pagetpl.php
@@ -44,11 +44,6 @@ function basePageHeader($title, $focusCtl, $extraOnLoad, $extraHead,
    <title><?php echo $title ?></title>
    <?php echoStylesheetLink(); ?>
    <?php echo $extraHead ?>
-   <?php
-       // add the checkbox javascript if requested
-       if ($ckbox)
-           ckboxSetup();
-   ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
    if ($focusCtl) {
@@ -260,31 +255,6 @@ function helpPageFooter()
 {
 }
 
-// --------------------------------------------------------------------------
-// Insert the <script> code for setting up for active checkboxes.
-//
-function ckboxSetup()
-{
-?>
-<script type="text/javascript" nonce="<?php global $nonce; echo $nonce; ?>">
-<!--
-
-function ckboxGetObj(id)
-{
-    return document.getElementById('ckBox' + id);
-}
-
-function ckboxClick(id, onUpdateFunc)
-{
-    const elem = ckboxGetObj(id);
-    if (onUpdateFunc)
-        onUpdateFunc(id, elem.checked);
-}
-//-->
-</script>
-<?php
-}
-
 // this function is intended to create a <script> tag to replace inline event attributes
 function addEventListener($event, $code) {
     global $nonce;
diff --git a/www/review b/www/review
index b9c3b417..613f9be5 100644
--- a/www/review
+++ b/www/review
@@ -752,7 +752,7 @@ if (isset($missingFields['rating']))
 
    <b>1. Rate this game on a scale of 1 to 5 stars (5 is best):</b>
    <?php
-        echo showStarCtl("ratingStars", $rating, "");
+        echo showStarCtl($id, "ratingStars", $rating, "");
    ?>
 
    <br><span class=notes>You don't have to rate the game to
diff --git a/www/starctl.php b/www/starctl.php
index cbf66ec1..e8b86ac5 100644
--- a/www/starctl.php
+++ b/www/starctl.php
@@ -1,6 +1,6 @@
 <?php
 
-function showStarCtl($id, $init, $clickFunc)
+function showStarCtl($gameid, $id, $init, $clickFunc)
 {
     
     if (!$init)
@@ -13,16 +13,16 @@ function showStarCtl($id, $init, $clickFunc)
         if ($i == $init) {
             $checked = "checked";
         }
-        $str .= "<input type='radio' name='rating' value='$i' id='{$id}__rating$i' autocomplete='off' $checked>"
+        $str .= "<input type='radio' name='rating_{$id}' value='$i' id='{$id}__rating$i' autocomplete='off' $checked>"
             . "<label for='{$id}__rating$i'><span>"
             . ($i === 1 ? "1 star": "$i stars")
             ."</span></label>";
     }
 
-    $str .= addEventListener("change", "$clickFunc(event.target.value)");
+    $str .= addEventListener("change", "$clickFunc('$gameid', event.target.value)");
 
     $str .= "</div></fieldset><button class='fancy-button remove-rating' type=button>Remove Rating"
-        . addEventListener("click", "setStarCtlValue('$id', 0); $clickFunc(0);")
+        . addEventListener("click", "setStarCtlValue('$id', 0); $clickFunc('$gameid', 0);")
         ."</button>";
 
     
diff --git a/www/viewgame b/www/viewgame
index 93a4d7e6..8936b7c7 100644
--- a/www/viewgame
+++ b/www/viewgame
@@ -14,6 +14,7 @@ include_once "game-rss.php";
 include_once "gameinfo.php";
 include_once "commentutil.php";
 include_once "news.php";
+include_once "viewgame-components/have-you-played.php";
 
 $db = dbConnect();
 $curuser = checkPersistentLogin();
@@ -896,19 +897,12 @@ echo helpWinLink("help-ifid", "IFID");
     <div class="expand"><button>Read More</button></div>
     </div>
 
-   <?php
-   // ------------ end of the external links table -----------------
-
-   //---------------"HAVE YOU PLAYED THIS GAME?" SIDEBAR -----------
-   if (!$downloadsView) {
-   ?>
-
-        <?php include "viewgame-components/have-you-played.php"?>
-
-<?php
-    } // if (!$downloadsView)
+    <?php
+    // ------------ end of the external links table -----------------
 
-    //-----------end of the "Have you played this game?" sidebar ----------
+    if (!$downloadsView) {
+        showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $currentUserReview);
+    }
 ?>
     </div>
 <?php
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index 44a43650..e88de0d2 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -1,4 +1,11 @@
-<table class=gamerightbar>
+<?php
+
+include_once "starctl.php";
+
+function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $currentUserReview) {
+?>
+
+<table class="gamerightbar haveYouPlayed<?php if ($hidden) {echo " hidden";}?>" data-gameid="<?php echo $id?>">
    <tr>
       <td>
          <h3>Have you played this game?</h3>
@@ -15,41 +22,6 @@
     $result = mysqli_execute_query($db, "select userid from unwishlists
         where userid=? and gameid=?", [$curuser, $id]);
     $unwishlist = mysql_num_rows($result) > 0;
-            ?>
-            <script type="text/javascript" nonce="<?php global $nonce; echo $nonce; ?>">
-            <!--
-function updateRating(rating)
-{
-    if (rating) {
-        if (submitRating.style.display === 'block') return;
-    } else {
-        submitRating.style.display = 'none';
-    }
-    jsonSend("setrating?game=<?php echo $id?>&rating=" + rating,
-             "ratingSaveMsg");
-}
-function updatePlayed(id, stat)
-{
-    jsonSend("setplayed?game=<?php echo $id?>&played="
-             + (ckboxGetObj("ckPlayed").checked ? "1" : "0"),
-             "ckPlaySaveMsg", (d) => {updatePlaylistCount(d.newCount);});
-}
-function updateWishList(id, stat)
-{
-    jsonSend("setwishlist?game=<?php echo $id?>&add="
-             + (ckboxGetObj("ckWishList").checked ? "1" : "0"),
-             "ckWishlistSaveMsg", (d) => {updateWishlistCount(d.newCount)});
-}
-function updateUnwishList(id, stat)
-{
-    jsonSend("setunwishlist?game=<?php echo $id?>&add="
-             + (ckboxGetObj("ckUnwishList").checked ? "1" : "0"),
-             "ckUnwishlistSaveMsg");
-}
-//-->
-</script>
-    <?php
-
 
     // check to see if I've made any explicit cross-recommendations
     // of my own
@@ -61,25 +33,13 @@ function updateUnwishList(id, stat)
         list($myCrossRecs) = mysql_fetch_row($result);
     }
 
-    global $nonce;
-
     echo "<div class=indented>"
 
         . "<div class='viewgame__playedSection'>"
-        . "<span id=\"ratingCaption\"><b>Rate it:</b></span> "
-        . showStarCtl("ratingStars", $currentUserRating, "updateRating")
-        . "<button id='submitRating' class='fancy-button hidden'>Submit Rating</button>"
-        . "<script nonce='$nonce'>\n"
-        . "let arrowKeys = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);"
-        . "ratingStars.addEventListener('keydown', e => {\n"
-        . "  if (arrowKeys.has(e.key)) submitRating.style.display = 'block'\n"
-        . "});\n"
-        . "submitRating.addEventListener('click', () => {\n"
-        . "submitRating.style.display = 'none';\n"
-        . "updateRating(ratingStars.querySelector('input:checked').value);\n"
-        . "});\n"
-        . "</script>"
-        . " <span id=\"ratingSaveMsg\" class=xmlstatmsg aria-live='polite'></span><br>"
+        . "<span><b>Rate it:</b></span> "
+        . showStarCtl($id, "ratingStars_$id", $currentUserRating, "updateRating")
+        . "<button id='submitRating_$id' class='fancy-button hidden'>Submit Rating</button>"
+        . " <span id=\"rating_${id}_SaveMsg\" class=xmlstatmsg aria-live='polite'></span><br>"
         . "<a href=\"review?id=$id&userid=$curuser\">"
         . ($currentUserReview != "" ? "Revise my review" : "Review it")
         . "</a><br>"
@@ -90,19 +50,19 @@ function updateUnwishList(id, stat)
         . "</div>"
 
         . "<div class='viewgame__playedSection'>";
-    checkboxWrite("ckPlayed", "I've played it", $played, "updatePlayed");
+    checkboxWrite("ckPlayed_$id", "I've played it", $played, "updatePlayed");
     echo " (<a href=\"playlist?type=played\">view</a>)"
-        . " &nbsp; <span id=\"ckPlaySaveMsg\" class=\"xmlstatmsg\">"
+        . " &nbsp; <span id=\"ckPlayed_${id}_SaveMsg\" class=\"xmlstatmsg\">"
         . "</span><br>";
-    checkboxWrite("ckWishList", "It's on my wish list", $wishlist,
-                  "updateWishList");
+    checkboxWrite("ckWishlist_$id", "It's on my wish list", $wishlist,
+                  "updateWishlist");
     echo " (<a href=\"playlist?type=wishlist\">view</a>) "
-        . " &nbsp; <span id=\"ckWishlistSaveMsg\" class=\"xmlstatmsg\">"
+        . " &nbsp; <span id=\"ckWishlist_${id}_SaveMsg\" class=\"xmlstatmsg\">"
         . "</span><br>";
-    checkboxWrite("ckUnwishList", "I'm not interested", $unwishlist,
-                  "updateUnwishList");
+    checkboxWrite("ckUnwishlist_$id", "I'm not interested", $unwishlist,
+                  "updateUnwishlist");
     echo " (<a href=\"playlist?type=unwishlist\">view</a>) "
-        . " &nbsp; <span id=\"ckUnwishlistSaveMsg\" class=\"xmlstatmsg\">"
+        . " &nbsp; <span id=\"ckUnwishlist_${id}_SaveMsg\" class=\"xmlstatmsg\">"
         . "</span><br></div></div>";
 
  
@@ -131,12 +91,12 @@ function updateUnwishList(id, stat)
 ?>
 
 <div class=indented>
-<div id='timeVoteControls' class='viewgame__playedSection'><?php // There's an event listener attached to "timeVoteControls" ?>
-<span id="timeVoteControlsCaption"><b>Estimated play time:</b></span>
+<div class='timeVoteControls viewgame__playedSection'><?php // There's an event listener attached to "timeVoteControls" ?>
+<span><b>Estimated play time:</b></span>
 <noscript>To use this feature, please enable JavaScript in your browser.</noscript>
 
-<div id='submitTimeSection'>
-<span id='howLong'>Vote on how long it takes to finish this game.</span><br>
+<div class='submitTimeSection'>
+<span class='howLong'>Vote on how long it takes to finish this game.</span><br>
 <details><summary>Tips</summary>
 <ul>
 <li>Vote only if you've played the game.</li>
@@ -146,158 +106,28 @@ function updateUnwishList(id, stat)
 <li>Times don't need to be exact. Good-faith estimates are fine.</li>
 <li>Your vote will be publicly attributed to you.</li>
 </ul></details>
-<p><label for='hours'>Hours:</label>
-<input type='number' name='hours' id='hours' min=0 max=200>
-<label for='minutes'>Minutes:</label>
-<input type='number' name='minutes' id='minutes' min=0 max=59></p>
-<p><label for='timeNote'>Time Note:</label>
-<input type='text' name='timeNote' id='timeNote' maxlength='150' size='21' placeholder='With/without hints.'></p>
-<button id='submitTimeButton' class='fancy-button' type='submit'>Submit Time</button>
+<p><label>Hours: <input type='number' name='hours' class='timeSection_hours' min=0 max=200></label>
+<label>Minutes: <input type='number' name='minutes' class='timeSection_minutes' min=0 max=59></label></p>
+<p><label>Time Note: <input type='text' name='timeNote' class='timeNote' maxlength='150' size='21' placeholder='With/without hints.'></label></p>
+<button class='submitTimeButton fancy-button' type='submit'>Submit Time</button>
 </div>
 
-<div id='removeTimeSection'>
-<span id='yourTime'><?php echo $time_announcement?></span><br>
-<button id='removeTimeButton' class='fancy-button'>Remove Time</button>
+<div class='removeTimeSection'>
+<span class='yourTime'><?php echo $time_announcement?></span><br>
+<button class='removeTimeButton fancy-button'>Remove Time</button>
 </div>
 
-<span id="timeSaveMsg" class=xmlstatmsg aria-live='polite'></span><br>
+<span id="time_SaveMsg_<?php echo $id?>" class=xmlstatmsg aria-live='polite'></span><br>
 
-<div id='timeSavedSection'>
-<p id='timeSubmittedMessage'>Your time has been submitted.</p>
+<div class='timeSavedSection'>
+<p>Your time has been submitted.</p>
 </div>
 
 </div></div>
 
 <script nonce="<?php global $nonce; echo $nonce; ?>">
 
-// When the user clicks the "Submit Time" button, get the input 
-// from the hours and minutes fields, validate it, convert it to 
-// minutes only, and save it to the database (with the note, if present).
-function submitTime() {
-    var new_hours = document.getElementById('hours').value;
-    var new_minutes = document.getElementById('minutes').value;
-    var time_note = document.getElementById('timeNote').value.trim();
-    if (new_hours == "") {    // If the hours field was blank, interpret it as 0
-        new_hours = 0;
-    }
-    if (new_minutes == "") {  // If the minutes field was blank, interpret it as 0
-        new_minutes = 0;
-    }
-    var hours_are_digits = isOnlyDigits(new_hours); 
-    var minutes_are_digits = isOnlyDigits(new_minutes);
-    if (hours_are_digits == false || minutes_are_digits == false) {
-        document.getElementById("timeSaveMsg").innerHTML="Please enter valid numbers.";
-        return;
-    }
-    if (new_hours > 200) {     // Negative numbers will hopefully be eliminated by "Digits only"
-        document.getElementById("timeSaveMsg").innerHTML="For hours, please enter a number from 0 to 200.";
-        return;
-    }
-    if (new_minutes > 59) {
-        document.getElementById("timeSaveMsg").innerHTML="For minutes, please enter a number from 0 to 59.";
-        return;
-    }
-    var new_time = convertToMinutes(new_hours, new_minutes);
-    if (new_time < 1) {
-        document.getElementById("timeSaveMsg").innerHTML="The total time must be at least one minute.";
-        return;
-    }
-    // Time is valid, as far as we can tell.
-    // If the game isn't already on the user's list of played games, add it.
-    var played_it_checkbox = document.getElementById('ckBoxckPlayed');
-    if (!played_it_checkbox.checked) {
-        played_it_checkbox.checked = true;
-        updatePlayed();
-    }
-    // Submit the time.
-    jsonSend(`settime?game=<?= $id?>&newtime=${new_time}&note=${encodeURIComponent(time_note)}`, "timeSaveMsg", swapTimeSections);
-}
-// Attach the submitTime function to the "Submit Time" button.
-document.getElementById("submitTimeButton").addEventListener("click", submitTime);
-
-
-// Remove the user's time for this game from the database.
-function removeTime() {
-    jsonSend("settime?game=<?php echo $id?>&newtime=0", "timeSaveMsg", swapTimeSections);
-}
-// Attach the removeTime function to the Remove Time button.
-document.getElementById("removeTimeButton").addEventListener("click", removeTime);
-
-
-// Check whether a string contains only digits.
-function isOnlyDigits(a_string) {
-    if (/^\d+$/.test(a_string)) {
-        return true;
-    }
-    return false;
-}
-
-
-// Take hours and minutes and convert them into just minutes
-// so we can store the time as minutes in the database.
-function convertToMinutes(hours, minutes) {
-    // They need to be integers so they don't get concatenated when we're trying to add them
-    hours = Number(hours); 
-    minutes = Number(minutes);
-    hours_into_minutes = hours * 60;
-    total_minutes = hours_into_minutes + minutes;
-    return total_minutes;
-}
-
-
-// The Estimated Play Time control panel has a "submitTimeSection," a "removeTimeSection," and
-// a "timeSavedSection." Only one of the sections should be visible at a time. These functions
-// show and hide the sections.
-
-function showSubmitTimeSection() { 
-    submitTimeSection.style.display = "block";
-    removeTimeSection.style.display  = "none";
-    timeSavedSection.style.display = "none";
-}
-
-function showRemoveTimeSection() { 
-    submitTimeSection.style.display = "none";
-    removeTimeSection.style.display = "block";
-    timeSavedSection.style.display = "none";
-}
-
-function showTimeSavedSection() { 
-    submitTimeSection.style.display = "none";
-    removeTimeSection.style.display = "none";
-    timeSavedSection.style.display = "block";
-    
-}
-
-// After successfully submitting or removing a time, hide or show 
-// the appropriate sections of the estimated play time control panel.
-function swapTimeSections() {
-    if (document.getElementById("timeSaveMsg").innerHTML == "Saved") { 
-        if (submitTimeSection.style.display == "block") { 
-            //The submit time section is visible, which means we just successfully saved a new time.        
-            showTimeSavedSection();
-        } else if (removeTimeSection.style.display == "block") {
-            //The remove time section is visible, which means we just successfully removed our time.  
-            showSubmitTimeSection();
-        }
-    } // Don't swap the time controls if there was an error saving.
-}
-// Attach the swapTimeSections function to the timeVoteControls div.
-document.getElementById("timeVoteControls").addEventListener("load", swapTimeSections);
-
-
-// When the page first loads, show the relevant time controls based on
-// whether the user has a time already stored for this game. To find out, we
-// check whether there's a message displaying the user's time.
-function prepareTimeControls() {
-    var your_time_message = document.getElementById("yourTime").innerHTML;
-    if (your_time_message == "") {
-        showSubmitTimeSection();
-    } else if (your_time_message != "") {
-        showRemoveTimeSection();
-    }
-}
-prepareTimeControls();
-
+prepareHaveYouPlayedBox("<?php echo $id?>");
 
 </script>
 
@@ -315,3 +145,7 @@ function prepareTimeControls() {
       </td>
    </tr>
 </table>
+
+<?php
+}
+?>

From 9fa404379bb5e6a2d1fe114a1029a5808791c052 Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Mon, 1 Jun 2026 20:56:02 +0300
Subject: [PATCH 5/9] have-you-played: Accept bool review, since contents are
 unused

---
 www/viewgame                                | 2 +-
 www/viewgame-components/have-you-played.php | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/viewgame b/www/viewgame
index 8936b7c7..6f4c78ad 100644
--- a/www/viewgame
+++ b/www/viewgame
@@ -901,7 +901,7 @@ echo helpWinLink("help-ifid", "IFID");
     // ------------ end of the external links table -----------------
 
     if (!$downloadsView) {
-        showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $currentUserReview);
+        showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $currentUserReview !== "");
     }
 ?>
     </div>
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index e88de0d2..3d06ad65 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -2,7 +2,7 @@
 
 include_once "starctl.php";
 
-function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $currentUserReview) {
+function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $currentUserHasReview, bool $hidden = false) {
 ?>
 
 <table class="gamerightbar haveYouPlayed<?php if ($hidden) {echo " hidden";}?>" data-gameid="<?php echo $id?>">
@@ -41,7 +41,7 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, $curre
         . "<button id='submitRating_$id' class='fancy-button hidden'>Submit Rating</button>"
         . " <span id=\"rating_${id}_SaveMsg\" class=xmlstatmsg aria-live='polite'></span><br>"
         . "<a href=\"review?id=$id&userid=$curuser\">"
-        . ($currentUserReview != "" ? "Revise my review" : "Review it")
+        . ($currentUserHasReview ? "Revise my review" : "Review it")
         . "</a><br>"
         . "<a href=\"crossrec?game=$id&edit\">"
         . ($myCrossRecs ? "Edit my suggestions ($myCrossRecs)"

From 415dcf2220cd49054db3e1998b468e4e434fe872 Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Mon, 1 Jun 2026 13:02:39 +0300
Subject: [PATCH 6/9] Show have-you-played boxes in search page

---
 www/ifdb.css       |  7 +++++++
 www/search         | 48 +++++++++++++++++++++++++++++++++++++++++++---
 www/searchutil.php |  6 ++++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/www/ifdb.css b/www/ifdb.css
index 3cfbff88..ba9ce3bc 100644
--- a/www/ifdb.css
+++ b/www/ifdb.css
@@ -104,6 +104,13 @@ form.sortingControls {
     margin: 1em 0 1em 0;
 }
 
+/* A box that has the sorting controls and other search result controls */
+.searchControls {
+    display: flex;
+    align-items: baseline;
+    column-gap: 5em;
+}
+
 /*
 The default style for cells within tables.  We use the same style
 here as in the main page body.
diff --git a/www/search b/www/search
index c3c97359..50ed930c 100644
--- a/www/search
+++ b/www/search
@@ -9,9 +9,11 @@ checkPersistentLogin();
 include_once "pagetpl.php";
 include_once "util.php";
 include_once "searchutil.php";
+include_once "viewgame-components/have-you-played.php";
 
 include_once "dbconnect.php";
 $db = dbConnect();
+$curuser = checkPersistentLogin();
 
 // check for API requests
 $api_mode = null;
@@ -1126,7 +1128,8 @@ else if ($term || $browse)
                                  . ($searchType == "poll" ? "&poll" : "")
                                  . ($searchType == "member" ? "&member" : "")
                                  . ($searchType == "comp" ? "&comp" : "")
-                                 . ($searchType == "tag" ? "&tag" : ""),
+                                 . ($searchType == "tag" ? "&tag" : "")
+                                 . (isset($_GET['showRatingBoxes']) ? "&showRatingBoxes" : ""),
                                  $pg, $lastPage, $firstOnPage, $lastOnPage,
                                  $rowcnt, true,
                                  $rowcnt < $showAllMaxRows, $pgAll)
@@ -1249,8 +1252,11 @@ else if ($term || $browse)
             $hids[$searchType] = '1';
         if ($urlXL)
             $hids['xlink'] = $extraLink;
+        echo "<div class='searchControls'>";
         showSortingControls("searchOrder", "sortby", $sortList, $sortby,
                             $hids, "search");
+        $checked = isset($_GET['showRatingBoxes']) ? "checked" : "";
+        echo "<label><input type='checkbox' id='showRatingBoxes' autocomplete='off' $checked>Show rating boxes</label></div>";
 
         // show the page controls at the top of the results;
         // if all of the results fit on one page, don't bother with
@@ -1424,9 +1430,15 @@ else if ($term || $browse)
                 if ($playtime != "")
                     echo "<div class=details>$playtime</div>";
 
-                echo "</div></article>";
+                echo "</div>";
+
+                if ($curuser) {
+                    showHaveYouPlayedThisCtl($db, $curuser, $id, $row['current_user_rating'], $row['current_user_has_review'], /* hidden */ !isset($_GET['showRatingBoxes']));
+                }
+
+                echo "</article>";
                 break;
-            
+
             case "list":
                 // get the row data
                 $id = $row['id'];
@@ -1583,6 +1595,36 @@ else if ($term || $browse)
 if (!$api_mode) {
 ?>
 </div>
+
+<script nonce="<?php global $nonce; echo $nonce; ?>">
+function editUrlParameters(url, param, add) {
+    const u = new URL(url);
+    if (add) {
+        u.searchParams.set('showRatingBoxes', '');
+    } else {
+        u.searchParams.delete('showRatingBoxes');
+    }
+    return u.toString().replace(/=$|=(?=&)/g, '');
+}
+
+document.getElementById('showRatingBoxes').addEventListener('click', (e) => {
+    const checked = e.target.checked;
+
+    // Show/hide boxes
+    document.querySelectorAll('.haveYouPlayed').forEach(elem => {
+        elem.style.display = checked ? 'table' : 'none';
+    });
+
+    // Update address bar
+    window.history.replaceState(null, '', editUrlParameters(window.location.href, 'showRatingBoxes', checked));
+
+    // Update pagination links
+    document.querySelectorAll('.search__rowcnt a').forEach(elem => {
+        elem.href = editUrlParameters(elem.href, 'showRatingBoxes', checked);
+    });
+});
+</script>
+
 <?php
 
 // end the page
diff --git a/www/searchutil.php b/www/searchutil.php
index 1dcd988d..188feab9 100644
--- a/www/searchutil.php
+++ b/www/searchutil.php
@@ -283,11 +283,17 @@ function doSearch($db, $term, $searchType, $sortby, $limit, $browse, $count_all_
                        ifnull(games.published, '9999-12-31') as sort_pub,
                        games.pagevsn,
                        games.flags";
+        if ($curuser) {
+            $selectList .= ", reviews.rating as current_user_rating, coalesce(char_length(reviews.review), 0)>0 as current_user_has_review";
+        }
         $baseWhere = "";
         $groupBy = "";
         $baseOrderBy = "";
         $tableList = "games
                       join ".getGameRatingsView($db)." on games.id = gameid";
+        if ($curuser) {
+            $tableList .= " left outer join reviews on games.id = reviews.gameid and reviews.userid = '$curuser'";
+        }
         $matchCols = "title, author, `desc`, tags";
         $likeCol = "title";
         $summaryDesc = "Games";

From b9d8a4057bf0adcb0cf2165864c964a0fc97c8fa Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Tue, 2 Jun 2026 09:51:34 +0300
Subject: [PATCH 7/9] search: Add custom CSS to have-you-played box; hide some
 titles and tips

---
 www/ifdb.css                                | 13 ++++++++++++-
 www/search                                  |  3 ++-
 www/viewgame-components/have-you-played.php | 16 ++++++++--------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/www/ifdb.css b/www/ifdb.css
index ba9ce3bc..e6d7605c 100644
--- a/www/ifdb.css
+++ b/www/ifdb.css
@@ -571,10 +571,21 @@ td.coverart {
     white-space: nowrap;
 }
 
-.viewgame__playedSection {
+.haveYouPlayed_playedSection {
     margin: 1.25ex 0 0.75ex 0;
 }
 
+.searchRatingBox {
+    width: 20rem !important; /* Overrides the 'width: 100%' in '.gamerightbar' */
+    margin-left: auto !important;
+    margin-right: 100px !important;
+}
+
+.searchRatingBox .haveYouPlayed_title,
+.searchRatingBox .howLong {
+    display: none;
+}
+
 /*
 We use the "authorProfileLink" style for hyperlinks to author profiles,
 as shown in the author section of a game listing.  We show these without
diff --git a/www/search b/www/search
index 50ed930c..ff9a37b1 100644
--- a/www/search
+++ b/www/search
@@ -1433,7 +1433,8 @@ else if ($term || $browse)
                 echo "</div>";
 
                 if ($curuser) {
-                    showHaveYouPlayedThisCtl($db, $curuser, $id, $row['current_user_rating'], $row['current_user_has_review'], /* hidden */ !isset($_GET['showRatingBoxes']));
+                    showHaveYouPlayedThisCtl($db, $curuser, $id, $row['current_user_rating'], $row['current_user_has_review'],
+                        'searchRatingBox' . (isset($_GET['showRatingBoxes']) ? '' : ' hidden'));
                 }
 
                 echo "</article>";
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index 3d06ad65..c1d600eb 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -2,13 +2,13 @@
 
 include_once "starctl.php";
 
-function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $currentUserHasReview, bool $hidden = false) {
+function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $currentUserHasReview, string $extraClasses = '') {
 ?>
 
-<table class="gamerightbar haveYouPlayed<?php if ($hidden) {echo " hidden";}?>" data-gameid="<?php echo $id?>">
+<table class="gamerightbar haveYouPlayed<?php if ($extraClasses) {echo " $extraClasses";}?>" data-gameid="<?php echo $id?>">
    <tr>
       <td>
-         <h3>Have you played this game?</h3>
+         <h3 class="haveYouPlayed_title">Have you played this game?</h3>
             <?php
 if ($curuser) {
     $result = mysqli_execute_query($db, "select userid from playedgames
@@ -35,7 +35,7 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
 
     echo "<div class=indented>"
 
-        . "<div class='viewgame__playedSection'>"
+        . "<div class='haveYouPlayed_playedSection'>"
         . "<span><b>Rate it:</b></span> "
         . showStarCtl($id, "ratingStars_$id", $currentUserRating, "updateRating")
         . "<button id='submitRating_$id' class='fancy-button hidden'>Submit Rating</button>"
@@ -49,7 +49,7 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
         . "</a>"
         . "</div>"
 
-        . "<div class='viewgame__playedSection'>";
+        . "<div class='haveYouPlayed_playedSection'>";
     checkboxWrite("ckPlayed_$id", "I've played it", $played, "updatePlayed");
     echo " (<a href=\"playlist?type=played\">view</a>)"
         . " &nbsp; <span id=\"ckPlayed_${id}_SaveMsg\" class=\"xmlstatmsg\">"
@@ -91,12 +91,12 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
 ?>
 
 <div class=indented>
-<div class='timeVoteControls viewgame__playedSection'><?php // There's an event listener attached to "timeVoteControls" ?>
+<div class='timeVoteControls haveYouPlayed_playedSection'><?php // There's an event listener attached to "timeVoteControls" ?>
 <span><b>Estimated play time:</b></span>
 <noscript>To use this feature, please enable JavaScript in your browser.</noscript>
 
 <div class='submitTimeSection'>
-<span class='howLong'>Vote on how long it takes to finish this game.</span><br>
+<div class='howLong'><span>Vote on how long it takes to finish this game.</span><br>
 <details><summary>Tips</summary>
 <ul>
 <li>Vote only if you've played the game.</li>
@@ -105,7 +105,7 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
 <li>To help players gauge how long a game with puzzles might take, you can note if your time is with or without hints.</li>
 <li>Times don't need to be exact. Good-faith estimates are fine.</li>
 <li>Your vote will be publicly attributed to you.</li>
-</ul></details>
+</ul></details></div>
 <p><label>Hours: <input type='number' name='hours' class='timeSection_hours' min=0 max=200></label>
 <label>Minutes: <input type='number' name='minutes' class='timeSection_minutes' min=0 max=59></label></p>
 <p><label>Time Note: <input type='text' name='timeNote' class='timeNote' maxlength='150' size='21' placeholder='With/without hints.'></label></p>

From f3f5d852136303ef3412ed6e9398690bb1c76b2c Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Fri, 5 Jun 2026 23:14:53 +0300
Subject: [PATCH 8/9] have-you-played: Reduce spacing between time input boxes

---
 www/ifdb.css                                | 4 ++++
 www/viewgame-components/have-you-played.php | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/www/ifdb.css b/www/ifdb.css
index e6d7605c..eb506eac 100644
--- a/www/ifdb.css
+++ b/www/ifdb.css
@@ -693,6 +693,10 @@ on the viewgame page
     display: none;
 }
 
+.submitTimeSection > div {
+    margin-top: 1px;
+}
+
 /*
 The "downloads" section is for external links.
 */
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index c1d600eb..6a81ec71 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -106,9 +106,9 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
 <li>Times don't need to be exact. Good-faith estimates are fine.</li>
 <li>Your vote will be publicly attributed to you.</li>
 </ul></details></div>
-<p><label>Hours: <input type='number' name='hours' class='timeSection_hours' min=0 max=200></label>
-<label>Minutes: <input type='number' name='minutes' class='timeSection_minutes' min=0 max=59></label></p>
-<p><label>Time Note: <input type='text' name='timeNote' class='timeNote' maxlength='150' size='21' placeholder='With/without hints.'></label></p>
+<div><label>Hours: <input type='number' name='hours' class='timeSection_hours' min=0 max=200></label>
+<label>Minutes: <input type='number' name='minutes' class='timeSection_minutes' min=0 max=59></label></div>
+<div><label>Time Note: <input type='text' name='timeNote' class='timeNote' maxlength='150' size='21' placeholder='With/without hints.'></label></div>
 <button class='submitTimeButton fancy-button' type='submit'>Submit Time</button>
 </div>
 

From 97f7bb4e6c61ff7823f1870d08847cf7bfbdba2f Mon Sep 17 00:00:00 2001
From: Ori Avtalion <ori@avtalion.name>
Date: Sat, 6 Jun 2026 00:11:02 +0300
Subject: [PATCH 9/9] have-you-played: Don't use table, replace 'gamerightbar'
 class with 'haveYouPlayed'

---
 www/ifdb.css                                | 22 ++++++++++-----------
 www/viewgame-components/have-you-played.php |  8 ++------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/www/ifdb.css b/www/ifdb.css
index eb506eac..80ce5c38 100644
--- a/www/ifdb.css
+++ b/www/ifdb.css
@@ -576,7 +576,7 @@ td.coverart {
 }
 
 .searchRatingBox {
-    width: 20rem !important; /* Overrides the 'width: 100%' in '.gamerightbar' */
+    width: 20rem !important; /* Overrides the 'width: 100%' in '.haveYouPlayed' */
     margin-left: auto !important;
     margin-right: 100px !important;
 }
@@ -656,27 +656,25 @@ the page.
     }
 
     /*
-    The "gamerightbar" table is the box on a game's listing page,
+    The "haveYouPlayed" class is the box on a game's listing page,
     underneath the Download box, where we display quick rating
     input links ("Have you played this game?").
     */
-    table.gamerightbar {
-        padding: 0 0 0 0;
-        margin: 0 0 0 0;
+    .haveYouPlayed {
+        padding: 3px;
+        margin: 0;
         background: #F0F0F0;
         border: thin dotted #e0e0e0;
         width: 100%;
         font-size: 80%;
+        height: fit-content;
     }
-    table.gamerightbar h3 {
+    .haveYouPlayed h3 {
         font: 100%/140% Verdana, Arial, Helvetica, Sans-Serif;
         font-weight: bold;
         color: #000080;
         margin: 0 0 0.5em 0;
     }
-    table.gamerightbar td {
-        padding: 0 0 0.5em 0;
-    }
 }
 
 /*
@@ -2265,14 +2263,14 @@ span.sfl-save-autodesc {
         #externalLinks.downloads h3 {
             color: #d0d0ff;
         }
-        table.gamerightbar {
+        .haveYouPlayed {
             background: #101030;
             border: thin dotted #303030;
         }
-        table.gamerightbar td {
+        .haveYouPlayed {
             color: #d8d8d8;
         }
-        table.gamerightbar td h3 {
+        .haveYouPlayed h3 {
             color: #d0d0ff;
         }
     }
diff --git a/www/viewgame-components/have-you-played.php b/www/viewgame-components/have-you-played.php
index 6a81ec71..87bbf3a0 100644
--- a/www/viewgame-components/have-you-played.php
+++ b/www/viewgame-components/have-you-played.php
@@ -5,9 +5,7 @@
 function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $currentUserHasReview, string $extraClasses = '') {
 ?>
 
-<table class="gamerightbar haveYouPlayed<?php if ($extraClasses) {echo " $extraClasses";}?>" data-gameid="<?php echo $id?>">
-   <tr>
-      <td>
+<section class="gamerightbar haveYouPlayed<?php if ($extraClasses) {echo " $extraClasses";}?>" data-gameid="<?php echo $id?>">
          <h3 class="haveYouPlayed_title">Have you played this game?</h3>
             <?php
 if ($curuser) {
@@ -142,9 +140,7 @@ function showHaveYouPlayedThisCtl($db, $curuser, $id, $currentUserRating, bool $
 }
 
 ?>
-      </td>
-   </tr>
-</table>
+</section>
 
 <?php
 }