Fix size of chessboard following container

diff --git a/base_rules.js b/base_rules.js
index 5eb4d77..ea34a3d 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -559,10 +559,21 @@ export default class ChessRules {
   graphicalInit() {
     // NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
     window.onresize = () => this.re_drawBoardElements();
-    this.re_drawBoardElements();
-    this.initMouseEvents();
-    const chessboard =
-      document.getElementById(this.containerId).querySelector(".chessboard");
+    const g_init = () => {
+      this.re_drawBoardElements();
+      this.initMouseEvents();
+    };
+    let container = document.getElementById(this.containerId);
+    if (container.getBoundingClientRect().width == 0) {
+      // Element not ready yet
+      let ro = new ResizeObserver(() => {
+        ro.unobserve(container);
+        g_init();
+      });
+      ro.observe(container);
+    }
+    else
+      g_init();
   }
 
   re_drawBoardElements() {

diff --git a/common.css b/common.css
index 1f1809a..e9bf31c 100644 (file)
--- a/common.css
+++ b/common.css
@@ -37,7 +37,10 @@ main > div {
   margin-top: 25vh;
   min-height: 500px;
   min-width: 320px;
-  max-width: 800px; /*useful for rules display only*/
+}
+
+#gameInfos {
+  max-width: 800px;
 }
 
 @media(max-height: 800px) {
@@ -58,17 +61,14 @@ main > div {
 }
 
 #boardContainer {
-  margin: 0;
-  padding: 0;
-  border: none;
-  /* attempt https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen */
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
-  background: rgba(51,51,51,0.7);
-  z-index: 10;
+  margin: 0;
+  padding: 0;
+  border: none;
 }
 
 h1 {