Slotmachine added

Author: MartinSivertsen

css/controllers.css

@@ -42,7 +42,7 @@
 
 }
 
-#btn-create-game, #btn-sim-hit, #btn-restart-game {
+#btn-create-game, #btn-sim-hit, #btn-restart-game, #btn-slotmachine {
     display: inline-block;
     padding: 5px;
     margin-top: 40px;
@@ -87,7 +87,14 @@
     height: 100%;
     background-color: #367d59;
 }
-
+#slotmachine-container {
+	position: absolute;
+	display: none;
+	width: 200px;
+	top: 100px;
+	left: 42%;
+	margin: auto;
+}
 #message-container {
     position: absolute;
     display: none;

css/slotmachine.css

@@ -0,0 +1,68 @@
+#slotmachine {
+  width: 100px;
+  height: 100px;
+  padding: 0px 0px 0px;
+  margin: 0 auto;
+  background: radial-gradient(ellipse at center,  #0b4260  0%,#080c0f  100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b4260 ', endColorstr='#080c0f ',GradientType=1 );
+  border: 5px solid #008080;
+  border-radius: 10px;
+  -webkit-transition: all ease 1s;
+  -moz-transition: all ease 1s;
+  transition: all ease 1s;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  box-shadow: 0px 0px 60px 0px rgba(0,0,0, 0.4);
+}
+
+span {
+  position: absolute;
+  top: -200px;
+  left: -393px;
+  height: 500px;
+  width: 500px;
+  background: url('../pics/powerups.png') no-repeat;
+}
+
+
+
+.boost {
+  -webkit-transform:rotate(0deg);
+  -moz-transform: rotate(0deg);
+  transform: rotate(0deg);
+  
+}
+.rapidfire {
+  -webkit-transform:rotate(90deg);
+  -moz-transform:rotate(90deg);
+  transform:rotate(90deg);
+}
+
+.shield {
+  -webkit-transform:rotate(180deg);
+  -moz-transform:rotate(180deg);
+  transform:rotate(180deg);  
+}
+
+.health {
+  -webkit-transform:rotate(270deg);
+  -moz-transform:rotate(270deg);
+  transform:rotate(270deg);
+}
+
+.spin_forward {
+  -webkit-animation: rotate 1s infinite;
+  -webkit-animation-timing-function: linear;
+  -moz-animation: rotate 1s infinite linear;
+}
+
+@-webkit-keyframes rotate {
+  from { -webkit-transform:rotate(0deg) } 
+  to { -webkit-transform:rotate(360deg) }
+}
+
+@-moz-keyframes rotate {
+  from { -moz-transform:rotate(0deg) } 
+  to { -moz-transform:rotate(360deg) }
+}

home.html

@@ -10,6 +10,7 @@
     <script src="js/gatt.js"></script>    
     <script src="js/setBit.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="css/slotmachine.css"></link>
     <link rel="stylesheet" type="text/css" href="css/stylesheet.css"></link>
     <link rel="stylesheet" type="text/css" href="css/controllers.css"></link>
 
@@ -72,7 +73,7 @@ <h2 onclick="disconnect();" id='disconnect'>Disconnect</h2>
             var time = new Date();
             var e = time.getTime();
             toggleFullscreen();
-            connect();
+            //connect();
             setTimeout(function() {
                 $('.column').load('include/controllers.html?t=' + e);  
             }, 600);  

include/controllers.html

@@ -13,7 +13,11 @@
         <div id="points" class="wait-till-game">
             ♥ 10
         </div>
-
+		<div id="slotmachine-container">
+			<div id="slotmachine">
+				<span></span>
+			</div>
+		</div>
         <div id="message-container">
             <div id="message">
             </div>
@@ -30,6 +34,9 @@
             </div>
             <div id="btn-restart-game">
                 Restart
+            </div>
+			<div id="btn-slotmachine">
+                Slotmachine
             </div>
         </div>
         <div id="count-down">
@@ -45,9 +52,8 @@
     <div id="status-create-game">
     </div>
     <script src="js/virtualJoystick.js"></script>   
-    <script src="js/nipplejs.min.js"></script>   
-
-
+    <script src="js/nipplejs.min.js"></script>
+	<script type="text/JavaScript" src="js/slotmachine.js"> </script>
 
     <!--  Include demo version of the car controllers -->
     <script type="text/javascript" src="js/demo.js"></script>

js/slotmachine.js

@@ -0,0 +1,38 @@
+	var slotTimeOut = 2500;
+	var running = false;
+
+$(document).ready(function() {
+	
+	$('#btn-slotmachine').on('touchstart mousedown', function() {
+			if(running == false)
+			startSlot();		
+	});
+	
+ });
+
+function startSlot () {
+	running = true;
+	
+	$('#slotmachine-container').fadeIn(1000);
+	$('span').toggleClass(rand);
+	$('span').addClass('spin_forward');
+	
+    var powerups = ["boost", "rapidfire", "shield", "health"],
+		
+    rand = powerups[Math.floor(Math.random() * powerups.length)];
+	$('span').toggleClass(rand); 
+	console.log(rand); 
+	setTimeout(stopSlot, slotTimeOut);
+};
+
+ function stopSlot(){
+	 $('span').removeClass('spin_forward');
+	 setTimeout(slotFadeout, 5000);	
+ }
+ 
+  function slotFadeout() {
+	$('#slotmachine-container').fadeOut(1000); 
+	running = false;
+ }
+
+

pics/powerups.png

@@ -0,0 +1,13 @@
+<html>
+<head>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
+	<script type="text/JavaScript" src="js/slotmachine.js"> </script>
+	<link rel="stylesheet" type="text/css" href="css/slotmachine.css"></link>
+	
+</head>
+<body>
+	<div id="slotmachine">
+		<span></span>
+	</div>
+</body>
+</html>