Another Inlet

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//Players choises
var p1pick, p2pick;

//Items imgaes
var rockPic = "http://www.rocks-rock.com/Rhyolite.jpg";
var paperPic = "http://www.sugarcraft.com/catalog/misc/WFO-811.jpg";
var scissorsPic = "http://lifeand100books.files.wordpress.com/2012/04/scissors.jpg";

//locations and sizes
var displayW = 1000,
	displayH = 600;

var itemW = 100,
	itemH = 150;

var p1XOrigin = 250,
	p2XOrigin = 650,
	firstY = -20,
	delta = 10;
	p1XSelect = p1XOrigin+itemW+delta,
	p2XSelect = p2XOrigin-itemW-delta;

var movedP1 = Array();
var movedP2 = Array();

//Creating the display area
var svg = d3.select("svg")
			.append("svg")
			.attr("width", displayW)
			.attr("height", displayH)
			.style("background-color", "#E8E8E8");

//Instructional text
var p1Text = svg.append("text")
				.attr("x", 20)
				.attr("y", 220)
				.style("font-weight", "bold")
				.style("font-family", "arial")
				.text("Player 1, pick your choise");

var p2Text = svg.append("text")
				.attr("x", 780)
				.attr("y", 220)
				.style("font-weight", "bold")
				.style("font-family", "arial")
				.text("Player 2, pick your choise");

//Creating the surronding boxes
var p1Box = svg.append("rect")
	.attr("x", p1XOrigin-delta/2)
	.attr("y", firstY+delta*2.5)
	.attr("height", firstY+(3*itemH)-delta/2)
	.attr("width", itemW+delta)
	.style("fill", "#E8E8E8")
	.style("stroke", "black");
				
var p2Box = svg.append("rect")
	.attr("x", p2XOrigin-delta/2)
	.attr("y", firstY+delta*2.5)
	.attr("height", firstY+(3*itemH)-delta/2)
	.attr("width", itemW+delta)
	.style("fill", "#E8E8E8")
	.style("stroke", "black");
				
				
//START OF INAGE ELEMENTS
var p1Rock = svg.append("image")
	.attr("xlink:href", rockPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p1XOrigin)
	.attr("y", firstY)
	.attr("id", "rock1")
	.attr("class", "p1Class")
	.on("click", function(){ 
					 moveSelection("rock1", "p1Class");
					 p1pick = "1";});
	
var p2Rock = svg.append("image")
	.attr("xlink:href", rockPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p2XOrigin)
	.attr("y", firstY)
	.attr("id", "rock2")
	.attr("class", "p2Class")
	.on("click", function() { 
					moveSelection("rock2", "p2Class");
					p2pick = "1";});

var p1Paper = svg.append("image")
	.attr("xlink:href", paperPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p1XOrigin)
	.attr("y", firstY+itemH+delta)
	.attr("class", "p1Class")
	.attr("id", "paper1")
	.on("click", function(){ 
					 moveSelection("paper1", "p1Class");
					 p1pick = "2";});

var p2Paper = svg.append("image")
	.attr("xlink:href", paperPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p2XOrigin)
	.attr("y", firstY+itemH+delta)
	.attr("class", "p2Class")
	.attr("id", "paper2")
	.on("click", function() { 
					 moveSelection("paper2", "p2Class");
					 p2pick = "2";});
	
var p1Scissors = svg.append("image")
	.attr("xlink:href", scissorsPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p1XOrigin)
	.attr("y", firstY+2*(itemH+delta))
	.attr("class", "p1Class")
	.attr("id", "scissors1")
	.on("click", function(){ 
					 moveSelection("scissors1", "p1Class");
					 p1pick = "3";});
	
var p2Scissors = svg.append("image")
	.attr("xlink:href", scissorsPic)
	.attr("width", itemW)
	.attr("height", itemH)
	.attr("x", p2XOrigin)
	.attr("y", firstY+2*(itemH+delta))
	.attr("class", "p2Class")
	.attr("id", "scissors2")
	.on("click", function(){ 
					 moveSelection("scissors2", "p2Class");
					 p2pick = "3";});

//END OF IMAGE ELEMENTES

//Play button
var playButton = svg.append("rect")
					.attr("x", 385)
					.attr("y", 460)
					.attr("width", 200)
					.attr("height", 50)
					.attr("id", "playRect")
					.style("fill", "#FA8072")
					.style("cursor", "pointer")
					.on("mouseover", function() {d3.select(this).transition().duration(100).style("opacity", 0.5);})
					.on("mouseout", function() {d3.select(this).transition().duration(100).style("opacity", 1);})
					.on("click", rps);
			
var playText = svg.append("text")
					.attr("x", 445)
					.attr("y", 495)
					.style("font-size", 30)
					.style("font-weight", "bold")
					.style("cursor", "pointer")
					.text("PLAY")
					.on("click", rps);


//repositioning the selected element in each colomn
function moveSelection(id, pClass) {
	var toMove = d3.select("#"+id);
	var clsSel = (pClass == "p1Class") ? "p1col" : "p2col";
	if (clsSel == "p1col" && movedP1.length == 1) {
		var moveBack = movedP1.pop();
		moveBack.transition()
				.duration(500)
				.attr("x", p1XOrigin);
	} else if (clsSel == "p2col" && movedP2.length == 1) {
		var moveBack = movedP2.pop();
		moveBack.transition()
				.duration(500)
				.attr("x", p2XOrigin);
	}
	if (clsSel == "p1col") {
		toMove.transition()
				.duration(500)
				.attr("x", p1XSelect);
		movedP1.push(toMove);
	} else if (clsSel=="p2col"){
		toMove.transition()
				.duration(500)
				.attr("x", p2XSelect);
		movedP2.push(toMove);
	}
}

var winRect = svg.append("rect").attr("id", "winrect").attr("x", 335).attr("y", 530).attr("width", 300).attr("height", 50).style("fill", "peachpuff").style("opacity", 0);
var winText = svg.append("text").attr("id", "wintext").style("font-size",24).style("font-weight", "bold").attr("x", 380).attr("y", 565).style("opacity", 0);


//Indicate that the game is in random mode
function indicateRandom(playerN, textToDisplay) {
	var randomRect = svg.append("rect")
		.attr("id","randRect")
		.attr("width", 175)
		.attr("height", 25)
		.style("fill", "#35E609")
		.style("opacity", "0.5");
		
	var randText = svg.append("text")
					.attr("id", "randText")
					.text(textToDisplay+" is in random mode");
	
	
	if (playerN == "1") {
		randomRect.attr("x", 30)
				 .attr("y", 230);
		randText.attr("x", 31)
				.attr("y", 248);
	}
	if (playerN == "2") {
		randomRect.attr("x", 790)
				 .attr("y", 230);
		randText.attr("x", 791)
				.attr("y", 248);					 
	}
}

function rps() {
	if (typeof(p1pick)=="undefined") {
		indicateRandom("1", "Player 1");
		var rand = Math.floor((Math.random()*3)+1);
		switch(rand) {
			case(1): {	p1pick = "1"; 
						moveSelection("rock1", "p1Class");
						break;
					}
			case(2): {	p1pick = "2";
						moveSelection("paper1", "p1Class");
						break;
					}
			default: {	p1pick = "3";
						moveSelection("scissors1", "p1Class");
						break;
					}		
		}
		rps();
	}
	if (typeof(p2pick)=="undefined") {
		indicateRandom("2", "Player 2");
		var rand = Math.floor((Math.random()*3)+1);
		switch(rand) {
			case(1): {	p2pick = "1"; 
						moveSelection("rock2", "p2Class");
						break;
					}
			case(2): {	p2pick = "2";
						moveSelection("paper2", "p2Class");
						break;
					}
			default: {	p2pick = "3";
						moveSelection("scissors2", "p2Class");
						break;
					}		
		}
		rps();
	//Both players chose items
	} else {
		d3.select("#winrect")
			.transition()
			.delay(500)
			.duration(1000)
			.style("opacity", 1);
			
		d3.select("#wintext")
			.transition()
			.delay(500)
			.duration(1000)
			.style("opacity", 1)
			.attr("x", 485-logic().length*4.5)
			.text(logic());
	}
}

function logic() {
	if (p1pick == p2pick) {
		return "It's a draw";
	} else if (p1pick == "1" && p2pick == "2") {
		return "Player 2 is the winer";
	} else if (p1pick == "1" && p2pick == "3") {
		return "Player 1 is the winer";
	} else if (p1pick == "2" && p2pick == "1") {
		return "Player 1 is the winer";
	} else if (p1pick == "2" && p2pick == "3") {
		return "Player 2 is the winer";
	} else if (p1pick == "3" && p2pick == "1") {
		return "Player 2 is the winer";
	} else {
		return "Player 1 is the winer";
	}
}

//reset circle
var reset = svg.append("circle")
				.attr("r", 60)
				.attr("cx", 100)
				.attr("cy", 500)
				.style("fill", "wheat")
				.style("cursor", "pointer")
				.on("mouseover", function() {d3.select(this).transition().duration(500).attr("r",40).style("fill", "brown");})
				.on("mouseout", function() {d3.select(this).transition().duration(500).attr("r",60).style("fill", "wheat");})
				.on("click", resetValues);

var resetText = svg.append("text")
					.attr("x", 70)
					.attr("y", 505)
					.style("cursor", "pointer")
					.style("font-size", 20)
					.style("font-weight", "bold")
					.text("RESET")
					.on("click", resetValues);

//reset all the values
function resetValues() {
	p1pick = undefined;
	p2pick = undefined;
	if (movedP1.length ==1) {
		movedP1.pop().transition()
				 .duration(500)
				 .attr("x", p1XOrigin);
		d3.select("#randRect").remove();
		d3.select("#randText").remove();
	}
	if (movedP2.length ==1) {
		movedP2.pop().transition()
					 .duration(500)
					 .attr("x", p2XOrigin);
		d3.select("#randRect").remove();
		d3.select("#randText").remove();			 
	}
	d3.select("#winrect").transition().style("opacity", 0);
	d3.select("#winText").transition().style("opacity",0).text("");
}