Dynamic resizing of mapThumbnail.

4 files changed, 80 insertions, 15 deletions

diff --git a/css/maps.css b/css/maps.css
index 6c9b646..c6807a6 100644
--- a/css/maps.css
+++ b/css/maps.css
@@ -11,8 +11,6 @@
 	background-size: 100%;

 }

 .map_thumbnail td {

-	width:4px; 

-	height:4px;

 	border: 0px solid #000;

 	padding: 4px;

 	margin: 0px;

diff --git a/css/stats.css b/css/stats.css
index 6ddc38f..d028d0f 100644
--- a/css/stats.css
+++ b/css/stats.css
@@ -30,18 +30,47 @@
 	height: 0;
 }
 
+.mapNavBtn:hover {
+	background-color:#57a;
+}
+.mapNavCon {
+	height:200px;
+	width:900px;
+}
+.mapNavLeft {
+	float:left;
+	width:40px;
+	height:200px;
+	background-color:#358;
+}
+.mapNavRight {
+	float:right;
+	width:40px;
+	height:200px;
+	background-color:#358;
+}
+.mapNavCenter {
+	float:left;
+	height:200px;
+	height:200px;
+	width:820px;
+	background-color:#888;
+}
 #mapNavigation {
 	padding:15px;
 	background-color:#888;
 	border-radius:10px;
-	min-height:130px;
+	height:170px;
+	width:790px;
 	text-align:left;
+	white-space: nowrap;
 	overflow-x:hidden;
 	overflow-y:hidden;
-	width:1100px;
+
 }
+
 .mapThumbnail {
-	float:left;
+	display:inline-block;
 	padding: 10px;
 	background-color:#334;
 	margin: 7px;
diff --git a/includes/maps.php b/includes/maps.php
index e5b6fdc..9ee6984 100644
--- a/includes/maps.php
+++ b/includes/maps.php
@@ -290,17 +290,48 @@ function DisplayMap($mapMatrix, $idprefix = 1, $style = 'normal', $speed = NULL)
 function DisplayMapThumbnail($map, $link = false) {

 	$r = ''; //Prepare our return value:

 	

-	if ($link) 

-		$r .= "<table style='cursor:pointer' onclick='document.location.href=\"$link\"' class='map_thumbnail'>";

-	else

-		$r .= "<table class='map_thumbnail'>";

+

+	$tileWidth = 1 / $map->width;

+	$tileHeight = $goalSize / $map->height;

+	

+	$sourceWidth = $map->width;

+	$sourceHeight = $map->height;

+

+	$targetWidth = 150;

+

+	$sourceRatio = $sourceWidth / $sourceHeight;

+

+	// if ( $sourceRatio < $targetRatio ) {

+		 $scale = $sourceWidth / $targetWidth;

+	// } else {

+		 // $scale = $sourceHeight / $targetHeight;

+	// }

+

+	$resizeWidth = (int)($sourceWidth / $scale);

+	$resizeHeight = (int)($sourceHeight / $scale);

+	

+	//$height = $width / ($tileWidth / $tileHeight);

+	//$height = round($height);

+	

+	$width = $resizeWidth.'px';

+	$height = $resizeHeight.'px';

+	

+	//$height = '100px';

+	//if ($map-height > $map->width;)

 		

+	$size = $size.'%';

+	//$size = '1.2px';

+	if ($link) {

+		$r .= "<table style='cursor:pointer' onclick='document.location.href=\"$link\"' class='map_thumbnail'>";

+	} else {

+		$r .= "<table style='width:$width;height:$height;' class='map_thumbnail'>";

+	}

 	for ($y = 0; $y < $map->height; $y++) {		//Number of Rows

 		$r .= "<tr>";

 		for ($x = 0; $x < $map->width; $x++) {		//Number of Columns

 			$value = $map->tiles[$y][$x][TileValue];

 			$type = $map->tiles[$y][$x][TileType];

-			$r .= "<td class='$type$value'></td>";

+			$r .= "<td class='$type$value' style='width:$tileWidth%;'></td>";

 		}

 		$r .= "</tr>";

 	}

diff --git a/pages/scores.php b/pages/scores.php
index 3a79529..2a82efd 100644
--- a/pages/scores.php
+++ b/pages/scores.php
@@ -132,9 +132,9 @@ function getMaplist(request) {
 	}

 	

 	var urlString = 'ajax/scores.ajax.php?getmaplist=true&daysago='+daysAgo;

-	$("#mapNavigation").fadeOut('fast');

+	$("#mapNavigation").hide('fast');

 	//.html(ajax_load)

-	$("#mapNavigation").load(urlString, null, function() {$("#mapNavigation").fadeIn('slow');}); 

+	$("#mapNavigation").load(urlString, null, function() {$("#mapNavigation").show('slow');}); 

 }

 

 

@@ -159,7 +159,7 @@ $todaysScoreMaps = getMapsPlayed($daysAgo);
 

 ?>

 

-<div class="wrapper" style='width:1100px;'>

+<div class="wrapper">

 

 <div id='#displayDate' style='text-align:center;padding-bottom:7px;'>

 <h2 title='Maps that were played during this day'><? echo $dateAsStr; ?></h2>

@@ -169,9 +169,16 @@ $todaysScoreMaps = getMapsPlayed($daysAgo);
 <a href='javascript:getMaplist("prev");' title='Older'>&lt; Previous Day</a>

 <a href='javascript:getMaplist("next");' title='Newer'>Next Day &gt;</a>

 <a href='javascript:getMaplist("yesterday");' title='Now'>Yesterday &gt;&gt;</a>

-<div id='mapNavigation'>

-<? echo getMapNavigation($todaysScoreMaps); ?>

+<div class='mapNavCon'>

+	<div class='mapNavLeft mapNavBtn' onclick='$("#mapNavigation").scrollLeft(0)'>&lt;</div>

+	<div class='mapNavRight mapNavBtn' onclick='$("#mapNavigation").scrollLeft(1000)'>&gt;</div>

+	<div class='mapNavCenter'>

+		<div id='mapNavigation'>

+		<? echo getMapNavigation($todaysScoreMaps); ?>

+		</div>

+	</div>

 </div>

+<div style='clear:both'></div>

 <?