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