TP2 terminé, onto TP3

2018-10-12 14:44:50 +02:00 · 2018-10-12 14:44:50 +02:00 · dde0bdd2dc
parent d9e60dfd9e
commit dde0bdd2dc
12 changed files with 139 additions and 62 deletions
--- a/animation/index.html
+++ b/animation/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+    <head>
+        <title>Button - Lucien Cartier-Tilet</title>
+        <meta name="author" content="Lucien Cartier-Tilet" />
+        <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
+        <link rel="stylesheet" type="text/css" href="../css/style.css">
+        <script type="text/javascript" src="../js/animation.js"></script>
+    </head>
+
+<body>
+    <ul class="navbar">
+        <li><a href="../">Home</a></li>
+        <li><a href="../square/">Square</a></li>
+        <li><a href="../faker/">Faker</a></li>
+        <li><a href="../canvas/">Canvas</a></li>
+        <li><a href="../button/">Button</a></li>
+        <li><a class="active" href="../animation/">Animation</a></li>
+    </ul>
+    <div id="container">
+        <div class="content">
+            <p>Un carré traversant un canvas et apparaissant du côté gauche de l’écran alors qu’il disparaît du côté droit de ce dernier et un autre faisant des allers-retours.</p>
+        </div>
+        <canvas id="sqrcontainer" width="800" height="600"></canvas>
+    </div>
+</body>
+
+</html>
--- a/button/index.html
+++ b/button/index.html
@ -1,25 +1,27 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">

-    <head>
-        <title>Index - Lucien Cartier-Tilet</title>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
-        <link rel="stylesheet" type="text/css" href="../css/style.css">
-        <link rel="stylesheet" type="text/css" href="../css/button.css">
-        <script type="text/javascript" src="../js/button.js"></script>
-    </head>
+<head>
+    <title>Button - Lucien Cartier-Tilet</title>
+    <meta name="author" content="Lucien Cartier-Tilet" />
+    <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
+    <link rel="stylesheet" type="text/css" href="../css/style.css">
+    <link rel="stylesheet" type="text/css" href="../css/button.css">
+    <script type="text/javascript" src="../js/button.js"></script>
+</head>

-    <body>
-        <ul class="navbar">
-            <li><a href="../">Home</a></li>
-            <li><a href="./">Moving red square</a></li>
-            <li><a href="../faker">Faker</a></li>
-            <li><a class="active" href="../button">Button</a></li>
-            <li><a href="../canvas-zoom">Canvas & Zoom</a></li>
-        </ul>
-        <div id="container" class="content">
-        </div>
-    </body>
+<body>
+    <ul class="navbar">
+        <li><a href="../">Home</a></li>
+        <li><a href="../square/">Square</a></li>
+        <li><a href="../faker/">Faker</a></li>
+        <li><a href="../canvas/">Canvas</a></li>
+        <li><a class="active" href="../button/">Button</a></li>
+    </ul>
+    <div id="container" class="content">
+    </div>
+</body>

 </html>
--- a/canvas/index.html
+++ b/canvas/index.html
@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">

 <head>
-    <title>Moving Square - Lucien Cartier-Tilet</title>
+    <title>Canvas - Lucien Cartier-Tilet</title>
+    <meta name="author" content="Lucien Cartier-Tilet" />
+    <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/canvas.css" />
    <script type="text/javascript" src="../js/canvas.js"></script>
@ -13,16 +15,17 @@
 <body>
    <ul class="navbar">
        <li><a href="../">Home</a></li>
-        <li><a href="./">Moving red square</a></li>
-        <li><a href="../faker">Faker</a></li>
-        <li><a class="active" href="../canvas-zoom">Canvas & Zoom</a></li>
-        <li><a href="../button">Button</a></li>
+        <li><a href="../square/">Square</a></li>
+        <li><a href="../faker/">Faker</a></li>
+        <li><a class="active" href="../canvas/">Canvas</a></li>
+        <li><a href="../button/">Button</a></li>
    </ul>
    <div id="container">
+        <img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
        <div class="content">
            <p>Un canvas contenant une image. En passant la souris par dessus l'image on obtient un zoom sur cette dernière.</p>
+            <p><a href="https://www.instagram.com/p/BWqLAPSF7Fh/">[source image]</a></p>
        </div>
-        <img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />
        <canvas id="canvastp1" width="800" height="600"></canvas>
        <canvas id="loupe" width="80" height="80" display="none"></canvas>
    </div>
--- a/css/button.css
+++ b/css/button.css
@ -1,6 +1,3 @@
-#container {
-
-}
 #Button {
    background-color: #F67280;
    border: none;
--- a/css/canvas.css
+++ b/css/canvas.css
@ -1,7 +1,6 @@
 #container {
    position: relative;
    height: 100%;
-    overflow-x: scroll;
 }

 #content {
--- a/faker/index.html
+++ b/faker/index.html
@ -1,19 +1,24 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
+
 <head>
    <title>Faker - Lucien Cartier-Tilet</title>
+    <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
+    <meta name="author" content="Lucien Cartier-Tilet" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
-    <link rel="stylesheet" type="text/css" href="https://univ.phundrak.fr/css/style.css">
-    <script src="https://univ.phundrak.fr/js/faker.min.js"></script>
-    <script src="https://univ.phundrak.fr/js/exo-faker.js"></script>
+    <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
+    <link rel="stylesheet" type="text/css" href="../css/style.css">
+    <script src="../js/faker.min.js"></script>
+    <script src="../js/exo-faker.js"></script>
 </head>
+
 <body>
    <ul class="navbar">
-        <li><a href="https://univ.phundrak.fr/">Home</a></li>
-        <li><a href="https://univ.phundrak.fr/moving-square/">Moving red square</a></li>
-        <li><a class="active" href="https://univ.phundrak.fr/faker">Faker</a></li>
-        <li><a href="https://univ.phundrak.fr/canvas-zoom">Canvas & Zoom</a></li>
+        <li><a href="../">Home</a></li>
+        <li><a href="../square/">Square</a></li>
+        <li><a class="active" href="../faker/">Faker</a></li>
+        <li><a href="../canvas/">Canvas</a></li>
+        <li><a href="../button/">Button</a></li>
    </ul>
    <div class="container">
        <div class="content">
@ -26,4 +31,5 @@
        </div>
    </div>
 </body>
+
 </html>
--- a/index.html
+++ b/index.html
@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">

 <head>
    <title>Index - Lucien Cartier-Tilet</title>
+    <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
+    <meta name="author" content="Lucien Cartier-Tilet" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
    <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>

--- a/js/animation.js
+++ b/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);
+    }
+}
--- a/js/button.js
+++ b/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";
--- a/js/canvas.js
+++ b/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");
--- a/robots.txt
+++ b/robots.txt
@ -7,5 +7,4 @@ Disallow: /img
 Disallow: /js
 Disallow: /langue
 Disallow: /.git
-Disallow: .gitignore
 Disallow: *.php
--- a/square/index.html
+++ b/square/index.html
@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">

 <head>
    <title>Moving Square - Lucien Cartier-Tilet</title>
+    <meta name="author" content="Lucien Cartier-Tilet" />
+    <meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width, height=device-height">
+    <meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" href="../css/square.css" type="text/css" />
    <script src="../js/square.js"></script>
@ -13,10 +15,10 @@
 <body>
    <ul class="navbar">
        <li><a href="../">Home</a></li>
-        <li><a class="active" href="./">Moving red square</a></li>
-        <li><a href="../faker">Faker</a></li>
-        <li><a href="../canvas-zoom">Canvas & Zoom</a></li>
-        <li><a href="../button">Button</a></li>
+        <li><a class="active" href="../square/">Square</a></li>
+        <li><a href="../faker/">Faker</a></li>
+        <li><a href="../canvas/">Canvas</a></li>
+        <li><a href="../button/">Button</a></li>
    </ul>
    <div id="container">
        <div class="content">