added tp1 classes

exo-004/index.html

@@ -0,0 +1,31 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+    <script type="module" src="index.js"></script>
+</head>
+<body>
+<div>
+    <input type="text" id="input-1" />
+    <div>
+        <button id="button-1">button-1</button>
+    </div>
+    <div>
+        <button id="button-2">button-2</button>
+    </div>
+    <div>
+        <button id="button-3">button-3</button>
+    </div>
+    <div>
+        <button id="button-4">button-4</button>
+    </div>
+
+    <pre id="output-1"></pre>
+</div>
+</body>
+</html>

exo-004/index.js

@@ -0,0 +1,65 @@
+import {isValidIsbn, isValidIsbn10, isValidIsbn13} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@latest/modules-examples/books.js";
+import {isBalanced} from "./util.js";
+
+function question1(){
+    let input1 = document.getElementById("input-1")
+    let inputText = input1.value;
+    document.getElementById("output-1").innerText = inputText;
+}
+
+function question4(){
+    let input1 = document.getElementById("input-1")
+    let inputText = input1.value;
+    if(isValidIsbn(inputText)){
+        document.getElementById("output-1").innerText = "Isbn est valide";
+    } else {
+        document.getElementById("output-1").innerText = "Isbn n'est pas valide";
+    }
+}
+
+function getQuestion5Message(text){
+    if(isValidIsbn13(text)){
+        return "Ceci est un isbn-13 valide";
+    }
+    if(isValidIsbn10(text)){
+        return "Ceci est un isbn-10 valide";
+    }
+    return "Ceci n'est pas un isbn";
+}
+
+function question5(){
+    let input1 = document.getElementById("input-1")
+    let inputText = input1.value;
+    document.getElementById("output-1").innerText = getQuestion5Message(inputText);
+
+}
+
+
+function getQuestion6Message(text){
+    if(isBalanced(text)){
+        return "Les parantheses sont balancées";
+    }
+    return "Les parantheses ne sont pas balancées";
+}
+
+function question6(){
+    let input1 = document.getElementById("input-1")
+    let inputText = input1.value;
+    document.getElementById("output-1").innerText = getQuestion6Message(inputText);
+
+}
+
+
+
+
+document.getElementById("button-1")
+    .addEventListener("click", question1);
+
+document.getElementById("button-2")
+    .addEventListener("click", question4);
+
+document.getElementById("button-3")
+    .addEventListener("click", question5);
+
+document.getElementById("button-4")
+    .addEventListener("click", question6);

exo-004/util.js

@@ -0,0 +1,15 @@
+export function isBalanced(str){
+    let counter = 0;
+    for(const letter of str){
+        if(letter === "("){
+            counter += 1;
+        }
+        if(letter === ")"){
+            counter -= 1;
+        }
+        if(counter < 0){
+            return false;
+        }
+    }
+    return counter === 0;
+}

exo_date.js

@@ -0,0 +1,61 @@
+
+function question1(){
+    let date = new Date()
+    console.log(date.toLocaleString())
+    console.log(date.toLocaleTimeString());
+}
+
+function getMonthName(monthIndex){
+    const months = ["janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "sept", "oct", "nov", "dec"];
+    return months[monthIndex];
+}
+
+function question2(){
+    let date = new Date()
+    let zeroIndexedMonth = date.getMonth();
+    console.log(getMonthName(zeroIndexedMonth))
+}
+
+function question3(){
+    let date = new Date();
+    console.log(date.getFullYear())
+}
+
+function question4(){
+    let date = new Date();
+    console.log(date.getTime())
+}
+
+
+function question5(){
+    let date = new Date();
+    console.log(date.getMinutes())
+}
+
+
+function question6(){
+    let date = new Date();
+    console.log(date.getTimezoneOffset() / 60)
+}
+
+function question7(){
+    let date = new Date();
+    date.setFullYear(date.getFullYear() + 1);
+    console.log(date.getTime())
+}
+
+function question8(){
+    let date = new Date();
+    date.setMonth(date.getMonth() - 1);
+    console.log(date.toString())
+}
+
+
+question1();
+question2();
+question3();
+question4();
+question5();
+question6();
+question7();
+question8();

foo.js

@@ -0,0 +1,13 @@
+import {HockeyGame} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@006.1/modules-examples/mod.js";
+
+let game1 = new HockeyGame();
+let game2 = new HockeyGame();
+game1.awayTeamScores();
+game1.homeTeamScores();
+game2.homeTeamScores()
+game1.homeTeamScores();
+game1.awayTeamScores();
+game2.homeTeamScores()
+game1.homeTeamScores();
+console.log(`Le gagnant de la partie 1 est: ${game1.winner()}`)
+console.log(`Le gagnant de la partie 2 est: ${game2.winner()}`)

modules-examples/mod.js

@@ -1,3 +1,4 @@
 export * from "./hockey.js"
 export * from "./books.js"
 export * from "./stats.js"
+export * from "./tp1.js"

modules-examples/tp1.js

@@ -0,0 +1,204 @@
+import m from "https://esm.sh/mithril@2.2.2"
+
+const BLACK = "000000";
+/**
+ * Classe qui représente un point sur
+ * un plan cartésien.  Le point est donc
+ * représenté par deux coordonnées x et y.
+ */
+export class Point{
+    #x;
+    #y;
+    constructor(x, y) {
+        this.#x = x;
+        this.#y = y;
+    }
+    getX(){
+        return this.#x;
+    }
+
+    getY(){
+        return this.#y;
+    }
+}
+
+/**
+ * Classe qui représente un cercle.  Le cercle est
+ * définit par un Point et un rayon.
+ *
+ * Par défaut, le cercle est noir.  Mais le cercle peut
+ * changer de couleur.
+ */
+export class Circle{
+    #center;
+    #radius;
+    #color;
+    #id;
+
+    /**
+     *
+     * @param {Point} center le point au centre du cercle
+     * @param {number} radius le rayon du cercle
+     * @param {number} id l'id unique du cercle.  C'est au
+     *         créateur de l'instance de s'assurer de l'unicité
+     *         de l'id.
+     */
+    constructor(center, radius, id) {
+        this.#center = center;
+        this.#radius = radius;
+        this.#color = BLACK;
+        this.#id = id;
+    }
+
+    /**
+     * @returns {Point} le point au centre au cercle
+     */
+    getCenter(){
+        return this.#center;
+    }
+
+    /**
+     *
+     * @returns {number} le rayon du cercle
+     */
+    getRadius(){
+        return this.#radius;
+    }
+
+    /**
+     *
+     * @returns {string} la couleur (hexadécimal) du cercle
+     */
+    getColor(){
+        return this.#color;
+    }
+
+    /**
+     * @param {String} color la nouvelle couleur du cercle
+     */
+    setColor(color){
+        this.#color = color;
+    }
+
+    setCenter(center){
+        this.#center = center;
+    }
+
+    /**
+     * @returns {number} l'id du cercle
+     */
+    getId(){
+        return this.#id;
+    }
+}
+
+/**
+ * Dessine tous les cercles dans un svg.  Cette fonction
+ * nettoye le svg avant d'ajouter les cercles.
+ *
+ * @param node {HTMLElement} un element svg
+ * @param circles {Circle[]} Les cercles à dessiner
+ */
+export function drawCircles(node, circles){
+    let svgCircles = [];
+    for(const circle of circles){
+        const attr = {
+            cx: circle.getCenter().getX(),
+            cy: circle.getCenter().getY(),
+            r: circle.getRadius(),
+            fill: `#${circle.getColor()}`,
+
+        };
+        svgCircles.push(m("circle", attr))
+    }
+    m.render(node, svgCircles);
+}
+
+function identity(x){
+    return x;
+}
+
+function functionOrDefault(fn){
+    if(typeof fn === 'function'){
+        return fn;
+    }
+    return identity;
+}
+
+function drawIcons(circle,
+                   onClickUp,
+                   onClickDown,
+                   onClickLeft,
+                   onClickRight,
+                   onClickPaint){
+    return [
+        m("i.fa-solid.fa-arrow-up.is-clickable", {onclick: () => onClickUp(circle.getId())}),
+        m("i.fa-solid.fa-arrow-down.is-clickable", {onclick: () => onClickDown(circle.getId())}),
+        m("i.fa-solid.fa-arrow-left.is-clickable", {onclick: () => onClickLeft(circle.getId())}),
+        m("i.fa-solid.fa-arrow-right.is-clickable", {onclick: () => onClickRight(circle.getId())}),
+        m("i.fa-solid.fa-paint-roller.is-clickable", {onclick: () => onClickPaint(circle.getId())}),
+    ]
+}
+
+/**
+ * @param node {HTMLElement} un element tbody
+ * @param circles {Circle[]} Les cercles
+ * @param pointToString Argument optionnel qui doit être une fonction
+ *        qui prend en paramêtre un Point et retourne un String qui
+ *        représente le point.
+ * @param onClickUp Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque la flèche pointant vers le haut
+ *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        la fonction.
+ * @param onClickDown Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque la flèche pointant vers le bas
+ *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        la fonction.
+ * @param onClickLeft Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque la flèche pointant vers la gauche
+ *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        la fonction.
+ * @param onClickRight Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque la flèche pointant vers la droite
+ *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        la fonction.
+ * @param onClickPaint Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque l'icone peinture
+ *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        la fonction.
+ */
+export function populateTable(node,
+                              circles,
+                              pointToString= undefined,
+                              onClickUp=undefined,
+                              onClickDown=undefined,
+                              onClickLeft=undefined,
+                              onClickRight=undefined,
+                              onClickPaint=undefined){
+    const rows = [];
+    pointToString = functionOrDefault(pointToString)
+    for(const circle of circles){
+        const row =[m("td", circle.getId()),
+                          m("td", pointToString(circle.getCenter())),
+                          m("td", circle.getRadius()),
+                          m("td", drawIcons(circle,
+                                            functionOrDefault(onClickUp),
+                                            functionOrDefault(onClickDown),
+                                            functionOrDefault(onClickLeft),
+                                            functionOrDefault(onClickRight),
+                                            functionOrDefault(onClickPaint)))];
+        rows.push(m("tr", row))
+    }
+    m.render(node, rows);
+
+}
+
+/**
+ * Retourne une couleur de gris aléatoire à partir d'un nombre entier.
+ * @param i {number} (entier) qui sera utilisé comme "seed".
+ * @returns {string} une couleur hexadécimale
+ */
+export function randomColor(i){
+    const base = (i % 256).toString(16);
+    return `${base}${base}${base}`
+}