TP2 terminé, onto TP3

js/animation.js

@@ -0,0 +1,47 @@
+var square;
+var coordsx;
+var coordsx2;
+var coordsy;
+var canvas;
+var context;
+var size;
+var change;
+
+window.onload = function() {
+    console.log("JS Loaded");
+    square = new Square();
+    canvas = document.getElementById("sqrcontainer");
+    canvas.width = document.documentElement.clientWidth;
+    context = canvas.getContext('2d');
+    coordsx = canvas.width / 2;
+    coordsx2 = coordsx;
+    coordsy = 50;
+    size = 50;
+    change = 1;
+    setInterval(frame, 1000.0 / 60.0);
+};
+
+class Square {
+    constructor() {}
+    static draw(x, y, color) {
+        context.fillStyle = color;
+        context.fillRect(x, y, size, size);
+    }
+}
+
+function frame() {
+    canvas.width = document.documentElement.clientWidth;
+    coordsx += 1;
+    coordsx2 += change;
+    Square.draw(coordsx, coordsy, '#f00');
+    Square.draw(coordsx2, coordsy + 50, '#0f0');
+    if (coordsx2 > canvas.width - size || coordsx2 <= 0) {
+        change = -change;
+    }
+    if (coordsx > canvas.width - size) {
+        Square.draw(coordsx - (canvas.width - size), coordsy, '#f00');
+    }
+    if (coordsx > canvas.width + size) {
+        coordsx -= (canvas.width - size);
+    }
+}

js/button.js

@@ -32,7 +32,7 @@ class HoverButton extends Button {
         super();
     }
     static applyShadow() {
-        button.element.style.boxShadow = "3px 3px 5px #6C5B7B";
+        button.element.style.boxShadow = "5px 5px 5px #6C5B7B";
     }
     static applyUnshadow() {
         button.element.style.boxShadow = "none";

js/canvas.js

@@ -14,7 +14,6 @@ window.onload = function() {
     topmargin = (canvas.height - img.height * ratio) / 2;
     context.drawImage(img, 0, 0, img.width, img.height,
         0, topmargin, img.width * ratio, img.height * ratio);
-    canvas.addEventListener('mousemove', displayMousePos, false);
     canvas.addEventListener('mousemove', zoom, false);
     canvas.addEventListener('mouseout', hide, false);
 
@@ -23,12 +22,6 @@ window.onload = function() {
     context.drawImage(img, 0, 0);
 };
 
-function displayMousePos(evt) {
-    var mousePos = getMousePos(canvas, evt);
-    var message = 'Mouse position: ' + mousePos.x + ', ' + mousePos.y;
-    console.log(message);
-}
-
 function zoom(evt) {
     var mousePos = getMousePos(canvas, evt); /* get mouse position */
     loupe.style.display = "inline"; /* make glass visible */
@@ -37,16 +30,12 @@ function zoom(evt) {
     var canvasXMargin = window.getComputedStyle(canvas).getPropertyValue('margin-left');
     canvasXMargin = canvasXMargin.substr(0, canvasXMargin.length - 2);
     var marginLeft = Number(canvasXMargin) + mousePos.x + 15;
-    console.log('X: ' + marginLeft);
     loupe.style.marginLeft = marginLeft + "px";
 
     /* process y axis */
     var marginTop = mousePos.y + 15;
     loupe.style.marginTop = marginTop + "px";
     var actualPos = mousePos.y - topmargin;
-    console.log('Y: ' + marginTop +
-        ', marginTop: ' + topmargin +
-        ', actualPos: ' + actualPos);
 
     /* clear and redraw glass */
     var context = loupe.getContext("2d");