recover/rewrite old room page and basic minigame

client/css/room.css

@@ -0,0 +1,222 @@
+body{
+    margin : 0px;
+    padding: 0px;
+    overflow: hidden;
+    background:black;
+}
+
+#menu {
+    position:absolute;
+    width:50%;
+    left:25%;
+    background:white;
+    z-index:100;
+}
+
+#background{
+    position: absolute;
+    height:100%;
+    width:100%;
+    top:0px;
+    right:0px;
+}
+
+#door_left{
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    top: 0px;
+    left: 0px;
+    z-index:5;
+}
+
+#door_right{
+    position: absolute;
+    height: 100%;
+    width: 56.5%;
+    top: 0px;
+    left: 43.5%;
+    z-index:5;
+}
+
+#door_label{
+    position: absolute;
+    left: 15%;
+    top: 15%;
+    width: 55%;
+    text-align: center;
+    text-shadow: #aaa 1px 1px;
+    color: #222;
+    font-size: 9vh;
+    font-family: monospace;
+    font-weight: bold;
+    text-transform: uppercase;
+    z-index : 10;
+}
+
+.img{
+    width: 100%;
+    height: 100%;
+    position:absolute;
+}
+
+
+#lock{
+    position: absolute;
+    background: black;
+    width: 70%;
+    z-index: 10;
+    color: green;
+    top: 42%;
+    left: 15%;
+    padding: 2vh;
+    font-size: 7vh;
+    font-family: courier;
+    font-weight: bold;
+    text-align: center;
+}
+
+.bar{
+    -webkit-animation-name: blink2;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-play-state: running;
+
+    animation-name: blink2;
+    animation-duration: 0.8s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+}
+
+
+#room_name{
+    width: 80%;
+    top: 3%;
+    position: absolute;
+    right: 10%;
+    background : transparent;
+    text-align: center;
+    text-shadow: #aaa 1px 1px;
+    color: #111;
+    font-size: 10vh;
+    font-family: monospace;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+#room_event{
+    width: 60%;
+    top: 15%;
+    height: 10%;
+    position: absolute;
+    right: 20%;
+    color: green;
+    text-align:center;
+    padding:5px;
+    background : black;
+    border-radius:5px;
+}
+
+#game{
+    width: 60%;
+    top: 30%;
+    height: 60%;
+    position: absolute;
+    right: 20%;
+    background : black;
+    border-radius:5px;
+}
+
+.minigame{
+	width : calc( 100% - 100px );
+	height : 60px;
+	padding : 5px;
+	right : 50px;
+	margin-left: 50px;
+	margin-top: 5px;
+	margin-bottom:5px;
+	border-radius : 5px;
+	border: solid;
+	border-width : 1px;
+	border-color: green;
+	color:green;
+	text-align:center;
+	transition: background 1s linear;
+}
+
+.key {
+	margin-left: 5px;
+	margin-right: 5px;
+	width: 22px;
+	height: 22px;
+	border-radius: 6px;
+	border-width: 0.5px;
+	border: solid;
+	display: inline-block;
+	font-size: 16px;
+	font-weight: bold;
+	font-family: monospace;
+	background: rgba(150,150,150,0.5);
+}
+
+.gauge{
+	border: solid;
+	margin: 5px;
+	height: 20px;
+	margin-right: 20%;
+	margin-left: 20%;
+}
+
+.gauge_level{
+width: 50%;
+height: 100%;
+background-color: blue;
+}
+
+.inactive{
+	opacity : 0.5
+}
+
+.blink1 {
+    -webkit-animation-name: blink;
+    -webkit-animation-duration: 0.3s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-play-state: running;
+
+    animation-name: blink;
+    animation-duration: 0.3s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+}
+
+@-webkit-keyframes blink {
+    0%   {background: rgba(0,0,0,1);}
+    50%  {background: rgba(150,150,150,0.5);}
+    100% {background: rgba(0,0,0,1);}
+}
+
+@keyframes blink {
+    0%   {background: rgba(0,0,0,1);}
+    50%  {background: rgba(150,150,150,0.5);}
+    100% {background: rgba(0,0,0,1);}
+}
+
+@-webkit-keyframes blink2 {
+    0%   {opacity: 0;}
+    1%  {opacity : 1;}
+    50%  {opacity : 1;}
+    51%  {opacity : 0;}
+    100%  {opacity : 0;}
+}
+
+@keyframes blink2 {
+    0%   {opacity: 0;}
+    1%  {opacity : 1;}
+    50%  {opacity : 1;}
+    51%  {opacity : 0;}
+    100%  {opacity : 0;}
+}