Show Calibration message (and fade it out)

mix.exs

@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
 
   def project do
     [app: :grains,
-     version: "0.0.82",
+     version: "0.0.83",
      elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,

web/static/css/app.css

@@ -35,3 +35,34 @@ svg {
 .jumbotron .small {
     font-size: 0.7em;
 }
+
+#calibration {
+    position: absolute;
+    top: 10%;
+    bottom: 10%;
+    left: 5%;
+    right: 5%;
+    background: rgba(0, 0, 56, 0.5);
+    z-index: -1;
+    border-radius: 20px;
+    border: 5px solid rgba(0, 10, 55, 0.4);
+}
+
+#calibration h2 {
+    margin-top: 10%;
+    font-size: 2em;
+    font-weight: bold;
+}
+
+#calibration p {
+    padding: 10%;
+}
+
+#calibration.end{
+    transition: all 1s ease-in-out;
+    background-color: rgba(255, 0, 0, 0.0);
+    box-shadow: none;
+
+    border: 0px solid white;
+    border-radius: 0px;
+}

web/static/js/views/player.js

@@ -12,6 +12,16 @@ export default class View extends MainView {
     OrientationPanel.init(socket, "orientationPanel");
     AccelerationPanel.init(socket, "accelerationPanel");
 
+    // ugly ugly, but quick and dirty and it seems to work...
+    setTimeout(function() {
+      let msg = document.getElementById('calibration');
+      if (msg) { msg.classList.add('end'); };
+      setTimeout(function() {
+        let msg = document.getElementById('calibration');
+        msg.style.display = 'none';
+      }, 1000);
+
+    }, 5000);
 
     console.log("PlayerView mounted");
   }

web/templates/grains/play.html.eex

 
 <h1>Play</h1>
 
+<div id="calibration">
+  <h2>Calibrating</h2>
+  <p>Please move your phone left/right and forward/backward to
+    calibrate sensors</p>
+</div>
+
+
 <div id="svg-container">
 <%= if assigns[:user_type] == 0 do %>
 <svg xmlns="http://www.w3.org/2000/svg"