@@ -2044,6 +2136,753 @@ function returns NaN
+
+
+
+
+
+
+
+
+
+
+
+ Point
+
+
+
+
+
+
+ Classe qui représente un point sur
+un plan cartésien. Le point est donc
+représenté par deux coordonnées x et y.
+
+ new Point(x: any, y: any)
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Circle
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
center (Point)
+ le point au centre du cercle
+
+
+
+
+
+
+
+
radius (number)
+ le rayon du cercle
+
+
+
+
+
+
+
+
id (number)
+ l'id unique du cercle. C'est au
+créateur de l'instance de s'assurer de l'unicité
+de l'id.
+
+
+
+
+
+
Instance Members
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ Point:
+ le point au centre au cercle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ le rayon du cercle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ string:
+ la couleur (hexadécimal) du cercle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+
color (String)
+ la nouvelle couleur du cercle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns
+ number:
+ l'id du cercle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ drawCircles
+
+
+
+
+
+
+ Dessine tous les cercles dans un svg. Cette fonction
+nettoye le svg avant d'ajouter les cercles.
+
+ drawCircles(node: any, circles: any)
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (any)
+ {HTMLElement} un element svg
+
+
+
+
+
+
+
+ circles (any)
+ {Circle[]} Les cercles à dessiner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ populateTable
+
+
+
+
+
+
+
+ populateTable(node: any, circles: any, pointToString: any, onClickUp: any, onClickDown: any, onClickLeft: any, onClickRight: any, onClickPaint: any)
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ node (any)
+ {HTMLElement} un element tbody
+
+
+
+
+
+
+
+ circles (any)
+ {Circle[]} Les cercles
+
+
+
+
+
+
+
+ pointToString (any
+ = undefined)
+ Argument optionnel qui doit être une fonction
+qui prend en paramêtre un Point et retourne un String qui
+représente le point.
+
+
+
+
+
+
+
+ onClickUp (any
+ = undefined)
+ 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.
+
+
+
+
+
+
+
+ onClickDown (any
+ = undefined)
+ 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.
+
+
+
+
+
+
+
+ onClickLeft (any
+ = undefined)
+ 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.
+
+
+
+
+
+
+
+ onClickRight (any
+ = undefined)
+ 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.
+
+
+
+
+
+
+
+ onClickPaint (any
+ = undefined)
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ randomColor
+
+
+
+
+
+
+ Retourne une couleur de gris aléatoire à partir d'un nombre entier.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+
+
+
+ i (any)
+ {number} (entier) qui sera utilisé comme "seed".
+
+
+
+
+
+
Returns
+ string:
+ une couleur hexadécimale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/modules-examples/mod.js b/modules-examples/mod.js
index a3562de..c9a92e5 100644
--- a/modules-examples/mod.js
+++ b/modules-examples/mod.js
@@ -1,3 +1,4 @@
export * from "./hockey.js"
export * from "./books.js"
-export * from "./stats.js"
\ No newline at end of file
+export * from "./stats.js"
+export * from "./tp1.js"
\ No newline at end of file
diff --git a/modules-examples/tp1.js b/modules-examples/tp1.js
new file mode 100644
index 0000000..02e7c31
--- /dev/null
+++ b/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}`
+}
\ No newline at end of file