Fold lower priority decks

build/style.css

@@ -65,47 +65,64 @@ table.decktable {
   border: 1px solid CanvasText;
 }
 
-table.decktable.red th {
+details.deckwrap {
+  border: 1px solid CanvasText;
+  width: 297px;
+  display: inline;
+}
+
+details.deckwrap summary {
+  margin: 2px;
+  font-weight: bold;
+  text-align: center;
+  cursor: pointer;
+}
+
+details.deckwrap table.decktable {
+  border: none;
+}
+
+table.decktable.red th, details.deckwrap:has(.red) summary {
   background-color: red;
   color: black;
 }
 
-table.decktable.orange th {
+table.decktable.orange th, details.deckwrap:has(.orange) summary {
   background-color: orange;
   color: black;
 }
 
-table.decktable.yellow th {
+table.decktable.yellow th, details.deckwrap:has(.yellow) summary {
   background-color: yellow;
   color: black;
 }
 
-table.decktable.green th {
+table.decktable.green th, details.deckwrap:has(.green) summary {
   background-color: green;
   color: white;
 }
 
-table.decktable.blue th {
+table.decktable.blue th, details.deckwrap:has(.blue) summary {
   background-color: blue;
   color: white;
 }
 
-table.decktable.purple th {
+table.decktable.purple th, details.deckwrap:has(.purple) summary {
   background-color: purple;
   color: white;
 }
 
-table.decktable.brown th {
+table.decktable.brown th, details.deckwrap:has(.brown) summary {
   background-color: brown;
   color: white;
 }
 
-table.decktable.gray th {
+table.decktable.gray th, details.deckwrap:has(.gray) summary {
   background-color: gray;
   color: white;
 }
 
-table.decktable.special th {
+table.decktable.special th, details.deckwrap:has(.special) summary {
   background: linear-gradient(90deg, hsl(0, 100%, 70%), hsl(30, 100%, 70%), hsl(60, 100%, 70%), hsl(90, 100%, 70%), hsl(120, 100%, 70%), hsl(150, 100%, 70%), hsl(180, 100%, 70%), hsl(210, 100%, 70%), hsl(240, 100%, 70%), hsl(270, 100%, 70%), hsl(300, 100%, 70%), hsl(330, 100%, 70%), hsl(360, 100%, 70%));
   color: black;
 }
@@ -143,6 +160,10 @@ h2.collectingheader {
   background-color: Canvas;
 }
 
+p#masteredcarousel img {
+  vertical-align: middle;
+}
+
 /* portfolios */
 a:has(div.foliocase) {
   text-decoration: none;

collectinggen.py

@@ -40,7 +40,7 @@ def collectinggen(colour=False):
     if len(highpriority) > 0:
         content.write("<div>\n<h2 class=\"collectingheader\">High priority</h2>\n")
         for deck in highpriority:
-            content.write(tcgcore.printdeck(deck))
+            content.write(tcgcore.printdeck(deck,False))
         content.write("</div>\n")
     if len(medpriority) > 0:
         content.write("<div>\n<h2 class=\"collectingheader\">Medium priority</h2>\n")

indexgen.py

@@ -218,7 +218,7 @@ def indexgen():
         if sketch % 20 < 10:
             content.write("0" + str(sketch % 20))
         else:
-            content.write(sketch % 20)
+            content.write(str(sketch % 20))
         content.write(".gif\"></td>\n")
         if sketch > 19:
             content.write("<td><img src=\"/assets/sketch/20.gif\"></td>\n")
@@ -244,12 +244,14 @@ def indexgen():
             mastereddecks.append({"name":deck,"date":tcgcore.datemastered(deck)})
     mastereddecks = sorted(mastereddecks,key=lambda d: d["date"],reverse=True)
     if len(mastereddecks) > 0:
-        content.write("<h2>mastered decks</h2>\n<p>")
+        content.write("<h2>mastered decks</h2>\n<p id=\"masteredcarousel\">")
         masteredcount = 0
         for deck in mastereddecks:
             if masteredcount < variables.maxmastered:
                 content.write("<img src=\"/decks/" + deck["name"] + "/master.gif\" title=\"mastered " + deck["name"] + "\">")
             masteredcount += 1
+        if len(mastereddecks) > variables.maxmastered:
+            content.write(" <a href=\"mastered\">see all</a>")
         content.write("</p>\n")
     sigs = []
     for card in tcgcore.ownedcards():

tcgcore.py

@@ -120,16 +120,28 @@ def printcard(card):
         cardid = card[-2:]
         return "<img src=\"/decks/" + deck + "/" + cardid + ".gif\" title=\"" + card + "\" loading=\"lazy\">"
 
-def printdeck(deck):
+def printdeck(deck,fold=True):
-    deckstring = "<table class=\"decktable "
+    if fold:
+        deckstring = "<details class=\"deckwrap\">\n<summary>" + deck + " ["
+        if deckmastered(deck):
+            deckstring += datemastered(deck).strftime("%Y-%m-%d")
+        else:
+            deckstring += str(len(deckcards(deck))) + "/20"
+        deckstring += "]</summary>\n"
+    else:
+        deckstring = ""
+    deckstring += "<table class=\"decktable "
     with open("build/decks/" + deck + "/type") as thetype:
         decktype = thetype.read()
-    deckstring += decktype + "\">\n<thead>\n  <tr>\n    <th colspan=\"5\">" + deck
+    deckstring += decktype + "\">\n"
+    if not fold:
+        deckstring += "<thead>\n  <tr>\n    <th colspan=\"5\">" + deck + " ["
         if deckmastered(deck):
-        deckstring += " [" + datemastered(deck).strftime("%Y-%m-%d") + "]"
+            deckstring += datemastered(deck).strftime("%Y-%m-%d")
         else:
-        deckstring += " [" + str(len(deckcards(deck))) + "/20]"
+            deckstring += str(len(deckcards(deck))) + "/20"
-    deckstring += "</th>\n  </tr>\n</thead>\n<tbody>\n"
+        deckstring += "]</th>\n  </tr>\n</thead>\n"
+    deckstring += "<tbody>\n"
     test = 1
     while test < 21:
         if test % 5 == 1:
@@ -149,6 +161,8 @@ def printdeck(deck):
     if deckmastered(deck):
         deckstring += "  <tr>\n    <td colspan=\"5\" align=\"center\"><img src=\"/decks/" + deck + "/master.gif\" title=\"mastered " + deck + "\"><td>\n</tr>\n"
     deckstring += "</tbody>\n</table>\n"
+    if fold:
+        deckstring += "</details>\n"
     return deckstring
 
 def filterwrite(page,colour=False,sigs=False):