Switch element selector to be both images instead of first image for toggle disabled

README.md

@@ -21,4 +21,39 @@ This small project provides a web based tool for running a bespoke randomized MT
 
 ## Usage Instructions
 
-Should go here :)
+Here is a collection of notes about how the interface operates:
+
+* When the page loads (or reloads) the game is reset
+  * Card count is set to zero, but not displayed
+  * The server-side list of played cards is emptied
+  * Any displayed cards are removed
+* Long pressing (press and hold) an image will toggle a card enabled or disabled
+  * Disabled images are not in the pool of available cards when selecting a random card
+  * If it is semi-transparent it is disabled
+  * if it is not semi-transparent it is enabled
+  * Card state can be edited in the management interface
+* Clicking the **Show First Card** button will show the first card
+  * Note that the very first card does NOT increment the card count
+* Clicking the **Show Second Card** button will:
+  * If a single card is displayed it will show a second card
+  * If a second card is displayed it will replace the existing second card
+  * Note that the **Show Second Card** button does not appear until at least one card is displayed
+* Clicking the **Sun** (yellow) icon starts a game
+  * A dice is rolled (turn up the volume to hear a dice roll!)
+  * The dice results are set to the server as the starting card count
+  * The dice roll is displayed over the diamond icon
+* Clicking the **Fire** (red) icon will replace the most recently played card
+  * The replacement card is **NOT** flagged as played for the current session
+  * The replaced card is **STILL** flagged as played
+* Clicking the **Skull** (gray) icon will reverse the most recent card play
+  * The removed card will be set as "unplayed" in the current session and may show up again
+  * It is impossible to go back further than the first card played
+  * The card count will go backwards to match the reversed play
+* Clicking the **Water** (blue) icon will hide the dice roll number displayed on the **Sun** icon
+  * This is currently pointless as the dice roll is always hidden, but the functionality is retained
+* Clicking the **Diamond** (bottom right) icon will reset the game session
+  * Click once to stage the reset and the number will turn red
+  * Click a second time to finish resetting the session
+  * If it is not clicked a second time before another action is made it will go back to normal
+* Clicking the **Tree** (green) icon will open the management interface in a new tab
+  * This requires login credentials

ajax/getcard.php

@@ -27,7 +27,9 @@ $data["secondimg"] = $second;
 if ( $reverse ) {
     if ( $_SESSION['cardcount'] > $_SESSION['startcount'] ) {
         $_SESSION['cardcount']--;
-        $junk = array_pop($_SESSION["cardlist"]);
+        $reverse_cards = array_pop($_SESSION["cardlist"]);
+        $reverse_cards[array_key_last($reverse_cards)]->setPlayed(false);
+        $reverse_cards[array_key_last($reverse_cards)]->save(false);
     } else {
     }
     $data['cards'] = $_SESSION['cardlist'][array_key_last($_SESSION['cardlist'])];
@@ -35,7 +37,7 @@ if ( $reverse ) {
     sendResponse();
 }
 
-$previous_cards = $_SESSION['cardlist'][array_key_last($_SESSION['cardlist'])];
+$previous_cards = (count($_SESSION['cardlist']) > 0) ? $_SESSION['cardlist'][array_key_last($_SESSION['cardlist'])] : [];
 
 if ( $second ) {
     $random_image = MTGImage::getRandomImage($previous_cards[0]->getFileName());
@@ -57,6 +59,10 @@ $_SESSION['cardlist'][] = $new_cards;
 $data['cards'] = $new_cards;
 
 if ( !$skip && !$initialcard ) $_SESSION['cardcount']++;
+if ( !$skip ) {
+    $random_image->setPlayed(true);
+    $random_image->save();
+}
 $data['cardcount'] = $_SESSION['cardcount'];
 
 sendResponse();

ajax/resetpage.php

@@ -2,6 +2,8 @@
 
 require "../header.php";
 
+MTGImage::resetPlayed();
+
 if ( isset($_REQUEST['cardcount']) ) {
    $_SESSION['cardcount'] = intval($_REQUEST['cardcount']);
    if ( $_SESSION['cardcount'] < 0 ) $_SESSION['cardcount'] = 0;

class_image.php

@@ -6,10 +6,12 @@ class MTGImage implements JsonSerializable {
    const MIME_TYPES = array("gif" => "image/gif", "jpg" => "image/jpeg", "jpeg" => "image/jpeg", "png" => "image/png", "webp" => "image/webp");
 
    const MTGI_BOOLEANDB = 1000001;
+   const MTGI_INCLUDEPLAYED = false;
 
    private $id = 0;
    private $filename = "";
    private $enabled = true;
+   private $played = false;
    private $width = 0;
    private $height = 0;
    private $created = "1972-08-16 00:00:00";
@@ -37,6 +39,17 @@ class MTGImage implements JsonSerializable {
       }
    }
 
+   public function getPlayed($flag = 0) {
+      switch ($flag) {
+         case MTGImage::MTGI_BOOLEANDB:
+            return ($this->played) ? 1 : 0;
+            break;
+         default:
+            return $this->played;
+            break;
+      }
+   }
+
    public function getWidth() {
       return $this->width;
    }
@@ -92,6 +105,18 @@ class MTGImage implements JsonSerializable {
       return true;
    }
 
+   public function setPlayed($value = null) {
+      if ( is_null($value) ) return false;
+      if ( is_int($value) && (($value == 1) || ($value == 0)) ) {
+         $this->played = ($value == 1) ? true : false;
+      } elseif ( is_bool($value) ) {
+         $this->played = $value;
+      } else {
+         return false;
+      }
+      return true;
+   }
+
    public function setWidth($value = null) {
       if ( is_null($value) ) return false;
       if ( !is_int($value) || ($value < 0) ) return false;
@@ -125,14 +150,33 @@ class MTGImage implements JsonSerializable {
       return true;
    }
 
-   public static function getRandomImage($id = 0) {
+   public static function resetPlayed() {
       global $globaldbh;
 
+      $query = "UPDATE images SET played = FALSE";
+      $sth = $globaldbh->prepare($query);
+      $sth->execute();
+   }
+
+   public static function getRandomImage(int|string $id = 0, bool $onlyUnplayed = true) {
+      global $globaldbh;
+
+      if ( is_string($id) ) $id = intval($id);
       if ( $id == 0 ) {
-         $query = "SELECT id FROM images WHERE enabled = TRUE ORDER BY RAND() LIMIT 1";
+         if ( $onlyUnplayed ) {
+            $query = "SELECT id FROM images WHERE enabled = TRUE AND played = FALSE ORDER BY RAND() LIMIT 1";
+         } else {
+            $query = "SELECT id FROM images WHERE enabled = TRUE ORDER BY RAND() LIMIT 1";
+         }
          $sth = $globaldbh->prepare($query);
       } else {
-         $query = "SELECT id FROM images WHERE enabled = TRUE AND id <> :id ORDER BY RAND() LIMIT 1";
+         if ( $onlyUnplayed ) {
+            $query = "SELECT id FROM images WHERE enabled = TRUE ";
+            $query .= "AND PLAYED = FALSE AND id <> :id ORDER BY RAND() LIMIT 1";
+         } else {
+            $query = "SELECT id FROM images WHERE enabled = TRUE ";
+            $query .= "AND id <> :id ORDER BY RAND() LIMIT 1";
+         }
          $sth = $globaldbh->prepare($query);
          $sth->bindValue(":id", intval($id), PDO::PARAM_INT);
       }
@@ -184,6 +228,7 @@ class MTGImage implements JsonSerializable {
          'filename' => $this->getFileName(),
          'title' => pathinfo($this->getFileName(), PATHINFO_FILENAME),
          'enabled' => $this->getEnabled(),
+         'played' => $this->getPlayed(),
          'width' => $this->getWidth(),
          'height' => $this->getHeight(),
          'dimensions' => $this->getDimensions(),
@@ -211,11 +256,12 @@ class MTGImage implements JsonSerializable {
    public function save() {
       global $globaldbh;
 
-      $query = "INSERT INTO images (id, filename, width, height) VALUES(:id, :filename, :width, :height) ON DUPLICATE KEY UPDATE filename=:filename, enabled=:enabled, width=:width, height=:height";
+      $query = "INSERT INTO images (id, filename, width, height) VALUES(:id, :filename, :width, :height) ON DUPLICATE KEY UPDATE filename=:filename, enabled=:enabled, played=:played, width=:width, height=:height";
       $sth = $globaldbh->prepare($query);
       $sth->bindValue(":id", (int) $this->getId(), PDO::PARAM_INT);
       $sth->bindValue(":filename", $this->getFileName(), PDO::PARAM_STR);
       $sth->bindValue(":enabled", (int) $this->getEnabled(MTGImage::MTGI_BOOLEANDB), PDO::PARAM_INT);
+      $sth->bindValue(":played", (int) $this->getPlayed(MTGImage::MTGI_BOOLEANDB), PDO::PARAM_INT);
       $sth->bindValue(":width", (int) $this->getWidth(), PDO::PARAM_INT);
       $sth->bindValue(":height", (int) $this->getHeight(), PDO::PARAM_INT);
       $sth->execute();
@@ -227,7 +273,7 @@ class MTGImage implements JsonSerializable {
       global $globaldbh;
 
       if ( !is_int($imgid) || $imgid == 0 ) return;
-      $query = "SELECT id, filename, enabled, width, height, created FROM images where id=:id";
+      $query = "SELECT id, filename, enabled, played, width, height, created FROM images where id=:id";
       $sth = $globaldbh->prepare($query);
       $sth->bindValue(":id", (int) $imgid, PDO::PARAM_INT);
       $sth->execute();
@@ -235,6 +281,7 @@ class MTGImage implements JsonSerializable {
          $this->setId($row["id"]);
          $this->setFileName($row["filename"]);
          $this->setEnabled($row["enabled"]);
+         $this->setPlayed($row["played"]);
          $this->setWidth($row["width"]);
          $this->setHeight($row["height"]);
          $this->created = $row["created"];

install/initial_db_mysql.sql

@@ -27,6 +27,7 @@ CREATE TABLE `images` (
   `id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
   `filename` varchar(255) NOT NULL,
   `enabled` tinyint(1) DEFAULT 1,
+  `played` tinyint(1) DEFAULT 0,
   `width` mediumint(8) unsigned NOT NULL DEFAULT 0,
   `height` mediumint(8) unsigned NOT NULL DEFAULT 0,
   `created` datetime NOT NULL DEFAULT current_timestamp(),

js/main.js

@@ -4,6 +4,7 @@ var skipCard = false;
 var showingSecondCard = false;
 const audioDice = new Audio("audio/dice.mp3");
 const PREVIOUS = true;
+const INITIALRESET = -1;
 
 $(document).ready(function() {
   // when ready
@@ -43,15 +44,21 @@ $(document).ready(function() {
     getCard(PREVIOUS);
   });
   $(".diceroll").on("click", function() { rollDice(); });
-  $("#firstimg").longPress({
+  $(".card-image").longPress({
     holdTime: 1000,
     onHoldStart: function() {
       toggleState($(this));
     }
   });
+  resetPage(INITIALRESET);
 });
 
 function resetPage(count = 0) {
+  pageReset = false;
+  if ( count == INITIALRESET ) {
+    initialReset = true;
+    count = 0;
+  }
   $.ajax({
     url: 'ajax/resetpage.php',
     data: {cardcount: count},
@@ -70,7 +77,11 @@ function resetPage(count = 0) {
       initialCard = true;
       skipCard = false;
       showingSecondCard = false;
-      showCardCount(data.cardcount);
+      if ( !initialReset ) {
+        showCardCount(data.cardcount);
+      } else {
+        initialReset = false;
+      }
     }
   });
 }