Show Calibration message (and fade it out)

parent 49d4d8ac
......@@ -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,
......
......@@ -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;
}
......@@ -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");
}
......
<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"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment