stylesheet incomming git add style.css !

modules/tiles.mjs

@@ -1,12 +1,14 @@
 import { images } from '/modules/ressources.mjs';
 import { CanMove, Square } from '/modules/enums.mjs';
 
+
 class Tile {
+  static increaseInTileWidth = 1.005;
   constructor(x, y, width, height) {
     this.x = x;
     this.y = y;
-    this.width = width;
-    this.height = height;
+    this.width = width * Tile.increaseInTileWidth;
+    this.height = height * Tile.increaseInTileWidth;
     this.canMove = CanMove.No;
     this.image = new Image();
     this.imageReady = false;

style.css

@@ -0,0 +1,52 @@
+:root {
+    --main-background-color: black;
+    --main-invert-color: white;
+    --main-highlight-color: cyan;
+}
+
+body {
+    background-color: var(--main-background-color);
+    display: flex;
+}
+
+.dialog {
+    height: 200px;
+    width: 400px;
+    background-color: var(--main-invert-color);
+    position: relative;
+    border-radius: 10%;
+    display: flex;
+    text-align: center;
+}
+
+.left-point {
+    width: 0;
+    height: 0;
+    border-left: 1rem solid transparent;
+    border-right: 1rem solid transparent;
+    border-top: 5rem solid var(--main-invert-color);
+    position: relative;
+    top: 45%;
+    left: -10%;
+    transform: rotate(60deg) ;
+    z-index: -1;
+}
+
+.text-bubble {
+    /* transform: rotate(90deg); */
+    position: relative;
+    left: 658px;
+    top: -385px;
+    z-index: 2;
+}
+
+.speech {
+    z-index: 3;
+    margin: auto;
+    position: relative;
+    text-align: justify;
+}
+
+.to-center {
+    margin: 0 auto;
+}