Skip to content

Winners Animation Tutorial

Jump to bottom Edit New page
Zouspants edited this page Mar 21, 2016 · 5 revisions

Demo: http://www.loteriacs.com

Keep in mind that you might have to adapt the HTML and CSS parts of this tutorial so it will fit your design. Also im not a very experienced programmer and this is my first tutorial, please let me know what i can improve.

Before you start make a backup of the files below just in case:

  • index.html
  • script.js
  • style.css

First we need to create a file that will get the participants in the last pot. Create a file in the "/php" folder and name it "get-animation.php":

<?php

session_start();
include 'default.php';
$db = getDB();

//Id of the last round sent by script.js
$rId = $_GET['rId'];

//Get data from last round
$stmt = $db->query("SELECT * FROM `history` where id = '".$rId."'");
$itens = $stmt->fetch();

$potPrice = $itens['potPrice'];
$winner = $itens['winnerSteamId64'];
$pot = json_decode($itens['allItemsJson']);

$arr = array();
$warr = array();

//Read the pot data and add the owner avatar to an array according to the item value
//If an iten is worh 1 percent it adds 1 avatar, 5 percent = 5 pictures... and so on...
foreach($pot as $iten){

	//Get percentage on the iten 
	$itemPrice = $iten->{'itemPrice'};
	$percent = ($itemPrice * 100) / $potPrice;
	$pRound = round($percent);
	
	//If it is less than 1% give a value of 1 so it shows at least 1 picture of this user (just in case the user has only this iten in the pot)
	if($pRound < 1){ 
		$pRound = 1;
	}
	
	//Add the pictures to an array
	while($pRound >= 1){
		array_push($arr,"<li class='".$iten->{'itemSteamOwnerInfo'}->{'steamid'}."'><img src='".$iten->{'itemSteamOwnerInfo'}->{'avatarfull'}."' /></li>");
		
		//If its the winner adds a class to be used in javascript (also adds it to a separate array to be used below)
		if($winner == $iten->{'itemSteamOwnerInfo'}->{'steamid'})
		{
			array_push($warr,"<li class='winnerr'><img src='".$iten->{'itemSteamOwnerInfo'}->{'avatarfull'}."' /></li>");
		}
	
		$pRound = $pRound-1;
	}
}

//Shuffle the array so the animation looks more fun =D
shuffle($arr);

//Adds the winner to the end of the avatar list
array_push($arr, $warr[0]);

$result = count($arr);

//Print the list to be used in javascript
for ($i = 0; $i <= $result; $i++) {
    echo $arr[$i];
}

?>

Im using jquery ui to ease the animation, so add this scripts to your "index.html":

Save this image to your "/images" folder (Its just a blank arrow to point the winners picture):

Now, it starts to get a litte bit tricky because of the different site designs.

For example, if you want the animation to show up at the top of your page, on your "index.html" add the code:

    <div class="row" style='text-align:center;'>
        <div class='col-md-12' style='text-align:center;'>
	<div id="roulet" style="display:none;">
		<div class="wcont"><img src="images/win.png" class="winn" /></div>
		<ul id="winners">   			
		</ul>
	</div>
       </div>
    </div>

After:

<div class="container" id="main-container">

Then, add this code at the end of your style.css

#roulet {height:154px; text-align:left;overflow:hidden;border:3px solid white; background-color:999; margin-bottom:30px;}
#roulet ul { margin-left:-8px; padding:0px; width:999999px;}
#roulet ul li {display:inline;}
#roulet ul li img {border:1px solid white;width:150px;}
.wcont{text-align:center;}
.winn{
	width:100px;
	height:30px;
	position:absolute;
	float:left;
	z-index:99999;
	margin-top:-3px;
}

Now, starting on the line 308 of your script.js, you should change this part:

				$('#prev-winner-pic').attr('src', profileAvatar);
				$('#prev-winner-name').text(profileName);
				$('#prev-winner-amnt').text(potPriceReal);
				$('#prev-winner-chance').text(percentageChance + '%');

				if (mUserInfo !== null && winnerSteamID === mUserInfo['steamid']) {
					var msg = 'You have won ' + potPriceReal + ', with a ' + percentageChance + '% chance! Expect a trade request from our bot shortly. <b>Make sure that you are only receiving items. Our bot will never try to take any items from you.</b><br><br>Round ID: ' + prevGameID + '<br><br>If you do not receive a trade request shortly, please open a <a href="support.html">support ticket</a>, including the round id, your steam id, and any items that you can remember being in the pot.';

					swal({
						title: 'You win!',
						text: msg,
						closeOnConfirm: true,
						html: true,
					});
				} else {
					swal('Round ended!', winnerProfileName + ' has won ' + potPriceReal + ', with a ' + percentageChance + '% chance!', 'success');
				}

				potCount = -1;

				//TODO: Add circle thing here
				drawCircle(0);

				$('#pot-price').text('$0.00');
				$('#pot-items').text('0');
				$('#pot').text('');

				$('#items-deposited-count').text(0);
				$('#items-deposited-price').text(getFormattedPrice(0));
				$('#items-deposited-chance').text('0%');

To this:

//Get the last pot participants
$.get('php/get-animation.php?rId=' + prevGameID, function(data) {

	//Add the pictures from the last round (twice so the animation is a litte bit longer)
	$("#roulet ul").html(data);
	$("#roulet ul").append(data);

	var dv = 0;

	//Show the pictures
	$("#roulet").toggle("fast", function() {
		//Wait just a litte to make sure all the pictures are loaded.
		setTimeout(function() {
			//Calculate the position of the winners picture
			var div = $(".wcont").width();
			dv = div / 2;

			var p = $(".winnerr").position();
			var w = $("#roulet ul").position();

			var e = p.left - w.left - dv - 30;
			var d = p.left - w.left - dv + 100;
			
			//Set a random position so the arrow is not aways on the center of the picture
			var pos = randomIntFromInterval(e, d);

			//Adds last rounds picture again just in case the winners picture is the last one, so the animation doesnt end on an empty space
			$("#roulet ul").append(data);

			//Animate so the winner picture shows in the center of the page =D
			$("#roulet ul").animate({
				'marginLeft': '-' + pos + 'px'
			}, 5000, "easeOutQuart", function() {
				//Wait a litte bit before it hides the animation
				setTimeout(function() {
					$("#roulet").toggle("slow", function() {
						$("#roulet ul").css("margin-left", "-8px").html("");
					});
				}, 5000);

				//Add down here everything you call when you reset a round...
				//Like reseting your weel, sweet alert the winner, etc...
				//
					
					$('#prev-winner-pic').attr('src', profileAvatar);
					$('#prev-winner-name').text(profileName);
					$('#prev-winner-amnt').text(potPriceReal);
					$('#prev-winner-chance').text(percentageChance + '%');

					if (mUserInfo !== null && winnerSteamID === mUserInfo['steamid']) {
						var msg = 'You have won ' + potPriceReal + ', with a ' + percentageChance + '% chance! Expect a trade request from our bot shortly. <b>Make sure that you are only receiving items. Our bot will never try to take any items from you.</b><br><br>Round ID: ' + prevGameID + '<br><br>If you do not receive a trade request shortly, please open a <a href="support.html">support ticket</a>, including the round id, your steam id, and any items that you can remember being in the pot.';

						swal({
							title: 'You win!',
							text: msg,
							closeOnConfirm: true,
							html: true,
						});
					} else {
						swal('Round ended!', winnerProfileName + ' has won ' + potPriceReal + ', with a ' + percentageChance + '% chance!', 'success');
					}

					potCount = -1;

					//TODO: Add circle thing here
					drawCircle(0);

					$('#pot-price').text('$0.00');
					$('#pot-items').text('0');
					$('#pot').text('');

					$('#items-deposited-count').text(0);
					$('#items-deposited-price').text(getFormattedPrice(0));
					$('#items-deposited-chance').text('0%');
				//
				//
				//End of the round reset

			});
		}, 500);
	});
});

Also, add this function at the end of "scripts.js":

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

I hope this tutorial gives you an idea on how to create the winners animation for your site. Big thanks to everyone who developed and contributed to CSGOWINBIG and the BOT.

Add a custom footer
Add a custom sidebar
Clone this wiki locally