From af0ee456d75304494e3eecfb8a9bd2b232e44fe6 Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Thu, 7 Mar 2013 21:42:14 -0800
Subject: Scoreboard bugfixes and improvments, partial implementation of
 onhashchange.

---
 css/stats.css               | 27 ++++++++++++++++++---------
 includes/datas.php          |  3 ++-
 js/jquery.hashchange.min.js |  9 +++++++++
 js/mapspecs.js              |  6 +++++-
 js/scores.js                | 11 ++++++-----
 pages/scores.php            | 44 +++++++++++++++++++++++++++-----------------
 6 files changed, 67 insertions(+), 33 deletions(-)
 create mode 100644 js/jquery.hashchange.min.js

diff --git a/css/stats.css b/css/stats.css
index e63be80..7e3fc6b 100644
--- a/css/stats.css
+++ b/css/stats.css
@@ -107,11 +107,25 @@
 	max-width:500px;
 }
 
+.mapThumbnailOuter {
+	border:0px;
+	margin:2px;
+	float:left;
+	min-width:120px;
+	border-radius:10px;
+}
+.mapThumbnailOuter.selectedMap {
+	/* Make sure border-width + margin == .mapThumbnailOuter margin */
+	margin: 0px;
+	border:2px;
+   border-color: #868AA8;
+   border-style: solid;
+}
 .mapThumbnail {
 	display:inline-block;
 	padding: 8px;
 	background-color:#334;
-	margin: 4px;
+	margin: 2px;
 	border-radius:10px;
 	cursor:pointer;
 	padding-top: 0px;
@@ -119,14 +133,6 @@
 .mapThumbnail:hover {
 	background-color:#445;
 }
-
-.mapThumbnail.selectedMap {
-    border-color: #CC3333;
-    border-style: solid;
-	/* Make sure border-width + margin == .mapThumbnail margin */
-    border-width: 3px;
-	margin: 1px;
-}
 .mapThumbnail.currentlyRunning {
 	background-color: #373737;
     color: #CCCCCC;
@@ -252,6 +258,9 @@ td, th {
 .scoreRowSelf {
 	background-color: #343c57;
 }
+.solutionSelected {
+	background-color: #646470;
+}
 
 .scoreRowSolutionAvailable {
 	/* Temporary adjust for font changes */
diff --git a/includes/datas.php b/includes/datas.php
index 3d51983..92cf5eb 100644
--- a/includes/datas.php
+++ b/includes/datas.php
@@ -814,7 +814,8 @@ function getScores($mapID, $pageNumber = 1, $pageDivide = 10) {
 		users.wallColor,
 		users.wallEmblem,
 		$requestSolutions
-		solutions.dateModified as cdate
+		solutions.dateModified as cdate,
+		solutions.ID as solutionID
 	FROM 
 		`users`
 		JOIN `solutions`
diff --git a/js/jquery.hashchange.min.js b/js/jquery.hashchange.min.js
new file mode 100644
index 0000000..3c607ba
--- /dev/null
+++ b/js/jquery.hashchange.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
\ No newline at end of file
diff --git a/js/mapspecs.js b/js/mapspecs.js
index 6ab7286..7c74a92 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -755,7 +755,11 @@ function contains(a, obj) {
 
 
 //Shows a solution temporarly
-function useSolution(mapid, inputSolution, moves, tempWallColor, tempWallEmblem) {
+function useSolution(mapid, inputSolution, moves, tempWallColor, tempWallEmblem, solutionID) {
+	
+	$('.solutionSelected').removeClass('solutionSelected');
+	$('#solution_'+solutionID).addClass('solutionSelected');
+	
 	solution[mapid] = inputSolution;
 	var animateA = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", \""+tempWallColor+"\", \""+tempWallEmblem+"\");";
 	var animateB = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", false, false);";
diff --git a/js/scores.js b/js/scores.js
index dc164f2..1e324a4 100644
--- a/js/scores.js
+++ b/js/scores.js
@@ -152,16 +152,17 @@ function scoresFormatPage(JO) {
 		if (u.ID == userObj.ID) {
 			rowclass = 'scoreRowSelf';
 		}		
-		if (typeof(pointerUserID) != 'undefined' && u.ID == pointerUserID) {
-			setTimeout("useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\");", 400);
-			pointerUserID = '';
+		if (typeof pointerSolutionID != 'undefined' && u.solutionID == pointerSolutionID && goToScorePointer) {
+			goToScorePointer = false;
+			setTimeout("useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\", \""+u.solutionID+"\");", 400);
+			rowclass += ' solutionSelected';
 		}
 		
 		if (u.solution) {
 			rowclass += ' scoreRowSolutionAvailable';
-			p += "<tr class='"+rowclass+"' ";
+			p += "<tr class='"+rowclass+"' id='solution_"+u.solutionID+"'";
 			p += "onmouseover='showTempSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\")'";
-			p += "onclick='useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\");saveScoreLocation("+JO.page+", "+u.ID+");'";
+			p += "onclick='useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\", \""+u.solutionID+"\");saveScoreLocation("+JO.page+", "+u.solutionID+");'";
 			p += "onmouseout='restoreSolution(\""+JO.mapid+"\")' ";
 			p += " style='"+styleClass+" color:"+u.displayColor+";' title='Last improved "+scoredTimeStr+"'>";
 		} else {
diff --git a/pages/scores.php b/pages/scores.php
index 90c87bb..60ce2e8 100644
--- a/pages/scores.php
+++ b/pages/scores.php
@@ -23,6 +23,7 @@ $jsDate = "$jsYear,$jsMonth,$jsDay";
 ?>
 
 <script type="text/javascript" src="js/jquery.keystrokes.min.js"></script>
+<script type="text/javascript" src="js/jquery.hashchange.min.js"></script>
 
 <script type="text/javascript">
 playerWallColor = '<?PHP echo isset($wallColor) ? $wallColor : ''; ?>';
@@ -37,11 +38,20 @@ var serverToday = new Date(<? echo $jsDate; ?>);
 var pointerTime = new Date();
 pointerTime.setTime(serverToday.getTime())
 
-setTimeout("start();", 500);
-
 var pointerMapID = -1;
 var goToPointer = true;
-function start() {
+var goToScorePointer = true;
+
+$(function(){
+  // Bind the event.
+  $(window).hashchange( function(){
+	 handleHashChange();
+  })
+  // Trigger the event (useful on page load).
+  $(window).hashchange();
+});
+
+function handleHashChange() {
 	var hash = window.location.hash.substring(1);
 	if (hash !== '') {
 		hashParts = hash.split('_')
@@ -53,7 +63,7 @@ function start() {
 			pointerPage = hashParts[2];
 		} else pointerPage = 1;
 		if (typeof(hashParts[3]) !== 'undefined') {
-			pointerUserID = hashParts[3];
+			pointerSolutionID = hashParts[3];
 		}
 		//+1 because i'm gonna use prev.
 		pointerTime = new Date(dateSplit[0],dateSplit[1]-1,dateSplit[2]-0+1);
@@ -61,6 +71,7 @@ function start() {
 	getMapIDs('prev');
 }
 
+
 function addDay(dateObj) {
 	var d = dateObj;
 	d.setDate(d.getDate()+1);
@@ -79,6 +90,7 @@ keys: ['arrow up', 'arrow up', 'arrow down', 'arrow down', 'arrow left', 'arrow
 alert('You unlocked awesomeness!');
 });
 
+
 function displayMapScores(mapID) {
 	pointerMapID = mapID;
 	updateHash();
@@ -93,18 +105,17 @@ function displayMapScores(mapID) {
 
 	//Set the 'selectedMap' class
 	$('.selectedMap').removeClass('selectedMap');
-	var currentMapDiv = $('#thumb_'+mapID).children();
+	var currentMapDiv = $('#thumb_'+mapID);
 	currentMapDiv.addClass('selectedMap');
 	
 	//Hack: display the "current map" div for currently running maps
 	//Relies on the fact that the #thumb_<mapId> div has a single child with the 'current' class..
-	var showCurrentMapMessage = currentMapDiv.hasClass('currentlyRunning');
+	var showCurrentMapMessage = currentMapDiv.children().hasClass('currentlyRunning');
 	$('#currentlyRunningMessage').toggle(showCurrentMapMessage);
 	
 	$("#mapDisplay").fadeOut('fast');
 	displayMap(mapID, "mapDisplay", 682);
 	scoresShowPage(pointerPage, mapID);
-	//console.log(pointerPage, mapID);
 }
 
 function updateHash() {
@@ -114,17 +125,17 @@ function updateHash() {
 	anchorTag += "_"+pointerMapID;
 	if (pointerPage) anchorTag += "_"+pointerPage;
 	else anchorTag += "_";
-	if (pointerUserID) anchorTag += "_"+pointerUserID;
+	if (pointerSolutionID) anchorTag += "_"+pointerSolutionID;
 	else anchorTag += "_";
 	document.location=anchorTag;
 }
 
-var pointerPage = 1, pointerUserID
-function saveScoreLocation(page, userID) {
+var pointerPage = 1, pointerSolutionID
+function saveScoreLocation(page, solutionID) {
 	pointerPage = page;
-	pointerUserID = userID;
+	pointerSolutionID = solutionID;
 	updateHash();
-	console.log("SaveScoreLoc");
+	//console.log("SaveScoreLoc");
 }
 
 var pointerDate;
@@ -219,8 +230,10 @@ function getMapIDsResponse(response) {
 }
 
 function addMapToNav(mapID) {
-	//console.log("adding map to nav:", mapID);
-	var $newdiv1 = $("<div style='float:left;min-width:120px;' id='thumb_"+mapID+"'/>");
+
+	var $newdiv1 = $("<div id='thumb_"+mapID+"'/>");
+	if (pointerMapID + '' == mapID + '') $newdiv1.addClass('selectedMap');
+	$newdiv1.addClass('mapThumbnailOuter');
 
 	$("#mapNavigation").prepend($newdiv1);
 
@@ -236,7 +249,6 @@ function addMapToNav(mapID) {
 			var mapDate = new Date(map.dateExpires*1000);
 			isActive = mapDate.getTime() > serverToday.getTime();
 			
-			
 			$("#thumb_"+mapID).html(formatMapThumbForNav(data.responseText)).show();
 			//$("#thumb_"+mapID).html(mapThumbnailHTML(map, 120, isActive)).show();
 		}
@@ -261,9 +273,7 @@ function formatMapThumbForNav(json) {
 	r += "<div class='mapThumbnail"+mapClass+"' title='"+toolTip+"'; onclick='displayMapScores("+map.ID+")'>";
 	r += mapThumbnailHTML(map, 120, isActive);
 	r += '</div>';
-	
 	return r;
-	
 }
 
 function removeMapFromNav(mapID) {
-- 
cgit v1.2.3