format

css/index.css

@@ -18,8 +18,8 @@ body {
 }
 
 h1 {
-    font-size: 3em;
-    margin: 20px;
+    font-size: 50px;
+    margin: 40px;
     text-shadow: 3px 2px rgb(153, 145, 175);
     text-align: center;
 }
@@ -38,13 +38,14 @@ a {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
-    margin: 80px auto;
+    margin: 40px auto;
     width: 700px;
     justify-items: left;
 }
 
-.play {
+#play {
     text-align: center;
     text-shadow: 2px 1px rgb(153, 145, 175);
     font-size: 1.5em;
+	margin 40px;
 }

css/webtris.css

@@ -26,8 +26,8 @@ body {
 }
 
 h1 {
-    font-size: 3em;
-    margin: 40px 20px 20px 20px;
+    font-size: 50px;
+    margin: 40px;
     text-shadow: 3px 2px rgb(153, 145, 175);
     text-align: center;
 }
@@ -41,7 +41,7 @@ canvas {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin: auto;
+    margin: 0 auto;
 }
 
 .flex-space {
@@ -58,6 +58,7 @@ canvas {
 
 #hold {
     width: 120px;
+	justify-content: right;
 }
 
 #stats {

index.php

@@ -29,7 +29,7 @@
     }
 ?>
     </div>
-    <div class="play">
+    <div id="play">
         <a href="webtris.html"><b>JOUER</b></a>
     </div>
 </body>

js/webtris.js

@@ -338,6 +338,7 @@ class Stats {
         this.div.innerHTML  = `${this.score}<br/>
         ${this.highScore}<br/>
         ${timeFormat(Date.now() - this.startTime)}<br/>
+		<br/>
         ${this.level}<br/>
         ${this.goal}<br/>
         ${this.linesCleared}`
@@ -350,7 +351,7 @@ class Matrix {
         this.context = document.getElementById("matrix").getContext("2d")
         this.context.textAlign = "center"
         this.context.textBaseline = "center"
-        this.context.font = "3vw 'Share Tech', sans-serif"
+        this.context.font = "27px 'Share Tech', sans-serif"
         this.cells = Array.from(Array(MATRIX_ROWS+3), row => Array(MATRIX_COLUMNS))
         this.width = MATRIX_COLUMNS*MINO_SIZE
         this.height = MATRIX_ROWS*MINO_SIZE

webtris.html

@@ -11,21 +11,29 @@
     <h1>WEBTRIS</h1>
     <div class="flex-columns">
         <div class="flex-rows">
+            <canvas id="hold" width="120" height="120"></canvas>
             <div class="flex-columns">
                 <div class="flex-space"></div>
-                <canvas id="hold" width="120" height="120"></canvas>
             </div>
-            <div class="flex-space"></div>
             <div id="stats">
                 <div id="stats-names">
                     SCORE<br/>
                     RECORD<br/>
                     TEMPS<br/>
+                	<br />
                     NIVEAU<br/>
                     OBJECTIF<br/>
-                    LIGNES<br/>
+                    LIGNES
+                </div>
+                <div id="stats-values">
+                    0<br/>
+                    0<br/>
+                    00:00<br/>
+                    <br/>
+                    0<br/>
+                    0<br/>
+                    0
                 </div>
-                <div id="stats-values"></div>
             </div>
 
         </div>