Only show "Play" once resources are loaded

3 files changed, 7 insertions, 1 deletions

diff --git a/index.html b/index.html
index bd0759c..7d5322a 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
                 <div id="intro">
                     <p>is a game in which you GUESS THE CHARACTER based on the sound of their speech.</p>
                     <p>Loading (<span id="load-progress">0</span>%)...</p>
-                    <p><a href="#" id="play-link">Play</a></p>
+                    <p id="play-paragraph"><a href="#" id="play-link">Play</a></p>
                 </div>
             </div>
             <div id="game">
diff --git a/main.js b/main.js
index 97966f5..dc5d398 100644
--- a/main.js
+++ b/main.js
@@ -287,6 +287,8 @@ async function mainLol() {
 
     await loadResources();
 
+    document.body.classList.add('resources-loaded');
+
     document.body.addEventListener('keydown', evt => {
         const choiceContainer = document.getElementById('choice-container');
         if (!choiceContainer.classList.contains('hide')) {
diff --git a/style.css b/style.css
index 1c2a35d..c515db3 100644
--- a/style.css
+++ b/style.css
@@ -42,6 +42,10 @@ body.game #intro {
     display: none;
 }
 
+body:not(.resources-loaded) #play-paragraph {
+    display: none;
+}
+
 #crash-trace {
     text-align: start;
     border: 1pt dotted white;