From 84fa9bef6c0fc691b03218547c8016031b5f26af Mon Sep 17 00:00:00 2001
From: rbozek <rbozek@gmail.com>
Date: Fri, 5 Jan 2024 00:41:33 -0500
Subject: [PATCH] fix question-container little black box issue

---
 css/style.css    |  3 ++-
 js/app.js        | 16 +++++++++-------
 js/pseudocode.js |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4ae2986..581ca88 100644
--- a/css/style.css
+++ b/css/style.css
@@ -45,6 +45,7 @@ div#rules-div {
 }
 
 div#question-container {
+  display: none;
   background-color:  rgb(0, 0, 0);
   border-radius: 10px;
   max-width: 450px;
@@ -107,4 +108,4 @@ button {
 
 #btn-reset {
   margin-top: 30px;
-}
+}
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index 9697793..f6153bc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -22,9 +22,9 @@ const question = document.getElementById("question-p")
 const answers = document.getElementById("answers-ul")
 const btnReset = document.getElementById("btn-reset")
 const rulesBtnsDiv = document.getElementById("rules-btns-container")
-const btnContainer = document.getElementById("buttons-container") // for playClick audio purposes, and the questionContainer style.display issues?
-// const questionContainer = document.getElementById("question-container") // for clearing little black box
-// questionContainer.style.display = 'none'
+const btnContainer = document.getElementById("buttons-container") // for playClick audio purposes
+const questionContainer = document.getElementById("question-container") // fix for "question-container" little black box issue
+
 
 const playerScoreContainer = document.getElementById("player-score")
 let initialScoreState = playerScoreContainer.innerHTML = ``
@@ -67,6 +67,7 @@ function stopTimer() {
 
 function renderQuestionCat1() {
   rulesBtnsDiv.style.display = 'none'
+  questionContainer.style.display = 'block'  // fix for "question-container" little black box issue
   currentCategory = 1 // to fix problem at end of playerChooseAnswer
   let singleQuestion = questionsCat1[currentQuesIdx]    //HOLDS ONE SPECIFIC QUESTION:
   question.textContent = `${singleQuestion.quesQ}`
@@ -84,6 +85,7 @@ function renderQuestionCat1() {
 }
 function renderQuestionCat2() {
   rulesBtnsDiv.style.display = 'none'
+  questionContainer.style.display = 'block'  // fix for "question-container" little black box issue
   currentCategory = 2
   let singleQuestion = questionsCat2[currentQuesIdx] 
   question.textContent = `${singleQuestion.quesQ}`
@@ -100,6 +102,7 @@ function renderQuestionCat2() {
 }
 function renderQuestionCat3() {
   rulesBtnsDiv.style.display = 'none'
+  questionContainer.style.display = 'block'  // fix for "question-container" little black box issue
   currentCategory = 3
   let singleQuestion = questionsCat3[currentQuesIdx]
   question.textContent = `${singleQuestion.quesQ}`
@@ -165,7 +168,7 @@ function roundOver(){
   stopTimer()
   // countdown.textContent = ``
   countdown.style.display = 'none'
-  // questionContainer.style.display = 'none'
+  questionContainer.style.display = 'none' // fix for "question-container" little black box issue
   if (playerScore >= 5) {
     gameAudio.playLevelSucceed()
     playerScoreContainer.innerHTML = `Your score is:<br> ${ playerScore }<br>Perfect. You are an evolved human.`
@@ -185,8 +188,8 @@ function resetGame(){
   stopTimer()
   rulesBtnsDiv.style.display = ''
   countdown.style.display = 'none'
-  // questionContainer.style.display = 'none'
-  playerScoreContainer.innerHTML = initialScoreState;
+  questionContainer.style.display = 'none' // fix for "question-container" little black box issue
+  playerScoreContainer.innerHTML = initialScoreState
   countdown.textContent = ``
   question.textContent = '' // this line isnt needed?
   answers.innerHTML = ''
@@ -195,4 +198,3 @@ function resetGame(){
   console.log(playerScore, currentQuesIdx);
   console.log('resetting game');
 }
-
diff --git a/js/pseudocode.js b/js/pseudocode.js
index 27b7c7e..14be0d7 100644
--- a/js/pseudocode.js
+++ b/js/pseudocode.js
@@ -41,6 +41,7 @@
 // .gitignore or .env for dead code!
 
 FIX THT LITTLE BLACK BOX ISUE!! SO CLOSE!!
+min-width on big container for short questions
 
 CIRCLE BACK IF IM MENTALLY ABLE TO:
 -button styles & hover