Color the books according to their id hash

package.json

@@ -23,6 +23,7 @@
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
     "striptags": "^3.1.1",
+    "tinycolor2": "^1.4.1",
     "unused-filename": "^1.0.0"
   }
 }

public/css/styles.css

@@ -15,7 +15,7 @@
   width: 100px;
   height: 300px; /* The tallest a book could be */
   border-bottom: 4px solid saddlebrown;
-  margin: 10px 0 -4px !important;
+  margin: 10px 1px -4px !important;
 }
 .book-slot.is-thin {
   width: 80px;

routes/get_home.js

@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const snarkdown = require('snarkdown');
 const fecha = require('fecha');
+const tinycolor = require('tinycolor2');
 
 const settings = require('../settings.json');
 
@@ -45,6 +46,10 @@ module.exports = function (app) {
         footer: '<a class="button close">Close</a> <a class="button is-success modal-button" data-modal="' + confirmId + '">Take Book</a>',
       });
       const maxSize = settings.maxFileSize > 0 ? settings.maxFileSize : 10;
+      let spineColor = tinycolor('#' + id.substr(0, 6));
+      if (!spineColor.isValid()) {
+        spineColor = tinycolor.random();
+      }
       return app.templater.fill('./templates/elements/book.html', {
         id,
         title: bookData.title,
@@ -52,8 +57,8 @@ module.exports = function (app) {
         thickness: (fileDetails.size > (maxSize * 0.3)) || (bookData.title.length > 28)
           ? 'is-thick' : (fileDetails.size < (maxSize * 0.6) ? 'is-thin' : ''),
         tallness: bookData.title.length > 16 ? 'is-tall' : (bookData.title.length < 8 ? 'is-short' : ''),
-        spineColor: '#ff0000',
-        textColor: '#ffffff',
+        spineColor: spineColor.toString(),
+        textColor: spineColor.isLight() ? '#000000' : '#ffffff',
         fileType: bookData.fileType,
         modal,
       });
@@ -63,7 +68,7 @@ module.exports = function (app) {
       books = '<div class="column"><div class="content">The shelf is empty. Would you like to <a href="/give">add a book</a>?</div></div>';
     }
 
-    const body = '<h2 class="title">Available Books</h2><div class="bookshelf columns is-gapless is-multiline">' + books + '</div>';
+    const body = '<h2 class="title">Available Books</h2><div class="bookshelf columns is-gapless is-multiline is-mobile">' + books + '</div>';
     const html = app.templater.fill('./templates/htmlContainer.html', {
       title: 'View',
       resourcePath: (req.url.substr(-1) === '/' ? '../' : './'),

yarn.lock

@@ -908,6 +908,11 @@ striptags@^3.1.1:
   resolved "https://registry.yarnpkg.com/striptags/-/striptags-3.1.1.tgz#c8c3e7fdd6fb4bb3a32a3b752e5b5e3e38093ebd"
   integrity sha1-yMPn/db7S7OjKjt1LltePjgJPr0=
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"