Add coordinates to movie

Jaylee89 · May 22, 2018 · 6e7bc9f · 6e7bc9f
1 parent d816dc1
commit 6e7bc9f
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 0 deletions.
diff --git a/appengine/movie/js/movie.js b/appengine/movie/js/movie.js
@@ -152,6 +152,60 @@ Movie.init = function() {
                                          BlocklyGames.LEVEL)) {
     setTimeout(Movie.showHelp, 1000);
   }
+
+  visualization.addEventListener('mouseover', Movie.showCoordinates);
+  visualization.addEventListener('mouseout', Movie.hideCoordinates);
+  visualization.addEventListener('mousemove', Movie.updateCoordinates);
+};
+
+/**
+ * Show the x/y coordinates.
+ * @param {!Event} e Mouse over event.
+ */
+Movie.showCoordinates = function(e) {
+  document.getElementById('coordinates').style.display = 'block';
+};
+
+/**
+ * Hide the x/y coordinates.
+ * @param {Event} e Mouse out event.
+ */
+Movie.hideCoordinates = function(e) {
+  document.getElementById('coordinates').style.display = 'none';
+};
+
+/**
+ * Update the x/y coordinates.
+ * @param {!Event} e Mouse move event.
+ */
+Movie.updateCoordinates = function(e) {
+  // Get the coordinates of the mouse.
+  var x = e.clientX;
+  var y = e.clientY;
+  // Compensate for the location of the visualization.
+  var offset = goog.style.getBounds(document.getElementById('visualization'));
+  x -= offset.left;
+  y -= offset.top;
+  // The visualization is 400x400, but the coordinates are 100x100.
+  x /= 4;
+  y /= 4;
+  // Flip the y axis so the origin is at the bottom.
+  y = 100 - y;
+  if (BlocklyGames.LEVEL == 10) {
+    // Round to the nearest integer.
+    x = Math.round(x);
+    y = Math.round(y);
+  } else {
+    // Round to the nearest 10.
+    x = Math.round(x / 10) * 10;
+    y = Math.round(y / 10) * 10;
+  }
+  if (x >= 0 && x <= 100 && y >= 0 && y <= 100) {
+    document.getElementById('x').innerHTML = 'x = ' + x;
+    document.getElementById('y').innerHTML = 'y = ' + y;
+  } else {
+    Movie.hideCoordinates();
+  }
 };
 
 /**

diff --git a/appengine/movie/style.css b/appengine/movie/style.css
@@ -38,6 +38,26 @@ html[dir="RTL"] code.ltr {
   display: none;
 }
 
+#coordinates {
+  display: none;
+  font-size: 10pt;
+  margin-top: 5px;
+  position: absolute;
+  width: 400px;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+#x {
+  position: absolute;
+  left: 300px;
+}
+#y {
+  position: absolute;
+  left: 350px;
+}
+
 /* Slider. */
 .sliderTrack {
   stroke: #aaa;

diff --git a/appengine/movie/template.soy b/appengine/movie/template.soy
@@ -79,6 +79,10 @@
     </tr>
   </table>
   <div id="visualization">
+    <div id="coordinates">
+      <span id="x"></span>
+      <span id="y"></span>
+    </div>
     <canvas id="scratch" width="400" height="400" style="display: none"></canvas>
     <canvas id="hatching" width="400" height="400" style="display: none"></canvas>
     <canvas id="axies" width="400" height="400" style="display: none" dir="ltr"></canvas>