Scoreboard features

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [v4.2.1] - unreleased
 ### Fixed
 - Transpiled KSAs no longer dropped
+- Resolve race condition to ensure Javascript dependencies load before "chart" is called
+- Add responsive design elements to Scoreboard to reduce object collision
+
 
 ## [v4.2.0] - 2020-03-26
 ### Changed

theme/basic.css

@@ -78,7 +78,34 @@ input:invalid {
 	opacity: 0.8;
 	position: absolute;
 	right: 0.2em;
+	background-color: #292929;
+	background-blend-mode: darken;
+	padding: 0em 0.2em;
+	border-top-left-radius: 0.5em;
+	border-bottom-left-radius: 0.5em;
+	margin:0em;
+	height: 1.5em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition-property: max-width;
+	transition-duration: 2s;
+	transition-delay: 0s;
+}
+
+#rankings span.teamname:hover {
+	max-width: 100%;
 }
+
+#rankings span.teampoints {
+	font-size:100%;
+	height:1.2em;
+	margin:0em;
+	padding:0em;
+	width:99%;
+}
+
+
 #rankings div * {white-space: nowrap;}
 .cat0, .cat8, .cat16 {background-color: #a6cee3; color: black;}
 .cat1, .cat9, .cat17 {background-color: #1f78b4; color: white;}
@@ -90,6 +117,74 @@ input:invalid {
 .cat7, .cat15, .cat23 {background-color: #ff7f00; color: black;}
 
 
+/* Responsive design */
+/* Defaults */
+        #rankings span.teampoints {
+                max-width:89%;
+        }
+        #rankings span.teamname {
+                max-width:10%;
+        }
+
+
+/* Monitors with large enough screens to do side by side */
+@media only screen and (min-width: 170em) {
+	#chart, #rankings {
+		width: 49%;
+		display:inline-block;
+		vertical-align:middle;
+	}
+
+}
+
+/* Monitor
+@media only screen and (max-width: 130em) {
+        #chart, #rankings {
+                width: 49%;
+                display:inline-block;
+		vertical-align: middle;
+        }
+
+	#rankings span.teampoints {
+		max-width:89%;
+	}
+	#rankings span.teamname {
+		max-width:10%;
+	}
+}
+
+/* Laptop size screen */
+@media only screen and (max-width: 100em) {
+	#rankings span.teampoints {
+		max-width:84%;
+	}
+	#rankings span.teamname {
+		max-width:15%;
+	}
+}
+
+/* Roughly Tablet size */
+@media only screen and (max-width: 70em) {
+	#rankings span.teampoints {
+		max-width:79%;
+	}
+	#rankings span.teamname {
+		max-width:20%;
+	}
+}
+
+/* Small screens phone size */
+@media only screen and (max-width: 40em) {
+	#rankings span.teampoints {
+		max-width:65%;
+	}
+	#rankings span.teamname {
+		max-width:34%;
+	}
+}
+
+
+
 #devel {
   background-color: #eee;
   color: black;

theme/gibson.css

@@ -0,0 +1,116 @@
+/* Moth ScreenSaver */
+#gibson {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000;
+}
+
+/* Transparency is inverted from the clip.  Mostly because it was easier this way, you can still make out the content behind it, and the black moths stick out better */
+#gibson.window {
+  background-color: rgba(160, 160, 250, .2);
+
+  background-image:
+    repeating-linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 0.7em, rgba(0, 0, 0, 0) 1.3em, rgba(0, 0, 0, .8) 2em),
+    repeating-linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) .3em, rgba(0, 0, 0, 0) 3em, rgba(0, 0, 0, .8) 3.3em);
+}
+
+#gibson.svg {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='5em' width='1.5em'><style>text { font: bold 1.5em Verdana, Helvetica, Arial, sans-serif; fill: rgba(255, 255, 255, 0.6); writing-mode: vertical-rl}</style><text x='0' y='0'>5928</text></svg>");
+
+}
+
+#gibson.combined {
+  background-color: rgba(0, 0, 0, .5);
+
+  background-image:
+    repeating-linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 0.7em, rgba(0, 0, 0, 0) 1.3em, rgba(0, 0, 0, .8) 2em),
+    repeating-linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) .3em, rgba(0, 0, 0, 0) 3em, rgba(0, 0, 0, .8) 3.3em),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='5em' width='1.5em'><style>text { font: bold 1.5em Verdana, Helvetica, Arial, sans-serif; fill: rgba(255, 255, 255, 0.6); writing-mode: vertical-rl}</style><text x='0' y='0'>MOTH</text></svg>");
+}
+
+#gibson img.moth {
+  top: 0;
+  right: 100vw;
+  position: absolute;
+  width: 4em;
+  height: auto;
+  z-index:1000;
+}
+
+#gibson img.shadow, #gibson div.shadow {
+  position: absolute;
+  width: 4em;
+  height: 4em;
+  transform: rotate(-45deg);
+}
+
+#gibson div.shadow {
+  background-color: #000;
+/*  background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.9) 99%); */
+  -webkit-mask-image: url("luna-moth.png");
+  mask-image: url("luna-moth.png");
+  -webkit-mask-size: 4em;
+  mask-size: 4em;
+}
+
+#gibson div.shadow.LR {
+  transform: rotate(135deg) !important;
+  background-color: #d00;
+}
+
+@media only screen and (min-width: 170em) {
+  #gibson img.moth, #gibson img.shadow {
+    animation-duration: 12s;
+  }
+}
+
+@media only screen and (max-width: 130em) {
+  #gibson img.moth, #gibson img.shadow {
+    animation-duration: 10s;
+  }
+}
+
+@media only screen and (max-width: 100em) {
+  #gibson img.moth, #gibson img.shadow  {
+    animation-duration: 8s;
+  }
+}
+
+@media only screen and (max-width: 70em) {
+  #gibson img.moth, #gibson img.shadow  {
+    animation-duration: 6s;
+  }
+}
+
+@media only screen and (max-width: 40em) {
+  #gibson img.moth, #gibson img.shadow  {
+    animation-duration: 4s;
+  }
+}
+
+@keyframes slideRL {
+  from {
+    left: 100vw;
+    transform: rotate(-45deg);
+  }
+
+  to {
+    left: -5em;
+    transform: rotate(-45deg);
+  }
+}
+
+@keyframes slideLR {
+  from {
+    left: -5em;
+    transform: rotate(135deg);
+  }
+
+  to {
+    left: 100vw;
+    transform: rotate(135deg);
+  }
+}