Vazkii/index.php

## index.php
<?php
	define('CACHE_DIR', './cache');
	define('FONT', './lido_stf_ce.ttf'); // you need to get this one yourself
	define('OUR_URL', 'https://vazkii.us/favorite-ur');

	if(!file_exists(CACHE_DIR))
		mkdir(CACHE_DIR);

	$idol_names =
		[ 'Kousaka Honoka', 'Ayase Eli', 'Minami Kotori', 'Sonoda Umi', 'Hoshizora Rin', 'Nishikino Maki', 'Toujou Nozomi', 'Koizumi Hanayo', 'Yazawa Nico',
		'Takami Chika', 'Sakurauchi Riko', 'Matsuura Kanan', 'Kurosawa Dia', 'Watanabe You', 'Tsushima Yoshiko', 'Kunikida Hanamaru', 'Ohara Mari', 'Kurosawa Ruby' ];

	if($_GET && $_GET['image']) {
		makeImage($_GET['image']);
		die();
	}

	function makeImage($img_str) {
		$card_width = 256;
		$card_height = 360;
		$girl_width = $card_width * 2 + 220;
		$girl_height = $card_height + 20;

		$line_girls = 3;
		$column_girls = 6;

		$img_width = $girl_width * $line_girls;
		$img_height = $girl_height * $column_girls + 140;

		$image = imagecreatetruecolor($img_width, $img_height);

		$favorites = explode(',', $img_str);
		if(sizeof($favorites) != 18)
			return;

		drawCards($image, $favorites, $card_width, $card_height, $girl_width, $girl_height, $line_girls);

		$textcolor = imagecolorallocate($image, 255, 255, 255);
		imagettftext($image, 50, 0, 200, $img_height - 25, $textcolor, FONT, OUR_URL);

		header('Content-Type: image/jpeg');
		imagejpeg($image);
		imagedestroy($image);
	}

	function drawCards($image, $cards, $w, $h, $girl_width, $girl_height, $line_girls) {
		global $idol_names;

		for($i = 0; $i < sizeof($cards); $i++) {
			$card = $cards[$i];
			$name = $idol_names[$i];
			$chibi_name = str_replace(' ', '_', $name) . '.png';
			$name = substr($name, strpos($name, ' ') + 1);
			$normalURL = "http://i.schoolido.lu/c/$card$name.png";
			$idolizeURL = "http://i.schoolido.lu/c/{$card}idolized$name.png";
			$chibiURL = "http://i.schoolido.lu/chibi/$chibi_name";

			$chibi_cache_url = CACHE_DIR . "/$chibi_name";
			$cached_chibi = false;
			if(file_exists($chibi_cache_url)) {
				$chibiURL = $chibi_cache_url;
				$cached_chibi = true;
			}

			$index = $i;
			$chibi_w = 200;
			$chibi_h = 200;

			$x = ($index % $line_girls) * $girl_width + $chibi_w + 10;
			$y = floor($index / $line_girls) * $girl_height + 10;

			if($i >= 9)
				$y += 50;

			$chibi_x = $x - $chibi_w;
			$chibi_y = $y + ($girl_height - $chibi_h) / 2;

			drawImageOnImage($image, $chibi_x, $chibi_y, $chibi_w, $chibi_h, $chibiURL, ($cached_chibi ? null : $chibi_cache_url));
			drawImageOnImage($image, $x, $y, $w, $h, $normalURL);
			drawImageOnImage($image, $x + $w, $y, $w, $h, $idolizeURL);
		}
	}


	function drawImageOnImage($image, $x, $y, $w, $h, $url, $cache_location = null) {
		$contents = file_get_contents($url);
		$url_img = imagecreatefromstring($contents);
		imagecopyresized($image, $url_img, $x, $y, 0, 0, $w, $h, imagesx($url_img), imagesy($url_img));

		if($cache_location)
			file_put_contents($cache_location, $contents);
	}
?>

<html>
	<head>
		<title>Favorite UR Picker</title>

		<style>
			html {
				background-color: #ff98cb;
				font-family: sans-serif;
			}

			body {
				max-width: 1268;
				text-align: center;
				margin: auto;
				background-color: white;
				padding-bottom: 10px;
			}

			a {
				color: #b30056;
			}

			#header {
				margin-top: 10px;
				padding-top: 20px;
				padding-bottom: 20px;
				margin-bottom: 50px;
				border-bottom: 10px solid #ff98cb;
			}

			#header-title {
				font-size: 80px;
			}

			#header-subtitle {
				font-size: 20px;
			}

			.idol-box {
				text-align: left;
				margin-left: 4px;
				margin-bottom: 80px;
			}

			.idol-title {
				height: 120px;
				vertical-align: center;
				color: #333;
				text-shadow: 4px 5px 15px rgba(0, 0, 0, 0.2);
			}

			.idol-chibi {
				height: 100px;
			}

			.idol-name {
				margin-left: 200px;
				margin-top: -60px;
				font-size: 70px;
			}

			.card-slot {
				display: inline-block;
				vertical-align: top;
				width: 400px;
				margin: 3px 3px 3px 3px;
				padding: 6px 6px 6px 6px;
				border-radius: 6px;
				cursor: pointer;
			}

			.card-slot-smile {
				background-color: #ffcde5;
				border: 1px solid #b30056;
			}
			.card-slot-pure {
				background-color: #bef3d1;
				border: 1px solid #18803e;
			}
			.card-slot-cool {
				background-color: #d2efff;
				border: 1px solid #0077b8;
			}
			.selected {
				background-color: #fff8d2;
				border: 1px solid #b89300;
			}

			.card-slot img {
				width: 50%;
			}

			#output-image {
				display: block;
				width: 700px;
				height: 771px;
				margin: auto;
				border: 1px solid black;
				text-align: center;
			}

			#output-image img {
				width: 700px;
				height: 771px;
			}
		</style>
	</head>

	<body>
		<div id="header">
			<div id="header-title">Favorite UR Picker!</div>
			<div id="header-subtitle">Select a UR from each girl to generate an image with all of them.</div>
		</div>

		<?php
			foreach($idol_names as $name)
				printURs($name);

			function printURs($name) {
				$clean_name = str_replace(' ', '_', $name);
				echo "<div class='idol-box' data-idol='$name'><div class='idol-title'><div class='idol-chibi'><img src='http://i.schoolido.lu/chibi/$clean_name.png'></img></div><div class='idol-name'>$name</div></div>";

				$urL_name = str_replace(' ', '+', $name);
				$url = "http://schoolido.lu/api/cards/?name=$urL_name&rarity=UR&is_promo=False";
				printCards($url, $clean_name, 1);
				echo '</div>';
			}

			function printCards($url, $girl, $page) {
				$cached = false;


				$cache_file = CACHE_DIR . "/{$girl}_$page.json";
				if(file_exists($cache_file) && time() - filemtime($cache_file) < 24 * 3600) {
					$url = $cache_file;
					$cached = true;
				}

				$json_str = file_get_contents($url);
				$data = json_decode($json_str, true);
				$results = $data['results'];
				$size = sizeof($results);
				foreach ($results as $res) {
					$img = $res['card_image'];
					$img_idolized = $res['card_idolized_image'];
					$attr = strtolower($res['attribute']);
					$id = $res['id'];
					echo "<div class='card-slot card-slot-$attr' data-card-id='$id'><img src='$img'></img><img src='$img_idolized'></img></div>";
				}

				if(!$cached)
					file_put_contents($cache_file, $json_str);

				if($data['next'])
					printcards($data['next'], $girl, $page + 1);
			}
		?>

		<div id="result-box">

		</div>

		by Vazkii / <a href="https://twitter.com/Vazkii">twitter</a> / <a href="https://www.reddit.com/user/vazkii">reddit</a> / <a href="https://github.com/Vazkii">github</a> / <a href="http://schoolido.lu/user/Vazkii/">sukutomo</a><br>
		<a href="http://www.wtfpl.net/">wtfpl</a> / <a href="https://gist.github.com/Vazkii/a6b2aa2cbab2adaa4d38e1ee8b25d03f">source code</a>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$('.card-slot').click(function() {
				$(this).parent().find('.selected').each(function(i) {
					$(this).removeClass('selected');
				});
				$(this).addClass('selected');

				$('.idol-box').each(function(i) {
					if($(this).find('.selected').length == 0) {
						$('body').animate({
							scrollTop: $(this).offset().top
						}, 100);
						return false;
					}
				});

				if($('.selected').length == 18) {
					var html = "<h1>Creating your image now! Wait a bit...</h1>";
					var cards = '';

					$('.idol-box').each(function(i) {
						var selected = $(this).find('.selected');
						var id = selected.attr('data-card-id');
						cards += id + ",";
					});

					cards = cards.substring(0, cards.length - 1);
					html += "Once it's done, right click/tap and hold and save it to use it. Do NOT open it in another tab.<br><br>";
					html += "<div id='output-image'><img src='?image=" + cards + "'></img></div><br>";

					$('#result-box').html(html);
					$('body').animate({
							scrollTop: $('#result-box').offset().top
					}, 100);
				}
			});
		</script>
	</body>
</html>
	<?php
	define('CACHE_DIR', './cache');
	define('FONT', './lido_stf_ce.ttf'); // you need to get this one yourself
	define('OUR_URL', 'https://vazkii.us/favorite-ur');

	if(!file_exists(CACHE_DIR))
	mkdir(CACHE_DIR);

	$idol_names =
	[ 'Kousaka Honoka', 'Ayase Eli', 'Minami Kotori', 'Sonoda Umi', 'Hoshizora Rin', 'Nishikino Maki', 'Toujou Nozomi', 'Koizumi Hanayo', 'Yazawa Nico',
	'Takami Chika', 'Sakurauchi Riko', 'Matsuura Kanan', 'Kurosawa Dia', 'Watanabe You', 'Tsushima Yoshiko', 'Kunikida Hanamaru', 'Ohara Mari', 'Kurosawa Ruby' ];

	if($_GET && $_GET['image']) {
	makeImage($_GET['image']);
	die();
	}

	function makeImage($img_str) {
	$card_width = 256;
	$card_height = 360;
	$girl_width = $card_width * 2 + 220;
	$girl_height = $card_height + 20;

	$line_girls = 3;
	$column_girls = 6;

	$img_width = $girl_width * $line_girls;
	$img_height = $girl_height * $column_girls + 140;

	$image = imagecreatetruecolor($img_width, $img_height);

	$favorites = explode(',', $img_str);
	if(sizeof($favorites) != 18)
	return;

	drawCards($image, $favorites, $card_width, $card_height, $girl_width, $girl_height, $line_girls);

	$textcolor = imagecolorallocate($image, 255, 255, 255);
	imagettftext($image, 50, 0, 200, $img_height - 25, $textcolor, FONT, OUR_URL);

	header('Content-Type: image/jpeg');
	imagejpeg($image);
	imagedestroy($image);
	}

	function drawCards($image, $cards, $w, $h, $girl_width, $girl_height, $line_girls) {
	global $idol_names;

	for($i = 0; $i < sizeof($cards); $i++) {
	$card = $cards[$i];
	$name = $idol_names[$i];
	$chibi_name = str_replace(' ', '_', $name) . '.png';
	$name = substr($name, strpos($name, ' ') + 1);
	$normalURL = "http://i.schoolido.lu/c/$card$name.png";
	$idolizeURL = "http://i.schoolido.lu/c/{$card}idolized$name.png";
	$chibiURL = "http://i.schoolido.lu/chibi/$chibi_name";

	$chibi_cache_url = CACHE_DIR . "/$chibi_name";
	$cached_chibi = false;
	if(file_exists($chibi_cache_url)) {
	$chibiURL = $chibi_cache_url;
	$cached_chibi = true;
	}

	$index = $i;
	$chibi_w = 200;
	$chibi_h = 200;

	$x = ($index % $line_girls) * $girl_width + $chibi_w + 10;
	$y = floor($index / $line_girls) * $girl_height + 10;

	if($i >= 9)
	$y += 50;

	$chibi_x = $x - $chibi_w;
	$chibi_y = $y + ($girl_height - $chibi_h) / 2;

	drawImageOnImage($image, $chibi_x, $chibi_y, $chibi_w, $chibi_h, $chibiURL, ($cached_chibi ? null : $chibi_cache_url));
	drawImageOnImage($image, $x, $y, $w, $h, $normalURL);
	drawImageOnImage($image, $x + $w, $y, $w, $h, $idolizeURL);
	}
	}


	function drawImageOnImage($image, $x, $y, $w, $h, $url, $cache_location = null) {
	$contents = file_get_contents($url);
	$url_img = imagecreatefromstring($contents);
	imagecopyresized($image, $url_img, $x, $y, 0, 0, $w, $h, imagesx($url_img), imagesy($url_img));

	if($cache_location)
	file_put_contents($cache_location, $contents);
	}
	?>

	<html>
	<head>
	<title>Favorite UR Picker</title>

	<style>
	html {
	background-color: #ff98cb;
	font-family: sans-serif;
	}

	body {
	max-width: 1268;
	text-align: center;
	margin: auto;
	background-color: white;
	padding-bottom: 10px;
	}

	a {
	color: #b30056;
	}

	#header {
	margin-top: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 50px;
	border-bottom: 10px solid #ff98cb;
	}

	#header-title {
	font-size: 80px;
	}

	#header-subtitle {
	font-size: 20px;
	}

	.idol-box {
	text-align: left;
	margin-left: 4px;
	margin-bottom: 80px;
	}

	.idol-title {
	height: 120px;
	vertical-align: center;
	color: #333;
	text-shadow: 4px 5px 15px rgba(0, 0, 0, 0.2);
	}

	.idol-chibi {
	height: 100px;
	}

	.idol-name {
	margin-left: 200px;
	margin-top: -60px;
	font-size: 70px;
	}

	.card-slot {
	display: inline-block;
	vertical-align: top;
	width: 400px;
	margin: 3px 3px 3px 3px;
	padding: 6px 6px 6px 6px;
	border-radius: 6px;
	cursor: pointer;
	}

	.card-slot-smile {
	background-color: #ffcde5;
	border: 1px solid #b30056;
	}
	.card-slot-pure {
	background-color: #bef3d1;
	border: 1px solid #18803e;
	}
	.card-slot-cool {
	background-color: #d2efff;
	border: 1px solid #0077b8;
	}
	.selected {
	background-color: #fff8d2;
	border: 1px solid #b89300;
	}

	.card-slot img {
	width: 50%;
	}

	#output-image {
	display: block;
	width: 700px;
	height: 771px;
	margin: auto;
	border: 1px solid black;
	text-align: center;
	}

	#output-image img {
	width: 700px;
	height: 771px;
	}
	</style>
	</head>

	<body>
	<div id="header">
	<div id="header-title">Favorite UR Picker!</div>
	<div id="header-subtitle">Select a UR from each girl to generate an image with all of them.</div>
	</div>

	<?php
	foreach($idol_names as $name)
	printURs($name);

	function printURs($name) {
	$clean_name = str_replace(' ', '_', $name);
	echo "<div class='idol-box' data-idol='$name'><div class='idol-title'><div class='idol-chibi'><img src='http://i.schoolido.lu/chibi/$clean_name.png'></img></div><div class='idol-name'>$name</div></div>";

	$urL_name = str_replace(' ', '+', $name);
	$url = "http://schoolido.lu/api/cards/?name=$urL_name&rarity=UR&is_promo=False";
	printCards($url, $clean_name, 1);
	echo '</div>';
	}

	function printCards($url, $girl, $page) {
	$cached = false;


	$cache_file = CACHE_DIR . "/{$girl}_$page.json";
	if(file_exists($cache_file) && time() - filemtime($cache_file) < 24 * 3600) {
	$url = $cache_file;
	$cached = true;
	}

	$json_str = file_get_contents($url);
	$data = json_decode($json_str, true);
	$results = $data['results'];
	$size = sizeof($results);
	foreach ($results as $res) {
	$img = $res['card_image'];
	$img_idolized = $res['card_idolized_image'];
	$attr = strtolower($res['attribute']);
	$id = $res['id'];
	echo "<div class='card-slot card-slot-$attr' data-card-id='$id'><img src='$img'></img><img src='$img_idolized'></img></div>";
	}

	if(!$cached)
	file_put_contents($cache_file, $json_str);

	if($data['next'])
	printcards($data['next'], $girl, $page + 1);
	}
	?>

	<div id="result-box">

	</div>

	by Vazkii / <a href="https://twitter.com/Vazkii">twitter</a> / <a href="https://www.reddit.com/user/vazkii">reddit</a> / <a href="https://github.com/Vazkii">github</a> / <a href="http://schoolido.lu/user/Vazkii/">sukutomo</a><br>
	<a href="http://www.wtfpl.net/">wtfpl</a> / <a href="https://gist.github.com/Vazkii/a6b2aa2cbab2adaa4d38e1ee8b25d03f">source code</a>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	$('.card-slot').click(function() {
	$(this).parent().find('.selected').each(function(i) {
	$(this).removeClass('selected');
	});
	$(this).addClass('selected');

	$('.idol-box').each(function(i) {
	if($(this).find('.selected').length == 0) {
	$('body').animate({
	scrollTop: $(this).offset().top
	}, 100);
	return false;
	}
	});

	if($('.selected').length == 18) {
	var html = "<h1>Creating your image now! Wait a bit...</h1>";
	var cards = '';

	$('.idol-box').each(function(i) {
	var selected = $(this).find('.selected');
	var id = selected.attr('data-card-id');
	cards += id + ",";
	});

	cards = cards.substring(0, cards.length - 1);
	html += "Once it's done, right click/tap and hold and save it to use it. Do NOT open it in another tab.<br><br>";
	html += "<div id='output-image'><img src='?image=" + cards + "'></img></div><br>";

	$('#result-box').html(html);
	$('body').animate({
	scrollTop: $('#result-box').offset().top
	}, 100);
	}
	});
	</script>
	</body>
	</html>