style

css/style.css

@@ -23,6 +23,7 @@
 body {
     background-image: url("images/bg.jpg");
     background-size: cover;
+    background-attachment: fixed;
 }
 
 h1 {
@@ -39,6 +40,16 @@ button {
 
 a {
     text-decoration: none;
+    font-size: 1em;
+    border-style: outset;
+    border-width: 5px;
+    border-radius: 5px;
+    color: black;
+    background-color: white;
+}
+
+a:active {
+    border-style: inset;
 }
 
 #actions {
@@ -46,16 +57,13 @@ a {
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
     margin: 40px auto;
-    width: 700px;
+    width: 650px;
     justify-items: left;
 }
 
 #play {
-    color: LightCyan;
     text-align: center;
     font-weight: bold;
-    text-shadow: 2px 1px rgb(153, 145, 175);
-    font-size: 1.5em;
 	margin: 30px;
 }
 
@@ -70,7 +78,6 @@ a {
 #hold {
 	grid-column: 1 / 3;
     grid-row: 1;
-    width: 120px;
 }
 
 #stats-names {
@@ -78,15 +85,13 @@ a {
     grid-row: 2;
     font-family: 'Share Tech';
     text-align: left;
-    align-self: top;
 }
 
 #stats-values {
     grid-column: 2;
     grid-row: 2;
-    text-align: right;
     font-family: 'Share Tech Mono';
-    align-self: top;
+    text-align: right;
 }
 
 #matrix {

index.php

@@ -12,12 +12,12 @@
     <div id="actions">
 <?php
     function addButton($action, $label) {
-        echo "        <div>$label</div>\n";
-        echo "        <button type='button' onclick='changeKey(this, \"$action\")'>\n";
-        echo "            <script>getKey(\"$action\")</script>\n";
-        echo "        </button>\n";
-    }
-    
+?>
+        <div><?=$label?></div>
+        <button type='button' onclick='changeKey(this, "<?=$action?>")'>
+            <script>getKey("<?=$action?>")</script>
+        </button>
+<?php    }
     addButton("moveLeft", "GAUCHE");
     addButton("moveRight", "DROITE");
     addButton("softDrop", "CHUTE LENTE");

js/webtris.js

@@ -213,7 +213,7 @@ class Tetromino {
             context.shadowColor = this.ghostColor
             context.shadowOffsetX = 0
             context.shadowOffsetY = ghostYOffset * MINO_SIZE
-            context.shadowBlur = 3
+            context.shadowBlur = 4
             this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
             context.restore()
         }
@@ -578,7 +578,7 @@ function gameOver() {
     requestAnimationFrame(draw)
 
     if (stats.score == stats.highScore) {
-        alert("Bravo ! Vous avez battu votre précédent record.")
+        alert("Bravo !\nVous avez battu votre précédent record.")
         localStorage.setItem('highScore', stats.highScore)
     }
 }