added solution of first homework
This commit is contained in:
didier amyot committed
1 parent
0dd3b65a74
commit
1c3ad4fcbf
2 files changed
+203
No files matched your search
@@ -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>
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
import {drawCircles, populateTable, Circle, Point, randomColor} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@tp1.1/modules-examples/mod.js";
|
||||||
|
|
||||||
|
const circles = []
|
||||||
|
|
||||||
|
function getCircleById(circleId){
|
||||||
|
for(const circle of circles){
|
||||||
|
if(circle.getId() === circleId){
|
||||||
|
return circle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickUp(circleId){
|
||||||
|
const circle = getCircleById(circleId);
|
||||||
|
const center = circle.getCenter();
|
||||||
|
const newCenter = new Point(center.getX(), center.getY() - 10);
|
||||||
|
circle.setCenter(newCenter);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickDown(circleId){
|
||||||
|
const circle = getCircleById(circleId);
|
||||||
|
const center = circle.getCenter();
|
||||||
|
const newCenter = new Point(center.getX(), center.getY() + 10);
|
||||||
|
circle.setCenter(newCenter);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickLeft(circleId){
|
||||||
|
const circle = getCircleById(circleId);
|
||||||
|
const center = circle.getCenter();
|
||||||
|
const newCenter = new Point(center.getX() - 10, center.getY());
|
||||||
|
circle.setCenter(newCenter);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClickRight(circleId){
|
||||||
|
const circle = getCircleById(circleId);
|
||||||
|
const center = circle.getCenter();
|
||||||
|
const newCenter = new Point(center.getX() + 10, center.getY());
|
||||||
|
circle.setCenter(newCenter);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onClickPaint(circleId){
|
||||||
|
const circle = getCircleById(circleId);
|
||||||
|
circle.setColor(randomColor(Date.now()))
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pointToString(point){
|
||||||
|
return `(${point.getX()}, ${point.getY()})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawNewCircle(){
|
||||||
|
const x = parseInt(document.getElementById("cx").value)
|
||||||
|
const y = parseInt(document.getElementById("cy").value)
|
||||||
|
const r = parseInt(document.getElementById("cr").value)
|
||||||
|
const p = new Point(x, y);
|
||||||
|
const circle = new Circle(p, r, Date.now());
|
||||||
|
circles.push(circle);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function inverseCircles(){
|
||||||
|
circles.reverse();
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCircles(){
|
||||||
|
circles.length = 0;
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawSimpleCircle(){
|
||||||
|
circles.length = 0;
|
||||||
|
const circle = new Circle(new Point(250, 250), 50, Date.now());
|
||||||
|
circles.push(circle);
|
||||||
|
renderCircles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCircles(){
|
||||||
|
drawCircles(document.getElementById("canvas"), circles);
|
||||||
|
populateTable(document.getElementById("table-body"),
|
||||||
|
circles,
|
||||||
|
pointToString,
|
||||||
|
onClickUp,
|
||||||
|
onClickDown,
|
||||||
|
onClickLeft,
|
||||||
|
onClickRight,
|
||||||
|
onClickPaint);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("draw-circle").addEventListener("click", drawNewCircle);
|
||||||
|
document.getElementById("clear-drawing").addEventListener("click", clearCircles);
|
||||||
|
document.getElementById("inverse-drawing").addEventListener("click", inverseCircles);
|
||||||
|
document.getElementById("draw-simple-circle").addEventListener("click", drawSimpleCircle);
|
||||||
|
|
||||||
Reference in new issue
Block a user