Merge pull request #24 from Sailias/master

Adding round visualizer to TrainingWheels

clients/TrainingWheels/css/tw.css

@@ -2,19 +2,19 @@
 
 
 html {
-        
+
 	background: url(/images/schemaverse-bg.png) no-repeat center center fixed; 
-        -webkit-background-size: cover;
-        -moz-background-size: cover;
-        -o-background-size: cover;
-        background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 
-	font-family:Verdana, Geneva, sans-serif;
-	font-size:12px;
+  font-family:Verdana, Geneva, sans-serif;
+  font-size:12px;
 /*
         background: url(/images/confetti-bg.gif);
 	background-repeat:repeat;
-*/
+  */
 }
 
 body { font-family: Verdana, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; }
@@ -25,12 +25,12 @@ a {
 	text-decoration:underline;
 }
 
-#header, #menu, #content, #error, .results, #sidebar, #statbar, #placeholder, #footer, #login { background-color:#FDFDFD; margin:10px 0px;
+#header, #menu, #content, #error, .results, #sidebar, #statbar, #placeholder, #footer, #login, .sidebar-holder { background-color:#FDFDFD; margin:10px 0px;
 
-	 -moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
-border-width: thin;
-border-color: #526C9D;
-border-style: solid; 
+  -moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
+  border-width: thin;
+  border-color: #526C9D;
+  border-style: solid; 
 }
 
 #header img { float:right;  }
@@ -60,10 +60,10 @@ border-style: solid;
 
 .ship_display { width:700px; background-color:#5DCFC3;margin:10px 0px;
 
--moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
-border-width: thin;
-border-color: #88E7DD;
-border-style: solid; 
+  -moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
+  border-width: thin;
+  border-color: #88E7DD;
+  border-style: solid; 
 }
 
 .ship_display img { margin-left: 10px; marging-top: 5px; margin-bottom:10px;}
@@ -79,27 +79,27 @@ border-style: solid;
 
 .enemy_ship_display { width:700px; background-color:#FC717C;margin:10px 0px;
 
--moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
-border-width: thin;
-border-color: #A4252E;
-border-style: solid; 
+  -moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
+  border-width: thin;
+  border-color: #A4252E;
+  border-style: solid; 
 }
 .planet_display { width:700px; background-color:#CFF76F;margin:10px 0px;
 
--moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
-border-width: thin;
-border-color: #7CA124;
-border-style: solid; 
+  -moz-border-radius:5px;  -webkit-border-radius:5px; padding:29px; 
+  border-width: thin;
+  border-color: #7CA124;
+  border-style: solid; 
 }
 
 .mini_map {
-float: left; 
-width:200px; 
-height:200px; 
-background-color:black;
-margin:0px; 
-padding:0px;
-display: block;
+  float: left; 
+  width:200px; 
+  height:200px; 
+  background-color:black;
+  margin:0px; 
+  padding:0px;
+  display: block;
 }
 
 
@@ -121,6 +121,7 @@ display: block;
 .results td, th { border-right-style:solid; border-right-width:thin; border-right-color:black; } 
 .control {display:block; font-size:16px; color:#242424;  float:right; margin-top:-15px;}
 
+.sidebar-holder,
 #sidebar { width:120px; }
 
 #sidebar ul {margin-left:-60px; margin-right:0px; padding-right:0px;list-style: none;}
@@ -136,7 +137,7 @@ display: block;
 
 #footer { width:900px; margin:0px auto;padding-top:5px; padding-bottom:5px;}
 
-  
+
 
 /* Change view sprites */
 

clients/TrainingWheels/css/visualizer.css

@@ -0,0 +1,89 @@
+/* Taken from bootstrap: https://github.com/twitter/bootstrap */
+
+#visualizer_controls,
+#start_visualization,
+#visualizer_content {
+  display: none;
+}
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -moz-transition: opacity 0.15s linear;
+  -ms-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+text.dot {
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 100;
+  stroke: transparent;
+  -webkit-transition: font-size 0.5s;
+  -moz-transition: font-size 0.5s;
+  -o-transition: font-size 0.5s;
+  -ie-transition: font-size 0.5s;
+  transition: font-size 0.5s;
+}
+
+.map text.selected {
+  font-size: 24px;
+}
+
+text.unclaimed {
+  fill: #000;
+}
+
+.closeup text {
+  font-size: 25px;
+}
+
+text.conquered {
+  font-size: 30px;
+}
+
+.closeup text.conquered {
+  font-size: 45px;
+}
+
+.hover text {
+  opacity: 0.5;
+}
+
+.hover text.hovered {
+  opacity: 1;
+  font-size: 18px;
+}
+
+h1 {
+  margin: 0 auto;
+  text-align: center;
+}
+
+rect {
+  fill: #fff;
+  shape-rendering: crispEdges;
+}
+
+.closeup rect {
+  stroke: #ccc;
+}
+
+rect#rect-closeup {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2px;
+  z-index: 99;
+}
+
+.x line, .y line {
+  stroke: #ccc;
+  shape-rendering: crispEdges;
+}
+
+}