First Version Completed

src/index.html

@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Dessin d'enfants</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <script src="main.js" type="module"></script>
+</head>
+<body>
+
+<div class="columns is-centered">
+    <div class="column is-two-thirds">
+        <figure class="image" style="text-align: center;">
+            <svg style="height: 500px; width: 500px; border: solid; border-color: pink;" id="canvas"></svg>
+        </figure>
+    </div>
+</div>
+
+<div class="columns is-centered">
+    <div class="column is-two-thirds">
+
+        <div class="columns">
+            <div class="column">
+                <div class="field">
+                    <label class="label">Centre X du Cercle</label>
+                    <div class="control">
+                        <input class="input"
+                               id="cx"
+                               type="number"
+                               min="1"
+                               max="500"
+                               placeholder="250">
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <div class="field">
+                    <label class="label">Centre Y du Cercle</label>
+                    <div class="control">
+                        <input class="input"
+                               id="cy"
+                               type="number"
+                               min="1"
+                               max="500"
+                               placeholder="250">
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <div class="field">
+                    <label class="label">Rayon du Cercle</label>
+                    <div class="control">
+                        <input class="input"
+                               type="number"
+                               id="cr"
+                               min="1"
+                               max="500"
+                               placeholder="100">
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <br>
+                <button id="draw-circle" class="button mt-2">Ajouter Cercle</button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+
+<div class="columns is-centered">
+    <div class="column is-two-thirds">
+        <table class="table table is-fullwidth">
+            <thead>
+                <tr><th>Id</th><th>Centre</th><th>Rayon</th><th>Actions</th></tr>
+            </thead>
+            <tbody id="table-body">
+            </tbody>
+
+        </table>
+    </div>
+</div>
+
+
+<div class="columns is-centered">
+    <div class="column is-two-thirds">
+        <button id="clear-drawing" class="button mt-2">Tout Effacer</button>
+        <button id="inverse-drawing" class="button mt-2">Inverser l'ordre</button>
+        <button id="draw-simple-circle" class="button mt-2">Cercle Simple</button>
+    </div>
+</div>
+
+
+</body>
+</html>

src/main.js

@@ -0,0 +1,167 @@
+/*
+    TP1 - Dessins d'Enfants
+    Version 1 (complète)
+    Date: 16/12/2023
+*/
+
+import { 
+    drawCircles, 
+    populateTable, 
+    randomColor, 
+    Circle, 
+    Point } from " https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@tp1.1/modules-examples/mod.js";
+
+// VARIABLES PORTÉE GLOBALE
+const svg = document.getElementById("canvas");
+const table = document.getElementById("table-body");
+const STEP = 10;
+let circles = [];
+
+// FONCTIONS LOGIQUE APPLICATION
+
+function emptyCircles(){
+    circles.splice(0, circles.length);
+}
+
+function addCircle(x, y, r){
+    const c = new Circle(new Point(x,y), r, Date.now());
+    circles.push(c);
+    return c;
+}
+
+function render(){
+    populateTable(table,circles, 
+                        pointToString, 
+                        onClickUp, 
+                        onClickDown, 
+                        onClickLeft, 
+                        onClickRight,
+                        onClickPaint);
+    drawCircles(svg,circles);
+}
+
+function retrieveCircleId(event){
+    return Number(event.target.
+                        parentElement.
+                            parentElement.
+                                firstElementChild.textContent);
+}
+
+function getCircleById(circleId){
+    console.log(circleId)
+    for (const circle of circles){
+        console.log(circle.getId())
+        if(circle.getId() === circleId){
+            return circle;
+        }
+    }
+}
+
+function moveCircle(event, step){
+
+    const d = retrieveArrowDirection(event);
+    const c = getCircleById(retrieveCircleId(event));
+
+    if (d === 'up' || d === 'down'){
+        c.setCenter(new Point(  c.getCenter().getX(), 
+                                c.getCenter().getY() + step));
+    }
+    if( d === 'left' || d === 'right'){
+        c.setCenter(new Point(  c.getCenter().getX() + step, 
+                                c.getCenter().getY()));
+    }
+}
+
+function retrieveArrowDirection(event){
+    const directions = ['up', 'down', 'left', 'right'];
+    const arrowSpec = event.target.className;
+
+    for (const direction of directions){
+        if(arrowSpec.includes(direction)){
+            return direction;
+        }
+    }
+}
+
+function changeCircleColor(event){
+
+    const c = getCircleById(retrieveCircleId(event));
+    // Sélection au hasard d'un entier entre 0 et 255
+    c.setColor(randomColor(Math.floor(Math.random()*256)));
+}
+
+// GESTIONNAIRES D'ÉVÉNEMENTS CRÉÉS dans main.js
+
+document.getElementById("draw-simple-circle").addEventListener("click", simpleCercleBtn);
+
+function simpleCercleBtn(){
+    emptyCircles();
+    addCircle(250,250,50);
+    render();
+}
+
+document.getElementById("draw-circle").addEventListener("click", addBtn);
+
+function addBtn(){
+    const x = Number(document.getElementById("cx").value);
+    const y = Number(document.getElementById("cy").value);
+    const r = Number(document.getElementById("cr").value);
+    addCircle(x,y,r);
+    render();
+}
+
+document.getElementById("clear-drawing").addEventListener("click", clearBtn);
+
+function clearBtn(){
+    emptyCircles();
+    render();
+}
+
+document.getElementById("inverse-drawing").addEventListener("click", reverseOrderBtn);
+
+function reverseOrderBtn(){
+    // Modifie le tableau 'en place'
+    circles.reverse();
+    render();
+}
+
+// GESTIONNAIRES D'ÉVÉNEMENTS CRÉÉS PAR LA FONCTION IMPORTÉE populateTable()
+
+// Dans populateTable: lors de la création du td : pointToString(circle.getCenter())
+// La méthode getCenter() est donc appelée pour chaque cercle de circles lors du rendu
+// et c'est ce qui donne sa valeur au paramètre center
+function pointToString(center){
+    console.log('Dans pointToString');
+    console.log(center);
+    return `(${center.getX()}, ${center.getY()})`;
+}
+
+function onClickUp(){
+    const up = (- STEP);
+    moveCircle(event, up);
+    render();
+}
+
+function onClickDown(){
+    const down = (+ STEP);
+    moveCircle(event, down);
+    render();
+}
+
+function onClickLeft(){
+    const left = (- STEP);
+    moveCircle(event, left);
+    render();
+}
+
+function onClickRight(){
+    const right = (+ STEP);
+    moveCircle(event, right)
+    render();
+}
+
+function onClickPaint(){
+    changeCircleColor(event);
+    render();
+}
+