From 848b5a3519f85594c9ce4e684c95f75a7bb8fac4 Mon Sep 17 00:00:00 2001
From: Daniel Jacobs <danielhunterjacobs@gmail.com>
Date: Fri, 9 Feb 2024 10:56:06 -0500
Subject: [PATCH 1/4] Show static logo if Ruffle logo fails to load with Ruffle

---
 src/components/logo.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 4dd8ef23..74420ad1 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -35,6 +35,23 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
     this.container = React.createRef();
   }
 
+  private createStaticLogo() {
+    if (this.container.current) {
+      const staticLogo = document.createElement("IMG") as HTMLImageElement;
+      staticLogo.src = "/logo.svg";
+      staticLogo.alt = "Ruffle Logo";
+      staticLogo.style.width = "85%";
+      staticLogo.style.height = "auto";
+      staticLogo.style.margin = "0 auto";
+      staticLogo.style.display = "block";
+      staticLogo.style.position = "relative";
+      staticLogo.style.top = "50%";
+      staticLogo.style.transform = "translateY(-50%)";
+      this.container.current.textContent = "";
+      this.container.current.appendChild(staticLogo);
+    }
+  }
+
   private load() {
     if (this.player) {
       // Already loaded.
@@ -54,16 +71,16 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         contextMenu: "off",
         splashScreen: false,
         preferredRenderer: "canvas",
+      }).catch(() => {
+        this.createStaticLogo();
       });
       this.player.style.width = "100%";
       this.player.style.height = "100%";
+    } else {
+      this.createStaticLogo();
     }
   }
 
-  componentDidMount() {
-    this.load();
-  }
-
   componentWillUnmount() {
     this.player?.remove();
     this.player = null;
@@ -75,6 +92,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         <Script
           src="https://unpkg.com/@ruffle-rs/ruffle"
           onReady={() => this.load()}
+          onError={() => this.createStaticLogo()}
         />
         <div ref={this.container} className={this.props.className} />
       </>

From ba25b1e93fde425085991977b4d87750981cf15b Mon Sep 17 00:00:00 2001
From: Daniel Jacobs <danielhunterjacobs@gmail.com>
Date: Fri, 9 Feb 2024 11:31:09 -0500
Subject: [PATCH 2/4] Use class instead of inline style

---
 src/app/index.module.css | 10 ++++++++++
 src/components/logo.tsx  |  9 ++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/index.module.css b/src/app/index.module.css
index 6f1fad82..41a68c5f 100644
--- a/src/app/index.module.css
+++ b/src/app/index.module.css
@@ -32,6 +32,16 @@
   width: 400px;
 }
 
+.staticLogo {
+  width: 85%;
+  height: auto;
+  margin: 0 auto;
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .title {
   text-align: center;
   margin-bottom: calc(var(--mantine-spacing-xl));
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 74420ad1..34f36b8e 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Script from "next/script";
+import classes from "../app/index.module.css";
 
 declare global {
   interface Window {
@@ -40,13 +41,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
       const staticLogo = document.createElement("IMG") as HTMLImageElement;
       staticLogo.src = "/logo.svg";
       staticLogo.alt = "Ruffle Logo";
-      staticLogo.style.width = "85%";
-      staticLogo.style.height = "auto";
-      staticLogo.style.margin = "0 auto";
-      staticLogo.style.display = "block";
-      staticLogo.style.position = "relative";
-      staticLogo.style.top = "50%";
-      staticLogo.style.transform = "translateY(-50%)";
+      staticLogo.className = classes.staticLogo;
       this.container.current.textContent = "";
       this.container.current.appendChild(staticLogo);
     }

From 7e602549173b4eb52c5395cbc32a5a92b1e24e0d Mon Sep 17 00:00:00 2001
From: Daniel Jacobs <danielhunterjacobs@gmail.com>
Date: Fri, 1 Mar 2024 21:09:08 -0500
Subject: [PATCH 3/4] Don't dynamically create the static logo

---
 src/app/index.module.css |  4 ++++
 src/components/logo.tsx  | 29 ++++++++++++-----------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/app/index.module.css b/src/app/index.module.css
index 41a68c5f..16401f49 100644
--- a/src/app/index.module.css
+++ b/src/app/index.module.css
@@ -42,6 +42,10 @@
   transform: translateY(-50%);
 }
 
+.hidden {
+  display: none;
+}
+
 .title {
   text-align: center;
   margin-bottom: calc(var(--mantine-spacing-xl));
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 34f36b8e..c97f17cc 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import Image from "next/image";
 import Script from "next/script";
 import classes from "../app/index.module.css";
 
@@ -36,17 +37,6 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
     this.container = React.createRef();
   }
 
-  private createStaticLogo() {
-    if (this.container.current) {
-      const staticLogo = document.createElement("IMG") as HTMLImageElement;
-      staticLogo.src = "/logo.svg";
-      staticLogo.alt = "Ruffle Logo";
-      staticLogo.className = classes.staticLogo;
-      this.container.current.textContent = "";
-      this.container.current.appendChild(staticLogo);
-    }
-  }
-
   private load() {
     if (this.player) {
       // Already loaded.
@@ -57,7 +47,6 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
 
     if (this.player) {
       this.container.current!.appendChild(this.player);
-
       this.player.load({
         url: "/logo-anim.swf",
         autoplay: "on",
@@ -66,16 +55,21 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         contextMenu: "off",
         splashScreen: false,
         preferredRenderer: "canvas",
+      }).then(() => {
+        this?.container?.current?.querySelector("img")?.classList?.toggle(classes.hidden);
       }).catch(() => {
-        this.createStaticLogo();
+        this.player?.remove();
+        this.player = null;
       });
       this.player.style.width = "100%";
       this.player.style.height = "100%";
-    } else {
-      this.createStaticLogo();
     }
   }
 
+  componentDidMount() {
+    this.load();
+  }
+
   componentWillUnmount() {
     this.player?.remove();
     this.player = null;
@@ -87,9 +81,10 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         <Script
           src="https://unpkg.com/@ruffle-rs/ruffle"
           onReady={() => this.load()}
-          onError={() => this.createStaticLogo()}
         />
-        <div ref={this.container} className={this.props.className} />
+        <div ref={this.container} className={this.props.className}>
+          <Image src="/logo.svg" alt="Ruffle Logo" className={classes.staticLogo} width="340" height="110" />
+        </div>
       </>
     );
   }

From 33a24ca2da25ac36ec55c424dd0b0f8423f34277 Mon Sep 17 00:00:00 2001
From: Daniel Jacobs <danielhunterjacobs@gmail.com>
Date: Tue, 5 Mar 2024 11:28:07 -0500
Subject: [PATCH 4/4] Use state to show static logo with ternary conditional

---
 src/components/logo.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index c97f17cc..306027e5 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -27,7 +27,11 @@ interface LogoProps {
   className?: string;
 }
 
-export default class InteractiveLogo extends React.Component<LogoProps> {
+interface LogoState {
+  player: RufflePlayer | null;
+}
+
+export default class InteractiveLogo extends React.Component<LogoProps, LogoState> {
   private readonly container: React.RefObject<HTMLDivElement>;
   private player: RufflePlayer | null = null;
 
@@ -35,10 +39,19 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
     super(props);
 
     this.container = React.createRef();
+    this.state = {
+      player: null,
+    };
+  }
+
+  private removeRufflePlayer() {
+    this.player?.remove();
+    this.player = null;
+    this.setState({player: null});
   }
 
   private load() {
-    if (this.player) {
+    if (this.state.player) {
       // Already loaded.
       return;
     }
@@ -47,6 +60,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
 
     if (this.player) {
       this.container.current!.appendChild(this.player);
+
       this.player.load({
         url: "/logo-anim.swf",
         autoplay: "on",
@@ -55,14 +69,12 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
         contextMenu: "off",
         splashScreen: false,
         preferredRenderer: "canvas",
-      }).then(() => {
-        this?.container?.current?.querySelector("img")?.classList?.toggle(classes.hidden);
       }).catch(() => {
-        this.player?.remove();
-        this.player = null;
+        this.removeRufflePlayer();
       });
       this.player.style.width = "100%";
       this.player.style.height = "100%";
+      this.setState({player: this.player});
     }
   }
 
@@ -71,8 +83,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
   }
 
   componentWillUnmount() {
-    this.player?.remove();
-    this.player = null;
+    this.removeRufflePlayer();
   }
 
   render() {
@@ -83,7 +94,7 @@ export default class InteractiveLogo extends React.Component<LogoProps> {
           onReady={() => this.load()}
         />
         <div ref={this.container} className={this.props.className}>
-          <Image src="/logo.svg" alt="Ruffle Logo" className={classes.staticLogo} width="340" height="110" />
+          <Image src="/logo.svg" alt="Ruffle Logo" className={this.state.player ? classes.hidden : classes.staticLogo} width="340" height="110" />
         </div>
       </>
     );