Claw Game progress 2

Claw game is now playable from within SS13

- still need to code and test win-functionality
- still need to code prize ball and circuit board

code/modules/arcade/Crane.js

@@ -1,79 +0,0 @@
-function Crane(id) {
-	//console.log("crane created");
-    var top = 131; //private
-    var left = 100;
-	var hspd = 6;
-	var vspd = 4;
-	var state = false;
-	var handleHeight = 83;
-	var frames = {
-		normal: {'background-position': '-36px -34px',left:11},
-		half: {'background-position': '-36px -148px',left:6},
-		open: {'background-position': '-28px -270px',left:-2}
-	};
-	
-	this.GetState = function() {return state};
-	this.GetLeft = function() {return left};
-	this.GetTop = function() {return top};
-	
-	var Grab = function () {
-		top += (state == 'down')?vspd:-vspd; 
-		handleHeight += (state == 'down')?vspd:-vspd;
-
-		if(top > 300 && state == 'down') { //when going down
-			top = 300;
-			//handleHeight = ;
-			state = 'up';
-			$('#'+id+' #crane-claw').css(frames['half']); 
-		} else if(top < 131 && state == 'up') { //when going up
-			top = 131;
-			handleHeight = 83;
-			state = 'drop';
-			
-		} else if(state == 'drop') { //when up and dropping
-			left -= hspd;
-			top = 131;
-			handleHeight = 83;
-			if(left < 30) {
-				left = 30;
-				$('#'+id+' #crane-claw').css(frames['open']);
-				setTimeout(function(){$('#'+id+' #crane-claw').css(frames['normal']);state = false;},500);
-				
-			}
-		}
-    };
-	
-	var CheckBoundaries = function () {
-		
-		if(left < 30)
-			left = 30;
-		else if(left > 788)
-			left = 788;	
-	};
-	
-	this.Update = function () {
-		//console.log(left);
-		if(keys["left"] && !state) //left
-			left -= hspd;
-			
-		if(keys["right"] && !state) //right
-			left += hspd;
-			
-		if(keys["down"] && !state) { //space
-			state = 'down';
-			
-			$('#'+id+' #crane-claw').css(frames['open']);
-		}
-		
-		if(state) {
-			Grab();
-		}
-			
-		CheckBoundaries();
-	};
-	
-	this.Repaint = function () {
-        $('#'+id).css({'top':top, 'left':left});
-		$('#'+id+' #crane-handle-top').css({height: handleHeight});
-    };
-}

code/modules/arcade/Prize.js

@@ -1,114 +0,0 @@
-function Prize(id,css, crane) {
-    var top = css['top'];  
-    var left = css['left'];
-    var original_left = css['left'];
-	hspd = 15;
-	vspd = 5;
-	var state = 'falling';
-	var error;
-
-	var rand = Math.floor(Math.random()*10);
-	var rand2 = Math.floor(Math.random()*8);
-	var item = ['item.2618.png','item.3122.png','item.6358.png',
-		'aurum.png','item.7857.png','item.7868.png','item.7843.png','item.7842.png',
-	
-	];
-	css['background'] = 'url(images/'+item[rand2]+') no-repeat center';
-	var pic = $('<div></div>').attr({'id':'prize'+id,class:'prize-ball'}).css(css);
-	var ball = $('<div></div>').css({height: 60,'background':'url(images/prizeorbs.png) no-repeat -4px -'+62*rand+'px'});
-	$(pic).append(ball);
-	$('#game').append(pic);
-
-	//console.log(crane);
-	this.GetState = function() {return state};
-	
-	var CheckBoundaries = function () {
-		
-		if(left < 52)
-			left = 52;
-		else if(left > 812)
-			left = 812;	
-		
-		if(top < 30)
-			top = 30;
-		else if(top > 347 && state !='won' && state !='hidden') {
-			top = 347;	
-			state = 'resting';
-		} else if(top > 500 && state =='won') {
-			top=500;
-		}
-	};
-	
-	var CheckGrabbed = function() {
-		 
-		var tmp = Math.floor(Math.random()*100);
-		if(tmp>error) {
-			setTimeout(function(){
-				state='falling';
-				$('#debug-streak').html(0); //reset streak	
-			},4*error+300);
-		 } 
-		 
-		state = 'is grabbed';
-	};
-	
-	var IsGrabbed = function() {
-		top = crane.GetTop()+65;
-		
-		if(top > 347) 
-			top = 347;	
-			
-		left = crane.GetLeft()+23;
-		if(left <= 60) {
-			left = 60;
-			state = 'won';
-		} 
-	};
-	
-	this.GetError = function(offset) {
-		return Math.floor(160/(.1*offset+1)-60);
-	};
-	
-	this.Update = function () {
-	
-		if(crane.GetState() == 'down' && state=='resting') {
-			var offset = Math.abs(left - crane.GetLeft()-23);
-			error = this.GetError(offset);
-			if(error > 0) {				
-				state = 'being grabbed';
-				$('#debug-errorpx').html(Math.abs(offset)+'px');
-				$('#debug-errordrop').html(error+'%');//debugging
-			}
-		}
-		
-		if(crane.GetState() == 'up' && state=='being grabbed')
-			CheckGrabbed();
-		
-		if((crane.GetState() == 'drop' || crane.GetState() == 'up') && state=='is grabbed')
-			IsGrabbed();
-		
-		if(state=='falling'||state=='won')
-			top += vspd;
-		
-		if(state=='won' && top > 460) {
-			$('#prize'+id).remove();//css({visibility:'hidden'});
-			state='hidden';
-			
-			$('#debug-streak').html(parseInt($('#debug-streak').html())+1); //inc streak
-			
-			//spawn new prize
-			setTimeout(function(){
-				prizes[prizes.length] = new Prize(prizes.length,{top: Math.ceil(Math.random()*100),left: original_left},crane);}
-				,1000);	
-			
-		}
-		
-		CheckBoundaries();
-	};
-	
-	this.Repaint = function () {
-        $('#prize'+id).css({'top':top, 'left':left});
-		//$('#'+id+' #crane-handle-top').css({height: handleHeight});
-    };
-	
-}

code/modules/arcade/arcade_base.dm

@@ -20,6 +20,20 @@
 	new choice(loc)
 	qdel(src)
 
+/obj/machinery/arcade/examine(mob/user)
+	..(user)
+	if(freeplay)
+		user << "Someone enabled freeplay on this machine!"
+	else
+		if(token_price)
+			user << "\The [src.name] costs [token_price] credits per play."
+		if(!tokens)
+			user << "\The [src.name] has no available play credits. Better feed the machine!"
+		else if(tokens == 1)
+			user << "\The [src.name] has only 1 play credit left!"
+		else
+			user << "\The [src.name] has [tokens] play credits!"
+
 /obj/machinery/arcade/attackby(var/obj/item/O as obj, var/mob/user as mob, params)
 	if(istype(O, /obj/item/weapon/screwdriver) && anchored)
 		playsound(src.loc, 'sound/items/Screwdriver.ogg', 50, 1)

code/modules/arcade/claw_game.dm

@@ -7,6 +7,14 @@
 	token_price = 15
 	var/bonus_prize_chance = 5		//chance to dispense a SECOND prize if you win, increased by matter bin rating
 
+	//This is to make sure the images are available
+	var/list/img_resources = list('icons/obj/arcade_images/backgroundsprite.png',
+								'icons/obj/arcade_images/clawpieces.png',
+								'icons/obj/arcade_images/crane_bot.png',
+								'icons/obj/arcade_images/crane_top.png',
+								'icons/obj/arcade_images/prize_inside.png',
+								'icons/obj/arcade_images/prizeorbs.png')
+
 /obj/machinery/arcade/claw/New()
 	component_parts = list()
 	//component_parts += new /obj/item/weapon/circuitboard/clawgame(null)
@@ -35,6 +43,7 @@
 
 /obj/machinery/arcade/claw/proc/win()
 	icon_state = "clawmachine_win"
+	usr << "YOU WIN!"
 	//if(prob(bonus_prize_chance))
 		//double prize mania!
 	//	new /obj/item/toy/prizeball(get_turf(src))
@@ -48,51 +57,27 @@
 /obj/machinery/arcade/claw/interact(mob/user as mob)
 	if(stat & BROKEN || panel_open)
 		return
-	if(!tokens)
+	if(!tokens && !freeplay)
 		user << "The game doesn't have enough credits to play! Pay first!"
 		return
 	if(!playing && tokens)
 		user.set_machine(src)
 		playing = 1
-		tokens -= 1
+		if(!freeplay)
+			tokens -= 1
 	if(playing && (src != user.machine))
 		user << "Someone else is already playing, please wait your turn!"
 		return
+
+	user << browse_rsc('page.css')
+	for(var/i=1, i<=img_resources.len, i++)
+		user << browse_rsc(img_resources[i])
 	user << browse('crane.html', "window=Claw Game;size=600x600")
-	/*
-	var/dat
-	var/datum/browser/clawgame = new(user, "clawgame", name, 600, 600)
-	clawgame.add_stylesheet("claw", 'code/modules/arcade/page.css')
-	clawgame.add_script("crane", 'code/modules/arcade/Crane.js')
-	clawgame.add_script("prize", 'code/modules/arcade/Prize.js')
-	clawgame.add_script("main", 'code/modules/arcade/main.js')
-
-	dat += "<div id='game' style='position: relative;'>"
-	dat += "<div id='background'></div>"
-
-	dat += "<div id='crane'>"
-	dat += "<div id='crane-handle-top'></div>"
-	dat += "<div id='crane-handle-bottom'></div>"
-
-	dat += "<div id='crane-claw'></div>"
-	dat += "<div id='crane-center'></div>"
-	dat += "</div>"
-
-	dat += "<div id='grayorbs-chute'></div>"
-
-	dat += "<div id='foreground'></div>"
-
-	dat += "</div>"
-
-	dat += "<div style='position: absolute; top: 550px'>"
-	dat += "<br><button onclick='gameStartUp()'>Play Now!</button>"
-	dat += "<br>"
-	dat += "<button onmouseover='joystickControlOn('left')' onmouseout='joystickControlOff('left')'>MOVE<br>LEFT</button>"
-	dat += "<button onmousedown='joystickControlOn('down')' onmouseup='joystickControlOff('down')'>DROP<br>CLAW</button>"
-	dat += "<button onmouseover='joystickControlOn('right')' onmouseout='joystickControlOff('right')'>MOVE<br>RIGHT</button>"
-	dat += "</div>"
-
-	clawgame.set_content(dat)
-	clawgame.open()
-	*/
 	return
+
+/obj/machinery/arcade/claw/Topic(href, list/href_list)
+	if(..())
+		return
+	if(href_list["prizeWon"])
+		usr << browse(null, "window=Claw Game")	//just in case
+		win()

code/modules/arcade/crane.html

@@ -1,14 +1,266 @@
 <!DOCTYPE HTML>
 <html>
 	<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<title>Crane game</title>
 	<link rel="stylesheet" type="text/css" href="page.css" />
-  	<script src="./jquery.js"></script>
-	<script src="./Crane.js"></script>
-	<script src="./Prize.js"></script>
-	<script src="./main.js"></script>	
+	<script src="libraries.min.js"></script>
+	<!-- Prize.js --><script>
+	function Prize(id,css, crane) {
+		var top = css['top'];  
+		var left = css['left'];
+		var original_left = css['left'];
+		hspd = 15;
+		vspd = 5;
+		var state = 'falling';
+		var error;
+
+		var rand = Math.floor(Math.random()*10);
+		css['background'] = 'url(prize_inside.png) no-repeat center';
+		var pic = $('<div></div>').attr({'id':'prize'+id,class:'prize-ball'}).css(css);
+		var ball = $('<div></div>').css({height: 60,'background':'url(prizeorbs.png) no-repeat -4px -'+62*rand+'px'});
+		$(pic).append(ball);
+		$('#game').append(pic);
+
+		//console.log(crane);
+		this.GetState = function() {return state};
+		
+		var CheckBoundaries = function () {
+			
+			if(left < 52)
+				left = 52;
+			else if(left > 812)
+				left = 812;	
+			
+			if(top < 30)
+				top = 30;
+			else if(top > 347 && state !='won' && state !='hidden') {
+				top = 347;	
+				state = 'resting';
+			} else if(top > 500 && state =='won') {
+				top=500;
+			}
+		};
+		
+		var CheckGrabbed = function() {
+			 
+			var tmp = Math.floor(Math.random()*100);
+			if(tmp>error) {
+				setTimeout(function(){
+					state='falling';
+					$('#debug-streak').html(0); //reset streak
+					document.getElementById("lose_btn").click();
+				},4*error+300);
+			 } 
+			 
+			state = 'is grabbed';
+		};
+		
+		var IsGrabbed = function() {
+			top = crane.GetTop()+65;
+			
+			if(top > 347) 
+				top = 347;	
+				
+			left = crane.GetLeft()+23;
+			if(left <= 60) {
+				left = 60;
+				state = 'won';
+			} 
+		};
+		
+		this.GetError = function(offset) {
+			return Math.floor(160/(.1*offset+1)-60);
+		};
+		
+		this.Update = function () {
+		
+			if(crane.GetState() == 'down' && state=='resting') {
+				var offset = Math.abs(left - crane.GetLeft()-23);
+				error = this.GetError(offset);
+				if(error > 0) {				
+					state = 'being grabbed';
+					$('#debug-errorpx').html(Math.abs(offset)+'px');
+					$('#debug-errordrop').html(error+'%');//debugging
+				}
+			}
+			
+			if(crane.GetState() == 'up' && state=='being grabbed')
+				CheckGrabbed();
+			
+			if((crane.GetState() == 'drop' || crane.GetState() == 'up') && state=='is grabbed')
+				IsGrabbed();
+			
+			if(state=='falling'||state=='won')
+				top += vspd;
+			
+			if(state=='won' && top > 460) {
+				$('#prize'+id).remove();//css({visibility:'hidden'});
+				state='hidden';
+				
+				prizeWon = true;
+				document.getElementById("win_btn").click();
+				
+				//$('#debug-streak').html(parseInt($('#debug-streak').html())+1); //inc streak
+				
+				//spawn new prize
+				/*
+				setTimeout(function(){
+					prizes[prizes.length] = new Prize(prizes.length,{top: Math.ceil(Math.random()*100),left: original_left},crane);}
+					,1000);	
+				*/
+			}
+			
+			CheckBoundaries();
+		};
+		
+		this.Repaint = function () {
+			$('#prize'+id).css({'top':top, 'left':left});
+			//$('#'+id+' #crane-handle-top').css({height: handleHeight});
+		};
+		
+	}</script>
+	<!-- Crane.js --><script>
+	function Crane(id) {
+		//console.log("crane created");
+		var top = 131; //private
+		var left = 100;
+		var hspd = 6;
+		var vspd = 4;
+		var state = false;
+		var handleHeight = 83;
+		var frames = {
+			normal: {'background-position': '-36px -34px',left:11},
+			half: {'background-position': '-36px -148px',left:6},
+			open: {'background-position': '-28px -270px',left:-2}
+		};
+		
+		this.GetState = function() {return state};
+		this.GetLeft = function() {return left};
+		this.GetTop = function() {return top};
+		
+		var Grab = function () {
+			top += (state == 'down')?vspd:-vspd; 
+			handleHeight += (state == 'down')?vspd:-vspd;
+
+			if(top > 300 && state == 'down') { //when going down
+				top = 300;
+				//handleHeight = ;
+				state = 'up';
+				$('#'+id+' #crane-claw').css(frames['half']); 
+			} else if(top < 131 && state == 'up') { //when going up
+				top = 131;
+				handleHeight = 83;
+				state = 'drop';
+				
+			} else if(state == 'drop') { //when up and dropping
+				left -= hspd;
+				top = 131;
+				handleHeight = 83;
+				if(left < 30) {
+					left = 30;
+					$('#'+id+' #crane-claw').css(frames['open']);
+					setTimeout(function(){$('#'+id+' #crane-claw').css(frames['normal']);state = false;},500);
+					
+				}
+			}
+		};
+		
+		var CheckBoundaries = function () {
+			
+			if(left < 30)
+				left = 30;
+			else if(left > 788)
+				left = 788;	
+		};
+		
+		this.Update = function () {
+			//console.log(left);
+			if(keys["left"] && !state) //left
+				left -= hspd;
+				
+			if(keys["right"] && !state) //right
+				left += hspd;
+				
+			if(keys["down"] && !state) { //space
+				state = 'down';
+				
+				$('#'+id+' #crane-claw').css(frames['open']);
+			}
+			
+			if(state) {
+				Grab();
+			}
+				
+			CheckBoundaries();
+		};
+		
+		this.Repaint = function () {
+			$('#'+id).css({'top':top, 'left':left});
+			$('#'+id+' #crane-handle-top').css({height: handleHeight});
+		};
+	}</script>
+	<!-- main.js --><script>
+	var crane = new Crane('crane');
+	var keys = [];
+	var prizes = [];
+	var prizeWon = false;
+
+	window.requestAnimFrame = (function(callback){
+		return window.requestAnimationFrame ||
+		window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		function(callback){
+			window.setTimeout(callback, 1000 / 30);
+		};
+	})();
+
+	function animate(){
+		//console.log("animate called");
+		crane.Update();
+		
+		for(var i = 0; i< prizes.length; i++)
+			prizes[i].Update();
+		
+		for(var i = 0; i< prizes.length; i++)
+			prizes[i].Repaint();
+			
+		crane.Repaint();
+		
+		requestAnimFrame(function(){
+			animate();
+		});
+	}
+
+	function joystickControlOn(direction){
+		//console.log(direction);
+		keys[direction] = true;
+	}
+
+	function joystickControlOff(direction){
+		//console.log(direction);
+		keys[direction] = false;
+	}
+
+	function gameStartUp(){ //main function
+		//console.log("game start!");
+		document.getElementById("play_btn").disabled = true;	//to prevent button-mashing the start button.
+		for(var i = 0; i< 5; i++)
+			prizes[i] = new Prize(i,{top: Math.ceil(Math.random()*100),left: 400+i*100-Math.ceil(Math.random()*50)},crane);
+			//console.log("prize made");
+		
+		//crane.Repaint();
+		animate();
+	}
+	
+	function gameShutDown(){
+		if(prizeWon != true)
+			document.getElementById("lose_btn").click();
+	}</script>
 	</head>
-	<body>
+	<body onunload="gameShutDown()">
 	
 		<div id='game' style='position: relative;'>
 			<div id="background"></div>
@@ -28,7 +280,7 @@
 		</div>
 		
 		<div style='position: absolute; top: 550px'>
-			<br><button onclick="gameStartUp()">Play Now!</button>
+			<br><button id="play_btn" onclick="gameStartUp()">Play Now!</button><a id="win_btn" href='byond://?src=\ref[src];prizeWon=1' hidden="true"></a><a id="lose_btn" href='byond://?src=\ref[src];prizeWon=0' hidden="true"></a>
 			<br>
 			<button onmouseover="joystickControlOn('left')" onmouseout="joystickControlOff('left')">/==<br>\==</button>
 			<button onmousedown="joystickControlOn('down')" onmouseup="joystickControlOff('down')">DROP<br>CLAW</button>

code/modules/arcade/main.js

@@ -1,59 +0,0 @@
-var crane = new Crane('crane');
-var keys = [];
-var prizes = [];
-
-window.requestAnimFrame = (function(callback){
-    return window.requestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.oRequestAnimationFrame ||
-    window.msRequestAnimationFrame ||
-    function(callback){
-        window.setTimeout(callback, 1000 / 30);
-    };
-})();
-
-function animate(){
-	//console.log("animate called");
-	crane.Update();
-	
-	for(var i = 0; i< prizes.length; i++)
-		prizes[i].Update();
-	
-	for(var i = 0; i< prizes.length; i++)
-		prizes[i].Repaint();
-		
-	crane.Repaint();
-	
-	requestAnimFrame(function(){
-		animate();
-	});
-}
-
-
-
-function joystickControlOn(direction){
-	//console.log(direction);
-	keys[direction] = true;
-};
-
-function joystickControlOff(direction){
-	//console.log(direction);
-	keys[direction] = false;
-};
-
-//stops when text area loses focus
-function handsOff(){
-    //keys.length = 0;
-	keys = []; //clears array
-};
-
-function gameStartUp(){ //main function
-	//console.log("game start!");
-	for(var i = 0; i< 5; i++)
-		prizes[i] = new Prize(i,{top: Math.ceil(Math.random()*100),left: 400+i*100-Math.ceil(Math.random()*50)},crane);
-		console.log("prize made");
-	
-	//crane.Repaint();
-	animate();
-};

code/modules/arcade/page.css

@@ -2,7 +2,7 @@
 	width:900px;
 	height:406px;
 	position: absolute;
-	background: url(images/backgroundsprite.png) no-repeat;
+	background: url(backgroundsprite.png) no-repeat;
 	background-position: 0 -166px;
 	top: 62px;
 }
@@ -11,7 +11,7 @@
 	width: 902px;
 	height: 131px;
 	position: absolute;
-	background: url(images/backgroundsprite.png) no-repeat center;
+	background: url(backgroundsprite.png) no-repeat center;
 	background-position: 3px -15px;
 	top: 337px;
 	left: -3px;
@@ -21,7 +21,7 @@
 	width:900px;
 	height:520px;	
 	position: absolute;
-	background: url(images/backgroundsprite.png) no-repeat center;
+	background: url(backgroundsprite.png) no-repeat center;
 	background-position: 0 -575px;
 	z-index:10;
 }
@@ -38,7 +38,7 @@
 	width: 10px;
 	height: 83px;
 	position: absolute;
-	background: url('images/crane handle top.png') repeat-y center;
+	background: url('crane_top.png') repeat-y center;
 	bottom: 86px;/*top: -69px;*/
 	left: 47px;
 }
@@ -47,7 +47,7 @@
 	width:10px;
 	height:8px;
 	position: absolute;
-	background: url('images/clawpieces.png') no-repeat center;
+	background: url('clawpieces.png') no-repeat center;
 	top: 14px;
 	left: 47px;
 	background-position: -198px -83px;
@@ -57,7 +57,7 @@
 	width: 26px;
 	height: 27px;
 	position: absolute;
-	background: url('images/clawpieces.png') no-repeat center;
+	background: url('clawpieces.png') no-repeat center;
 	top: 22px;
 	left: 39px;
 	background-position: -190px -101px;
@@ -67,7 +67,7 @@
 	width: 110px;
 	height: 78px;
 	position: absolute;
-	background: url('images/clawpieces.png') no-repeat center;
+	background: url('clawpieces.png') no-repeat center;
 	top: 33px;
 	left: 11px;
 	background-position: -36px -34px;
@@ -76,7 +76,7 @@
 .prize-ball {
 	width: 60px;
 	height: 60px;
-	//background: url('images/prizeorbs.png') no-repeat;
+	//background: url('prizeorbs.png') no-repeat;
 	//-moz-border-radius: 30px;
 	//-webkit-border-radius: 30px;
 	//border-radius: 30px;