From 1b9565fa2eeb2635f2233161f920963bf514b524 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 4 Dec 2021 18:55:49 +0100
Subject: Use img srcset for cover images of differing resolutions.

---
 .gitignore         |  6 +++---
 public/style.css   |  3 +--
 tools/gencovers.sh | 13 +++++++++++++
 views/create.pug   |  3 ++-
 views/head.pug     |  4 ++++
 views/index.pug    |  6 +++---
 views/info.pug     |  2 +-
 views/join.pug     |  3 ++-
 8 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 tools/gencovers.sh

diff --git a/.gitignore b/.gitignore
index 97fef51..e8f12c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,9 @@ node_modules
 db
 db-wal
 db-shm
-sessions
-sessions-wal
-sessions-shm
+login
+login-wal
+login-shm
 log
 .env
 *.pem
diff --git a/public/style.css b/public/style.css
index cfeacd6..c28939d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -43,9 +43,8 @@ div.logo {
 	min-width: 150px;
 	height: 200px;
 }
-img.logo {
+div.logo img {
 	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
-	height: 100%;
 }
 
 table {
diff --git a/tools/gencovers.sh b/tools/gencovers.sh
new file mode 100644
index 0000000..911a050
--- /dev/null
+++ b/tools/gencovers.sh
@@ -0,0 +1,13 @@
+for F in public/*/cover.jpg
+do
+	echo Processing: $F
+	B=$(echo $F | sed s/.jpg//)
+
+	convert -scale 200x200 $F $B.1x.png
+	mozjpeg -q 95 -outfile $B.1x.jpg $B.1x.png
+	rm -f $B.1x.png
+
+	convert -scale 400x400 $F $B.2x.png
+	mozjpeg -q 90 -outfile $B.2x.jpg $B.2x.png
+	rm -f $B.2x.png
+done
diff --git a/views/create.pug b/views/create.pug
index 7aa53f3..84f950a 100644
--- a/views/create.pug
+++ b/views/create.pug
@@ -11,7 +11,8 @@ html
 		article
 			h1= title.title_name
 
-			a(href="/info/"+title.title_id): img.logo(src="/"+title.title_id+"/cover.jpg")
+			div.logo
+				+gamecover(title.title_id)
 
 			form(method="post" action="/create/"+title.title_id)
 				if scenarios.length > 1
diff --git a/views/head.pug b/views/head.pug
index 294a911..d5350ac 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -12,6 +12,10 @@ link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/SourceSa
 //- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Dingbats.woff2")
 //- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/NotoEmoji.woff2")
 
+mixin gamecover(title_id)
+	a(href="/info/"+title_id)
+		img(src=`/${title_id}/cover.1x.jpg` srcset=`/${title_id}/cover.2x.jpg 2x`)
+
 mixin forumpost(row,show_buttons)
 	.post
 		.head
diff --git a/views/index.pug b/views/index.pug
index ba915b0..0a2262b 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -38,10 +38,10 @@ html
 			div.list
 				each title in titles
 					unless title.is_hidden
+						- let cover = "/" + title.title_id + "/cover"
 						div
-							a(href="/info/"+title.title_id)
-								img(src="/"+title.title_id+"/cover.jpg")
-								| #{title.title_name}
+							+gamecover(title.title_id)
+							| #{title.title_name}
 
 			p: a(href="/games") List of all open and active games.
 
diff --git a/views/info.pug b/views/info.pug
index f73e6ef..b579f64 100644
--- a/views/info.pug
+++ b/views/info.pug
@@ -12,7 +12,7 @@ html
 			h1= title.title_name
 
 			div.logo
-				img.logo(src="/"+title.title_id+"/cover.jpg")
+				+gamecover(title.title_id)
 
 			| !{ about_html }
 
diff --git a/views/join.pug b/views/join.pug
index 101afdf..ff15624 100644
--- a/views/join.pug
+++ b/views/join.pug
@@ -22,7 +22,8 @@ html
 		article
 			h1= game.title_name
 
-			a(href="/info/"+game.title_id): img.logo(src="/"+game.title_id+"/cover.jpg")
+			div.logo
+				+gamecover(game.title_id)
 
 			p
 				if game.is_private
-- 
cgit v1.2.3