More work towards music theme.

themes/jdb/index.js

@@ -25,6 +25,7 @@
 
     init: function(uiView) {
       uiView.$el.addClass('theme-' + uiView.theme.name);
+      curTimePeriod = null; // force the next render to figure out the time period
     },
 
     render: function(uiView, manualTimePeriod) {
@@ -45,7 +46,7 @@
       uiView.$el.removeClass(curTimePeriod);
     },
 
-    getGreeting: function() { return 'Good ' + curTimePeriod; }
+    getGreeting: function() { return 'Good ' + curTimePeriod + ', '; }
 
   };
   U.themes['jdb'] = T;

themes/jdb/style.css

@@ -10,6 +10,13 @@
       left: 2vw;
     }
   }*/ }
+  .theme-jdb #clock-panel {
+    background: rgba(0, 0, 0, 0.3);
+    font-size: 6vw;
+    font-weight: 500;
+    padding: 1vw 2vw;
+    width: 100%;
+    z-index: 1; }
   .theme-jdb.evening #clock-panel {
     border-bottom: 2px solid white;
     text-align: right;

themes/jdb/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAKA,UAAW;AAqFT;;;;;;;;;;KAUG;EA5FD,+BAAa;IACX,aAAa,EAAE,eAAkB;IACjC,UAAU,EAAE,KAAK;IAEjB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;EAGR,+BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;EAGX,iCAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;EAKX,iGAAa;IACX,UAAU,EAAE,eAAkB;IAE9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;EAGX,iGAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;EAGZ,uGAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;EAKZ,+BAAa;IAAE,WAAW,EAAE,iBAAiB;EAC7C;6FACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,iCAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;iGACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAK9B,+BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;6FACsD;IACpD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,6BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;yFACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe",
+"mappings": "AAKA,UAAW;AA8FT;;;;;;;;;;KAUG;EAtGH,uBAAa;IACX,UAAU,EAAE,kBAAkB;IAC9B,SAAS,EAAE,GAAG;IACd,WAAW,EAAE,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,CAAC;EAIV,+BAAa;IACX,aAAa,EAAE,eAAkB;IACjC,UAAU,EAAE,KAAK;IAEjB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;EAGR,+BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;EAGX,iCAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;EAKX,iGAAa;IACX,UAAU,EAAE,eAAkB;IAE9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;EAGX,iGAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;EAGZ,uGAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;EAKZ,+BAAa;IAAE,WAAW,EAAE,iBAAiB;EAC7C;6FACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,iCAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;iGACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAK9B,+BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;6FACsD;IACpD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,6BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;yFACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe",
 "sources": ["style.scss"],
 "names": [],
 "file": "style.css"

themes/jdb/style.scss

@@ -5,6 +5,15 @@ $colorAccent: orange;
 
 .theme-jdb {
 
+  #clock-panel {
+    background: rgba(0, 0, 0, 0.3);
+    font-size: 6vw;
+    font-weight: 500;
+    padding: 1vw 2vw;
+    width: 100%;
+    z-index: 1;
+  }
+
   &.evening {
     #clock-panel {
       border-bottom: 2px solid $colorFG;

themes/music/index.js

@@ -36,14 +36,32 @@
     return 'other';
   }
 
+  function randomInt(max) {
+    max = Math.floor(max);
+    return Math.floor(Math.random() * max);
+  }
+
   var curEvent;
+  var curFace;
   var hidpi = U.config.hidpi;
 
-  var imagesByName = {
-    mixing: [],
-    rehearsal: [],
-    service: [],
-    other: [] }
+  var facesForEvent = {
+    mixing: ['m1', 'm2', 'm3'],
+    rehearsal: ['r1', 'r2'],
+    service: ['s1', 's2'],
+    other: ['o1', 'o2', 'o3']
+  };
+
+  var greetingForEvent = {
+    mixing: 'Get mixing!',
+    rehearsal: 'Practice makes the master.',
+    service: 'Worship the Lord!',
+    other: 'Where words fail, music speaks.'
+  };
+
+  // Unneeded at present because all images are named after the faces:
+  // <face-name>.jpg
+  //var imagesForFace = { };
 
   var T = {
   
@@ -51,28 +69,36 @@
 
     init: function(uiView) {
       uiView.$el.addClass('theme-' + uiView.theme.name);
+      curEvent = null;  // force the first render to guess the event
     },
 
-    render: function(uiView, manualEvent) {
+    render: function(uiView, manualEvent, manualFaceIdx) {
       var prevEvent = curEvent;
+      var prevFace = curFace;
       curEvent = manualEvent || guessEvent();
 
       if (curEvent != prevEvent) {
-        uiView.$el.removeClass(prevEvent);
-        uiView.$el.addClass(curEvent);
+
+        // Get a face at random for this 
+        var evFaces = facesForEvent[curEvent];
+        var faceIdx = manualFaceIdx || randomInt(evFaces.length);
+        curFace = evFaces[faceIdx];
+
+        uiView.$el.removeClass(prevFace);
+        uiView.$el.addClass(curFace);
         uiView.loginView.render();
         uiView.bgImgModel.set('url', 'themes/music/img/' +
-          (hidpi ? 'hidpi/' : '') + imagesByName[curEvent])
+          (hidpi ? 'hidpi/' : '') + curFace + '.jpg')
       }
     },
 
     unload: function(uiView) {
       uiView.$el.removeClass('theme-' + uiView.theme.name);
-      uiView.$el.removeClass(curEvent);
+      uiView.$el.removeClass(curFace);
     },
 
-    getGreeting: function() { return 'Good ' + curEvent; }
+    getGreeting: function() { return greetingForEvent[curEvent || 'other']; }
 
   };
-  U.themes['jdb'] = T;
+  U.themes['music'] = T;
 })();

themes/music/style.css

@@ -1,3 +1,35 @@
-
+.theme-music.o3 {
+  text-shadow: 0 0 1vw black; }
+  .theme-music.o3 #clock-panel {
+    position: absolute;
+    bottom: 21.5vw;
+    font-size: 5vw;
+    left: 9vw;
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-10vw); }
+  .theme-music.o3 #login-panel #greeting {
+    position: absolute;
+    left: 35vw;
+    bottom: 30.3vw;
+    font-size: 3vw;
+    transform-origin: left;
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-25vw); }
+  .theme-music.o3 #login-panel #users-list li.user {
+    display: inline-block; }
+  .theme-music.o3 #login-panel #users {
+    transform: rotateY(46deg) rotateX(-33deg) rotateZ(-32deg) translateX(6vw) skewX(-13deg);
+    position: absolute;
+    bottom: 6vw;
+    left: 6vw;
+    font-size: 4vw; }
+  .theme-music.o3 #login-panel input[type=password] {
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-31.5deg) translateX(32vw) skewX(-13deg);
+    position: absolute;
+    bottom: 2.2vw;
+    left: 6vw;
+    font-size: 3vw !important;
+    transform-origin: left;
+    /* color: lightgrey; */
+    background: rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 0 1vw black; }
 
 /*# sourceMappingURL=style.css.map */

themes/music/style.css.map

@@ -1,7 +1,7 @@
 {
 "version": 3,
-"mappings": "",
-"sources": [],
+"mappings": "AAME,eAAK;EAEH,WAAW,EAAE,aAAa;EAE1B,4BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,gEAAgE;EAK9E,sCAAU;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,gEAAgE;EAG5E,gDAAoB;IAAE,OAAO,EAAE,YAAY;EAE3C,mCAAO;IACL,SAAS,EAAE,4EAA4E;IACvF,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,GAAG;EAGhB,iDAAqB;IACnB,SAAS,EAAE,+EAA+E;IAC1F,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,cAAc;IACzB,gBAAgB,EAAE,IAAI;IACtB,uBAAuB;IACvB,UAAU,EAAE,mCAAmC;IAC/C,UAAU,EAAE,aAAa",
+"sources": ["style.scss"],
 "names": [],
 "file": "style.css"
 }

themes/music/style.scss

@@ -4,5 +4,52 @@ $colorAccent: orange;
 
 
 .theme-music {
+  &.o3 {
 
+    text-shadow: 0 0 1vw black;
+
+    #clock-panel {
+      position: absolute;
+      bottom: 21.5vw;
+      font-size: 5vw;
+      left: 9vw;
+      transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-10vw);
+    }
+
+		#login-panel {
+
+			#greeting {
+				position: absolute;
+				left: 35vw;
+				bottom: 30.3vw;
+				font-size: 3vw;
+				transform-origin: left;
+				transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-25vw);
+			}
+
+			#users-list li.user { display: inline-block; }
+
+			#users {
+					transform: rotateY(46deg) rotateX(-33deg) rotateZ(-32deg) translateX(6vw) skewX(-13deg);
+					position: absolute;
+					bottom: 6vw;
+					left: 6vw;
+					font-size: 4vw;
+			}
+
+			input[type=password] {
+					transform: rotateY(48deg) rotateX(-33deg) rotateZ(-31.5deg) translateX(32vw) skewX(-13deg);
+					position: absolute;
+					bottom: 2.2vw;
+					left: 6vw;
+					font-size: 3vw !important;
+					transform-origin: left;
+					/* color: lightgrey; */
+					background: rgba(255, 255, 255, 0.3) !important;
+					box-shadow: 0 0 1vw black;
+			}
+
+			#checking-credentials {}
+		}
+	}
 }