Correction de l'affichage du chrono qui "balançait" la page

5 years ago · 9e8c20c114
parent 68bea043e3
commit 9e8c20c114
5 changed files with 25 additions and 9 deletions
--- a/code/game.css
+++ b/code/game.css
@ -1,3 +1,6 @@
+@font-face {
+  font-family: augie; src: url('ress/augie.ttf');
+}

 .all-container {
    display : flex; 
@ -85,4 +88,12 @@

  .vitrail-hover {
    border: 5px solid blue;
-  }
+  }
+
+  .stats {
+    width: 150px;
+    padding: 10px;
+    font-size: large;
+    font-weight: bold;
+    font-family: augie;
+  }
--- a/code/game.html
+++ b/code/game.html
@ -6,21 +6,25 @@
    <link rel="stylesheet" type="text/css" href="game.css"/>
 </head>
 <body>
-    <ul id="all-container" class="all-container" style="border:2px solid orangered"> 
-        <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
+    <ul id="all-container" class="all-container"> 
+        
+        <ul class="stats">
            <p id="temps"></p>
-            <span id="chronotime">0:00:00:00</span>
+            <span id="chronotime" class="stats">0:00:00:00</span>
 <form name="chronoForm">
    <input type="button" name="startstop" value="start!" onClick="chronoStart()" />
    <input type="button" name="reset" value="reset!" onClick="chronoReset()" />
 </form>
-            <p id="stats"></p>
+            <p id="stats" class="stats"></p>
+        </ul>
+
+        <ul id="obj-container" class="obj-container">
            <h1>Objectif</h1>
            <canvas id="canvasObj" class="vitrail-plein"></canvas>
            <h1>R&eacute;sultat</h1>
            <canvas id="canvasTotal" class="vitrail-plein"></canvas>
        </ul>
-        <ul id="vitraux" class="vitraux" style="border:2px solid purple">
+        <ul id="vitraux" class="vitraux">
            <canvas id="canvas1" class="vitrail-plein"></canvas>
            
            <canvas id="canvas2" class="vitrail-plein"></canvas>
@ -29,7 +33,7 @@
            
            <canvas id="canvas4" class="vitrail-plein"></canvas>
        </ul>
-        <ul id="canvasR" class="flex-container" style="border:1px solid violet">
+        <ul id="canvasR" class="flex-container">
            <h1>R&eacute;serve</h1>
            <canvas id="canvasR1" class="vitrail-vide"></canvas>
            <canvas id="canvasR2" class="vitrail-vide"></canvas>
--- a/code/index.html
+++ b/code/index.html
@ -5,7 +5,7 @@
    <body>
        <form action="./game.html" method="GET">
            <input type="radio" id="no-res" name="mode" value="no-res">
-            <label for="no-res">Sans réserve</label><br>
+            <label for="no-res">Sans r&eacute;serve</label><br>
            <div class="button">
                <button type="submit">JOUER !</button>
            </div>
--- a/code/ress/augie.ttf
+++ b/code/ress/augie.ttf
--- a/code/vitraux.js
+++ b/code/vitraux.js
@ -46,7 +46,7 @@ var canvasT = document.getElementById('canvasTotal');
            eval("canvasR"+a+".height=size");
        }
        
-        function faireCercle0(x,y,color,lectx){
+        function faireCercle(x,y,color,lectx){
            var cercle = new Path2D();
            
            nx=(size/6)*(x>0 ? x+2 : x+3);
@ -120,6 +120,7 @@ var canvasT = document.getElementById('canvasTotal');
                {
                    if(Array.isArray(pts[i]))
                    {
+                        faireCercle(pts[i][0],pts[i][1],pts[i][2],lectx);
                        drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
                    }
                }