Working backlog and library HTML pages

backloggery.css

@@ -0,0 +1,758 @@
+a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,input,li,main,nav,ol,p,section,select,span,summary,table,textarea,ul {
+  border:0;
+  -webkit-box-sizing:border-box;
+  box-sizing:border-box;
+  font-size:100%;
+  margin:0;
+  outline:none;
+  padding:0;
+  vertical-align:baseline
+}
+
+:root {
+  --default-base:#424957;
+  --default-secondary:#272c34;
+  --default-secondary-50:rgba(40,44,52,0.5);
+  --default-accent:#f58d47;
+  --default-text:#fff;
+  --default-secondary-text:#fff;
+  --default-accent-text:#fff;
+  --default-accent-shadow:hsla(0,0%,0%,50%);
+  --retro-border:url(/img/border.png);
+  --active-base:var(--default-base);
+  --active-secondary:var(--default-secondary);
+  --active-secondary-50:var(--default-secondary-50);
+  --active-accent:var(--default-accent);
+  --active-text:var(--default-text);
+  --active-secondary-text:var(--default-secondary-text);
+  --active-secondary-text-25:hsla(0,0%,100%,0.25);
+  --active-accent-text:var(--default-accent-text);
+  --unplayed-color:#562929;
+  --unfinished-color:#bd7828;
+  --beaten-color:#d1d1d1;
+  --completed-color:#ecd579;
+  --endless-color:#573271;
+  --none-color:hsla(264,27%,11%,40%);
+  --follow-color:#17cf17;
+  --mention-color:#cf1717;
+  --dm-color:#cf17cf;
+  --news-color:#1742cf
+}
+
+html {
+  color:var(--active-text);
+  font-family:Lato,arial,helvetica,sans-serif;
+  font-size:.9rem;
+  overflow-x:hidden;
+  overflow-y:overlay;
+  scroll-behavior:smooth
+}
+
+body {
+  background-attachment:fixed;
+  background-color:var(--active-base);
+  margin:0;
+  padding:0
+}
+
+#app>div:last-of-type {
+  display:grid;
+  grid-gap:0 10px;
+  grid-template-columns:repeat(12,1fr);
+  grid-template-rows:auto;
+  grid-template-areas:"card card card card card card card card card card card card" "side side side side side side side side side side side side" "main main main main main main main main main main main main";
+  max-width:1200px;
+  margin: 0 auto;
+  padding:0 2vw 0 1vw
+}
+
+section {
+  padding:2vh 1vw 2vh
+}
+
+a {
+  text-decoration:none
+}
+
+.link,a {
+  color:var(--active-text)
+}
+
+img {
+  max-width:100%
+}
+
+h1,h2 {
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
+  font-variant:small-caps;
+  letter-spacing:2px
+}
+
+h1 {
+  border-bottom:1px solid var(--active-text);
+  font-size:18px;
+  margin:30px 0 10px;
+  padding-left:5px
+}
+
+h1:first-of-type {
+  margin:0 0 15px
+}
+
+svg,svg text {
+  fill:var(--active-text)
+}
+
+svg text {
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif
+}
+
+.decay {
+  opacity:.5
+}
+
+.decay:active,.decay:focus,.decay:focus-within,.decay:hover {
+  opacity:1
+}
+
+.tabs {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  /* margin-top:3rem; */
+  padding:.3rem 0
+}
+
+.tabs a,.tabs div {
+  background-color:var(--active-secondary-50);
+  border-bottom:2px solid var(--active-text);
+  color:var(--active-secondary-text);
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
+  font-size:1rem;
+  letter-spacing:1px;
+  opacity:.7;
+  padding:.5rem 0 .4rem;
+  text-align:center;
+  text-transform:uppercase;
+  white-space:nowrap
+}
+
+.tabs a:hover,.tabs div:hover {
+  opacity:1
+}
+
+.tabs a,.tabs a.router-link-active {
+  border-top:2px solid var(--active-text)
+}
+
+.tabs a.router-link-active {
+  background:var(--active-accent);
+  border-bottom:2px solid var(--active-text);
+  color:var(--active-accent-text);
+  font-weight:700;
+  opacity:1;
+  position:relative
+}
+
+.tabs a.router-link-active a {
+  border:none;
+  display:block;
+  padding-right:10%;
+  position:absolute;
+  top:-7px;
+  right:0;
+  text-align:right;
+  width:100%
+}
+
+@media screen and (max-width:700px) {
+  .tabs a {
+    font-size:.8rem
+  }
+}
+
+.Added,.unplayed,.Unplayed {
+  background-color:var(--unplayed-color)!important;
+  color:hsla(0,0%,100%,.75);
+  text-shadow:none
+}
+
+.Started,.unfinished,.Unfinished {
+  background-color:var(--unfinished-color)!important;
+  color:hsla(0,0%,100%,.75);
+  text-shadow:none
+}
+
+.Beat,.beaten,.Beaten {
+  background-color:var(--beaten-color)!important;
+  color:rgba(0,0,0,.75);
+  text-shadow:none
+}
+
+.completed,.Completed {
+  background-color:var(--completed-color)!important;
+  color:rgba(0,0,0,.75);
+  text-shadow:none
+}
+
+.endless,.Endless {
+  background-color:var(--endless-color)!important;
+  color:rgba(0,0,100%,.75);
+  text-shadow:none
+}
+
+.none,.None {
+  background-color:var(--none-color)!important;
+  text-shadow:none
+}
+
+.none,.None,.Playing {
+  color:hsla(0,0%,100%,.75)
+}
+
+.Playing {
+  background-color:#202020!important
+}
+
+.borderless {
+  border:none!important
+}
+
+.markdown {
+  padding:0 .25rem;
+  white-space:pre-wrap
+}
+
+div.profile main {
+  grid-area:main
+}
+
+@media screen and (min-width:800px) {
+  div.profile {
+    grid-template-areas:"card card card card card card card card card card card card" "side side side side main main main main main main main main"!important
+  }
+
+  .tabs {
+    margin-top:0
+  }
+
+
+}
+
+.game-item {
+  margin-bottom:-3px;
+  overflow:hidden;
+  position:relative
+}
+
+.game-item>div: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;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin-bottom:10px;
+  min-height:54px;
+  max-height:54px;
+  overflow:hidden;
+  position:relative;
+  text-align:center;
+  width:100%
+}
+
+.game-item>div:first-child>div {
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1
+}
+
+.game-item>div:first-child>.platform {
+  background-color:var(--active-secondary);
+  border-radius:3px 0 0 3px;
+  color:var(--active-secondary-text);
+  min-height:50px;
+  max-width:50px;
+  overflow:hidden
+}
+
+.game-item>div:first-child>.platform img,.game-item>div:first-child>.platform p {
+  opacity:.85
+}
+
+.game-item>div:first-child>.platform img {
+  position:relative;
+  top:7px;
+  width:35px
+}
+
+.game-item>div:first-child>.platform img.bw {
+  -webkit-filter:var(--platform-bw);
+  filter:var(--platform-bw)
+}
+
+.game-item>div:first-child>.status {
+  max-width:48px;
+  padding:5px 9px
+}
+
+.game-item>div:first-child>.status img {
+  margin-top:3px;
+  max-width:32px
+}
+
+.game-item>div:first-child>.text {
+  -webkit-box-flex:5;
+  -ms-flex-positive:5;
+  flex-grow:5;
+  padding:3px 4px;
+  text-align:left
+}
+
+.game-item>div:first-child>.text>.title {
+  font-family:Titillium Web,sans-serif;
+  font-size:1.1rem;
+  line-height:1.1rem;
+  margin:0 0 -3px
+}
+
+@supports(-webkit-line-clamp:1) {
+  .game-item>div:first-child>.text>.title {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:normal;
+    display:-webkit-box;
+    -webkit-line-clamp:1;
+    -webkit-box-orient:vertical
+  }
+
+
+}
+
+.game-item>div:first-child>.text>.markdown {
+  font-size:.7rem;
+  max-height:32px;
+  opacity:.75;
+  padding:2px 1px;
+  width:auto;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  overflow:hidden
+}
+
+@supports(-webkit-line-clamp:2) {
+  .game-item>div:first-child>.text>.markdown {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:normal;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical
+  }
+
+
+}
+
+.game-item>div:first-child>.priority {
+  max-width:56px;
+  padding-right:10px;
+  text-align:center
+}
+
+.game-item>div:first-child>.priority img {
+  margin-top:3px;
+  max-width:32px;
+  opacity:.5
+}
+
+@media screen and (max-width:520px) {
+
+  .game-item>div:first-child>.text>.title {
+    font-size:1rem
+  }
+
+  .game-item>div:first-child>.status {
+    padding:5px
+  }
+
+}
+
+.donut {
+  display:block
+}
+
+.platform-card {
+  border:2px solid rgba(0,0,0,.5);
+  border-radius:6px;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  font-weight:700;
+  margin:0 0 7px;
+  text-align:center;
+  width:100%
+}
+
+.platform-card a {
+  cursor: default;
+}
+
+.platform-card .bars {
+  border-radius:0 4px 4px 0;
+  display:-webkit-inline-box;
+  display:-ms-inline-flexbox;
+  display:inline-flex;
+  border-left:2px solid rgba(0,0,0,.5);
+  -webkit-box-flex:9;
+  -ms-flex:9;
+  flex:9
+}
+
+.platform-card .bars a {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  -webkit-box-pack:center;
+  -ms-flex-pack:center;
+  justify-content:center;
+  border-left:2px solid rgba(0,0,0,.5);
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  font-size:20px;
+  margin:0;
+  min-width:2rem;
+  padding:0 3px;
+  -webkit-transition:-webkit-box-flex .5s ease-in-out;
+  transition:-webkit-box-flex .5s ease-in-out;
+  transition:flex .5s ease-in-out;
+  transition:flex .5s ease-in-out,-webkit-box-flex .5s ease-in-out,-ms-flex .5s ease-in-out
+}
+
+.platform-card .bars a:first-of-type {
+  border-left:0 solid rgba(0,0,0,.5)
+}
+
+.platform-card .bars a.remove_flex {
+  border:none;
+  -webkit-box-flex:0;
+  -ms-flex:0;
+  flex:0;
+  min-width:unset;
+  padding:0
+}
+
+.platform-card .abbr,.platform-card .title {
+  background:var(--active-secondary);
+  border-radius:4px 0 0 4px;
+  color:var(--active-secondary-text);
+  -webkit-box-pack:center;
+  -ms-flex-pack:center;
+  justify-content:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:4;
+  -ms-flex:4;
+  flex:4;
+  font-size:17px;
+  font-weight:700;
+  min-width:50px;
+  overflow:hidden;
+  padding:5px;
+  white-space:nowrap
+}
+
+.platform-card .abbr {
+  display:none
+}
+
+.platform-card .total {
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  background:var(--active-secondary);
+  border-radius:0 4px 4px 0;
+  color:var(--active-secondary-text);
+  -webkit-box-pack:right;
+  -ms-flex-pack:right;
+  justify-content:right;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:2;
+  -ms-flex:2;
+  flex:2;
+  font-size:17px;
+  font-weight:700;
+  overflow:hidden;
+  padding-right:10px;
+  white-space:nowrap;
+  width:100px
+}
+
+.platform-card .total span {
+  margin-left:6px
+}
+
+@media screen and (max-width:1024px) {
+  .platform-card .title {
+    display:none
+  }
+
+  .platform-card .abbr {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-flex:1;
+    -ms-flex:1;
+    flex:1;
+    min-width:80px
+  }
+
+  .platform-card .bars a:last-of-type {
+    width:50px
+  }
+
+  .platform-card .bars a:last-of-type span {
+    display:none
+  }
+
+
+}
+
+.backlog-breakdown {
+  display:block;
+  text-align:center;
+  -ms-flex-wrap:wrap;
+  flex-wrap:wrap
+}
+
+.backlog-breakdown .backlog-charts {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -ms-flex-direction:column;
+  flex-direction:column;
+  width:100%
+}
+
+.backlog-breakdown .mem-sum {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1
+}
+
+.backlog-breakdown .mem-sum .donut {
+  display:inline-block;
+  margin:0 4vw;
+  min-width:44%
+}
+
+.status-tally {
+  -webkit-box-flex:4;
+  -ms-flex:4;
+  flex:4;
+  font-size:18px;
+  margin:15px 0 25px 25px
+}
+
+.status-tally a:first-of-type div {
+  padding-top:8px!important
+}
+
+.status-tally a {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  margin:-5px 20px -5px 0;
+  cursor: default;
+}
+
+.status-tally a div {
+  padding:1px 3px;
+  vertical-align:middle
+}
+
+.status-tally a div img {
+  max-width:32px
+}
+
+.status-tally a div:first-child {
+  text-align:right;
+  width:60px
+}
+
+.status-tally a div:nth-child(2) {
+  border-right:2px solid rgba(0,0,0,.5);
+  padding:4px 5px 4px 0;
+  width:40px
+}
+
+.status-tally a div:last-child {
+  -webkit-box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
+  box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  padding:4px 0;
+  width:99%
+}
+
+.status-tally a div:last-child div {
+  -webkit-animation:width_in 1s ease-in-out;
+  animation:width_in 1s ease-in-out;
+  border:2px solid rgba(0,0,0,.5);
+  border-left:none;
+  border-radius:0 4px 4px 0;
+  display:block;
+  font-size:14px;
+  font-weight:700;
+  overflow:hidden;
+  padding:7px 0 7px 7px;
+  text-align:left;
+  -webkit-transition:width .5s ease-in-out;
+  transition:width .5s ease-in-out;
+  white-space:nowrap
+}
+
+.status-tally img {
+  max-width:none;
+  position:relative;
+  top:2px
+}
+
+.status-tally .backlog-tally {
+  border:2px solid rgba(0,0,0,.5);
+  border-radius:4px;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin-bottom:5px
+}
+
+.status-tally .backlog-tally div {
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  font-size:1rem;
+  font-weight:700;
+  height:2.35rem;
+  text-align:center;
+  -webkit-transition:width .5s ease-in-out;
+  transition:width .5s ease-in-out
+}
+
+.status-tally .backlog-tally div:first-of-type {
+  border-radius:4px 0 0 4px;
+  border-right:2px solid rgba(0,0,0,.5);
+  background-color:var(--active-accent);
+  color:var(--active-accent-text)
+}
+
+.status-tally .backlog-tally div:last-of-type {
+  border-radius:0 4px 4px 0;
+  background-color:var(--active-secondary);
+  color:var(--active-secondary-text)
+}
+
+.status-tally .backlog-tally div span {
+  width:100%
+}
+
+@media screen and (min-width:1024px) {
+  .backlog-breakdown,.backlog-breakdown .backlog-charts {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex
+  }
+
+  .backlog-breakdown .backlog-charts {
+    -webkit-box-orient:horizontal;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:row;
+    flex-direction:row;
+    width:100%
+  }
+
+  .backlog-breakdown .mem-sum {
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:column;
+    flex-direction:column;
+    min-width:160px;
+    max-width:160px
+  }
+
+  .backlog-breakdown .mem-sum .donut {
+    margin:0
+  }
+
+  .backlog-breakdown .mem-sum .donut:last-of-type {
+    position:relative;
+    top:-10px
+  }
+
+}
+
+.library .unibar {
+  border:2px solid rgba(0,0,0,.5);border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}
+
+.library .unibar div {
+  border-left:2px solid rgba(0,0,0,.5);-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.25rem;font-weight:700;line-height:1.25rem;padding:.5rem;text-align:center}
+
+.library .unibar div:first-of-type {
+  background-color:var(--active-secondary);border:none;border-radius:6px 0 0 6px;color:var(--active-secondary-text);max-width:30%;padding:.5rem 1rem;white-space:nowrap}
+
+.library .unibar div:first-of-type span {
+  margin-right:1rem}
+
+.library .unibar div:last-of-type {
+  border-radius:0 6px 6px 0}
+
+.library .unibar div.unplayed {
+  background-color:var(--unplayed-color)}
+
+.library .unibar div.unfinished {
+  background-color:var(--unfinished-color)}
+
+.library .unibar div.beaten {
+  background-color:var(--beaten-color)}
+
+.library .unibar div.completed {
+  background-color:var(--completed-color)}
+
+.library .unibar div.endless {
+  background-color:var(--endless-color)}
+
+.library .library-list {
+  margin-top:20px}
+
+@media screen and (max-width:600px) {
+  .library .unibar div {
+    font-size:3vw}
+
+  .library .unibar div:first-of-type span {
+    margin-right:.5rem}
+}

games.py

@@ -1,16 +1,26 @@
-import os, orgparse, re
+import orgparse,os,re
 from pathlib import Path
-from datetime import datetime
+from datetime import datetime,timedelta
 
 home = str(Path.home())
 thisyear = datetime.now().strftime("%Y")
 
 basedir = home + "/Documents/drive/org/journal/"
 
+if os.path.exists("backlog.html"):
+    os.remove("backlog.html")
+writeindex = open("backlog.html", "a")
+
+if os.path.exists("library.html"):
+    os.remove("library.html")
+writelibrary = open("library.html", "a")
+
 year = 2016
 
 concernedfiles = []
 
+endlessgames = ["the sims 4 (pc)","american truck simulator (pc)","civilization iv (pc)","final fantasy xiv (pc)","medieval ii: total war (pc)","tabletop simulator (pc)","train simulator 2020 (pc)"]
+
 while year < int(thisyear) + 1:
     month = 0
     while month < 13:
@@ -49,22 +59,34 @@ for file in concernedfiles:
                             status = "existing"
                         console = (re.findall("\(.*\)",game.heading)[0])[1:-1]
                         if status == "new":
-                            games.append({"id":game.heading,"name":name,"initialdate":dateobj,"console":console,game.parent.heading:dateobj,"recent":game.body,"lastupdate":dateobj})
+                            thedict = {"id":game.heading,"name":name,"initialdate":dateobj,"console":console,game.parent.heading:dateobj,"recent":game.body,"lastupdate":dateobj}
+                            if game.parent.heading != "acquired":
+                                thedict.update({"firstplayed":dateobj})
+                            games.append(thedict)
                         else:
-                            thedict = {"id":game.heading,game.parent.heading:dateobj,"lastupdate":dateobj}
+                            twodict = {"id":game.heading,game.parent.heading:dateobj,"lastupdate":dateobj}
                             if len(game.body) > 1:
-                                thedict.update({"recent":game.body})
-                            holding.append(thedict)
+                                twodict.update({"recent":game.body})
+                            for origgame in games:
+                                if twodict["id"] == origgame["id"]:
+                                    try:
+                                        if origgame["firstplayed"]:
+                                            playedbefore = True
+                                    except:
+                                        playedbefore = False
+                            if playedbefore == False:
+                                twodict.update({"firstplayed":dateobj})
+                            holding.append(twodict)
+                        for gameupdate in holding:
+                            for origgame in games:
+                                if gameupdate["id"] == origgame["id"]:
+                                    gamemerge = {**origgame, **gameupdate}
+                                    games.remove(origgame)
+                                    games.insert(0,gamemerge)
+                                    holding.remove(gameupdate)
     except:
         pass
 
-for gameupdate in holding:
-    for origgame in games:
-        if gameupdate["id"] == origgame["id"]:
-            gamemerge = {**origgame, **gameupdate}
-            games.remove(origgame)
-            games.insert(0,gamemerge)
-
 games = sorted(games,key=lambda d: d["lastupdate"])
 
 ps5list = []
@@ -107,8 +129,12 @@ for game in games:
     if game["console"] == "nintendo 3ds":
         threedslist.append(game)
 
+writeindex.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--active-base: #364563; --active-text: #FFFFFF; --active-text-50: #FFFFFF60; --active-text-25: #FFFFFF30; --active-secondary: #222a3a; --active-secondary-50: #222a3a80; --active-secondary-text: #FFFFFF; --active-secondary-text-50: #FFFFFF70; --active-secondary-text-25: #FFFFFF30; --active-accent: #00fffb; --active-accent-75: #00fffbc0; --active-accent-text: #000000DD; --beaten-color: hsla(0, 0%, 82%, 0.9); --completed-color: hsla(48, 80%, 82%, 0.9); --unplayed-color: hsla(200, 30%, 30%, 0.9); --unfinished-color: hsla(0, 38%, 35%, 0.9); --endless-color: hsla(275, 39%, 32%, 0.9); --platform-bw: none; --active-accent-shadow: #FFFFFF66; --retro-border: url('/img/border.png');\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <meta name=\"theme-color\" content=\"#424957\">\n    <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n    <link href=\"https://fonts.googleapis.com/css?family=Lato|Teko|Titillium+Web\" rel=\"stylesheet\">\n    <title>Selfhostery etc.</title>\n    <link href=\"backloggery.css\" rel=\"stylesheet\">\n  </head>\n  <body>\n    <div id=\"app\">\n      <div class=\"profile\">\n        <main>\n          <section>\n            <div class=\"tabs\">\n              <a href=\"\" class=\"router-link-exact-active router-link-active\" aria-current=\"page\">Backlog</a>\n              <a href=\"\" class=\"\">Library</a>\n              <a href=\"\" class=\"\">History</a>\n            </div>\n")
+
 # NOW PLAYING
 
+writeindex.write("            <section>\n              <div>\n                <h1>Now Playing</h1>\n                <div class=\"now-playing\">\n")
+
 playingnow = []
 
 def nowplaying(consolelist):
@@ -133,9 +159,12 @@ def nowplaying(consolelist):
                                 state = "beaten"
                     except:
                         playing = True
-                        state = "playing"
+                        if thegame["id"] in endlessgames:
+                            state = "endless"
+                        else:
+                            state = "playing"
             if playing:
-                playingnow.append({"console":thegame["console"],"name":thegame["name"],"date":thegame["gameplay"],"state":state,"note":thegame["recent"]})
+                playingnow.append({"console":thegame["console"],"name":thegame["name"],"date":thegame["gameplay"],"state":state,"recent":thegame["recent"],"gameplay":thegame["gameplay"],"id":thegame["id"]})
         except:
             pass
 
@@ -150,32 +179,104 @@ nowplaying(xbox360list)
 
 playingnow = sorted(playingnow,key=lambda d: d["date"],reverse=True)
 
-for game in playingnow:
-    if len(game["note"]) > 1:
-        print(game["console"] + " → " + game["name"] + " (" + game["state"] + "): " + game["note"])
+decay = False
+
+def playcard(game,page):
+    cardstring = ""
+    if decay == True:
+        cardstring += "                  <div class=\"game-item decay\">\n"
     else:
-        print(game["console"] + " → " + game["name"] + " (" + game["state"] + ")")
+        cardstring += "                  <div class=\"game-item\">\n"
+    cardstring += "                    <div>\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":
+        cardstring += "                          <img src=\"PS2.png\" title=\"PlayStation 2\" alt=\"PS2\" class=\"bw\">\n"
+    elif game["console"] == "ps3":
+        cardstring += "                          <img src=\"PS3.png\" title=\"PlayStation 3\" alt=\"PS3\" class=\"bw\">\n"
+    elif game["console"] == "nintendo switch":
+        cardstring += "                          <img src=\"Switch.png\" title=\"Nintendo Switch\" alt=\"Switch\" class=\"bw\">\n"
+    elif game["console"] == "nintendo ds":
+        cardstring += "                          <img src=\"NDS.png\" title=\"Nintendo DS\" alt=\"DS\" class=\"bw\">\n"
+    elif game["console"] == "nintendo 3ds":
+        cardstring += "                          <img src=\"3DS.png\" title=\"Nintendo 3DS\" alt=\"3DS\" class=\"bw\">\n"
+    elif game["console"] == "xbox 360":
+        cardstring += "                          <img src=\"360.png\" title=\"Xbox 360\" alt=\"Xbox360\" class=\"bw\">\n"
+    elif game["console"] == "pc":
+        cardstring += "                          <img src=\"PC.png\" title=\"PC\" alt=\"PC\" class=\"bw\">\n"
+    cardstring += "                        </div>\n                      </div>\n                      <div class=\"status\">\n"
+    try:
+        if game["completed"]:
+            cardstring += "                        <img src=\"C.png\" alt=\"C\" title=\"Completed\">\n"
+    except:
+        try:
+            if game["beaten"]:
+                cardstring += "                        <img src=\"B.png\" alt=\"B\" title=\"Beaten\">\n"
+        except:
+            try:
+                if game["gameplay"]:
+                    if game["id"] in endlessgames:
+                        cardstring += "                        <img src=\"E.png\" alt=\"E\" title=\"Endless\">\n"
+                    else:
+                        cardstring += "                        <img src=\"UF.png\" alt=\"UF\" title=\"Unfinished\">\n"
+            except:
+                cardstring += "                        <img src=\"UP.png\" alt=\"UP\" title=\"Unplayed\">\n"
+    cardstring += "                      </div>\n                      <div class=\"text\">\n                        <div class=\"title\">" + game["name"] + "</div>\n"
+    try:
+        if len(game["recent"]) > 1:
+            cardstring += "                        <div class=\"markdown\">" + game["recent"] + "</div>\n"
+    except:
+        pass
+    try:
+        if game["gameplay"]:
+            try:
+                if game["completed"]:
+                    if game["gameplay"] > game["completed"]:
+                        if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                            cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
+                        else:
+                            cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <img src=\"nowplaying.png\" alt=\"⯈\" title=\"Now Playing\">\n                      </div>\n"
+                    else:
+                        cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
+            except:
+                try:
+                    if game["beaten"]:
+                        if game["gameplay"] > game["beaten"]:
+                            if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                                cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
+                            else:
+                                cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <img src=\"nowplaying.png\" alt=\"⯈\" title=\"Now Playing\">\n                      </div>\n"
+                        else:
+                            cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
+                except:
+                    if game["gameplay"] < (datetime.now() - timedelta(days=180)):
+                        if game["id"] in endlessgames:
+                            cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <span title=\"Normal\"/>\n                      </div>\n"
+                        else:
+                            cardstring += "                      </div>\n                      <div class=\"priority\">\n                        <img src=\"paused.png\" alt=\"⏸\" title=\"Paused\">\n                      </div>\n"
+                    else:
+                        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"
+    if page == "main":
+        writeindex.write(cardstring)
+    elif page == "library":
+        writelibrary.write(cardstring)
+
+for game in playingnow:
+    playcard(game,"main")
+    decay = True
+    
+writeindex.write("                </div>\n")
 
 # BACKLOG BREAKDOWN
 
-print("Total Games: " + str(len(games)))
-
-yeargames = 0
-for game in games:
-    if int(game["initialdate"].year) == int(thisyear):
-        try:
-            if game["completed"]:
-                pass
-        except:
-            try:
-                if game["beaten"]:
-                    pass
-            except:
-                yeargames += 1
-print(thisyear + " Backlog: " + str(yeargames))            
+writeindex.write("                <h1>Backlog Breakdown</h1>\n                <div class=\"backlog-breakdown\">\n                  <div class=\"backlog-charts\">\n                    <div class=\"mem-sum\">\n                      <div class=\"donut\">\n                        <svg viewBox=\"0 0 42 42\">\n                          <text x=\"21\" y=\"17.5\" style=\"font-size: 3.5px; opacity: 0.75; text-anchor: middle;\">Total Games</text>\n                          <text x=\"21\" y=\"27\" style=\"font-size: 10px; text-anchor: middle;\">" + str(len(games)) + "</text>\n                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"4\" stroke=\"#000000c0\" fill=\"transparent\">\n                          </circle>\n")
 
 completed = 0
 beaten = 0
+endless = 0
 unfinished = 0
 total = len(games)
 if total > 0:
@@ -190,29 +291,102 @@ if total > 0:
             except:
                 try:
                     if game["gameplay"]:
-                        unfinished += 1
+                        if game["id"] in endlessgames:
+                            endless += 1
+                        else:
+                            unfinished += 1
                 except:
                     pass
-unplayed = total - (completed + beaten + unfinished)
+unplayed = total - (completed + beaten + unfinished + endless)
 backlog = unfinished + unplayed
-print("Active Backlog • " + str(backlog) + " • " + str(round(((backlog/total)*100),1)) + "%")
+takeup = 100
 if unplayed > 0:
-    print(str(unplayed) + " – " + str(round(((unplayed/total)*100),1)) + "% Unplayed")
+    writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(200, 30%, 30%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(takeup) + " 100\">\n                          </circle>\n")
+    takeup = takeup - round(((unplayed/total)*100),1)
 if unfinished > 0:
-    print(str(unfinished) + " – " + str(round(((unfinished/total)*100),1)) + "% Unfinished")
+    writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(0, 38%, 35%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(takeup) + " 100\">\n                          </circle>\n")
+    takeup = takeup - round(((unfinished/total)*100),1)
 if beaten > 0:
-    print(str(beaten) + " – " + str(round(((beaten/total)*100),1)) + "% Beaten")
+    writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(0, 0%, 82%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(takeup) + " 100\">\n                          </circle>\n")
+    takeup = takeup - round(((beaten/total)*100),1)
 if completed > 0:
-    print(str(completed) + " – " + str(round(((completed/total)*100),1)) + "% Completed")
+    writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(48, 75%, 70%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(takeup) + " 100\">\n                          </circle>\n")
+    takeup = takeup - round(((completed/total)*100),1)
+if endless > 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(takeup) + " 100\">\n                          </circle>\n")
+
+yeargames = 0
+yearplaying = 0
+for game in games:
+    if int(game["initialdate"].year) == int(thisyear):
+        try:
+            if game["completed"]:
+                pass
+        except:
+            try:
+                if game["beaten"]:
+                    pass
+            except:
+                yeargames += 1
+                try:
+                    if game["gameplay"]:
+                        yearplaying += 1
+                except:
+                    pass
+
+writeindex.write("                        </svg>\n                      </div>\n                      <div class=\"donut\">\n                        <svg viewBox=\"0 0 42 42\">\n                          <text x=\"21\" y=\"17.5\" style=\"font-size: 3.5px; opacity: 0.75; text-anchor: middle;\">" + thisyear + " Backlog</text>\n                          <text x=\"21\" y=\"27\" style=\"font-size: 10px; text-anchor: middle;\">" + str(yeargames) + "</text>\n                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"4\" stroke=\"#000000c0\" fill=\"transparent\">\n                          </circle>\n                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(200, 30%, 30%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"100 100\">\n                          </circle>\n")
+if yearplaying > 0:
+    writeindex.write("                          <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(0, 38%, 35%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(100 * yeargames / yearplaying) + " 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")
+
+compare = []
+compare.append(unplayed)
+compare.append(unfinished)
+compare.append(beaten)
+compare.append(completed)
+compare.append(endless)
+maxvalue = max(compare)
+
+if unplayed / maxvalue > 0.5:
+    writeindex.write("                      <a>\n                        <div>" + str(unplayed) + "</div>\n                        <div>\n                          <img src=\"UP.png\">\n                        </div>\n                        <div>\n                          <div class=\"Unplayed\" style=\"width: calc(100% * (" + str(unplayed) + " / " + str(maxvalue) + "));\">" + str(round(((unplayed/total)*100),1)) + "% Unplayed</div>\n                        </div>\n                      </a>\n")
+else:
+    writeindex.write("                      <a>\n                        <div>" + str(unplayed) + "</div>\n                        <div>\n                          <img src=\"UP.png\">\n                        </div>\n                        <div>\n                          <div class=\"Unplayed\" style=\"width: calc(100% * (" + str(unplayed) + " / " + str(maxvalue) + "));\">\n                          </div>\n                          <div class=\"borderless\">" + str(round(((unplayed/total)*100),1)) + "% Unplayed</div>\n                        </div>\n                      </a>\n")
+    
+if unfinished / maxvalue > 0.5:
+    writeindex.write("                      <a>\n                        <div>" + str(unfinished) + "</div>\n                        <div>\n                          <img src=\"UF.png\">\n                        </div>\n                        <div>\n                          <div class=\"Unfinished\" style=\"width: calc(100% * (" + str(unfinished) + " / " + str(maxvalue) + "));\">" + str(round(((unfinished/total)*100),1)) + "% Unfinished</div>\n                        </div>\n                      </a>\n")
+else:
+    writeindex.write("                      <a>\n                        <div>" + str(unfinished) + "</div>\n                        <div>\n                          <img src=\"UF.png\">\n                        </div>\n                        <div>\n                          <div class=\"Unfinished\" style=\"width: calc(100% * (" + str(unfinished) + " / " + str(maxvalue) + "));\">\n                          </div>\n                          <div class=\"borderless\">" + str(round(((unfinished/total)*100),1)) + "% Unfinished</div>\n                        </div>\n                      </a>\n")
+
+if beaten / maxvalue > 0.5:
+    writeindex.write("                      <a>\n                        <div>" + str(beaten) + "</div>\n                        <div>\n                          <img src=\"B.png\">\n                        </div>\n                        <div>\n                          <div class=\"Beaten\" style=\"width: calc(100% * (" + str(beaten) + " / " + str(maxvalue) + "));\">" + str(round(((beaten/total)*100),1)) + "% Beaten</div>\n                        </div>\n                      </a>\n")
+else:
+    writeindex.write("                      <a>\n                        <div>" + str(beaten) + "</div>\n                        <div>\n                          <img src=\"B.png\">\n                        </div>\n                        <div>\n                          <div class=\"Beaten\" style=\"width: calc(100% * (" + str(beaten) + " / " + str(maxvalue) + "));\">\n                          </div>\n                          <div class=\"borderless\">" + str(round(((beaten/total)*100),1)) + "% Beaten</div>\n                        </div>\n                      </a>\n")
+    
+if completed / maxvalue > 0.5:
+    writeindex.write("                      <a>\n                        <div>" + str(completed) + "</div>\n                        <div>\n                          <img src=\"C.png\">\n                        </div>\n                        <div>\n                          <div class=\"Completed\" style=\"width: calc(100% * (" + str(completed) + " / " + str(maxvalue) + "));\">" + str(round(((completed/total)*100),1)) + "% Completed</div>\n                        </div>\n                      </a>\n")
+else:
+    writeindex.write("                      <a>\n                        <div>" + str(completed) + "</div>\n                        <div>\n                          <img src=\"C.png\">\n                        </div>\n                        <div>\n                          <div class=\"Completed\" style=\"width: calc(100% * (" + str(completed) + " / " + str(maxvalue) + "));\">\n                          </div>\n                          <div class=\"borderless\">" + str(round(((completed/total)*100),1)) + "% Completed</div>\n                        </div>\n                      </a>\n")
+
+if endless / maxvalue > 0.5:
+    writeindex.write("                      <a>\n                        <div>" + str(endless) + "</div>\n                        <div>\n                          <img src=\"E.png\">\n                        </div>\n                        <div>\n                          <div class=\"Endless\" style=\"width: calc(100% * (" + str(endless) + " / " + str(maxvalue) + "));\">" + str(round(((endless/total)*100),1)) + "% Endless</div>\n                        </div>\n                      </a>\n")
+else:
+    writeindex.write("                      <a>\n                        <div>" + str(endless) + "</div>\n                        <div>\n                          <img src=\"E.png\">\n                        </div>\n                        <div>\n                          <div class=\"Endless\" style=\"width: calc(100% * (" + str(endless) + " / " + str(maxvalue) + "));\">\n                          </div>\n                          <div class=\"borderless\">" + str(round(((endless/total)*100),1)) + "% Endless</div>\n                        </div>\n                      </a>\n")
+    
+writeindex.write("                    </div>\n                  </div>\n                </div>")
 
 # PLATFORM SUMMARY
 
-def liststats(console,consolelist):
+writeindex.write("                <h1>Platform Summary</h1>\n                <div class=\"platform-summary\">\n")
+
+def liststats(title,abbr,consolelist):
     completed = 0
     beaten = 0
+    endless = 0
     unfinished = 0
     total = len(consolelist)
     if total > 0:
+        writeindex.write("                  <div class=\"platform-card\">\n                    <a class=\"title\">" + title + "</a>\n                    <a class=\"abbr\">" + abbr + "</a>\n                    <div class=\"bars\">\n")
         for game in consolelist:
             try:
                 if game["completed"]:
@@ -224,62 +398,131 @@ def liststats(console,consolelist):
                 except:
                     try:
                         if game["gameplay"]:
-                            unfinished += 1
+                            if game["id"] in endlessgames:
+                                endless += 1
+                            else:
+                                unfinished += 1
                     except:
                         pass
         unplayed = total - (completed + beaten + unfinished)
-        print(console)
-        if completed > 0:
-            print("Completed: " + str(completed))
-        if beaten > 0:
-            print("Beaten: " + str(beaten))
-        if unfinished > 0:
-            print("Unfinished: " + str(unfinished))
         if unplayed > 0:
-            print("Unplayed: " + str(unplayed))
-        print("Total: " + str(total))
+            writeindex.write("                      <a class=\"unplayed\" title=\"Unplayed\" style=\"flex: " + str(unplayed) + " 1 0%;\">" + str(unplayed) + "</a>\n")
+        if unfinished > 0:
+            writeindex.write("                      <a class=\"unfinished\" title=\"Unfinished\" style=\"flex: " + str(unfinished) + " 1 0%;\">" + str(unfinished) + "</a>\n")
+        if beaten > 0:
+            writeindex.write("                      <a class=\"beaten\" title=\"Beaten\" style=\"flex: " + str(beaten) + " 1 0%;\">" + str(beaten) + "</a>\n")
+        if completed > 0:
+            writeindex.write("                      <a class=\"completed\" title=\"Completed\" style=\"flex: " + str(completed) + " 1 0%;\">" + str(completed) + "</a>\n")
+        if endless > 0:
+            writeindex.write("                      <a class=\"endless\" title=\"Endless\" style=\"flex: " + str(endless) + " 1 0%;\">" + str(endless) + "</a>\n")
+        writeindex.write("                    </div>\n                    <a class=\"total\">" + str(total) + "\n                      <span>Total</span>\n                    </a>\n                  </div>\n")
 
-liststats("DS",dslist)
-liststats("3DS",threedslist)
-liststats("Switch",switchlist)
-liststats("PC",pclist)
-liststats("PS2",ps2list)
-liststats("PS3",ps3list)
-liststats("PS5",ps5list)
-liststats("XBOX 360",xbox360list)
+liststats("Nintendo DS","DS",dslist)
+liststats("Nintendo 3DS","3DS",threedslist)
+liststats("Nintendo Switch","Switch",switchlist)
+liststats("PC","PC",pclist)
+liststats("PlayStation 2","PS2",ps2list)
+liststats("PlayStation 3","PS3",ps3list)
+liststats("PlayStation 5","PS5",ps5list)
+liststats("Xbox 360","Xbox360",xbox360list)
+
+writeindex.write("                </div>\n              </div>\n            </section>\n          </section>\n        </main>\n      </div>\n    </div>\n  </body>\n</html>\n")
 
 # LIBRARY
 
-def theresults():
-    newgames = sorted(games,key=lambda d: d["id"])
-    for game in newgames:
-        try:
-            if (game["completed"]):
-                print(game["console"] + " → " + game["name"] + " (completed)")
-                if len(game["recent"]) > 1:
-                    print(game["recent"])
-        except:
-            try:
-                if (game["beaten"]):
-                    print(game["console"] + " → " + game["name"] + " (beaten)")
-                    if len(game["recent"]) > 1:
-                        print(game["recent"])
-            except:
-                try:
-                    if (game["gameplay"]):
-                        print(game["console"] + " → " + game["name"] + " (unfinished)")
-                        if len(game["recent"]) > 1:
-                            print(game["recent"])
-                except:
-                    print(game["console"] + " → " + game["name"] + " (unplayed)")
-        print("")
+writelibrary.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--active-base: #364563; --active-text: #FFFFFF; --active-text-50: #FFFFFF60; --active-text-25: #FFFFFF30; --active-secondary: #222a3a; --active-secondary-50: #222a3a80; --active-secondary-text: #FFFFFF; --active-secondary-text-50: #FFFFFF70; --active-secondary-text-25: #FFFFFF30; --active-accent: #00fffb; --active-accent-75: #00fffbc0; --active-accent-text: #000000DD; --beaten-color: hsla(0, 0%, 82%, 0.9); --completed-color: hsla(48, 80%, 82%, 0.9); --unplayed-color: hsla(200, 30%, 30%, 0.9); --unfinished-color: hsla(0, 38%, 35%, 0.9); --endless-color: hsla(275, 39%, 32%, 0.9); --platform-bw: none; --active-accent-shadow: #FFFFFF66; --retro-border: url('/img/border.png');\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n    <meta name=\"theme-color\" content=\"#424957\">\n    <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n    <link href=\"https://fonts.googleapis.com/css?family=Lato|Teko|Titillium+Web\" rel=\"stylesheet\">\n    <title>Selfhostery etc.</title>\n    <link href=\"backloggery.css\" rel=\"stylesheet\">\n  </head>\n  <body>\n    <div id=\"app\">\n      <div class=\"profile\">\n        <main>\n          <section>\n            <div class=\"tabs\">\n              <a href=\"\" class=\"\">Backlog</a>\n              <a href=\"\" class=\"router-link-exact-active router-link-active\" style=\"\" aria-current=\"page\">Library</a>\n              <a href=\"https://backloggery.club/demo/history\" class=\"\">History</a>\n            </div>\n            <section id=\"library-top\" class=\"library\">\n              <div>\n                <div class=\"unibar\">\n                  <div>\n                    <span>Total Found</span> " + str(total) + "\n                  </div>\n")
+if unplayed > 0:
+    writelibrary.write("                  <div class=\"unplayed\" style=\"flex: " + str(unplayed) + " 1 0%;\">" + str(unplayed) + "</div>\n")
+if unfinished > 0:
+    writelibrary.write("                  <div class=\"unfinished\" style=\"flex: " + str(unfinished) + " 1 0%;\">" + str(unfinished) + "</div>\n")
+if beaten > 0:
+    writelibrary.write("                  <div class=\"beaten\" style=\"flex: " + str(beaten) + " 1 0%;\">" + str(beaten) + "</div>\n")
+if completed > 0:
+    writelibrary.write("                  <div class=\"completed\" style=\"flex: " + str(completed) + " 1 0%;\">" + str(completed) + "</div>\n")
+if endless > 0:
+    writelibrary.write("                  <div class=\"endless\" style=\"flex: " + str(endless) + " 1 0%;\">" + str(endless) + "</div>\n")
+writelibrary.write("                </div>\n                <div class=\"library-list sorted\">\n")
 
-theresults()
+newgames = sorted(games,key=lambda d: d["id"])
+
+decay = False
+
+for game in newgames:
+    playcard(game,"library")
 
 # HISTORY
 
-# iterate backwards from this year to 2016
-
-# if nothing in this year, "history has yet to be written"
-
-# else, for each year: initialdate, gameplay???, beaten, completed???
+theyear = int(thisyear)
+while theyear > 2016:
+    added = 0
+    started = 0
+    beat = 0
+    completed = 0
+    beatorcompleted = 0
+    for game in games:
+        if game["initialdate"].year == theyear:
+            added += 1
+        try:
+            if game["firstplayed"].year == theyear:
+                started += 1
+        except:
+            pass
+        try:
+            if game["beaten"].year == theyear:
+                beat += 1
+                beatorcompleted += 1
+                try:
+                    if game["completed"].year == theyear:
+                        completed += 1
+                except:
+                    pass
+        except:
+            try:
+                if game["completed"].year == theyear:
+                    completed += 1
+                    beatorcompleted += 1
+            except:
+                pass
+    backlog = added - beatorcompleted
+    print(str(theyear) + " Summary")
+    if backlog > 0:
+        print("Backlog ▲ " + str(backlog))
+    elif backlog == 0:
+        print("Backlog 0")
+    elif backlog < 0:
+        print("Backlog ▼ " + str(backlog * -1))
+    print("Added " + str(added))
+    print("Started " + str(started))
+    print("Beat " + str(beat))
+    print("Completed " + str(completed))
+    yearlist = []
+    enddate = datetime.strptime((str(theyear) + "-12-31"),"%Y-%m-%d")
+    startdate = datetime.strptime((str(theyear) + "-01-01"),"%Y-%m-%d")
+    eachdate = enddate
+    while eachdate >= startdate:
+        for game in games:
+            if game["initialdate"] == eachdate:
+                yearlist.append({"date":eachdate,"name":game["name"],"console":game["console"],"action":"Added"})
+            try:
+                if game["firstplayed"] == eachdate:
+                    yearlist.append({"date":eachdate,"name":game["name"],"console":game["console"],"action":"Started"})
+            except:
+                pass
+            try:
+                if game["beaten"] == eachdate:
+                    yearlist.append({"date":eachdate,"name":game["name"],"console":game["console"],"action":"Beat"})
+            except:
+                pass
+            try:
+                if game["completed"] == eachdate:
+                    yearlist.append({"date":eachdate,"name":game["name"],"console":game["console"],"action":"Completed"})
+            except:
+                pass
+        eachdate -= timedelta(days=1)
+    checkdate = enddate
+    for event in yearlist:
+        if checkdate != event["date"]:
+            print(event["date"].strftime("%Y-%-m-%-d"))
+        print(event["action"] + ": " + event["name"] + " (" + event["console"] + ")")
+        checkdate = event["date"]
+    theyear -= 1