Change playcards to sumdets

backloggery.css

@@ -85,10 +85,7 @@ img {
 h1,h2 {
   font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
   font-variant:small-caps;
-  letter-spacing:2px
+  letter-spacing:2px;
-}
-
-h1 {
   border-bottom:1px solid var(--active-text);
   font-size:18px;
   margin:30px 0 10px;
@@ -245,14 +242,17 @@ div.profile main {
 .game-item {
   margin-bottom:-3px;
   overflow:hidden;
-  position:relative
+  position:relative;
 }
 
-.game-item>div:first-child {
+.game-item>summary {
+  cursor: pointer;
+}
+
+.game-item>summary:first-child {
   background-color:hsla(0,0%,100%,.05);
   border:2px solid rgba(0,0,0,.5);
   border-radius:4px;
-  cursor: default;
   -webkit-box-align:center;
   -ms-flex-align:center;
   align-items:center;
@@ -268,13 +268,13 @@ div.profile main {
   width:100%
 }
 
-.game-item>div:first-child>div {
+.game-item>summary:first-child>div {
   -webkit-box-flex:1;
   -ms-flex:1;
   flex:1
 }
 
-.game-item>div:first-child>.platform {
+.game-item>summary:first-child>.platform {
   background-color:var(--active-secondary);
   border-radius:3px 0 0 3px;
   color:var(--active-secondary-text);
@@ -283,32 +283,32 @@ div.profile main {
   overflow:hidden
 }
 
-.game-item>div:first-child>.platform img,.game-item>div:first-child>.platform p {
+.game-item>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
   opacity:.85
 }
 
-.game-item>div:first-child>.platform img {
+.game-item>summary:first-child>.platform img {
   position:relative;
   top:7px;
   width:35px
 }
 
-.game-item>div:first-child>.platform img.bw {
+.game-item>summary:first-child>.platform img.bw {
   -webkit-filter:var(--platform-bw);
   filter:var(--platform-bw)
 }
 
-.game-item>div:first-child>.status {
+.game-item>summary:first-child>.status {
   max-width:48px;
   padding:5px 9px
 }
 
-.game-item>div:first-child>.status img {
+.game-item>summary:first-child>.status img {
   margin-top:3px;
   max-width:32px
 }
 
-.game-item>div:first-child>.text {
+.game-item>summary:first-child>.text {
   -webkit-box-flex:5;
   -ms-flex-positive:5;
   flex-grow:5;
@@ -316,7 +316,7 @@ div.profile main {
   text-align:left
 }
 
-.game-item>div:first-child>.text>.title {
+.game-item>summary:first-child>.text>.title {
   font-family:Titillium Web,sans-serif;
   font-size:1.1rem;
   line-height:1.1rem;
@@ -324,7 +324,7 @@ div.profile main {
 }
 
 @supports(-webkit-line-clamp:1) {
-  .game-item>div:first-child>.text>.title {
+  .game-item>summary:first-child>.text>.title {
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:normal;
@@ -336,7 +336,7 @@ div.profile main {
 
 }
 
-.game-item>div:first-child>.text>.markdown {
+.game-item>summary:first-child>.text>.markdown {
   font-size:.7rem;
   max-height:32px;
   opacity:.75;
@@ -348,7 +348,7 @@ div.profile main {
 }
 
 @supports(-webkit-line-clamp:2) {
-  .game-item>div:first-child>.text>.markdown {
+  .game-item>summary:first-child>.text>.markdown {
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:normal;
@@ -360,13 +360,13 @@ div.profile main {
 
 }
 
-.game-item>div:first-child>.priority {
+.game-item>summary:first-child>.priority {
   max-width:56px;
   padding-right:10px;
   text-align:center
 }
 
-.game-item>div:first-child>.priority img {
+.game-item>summary:first-child>.priority img {
   margin-top:3px;
   max-width:32px;
   opacity:.5
@@ -374,11 +374,11 @@ div.profile main {
 
 @media screen and (max-width:520px) {
 
-  .game-item>div:first-child>.text>.title {
+  .game-item>summary:first-child>.text>.title {
     font-size:1rem
   }
 
-  .game-item>div:first-child>.status {
+  .game-item>summary:first-child>.status {
     padding:5px
   }
 
@@ -756,3 +756,106 @@ div.profile main {
   .library .unibar div:first-of-type span {
     margin-right:.5rem}
 }
+
+/* NEW */
+
+.game-item .game-info {
+  -webkit-box-align:start;
+  -ms-flex-align:start;
+  align-items:flex-start;
+  background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05)));
+  background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));
+  border-radius:0 0 5px 5px;
+  -webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
+  box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
+  margin:-10px 8px 15px 30px;
+  padding:10px;
+  position:relative
+}
+
+.game-item .game-info label {
+  font-size:12px;
+  font-weight:700;
+  letter-spacing:.5px;
+  margin-left:4px;
+  opacity:.9;
+  text-transform:uppercase
+}
+
+.game-item .game-info .markdown,.game-item .game-info p {
+  font-size:16px;
+  margin:0 0 12px .3rem;
+  padding:0
+}
+
+.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin:auto 15px;
+}
+
+.game-item .game-info .history {
+  -ms-flex-wrap:wrap;
+  flex-wrap:wrap;
+  width:100%
+}
+
+.game-item .game-info .history .list {
+  font-size:14px
+}
+
+.game-item .game-info .history .list>div {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex
+}
+
+.game-item .game-info .history .list>div>div:first-of-type {
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  margin-right:5px;
+  opacity:.65;
+  text-align:right
+}
+
+.game-item .game-info .history .list>div>div:last-of-type {
+  -webkit-box-flex:2;
+  -ms-flex:2;
+  flex:2
+}
+
+.game-item .game-info .box_2 {
+  margin-right:15px
+}
+
+.game-item .game-guest label {
+  opacity:.5
+}
+
+@media screen and (max-width:700px) {
+  .game-item .game-info {
+    margin-left:8px
+  }
+
+  .game-item .game-info .box_2 {
+    margin-right:0
+  }
+
+  .game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
+    display:block
+  }
+  
+  .game-item .game-info .data .box_1 div {
+    display:inline-block;
+    margin-right:1%;
+    width:48%
+  }
+  
+  
+}
+
+.history .box_1 {
+  width: 95%;
+}

games.py

@@ -178,10 +178,10 @@ decay = False
 def playcard(game,page):
     cardstring = ""
     if decay == True:
-        cardstring += "                  <div class=\"game-item decay\">\n"
+        cardstring += "                  <details class=\"game-item decay\">\n"
     else:
-        cardstring += "                  <div class=\"game-item\">\n"
+        cardstring += "                  <details class=\"game-item\">\n"
-    cardstring += "                    <div>\n                      <div class=\"platform\">\n                        <div>\n"
+    cardstring += "                    <summary>\n                      <div class=\"platform\">\n                        <div>\n"
     if game["console"] == "ps5":
         cardstring += "                          <img src=\"PS5.png\" title=\"PlayStation 5\" alt=\"PS5\" class=\"bw\">\n"
     elif game["console"] == "ps2":
@@ -252,7 +252,95 @@ def playcard(game,page):
                         cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <img src=\"nowplaying.png\" alt=\"⯈\" title=\"Now Playing\">\n                      </div>\n"
     except:
         cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
-    cardstring += "                    </div>\n                  </div>\n"
+    cardstring += "                    </summary>\n                    <div class=\"game-info game-guest\">\n                      <div class=\"data\">\n                        <div class=\"box_2\">\n"
+    try:
+        if len(game["recent"]) > 1:
+            cardstring += "                          <div>\n                            <label>Notes</label>\n                            <div class=\"markdown\">" + game["recent"] + "</div>\n                          </div>\n"
+    except:
+        pass
+    cardstring += "                          <div class=\"flex\">\n                            <div>\n                              <label>Status</label>\n                              <p>"
+    try:
+        if game["completed"]:
+            cardstring += "Completed"
+    except:
+        try:
+            if game["beaten"]:
+                cardstring += "Beaten"
+        except:
+            try:
+                if game["gameplay"]:
+                    if game["id"] in endlessgames:
+                        cardstring += "Endless"
+                    else:
+                        cardstring += "Unfinished"
+            except:
+                cardstring += "Unplayed"
+    cardstring += "</p>\n                            </div>\n                            <div>\n                              <label>Currently</label>\n                              <p>"
+    try:
+        if game["gameplay"]:
+            try:
+                if game["completed"]:
+                    if game["gameplay"] > game["completed"]:
+                        if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                            cardstring += "Not playing"
+                        else:
+                            cardstring += "Playing"
+                    else:
+                        cardstring += "Not playing"
+            except:
+                try:
+                    if game["beaten"]:
+                        if game["gameplay"] > game["beaten"]:
+                            if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                                cardstring += "Not playing"
+                            else:
+                                cardstring += "Playing"
+                        else:
+                            cardstring += "Not playing"
+                except:
+                    if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                        if game["id"] in endlessgames:
+                            cardstring += "Not playing"
+                        else:
+                            cardstring += "Paused"
+                    else:
+                        cardstring += "Playing"
+    except:
+        cardstring += "Not playing"
+    cardstring += "</p>\n                            </div>\n                          </div>\n                        </div>\n                        <div class=\"box_1 m-r0\">\n                          <div>\n                            <label>Platform</label>\n                            <p>"
+    if game["console"] == "ps5":
+        cardstring += "PlayStation 5"
+    elif game["console"] == "ps2":
+        cardstring += "PlayStation 2"
+    elif game["console"] == "ps3":
+        cardstring += "PlayStation 3"
+    elif game["console"] == "nintendo switch":
+        cardstring += "Nintendo Switch"
+    elif game["console"] == "nintendo ds":
+        cardstring += "Nintendo DS"
+    elif game["console"] == "nintendo 3ds":
+        cardstring += "Nintendo 3DS"
+    elif game["console"] == "xbox 360":
+        cardstring += "XBox 360"
+    elif game["console"] == "pc":
+        cardstring += "PC"
+    cardstring += "</p>\n                          </div>\n                          <div>\n                            <label>Last Updated</label>\n                            <p>" + game["lastupdate"].strftime("%Y-%m-%d") + "</p>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"history\">\n                        <div class=\"box_1\">\n                          <h2>Milestones</h2>\n                          <div class=\"list\">\n                            <div>\n                              <div>" + game["initialdate"].strftime("%Y-%m-%d") + "</div>\n                              <div>\n                                Added</div>\n                            </div>\n"
+    try:
+        if game["firstplayed"]:
+            cardstring += "                            <div>\n                              <div>" + game["firstplayed"].strftime("%Y-%m-%d") + "</div>\n                              <div>\n                                Started</div>\n                            </div>\n"
+    except:
+        pass
+    try:
+        if game["beaten"]:
+            cardstring += "                            <div>\n                              <div>" + game["beaten"].strftime("%Y-%m-%d") + "</div>\n                              <div>\n                                Beaten</div>\n                            </div>\n"
+    except:
+        pass
+    try:
+        if game["completed"]:
+            cardstring += "                            <div>\n                              <div>" + game["completed"].strftime("%Y-%m-%d") + "</div>\n                              <div>\n                                Completed</div>\n                            </div>\n"
+    except:
+        pass
+    cardstring += "                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </details>\n"
     if page == "main":
         writeindex.write(cardstring)
     elif page == "library":
@@ -392,7 +480,13 @@ if yearcompleted > 0:
 if yearendless > 0:
     writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(275, 39%, 32%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(yeartakeup) + " 100\">\n                          </circle>\n")
     
-writeindex.write("                        </svg>\n                      </div>\n                    </div>\n                    <div class=\"status-tally\">\n                      <div class=\"backlog-tally\">\n                        <div style=\"width: " + str(round(((backlog/total)*100),1)) + "%;\">\n                          <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>\n                        </div>\n                        <div style=\"width: " + str(100 - round(((backlog/total)*100),1)) + "%;\">\n                        </div>\n                      </div>\n")
+writeindex.write("                        </svg>\n                      </div>\n                    </div>\n                    <div class=\"status-tally\">\n                      <div class=\"backlog-tally\">\n                        <div style=\"width: " + str(round(((backlog/total)*100),1)) + "%;\">")
+if ((backlog/total)*100) > 50:
+    writeindex.write("\n                          <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>")
+writeindex.write("\n                        </div>\n                        <div style=\"width: " + str(100 - round(((backlog/total)*100),1)) + "%;\">")
+if ((backlog/total)*100) <= 50:
+    writeindex.write("\n                          <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>")
+writeindex.write("\n                        </div>\n                      </div>\n")
 
 compare = []
 compare.append(unplayed)