Merge pull request #18 from cardano-scaling/fix/not-display-qr

fix: not display QR code when no cabinet key

src/index.html

@@ -51,7 +51,7 @@
           class="js-hide-when-modal-opens iog-logo"
           href="https://iog.io"
         >
-          <img src="assets/images/iog-logo.svg" alt="IOG Logo" />
+          <img src="assets/images/iog-logo.png" alt="IOG Logo" />
         </a>
       </div>
       <main class="layer--base">
@@ -121,7 +121,7 @@ <h1 class="doom-logo js-hide-when-modal-opens">
             />
           </a>
           <a target="_blank" href="https://iog.io" class="iog-logo">
-            <img src="assets/images/iog-logo.svg" alt="IOG Logo" />
+            <img src="assets/images/iog-logo.png" alt="IOG Logo" />
           </a>
         </div>
       </div>
@@ -184,7 +184,7 @@ <h1>Welcome to Hydra Doom</h1>
             />
           </a>
           <a target="_blank" href="https://iog.io" class="iog-logo">
-            <img src="assets/images/iog-logo.svg" alt="IOG Logo" />
+            <img src="assets/images/iog-logo.png" alt="IOG Logo" />
           </a>
         </div>
       </div>
@@ -201,7 +201,7 @@ <h1>Welcome to Hydra Doom</h1>
           />
         </a>
         <a target="_blank" href="https://iog.io" class="iog-logo">
-          <img src="assets/images/iog-logo.svg" alt="IOG Logo" />
+          <img src="assets/images/iog-logo.png" alt="IOG Logo" />
         </a>
       </div>
       <div class="game-view-wrapper">

src/index.ts

@@ -17,25 +17,13 @@ const { sessionPk } = keys;
 let qrCode = await generatePooQrUri();
 let qrShown = false;
 
-function hideQrAndShowCanvas() {
-  if (qrCodeWrapper) {
-    qrCodeWrapper.style.display = "none";
-  }
-  if (canvas) {
-    canvas.style.width = "100%";
-    canvas.style.height = "100%";
-    canvas.style.position = "static";
-  }
-}
-
 async function pollForPoo(ephemeralKey: string) {
   const request = await fetch(`https://auth.hydradoom.fun/v1/${ephemeralKey}`);
   const status = request.status;
   if (status === 401) {
     throw new Error("Invalid Key");
   }
   if (status === 200) {
-    hideQrAndShowCanvas();
     startGame();
     return;
   }
@@ -63,11 +51,7 @@ startButton?.addEventListener("click", async () => {
 
 // Skip QR code
 skipButton?.addEventListener("click", () => {
-  hideQrAndShowCanvas();
-  // Temporarily commented out so we don't start the game twice;
-  // in practice, we should only show this skip button if we're showing the QR code,
-  // and just start the game immediately if not (if the cabinet key isn't set)
-  // startGame();
+  startGame();
 });
 
 async function showQrCode() {
@@ -81,6 +65,14 @@ async function showQrCode() {
 }
 
 async function startGame() {
+  if (qrCodeWrapper) {
+    qrCodeWrapper.style.display = "none";
+  }
+  if (canvas) {
+    canvas.style.width = "100%";
+    canvas.style.height = "100%";
+    canvas.style.position = "static";
+  }
   await fetchNewGame();
   if (startButton) {
     startButton.style.display = "none";

src/styles.css

@@ -307,6 +307,7 @@ main {
 }
 
 .logos {
+  align-items: center;
   display: flex;
   flex-direction: column;
   font-size: 0;
@@ -322,8 +323,18 @@ main {
   width: 53px;
 }
 
+.iog-logo {
+  align-items: center;
+  background-color: white;
+  border-radius: 100%;
+  display: flex;
+  height: 70px;
+  justify-content: center;
+  width: 70px;
+}
+
 .iog-logo img {
-  width: 160px;
+  width: 100%;
 }
 
 @media (max-width: 1600px) {
@@ -336,9 +347,13 @@ main {
     width: 49px;
   }
 
+  .iog-logo {
+    height: 60px;
+    width: 60px;
+  }
+
   .iog-logo img {
-    width: 130px;
-    max-width: initial;
+    width: 100%;
   }
 }
 

webpack.config.js

@@ -56,7 +56,7 @@ module.exports = {
         { from: "assets/images/bg-1-0x.jpg", to: "assets/images" },
         { from: "assets/images/bg-1-5x.jpg", to: "assets/images" },
         { from: "assets/images/sundae-labs-logo.svg", to: "assets/images" },
-        { from: "assets/images/iog-logo.svg", to: "assets/images" },
+        { from: "assets/images/iog-logo.png", to: "assets/images" },
       ],
     }),
   ],