CSS updates, elucidate readme

.gitignore

@@ -7,3 +7,4 @@ build/assets/levels/*.gif
 __pycache__/
 variables.py
 log.py
+build/user.css

README.org

@@ -1,9 +1,45 @@
 * tcg
-a python static site generator for tracking tcg cards (made for [[https://colors-tcg.dreamwidth.org][colors]]).
+Python scripts to generate a mobile-friendly static site for tracking tcg cards (designed for [[https://colors-tcg.dreamwidth.org][colors]]).
 
-Current status: very basic functionality and styling, will add more features as I need them.
-
-** To do
-- implement user variables
-- CSS
-- integrate =download.sh=
+** Instructions
+*** Requirements
+- =python3=
+- server space
+- subdomain pointing to your site root on the server
+- =rclone= with your server set up as a remote
+*** Setup
+- Download and create the initial files by running:
+#+BEGIN_SRC bash
+  git clone https://git.praze.net/tre/tcg.git
+  cd tcg
+  cp log-template.py log.py
+  cp variables-template.py variables.py
+#+END_SRC
+- Edit =variables.py= to set the variables as follows:
+  - =servername=: name set for your remote in =rclone=
+  - =serverpath=: path to the site root on the server (with leading slash, without trailing slash)
+  - =name=: the name you use in the game
+  - =highpriority=: a list of high priority decks you’re collecting
+  - =mediumpriority=: a list of other decks you’re collecting
+  - =tradepost=: URL of your trade post on Dreamwidth
+  - =faves=: a list of cards to showcase on the index page
+  - =headerbackground=: an HTML colour to display behind your header image and set as a theme colour
+  - =british=: True if you want “grey” to display on the site, False if you want “gray”
+  - =collectthreshold=: minimum number of owned cards for putting a deck in the “collecting” category
+  - =keepsig=: True if you always want to keep one copy of your signature, False if you want to make them all available for trading
+- Run the following:
+  #+BEGIN_SRC bash
+    python3 setup.py
+    chmod +x build.sh
+#+END_SRC
+- Save a header image to =build/assets/header.png=
+- Add level images manually to =build/assets/levels/=
+- Add custom CSS to =build/user.css=
+*** Updating and building
+- For each transaction, add a dictionary ={}= to the =log= list like in the example (removing any of ="received"=, ="lost"=, ="crayons"= that aren’t relevant).
+- Run =./build.sh= in this directory to download the relevant card images and then upload everything to the server.
+** Currently unaccounted for
+- Sketchpads
+- Portfolios
+- Duplicates
+- Masteries

build/style.css

@@ -1,22 +1,7 @@
 /* basic colours */
 
 :root {
-  --textcolour: black;
-  --linecolour: black;
-  --bgcolour: white;
-}
-
-@media(prefers-color-scheme: dark) {
-  :root {
-    --textcolour: white;
-    --linecolour: white;
-    --bgcolour: black;
-  }
-}
-
-* {
-  color: var(--textcolour);
-  background-color: var(--bgcolour);
+  color-scheme: light dark;
 }
 
 /* basic layout */
@@ -33,7 +18,7 @@ body > aside {
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 2;
-  border-bottom: 4px solid var(--linecolour);
+  border-bottom: 4px solid CanvasText;
   padding: 5px;
 }
 
@@ -50,7 +35,7 @@ body > main {
   grid-row-start: 1;
   grid-row-end: 3;
   overflow: auto;
-  border-left: 4px solid var(--linecolour);
+  border-left: 4px solid CanvasText;
   padding: 5px;
 }
 
@@ -60,7 +45,7 @@ body > main {
   }
   body > * {
     border-left: none !important;
-    border-bottom: 4px solid var(--linecolour) !important;
+    border-bottom: 4px solid CanvasText;
   }
   body > aside {
     display: none;
@@ -69,39 +54,52 @@ body > main {
 
 table.decktable {
   display: inline-block;
-  border: 1px solid var(--linecolour);
+  border: 1px solid CanvasText;
 }
 
 table.decktable.red th {
   background-color: red;
+  color: black;
 }
 
 table.decktable.orange th {
   background-color: orange;
+  color: black;
 }
 
 table.decktable.yellow th {
   background-color: yellow;
+  color: black;
 }
 
 table.decktable.green th {
   background-color: green;
+  color: white;
 }
 
 table.decktable.blue th {
   background-color: blue;
+  color: white;
 }
 
 table.decktable.purple th {
   background-color: purple;
+  color: white;
 }
 
 table.decktable.brown th {
   background-color: brown;
+  color: white;
 }
 
 table.decktable.gray th {
   background-color: gray;
+  color: white;
+}
+
+table.decktable.special th {
+  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;
 }
 
 main img {
@@ -130,3 +128,9 @@ img.crayon {
 table.level {
   display: inline-block;
 }
+
+h2.collectingheader {
+  position: sticky;
+  top: 0;
+  background-color: Canvas;
+}

collectinggen.py

@@ -27,17 +27,20 @@ def collectinggen():
             if tcgcore.collecting(deck):
                 lowpriority.append(deck)
     if len(highpriority) > 0:
-        content.write("<h2>High priority</h2>\n")
+        content.write("<div>\n<h2 class=\"collectingheader\">High priority</h2>\n")
         for deck in highpriority:
             content.write(tcgcore.printdeck(deck))
+        content.write("</div>\n")
     if len(medpriority) > 0:
-        content.write("<h2>Medium priority</h2>\n")
+        content.write("<div>\n<h2 class=\"collectingheader\">Medium priority</h2>\n")
         for deck in medpriority:
             content.write(tcgcore.printdeck(deck))
+        content.write("</div>\n")
     if len(lowpriority) > 0:
-        content.write("<h2>Low priority</h2>\n")
+        content.write("<div>\n<h2 class=\"collectingheader\">Low priority</h2>\n")
         for deck in lowpriority:
             content.write(tcgcore.printdeck(deck))
+        content.write("</div>\n")
     content.close()
     skel.footerwrite(thefile)
 

download.py

@@ -4,9 +4,7 @@ import tcgcore
 def getimg():
     for card in tcgcore.ownedcards():
         if card[0:4] == "sig_":
-            if os.path.exists("build/decks/sigs/" + card[4:] + ".gif"):
-                pass
-            else:
+            if not os.path.exists("build/decks/sigs/" + card[4:] + ".gif"):
                 r = requests.get("https://colors-tcg.eu/cards/" + card + ".gif")
                 open("build/decks/sigs/" + card[4:] + ".gif","wb").write(r.content)
         else:

generate.py

@@ -1,4 +1,4 @@
-import download,indexgen,collectinggen,ownedgen,wantedgen,loggen,levelsgen
+import download,indexgen,collectinggen,ownedgen,wantedgen,loggen,levelsgen,tradegen
 
 download.getimg()
 indexgen.indexgen()
@@ -7,3 +7,4 @@ ownedgen.ownedgen()
 wantedgen.wantedgen()
 loggen.loggen()
 levelsgen.levelsgen()
+tradegen.tradegen()

log-template.py

@@ -1,3 +1,11 @@
 import datetime
 
-log = [{"event":"event name","date":datetime.datetime(Y,M,D),"url":"link to comment","received":["card01","card02"]}]
+log = [
+    {"event":"event name",
+     "date":datetime.datetime(Y,M,D),
+     "url":"link to comment",
+     "received":["card01","card02"],
+     "lost":["card03","card04"],
+     "crayons":{"red":1,"orange":2,"yellow":-3}
+     }
+]

skel.py

@@ -2,7 +2,7 @@ import variables
 
 def headerwrite(thefile,pagename):
     header = open(thefile,"a")
-    header.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--headbg:" + variables.headerbackground + ";\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"/style.css\">\n    <meta name=\"theme-color\" content=\"" + variables.headerbackground + "\">\n    <title>" + variables.name + "’s card collection :: " + pagename + "</title>\n  </head>\n  <body>\n    <aside>\n      \n    </aside>\n    <nav>\n      <ul>\n        <li>")
+    header.write("<!DOCTYPE html>\n<html lang=\"en\" style=\"--headbg:" + variables.headerbackground + ";\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"/style.css\">\n    <link rel=\"stylesheet\" href=\"/user.css\">\n    <meta name=\"theme-color\" content=\"" + variables.headerbackground + "\">\n    <title>" + variables.name + "’s card collection :: " + pagename + "</title>\n  </head>\n  <body>\n    <aside>\n      \n    </aside>\n    <nav>\n      <ul>\n        <li>")
     if pagename == "index":
         header.write("home")
     else:

tradegen.py

@@ -1,5 +1,5 @@
 import datetime,os
-import log,skel,tcgcore
+import log,skel,tcgcore,variables
 
 def tradegen():
     if not os.path.isdir("build/trade"):
@@ -14,7 +14,15 @@ def tradegen():
         if card[0:4] != "sig_":
             if not tcgcore.collecting(card[:-2]):
                 content.write(tcgcore.printcard(card))
-    content.write("</p>\n")
+    siglist = []
+    for card in tcgcore.ownedcards():
+        if card == "sig_" + variables.name.lower():
+            siglist.append(card)
+    if variables.keepsig == True:
+        siglist.remove(siglist[0])
+    for sig in siglist:
+        content.write(tcgcore.printcard(sig))
+    content.write("</p>\n<p>Trade cards <a href=\"" + variables.tradepost + "\">here</a></p>\n")
     content.close()
     skel.footerwrite(thefile)
 

variables-template.py

@@ -1,3 +1,5 @@
+servername = ""
+serverpath = ""
 name = "your name"
 highpriority = ["deckname","nameofadeck"]
 medpriority = ["deckname","nameofdeck"]
@@ -6,3 +8,4 @@ faves = ["favecard01","favecard02"]
 headerbackground = "#000000"
 british = True
 collectthreshold = 2
+keepsig = False