pascal.lafourcade
/
onthedots
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout de css, début d'affichage en colonnes

Browse Source
affichage-v2
adplantade 5 years ago
parent 8fd0cfac56
commit d6340c4190
2 changed files with 485 additions and 337 deletions
Show Stats Download Patch File Download Diff File

71
code/index.css
Unescape View File

@ -0,0 +1,71 @@
.all-container {
display : flex; /*
align-items: baseline;
width : min-content;
flex-direction: row;
flex-wrap: wrap;*/
}
.flex-container {
/* We first create a flex layout context */
display : flex;
align-items: baseline;
width : min-content;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
/* Then we define how is distributed the remaining space */
flex-direction: column;
}
/*
.flex-item {
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}*/
.vitraux {
/* We first create a flex layout context */
display : flex;
align-items: baseline;
width : min-content;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
/* Then we define how is distributed the remaining space */
flex-direction: column;
}
/*
.vitrail {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}*/

133
code/index.html
Unescape View File

@ -1,18 +1,35 @@
<!DOCTYPE html>
<canvas id="canvas1" style="border:1px solid #000"></canvas> <html>
<canvas id="canvas2" style="border:1px solid #000"></canvas> <head>
<title>On The Dot</title>
<canvas id="canvas3" style="border:1px solid #000"></canvas> <link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<canvas id="canvas4" style="border:1px solid #000"></canvas> <body>
<ul id="all-container" class="all-container" style="border:2px solid orangered">
<canvas id="canvasTotal" style="border:1px solid #000"></canvas> <ul id="vitraux" class="vitraux" style="border:2px solid purple">
<canvas id="canvas1" class="vitrail" style="border:1px solid #000"></canvas>
<canvas id="canvasObj" style="border:1px solid green"></canvas>
<button onclick="generateEasy()">gen easy</button> <canvas id="canvas2" class="vitrail" style="border:1px solid #000"></canvas>
<script> <canvas id="canvas3" class="vitrail" style="border:1px solid #000"></canvas>
<canvas id="canvas4" class="vitrail" style="border:1px solid #000"></canvas>
</ul>
<canvas id="canvasTotal" style="border:1px solid #000"></canvas>
<h1>Objectif</h1>
<canvas id="canvasObj" style="border:1px solid green"></canvas>
<button onclick="generateEasy()">gen easy</button>
<ul id="canvasR" class="flex-container" style="border:1px solid violet">
<canvas id="canvasR1" class="flex-item" width="150" height="150" style="border:1px solid red"></canvas>
<canvas id="canvasR2" class="flex-item" width="150" height="150" style="border:1px solid blue"></canvas>
<canvas id="canvasR3" class="flex-item" style="border:1px solid violet"></canvas>
<canvas id="canvasR4" class="flex-item" style="border:1px solid violet"></canvas>
</ul>
</ul>
<script>
var canvas1 = document.getElementById('canvas1'); var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d'); var ctx1 = canvas1.getContext('2d');
@ -31,17 +48,21 @@
var canvasO = document.getElementById('canvasObj'); var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d'); var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d');
tab1=[]; tab1=[];
tab2=[]; tab2=[];
tab3=[]; tab3=[];
tab4=[]; tab4=[];
tabR=[];
tabTotal=[]; tabTotal=[];
tabObjCmp=[]; tabObjCmp=[];
mousePos=[]; mousePos=[];
colors=["red","blue","green","brown"]; colors=["red","blue","green","brown"];
width=300; // 6 lignes de 50px width=240; // 6 lignes de 50px
height=300; // 6 colonnes de 50px height=240; // 6 colonnes de 50px
canvas1.width=width; canvas1.width=width;
canvas2.width=width; canvas2.width=width;
canvas3.width=width; canvas3.width=width;
@ -59,11 +80,13 @@
function faireCercle(x,y,color,lectx){ function faireCercle(x,y,color,lectx){
var cercle = new Path2D(); var cercle = new Path2D();
nx=50*(x>0 ? x+2 : x+3);
ny=50*(y>0 ? y+2 : y+3);
nx=(width/6)*(x>0 ? x+2 : x+3);
ny=(height/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny); cercle.moveTo(nx, ny);
cercle.arc(nx+25, ny+25, 25, 0, 2 * Math.PI); cercle.arc(nx+(width/12), ny+(height/12), (height/12), 0, 2 * Math.PI);
lectx.fillStyle = color; lectx.fillStyle = color;
lectx.fill(cercle); lectx.fill(cercle);
@ -104,6 +127,23 @@
function toutDessiner(pts,lecanvas,lectx) function toutDessiner(pts,lecanvas,lectx)
{ {
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height); lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0])
{
for(i=1;i<pts.length;i++)
{
if(Array.isArray(pts[i]))
{
/*
pts[i].forEach(element => {
faireCercle(element[0],element[1],element[2],lectx);
})*/
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
}
else
faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
}
}
/*
pts.forEach(element=> { pts.forEach(element=> {
if(Array.isArray(element[0])){ if(Array.isArray(element[0])){
element.forEach(element2 => { element.forEach(element2 => {
@ -112,7 +152,7 @@
} }
else else
faireCercle(element[0],element[1],element[2],lectx); faireCercle(element[0],element[1],element[2],lectx);
}) })*/
} }
function empiler(obj=false) function empiler(obj=false)
@ -123,9 +163,15 @@
if(!obj) if(!obj)
{ {
tabTotal=[]; tabTotal=[];
if(tab1[0])
{
tab1.forEach(element => { tab1.forEach(element => {
tabTotal.push(element); tabTotal.push(element);
}) })
}
if(tab2[0]){
tab2.forEach(element => { tab2.forEach(element => {
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
@ -136,6 +182,10 @@
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}) })
}
if(tab3[0])
{
tab3.forEach(element => { tab3.forEach(element => {
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
@ -146,6 +196,9 @@
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}) })
}
if(tab4[0]){
tab4.forEach(element => { tab4.forEach(element => {
colors.forEach(col => { colors.forEach(col => {
test=[element[0],element[1],col]; test=[element[0],element[1],col];
@ -156,6 +209,7 @@
tabTotal.push(element); tabTotal.push(element);
exists=false; exists=false;
}) })
}
checkAllOK(); checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT); toutDessiner(tabTotal,canvasT,ctxT);
} }
@ -202,10 +256,10 @@
tabObj[0]=Array.from(tab1); tabObj[0]=Array.from(tab1);
tabObj[1]=Array.from(tab2); tabObj[1]=Array.from(tab2);
tabObjCmp=[]; tabObjCmp=[];
actions=getRandomInt(5); actions=getRandomInt(8);
while(actions>0){ while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(2)-1); tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
actions--; actions--;
} }
empiler(true); empiler(true);
@ -244,6 +298,12 @@
function rotationManager(e) function rotationManager(e)
{ {
canvasNumber=e.currentTarget.id.substring(6); canvasNumber=e.currentTarget.id.substring(6);
if(canvasNumber=="R")
{
toggleVisible(mousePos[0]);
}
else
{
lecanvas=eval("canvas"+canvasNumber); lecanvas=eval("canvas"+canvasNumber);
letab=eval("tab"+canvasNumber); letab=eval("tab"+canvasNumber);
lectx=lecanvas.getContext('2d'); lectx=lecanvas.getContext('2d');
@ -272,6 +332,7 @@
changeOrder(mousePos[0],canvasNumber); changeOrder(mousePos[0],canvasNumber);
} }
} }
}
function checkAllOK(){ function checkAllOK(){
@ -312,6 +373,14 @@
} }
function toggleVisible(where)
{
eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT);
}
canvas1.addEventListener("mousedown",function(e){ canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)]; mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
@ -345,6 +414,11 @@
rotationManager(e); rotationManager(e);
}) })
canvasR.addEventListener("mouseup",function(e){
rotationManager(e);
})
/* /*
tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]); tab1.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]); tab2.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
@ -352,10 +426,10 @@
tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]); tab4.push([-3,-3,"green"],[-3,2,"red"],[1,2,"blue"],[3,-3,"brown"]);
*/ */
tab1.push([-1,-1,"green"],[-2,-2,"red"]); tab1.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab2.push([-1,-1,"green"],[-2,-2,"red"]); tab2.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab3.push([-1,-1,"green"],[-2,-2,"red"]); tab3.push(true,[-1,-1,"green"],[-2,-2,"red"]);
tab4.push([-1,-1,"green"],[-2,-2,"red"]); tab4.push(true,[-1,-1,"green"],[-2,-2,"red"]);
toutDessiner(tab1,canvas1,ctx1); toutDessiner(tab1,canvas1,ctx1);
@ -365,4 +439,7 @@
</script> </script>
</body>
</html>

Write Preview
Loading…
Cancel
Save