switch spritehseet images to square rather than super tall.

makes working with it a little easier

data/build_css.php

@@ -1 +1 @@
-<?	header('Content-type: text/plain; charset=UTF-8');	include('catalog.php');	include('css_catalog.php');	echo ".emoji { background: url(\"emoji.png\") top left no-repeat; width: 20px; height: 20px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; }\n";	foreach ($catalog as $item){		$pos = $map[$item['softbank']['unicode'][0]];		$unilow = '';		foreach ($item['unicode'] as $cp) $unilow .= sprintf('%x', $cp);		$parts = array();		foreach ($item['unicode'] as $cp) $parts[] = sprintf('%04x', $cp);		$key = implode('-', $parts);		# for some reason, gemoji names 0023-20e3 as just 0023		if (preg_match('!^(\S{4})-20e3$!', $key, $m)) $key = $m[1];		$pos = $css_data[$key];		if (!isset($pos)) $pos = $css_data['2754'];		echo ".emoji$unilow { background-position: 0px -{$pos}px; }\n";	}?>
+<?	header('Content-type: text/plain; charset=UTF-8');	include('catalog.php');	include('css_catalog.php');	echo ".emoji { background: url(\"emoji.png\") top left no-repeat; width: 20px; height: 20px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; }\n";	foreach ($catalog as $item){		$pos = $map[$item['softbank']['unicode'][0]];		$unilow = '';		foreach ($item['unicode'] as $cp) $unilow .= sprintf('%x', $cp);		$parts = array();		foreach ($item['unicode'] as $cp) $parts[] = sprintf('%04x', $cp);		$key = implode('-', $parts);		# for some reason, gemoji names 0023-20e3 as just 0023		if (preg_match('!^(\S{4})-20e3$!', $key, $m)) $key = $m[1];		$pos = $css_data[$key];		if (!isset($pos)) $pos = $css_data['2754'];		echo ".emoji$unilow { background-position: -{$pos[0]}px -{$pos[1]}px; }\n";	}?>

data/build_image.php

@@ -9,8 +9,6 @@
 
 	echo "Resizing images ";
 	$images = array();
-	$map = array();
-	$y = 0;
 	foreach ($files as $file){
 
 		if (!preg_match('!\.png$!', $file)) continue;
@@ -25,13 +23,31 @@
 			echo '.';
 		}
 
-		$images[] = array($last, $y);
-		$map[pathinfo($last, PATHINFO_FILENAME)] = $y;
-		$y += 20;
+		$images[] = array($last);
 		#echo "$file -> $target\n";
 	}
 	echo " DONE\n";
 
+
+	# quick step - decide on images dimensions and icon
+	# positions
+	$map = array();
+	$y = 0;
+	$x = 0;
+	$num = ceil(sqrt(count($images)));
+	foreach ($images as $k => $v){
+		$images[$k][1] = $x * 20;
+		$images[$k][2] = $y * 20;
+		$map[pathinfo($v[0], PATHINFO_FILENAME)] = array($x*20, $y*20);
+
+		$y++;
+		if ($y == $num){
+			$x++;
+			$y = 0;
+		}
+	}
+
+
 	echo "Writing image map ... ";
 	$fh = fopen('css_catalog.php', 'w');
 	fwrite($fh, '<'.'?php $css_data = ');
@@ -43,15 +59,16 @@
 
 
 	echo "Compositing images ";
-	$pw = 20;
-	$ph = 20 * count($images);
+	$pw = 20 * $num;
+	$ph = 20 * $num;
+
 	#echo shell_exec("convert -size {$pw}x{$ph} xc:red {$temp}/sheet.png");
 	echo shell_exec("convert -size {$pw}x{$ph} null: -matte -compose Clear -composite -compose Over {$temp}/sheet.png");
 
 	foreach ($images as $image){
 
-		$px = 0;
-		$py = $image[1];
+		$px = $image[1];
+		$py = $image[2];
 
 		echo shell_exec("composite -geometry +{$px}+{$py} {$temp}/{$image[0]} {$temp}/sheet.png {$temp}/sheet.png");
 		echo '.';