added instructional pop up

Author: Ken C

src/App.css

@@ -31,7 +31,7 @@
   transition: background-color 0.3s ease;
   background-color: whitesmoke;
   color: black
-}
+} 
 
 .square:hover {
   background-color: lightskyblue;
@@ -63,4 +63,70 @@ background-image: url("purple-wave.jpg");
 background-size: contain;
 background-repeat: no-repeat;
 background-size: 100%; /* Fills the container completely */ 
-}
+}
+
+
+/* GreetingPopup.css */
+
+/* Popup container to cover the entire screen */
+.popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw; /* Use the entire viewport width */
+  height: 100vh; /* Full height of the viewport */
+  background-color: rgba(0, 0, 0, 0.3); /* Dark background with opacity */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* Ensure the popup is on top of other elements */
+  animation: fadeIn 0.5s; /* Fade-in effect */
+  padding-left: 30px; /* Left padding */
+  padding-right: 30px; /* Right padding */
+  box-sizing: border-box; /* Include padding within the width calculation */
+}
+
+/* Popup box */
+.popup {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  position: relative;
+  animation: fadeIn 0.5s; /* Fade-in effect */
+  padding: 50px;
+  width: 100%; /* Let the width of the popup take up the remaining space */
+  max-width: 500px; /* Limit the maximum width for large screens */
+  box-sizing: border-box; /* Ensure padding is included in width */
+}
+
+/* Text inside the popup */
+.greeting-text {
+  font-size: 18px;
+  color: #333;
+  text-align: center;
+  margin: 0; /* Ensures there is no margin */
+  padding: 0; /* Ensures there is no padding */
+}
+
+/* Close button */
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 30px;
+  color: black;
+  cursor: pointer;
+}
+
+/* Fade-in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import './App.css';
+import GreetingPopup from './GreetingsPopUp';
 
 const calculateWinner = (squares) => {
   const lines = [
@@ -51,6 +52,8 @@ const App = () => {
 
   return (
     <div className="App">
+      <div>
+      <GreetingPopup /></div>
       <div className="status"><b>{status}</b></div>
       <div className="board">
         {squares.map((value, index) => (

src/GreetingsPopUp.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+const GreetingPopup = () => {
+  // State to track visibility of the popup
+  const [isVisible, setIsVisible] = useState(true);
+
+  // Handle closing the popup
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  // If the popup is visible, render it, otherwise return null
+  return (
+    <>
+      {isVisible && (
+        <div className="popup-container">
+          {' '}
+          {/* Popup container */}
+          <div className="popup">
+            {' '}
+            {/* Greeting text */}
+            <button onClick={handleClose} className="close-button">
+              &times; {/* "X" for close */}
+            </button>
+            <br />
+            <h1 style={{color:'black'}}>WELCOME!</h1>
+            <br />
+            {/* Popup box */}
+            <span className="greeting-text">
+              Welcome to the React Tic Tac Toe App! This is a two-player game
+              where players take turns clicking on the squares of the board to
+              place their corresponding "X" or "O". The objective is to be the
+              first to get three of your marks in a row—whether horizontally,
+              vertically, or diagonally. If all squares are filled without a
+              winner, the game results in a tie. As you play, the game
+              dynamically updates to show each player's moves, and the winner
+              (or tie) is determined automatically. Once a game ends, you can
+              start a new round by resetting the board. Enjoy playing and
+              challenging your opponent in this classic game!
+            </span>{' '}
+            <br /><br />
+            <span className="greeting-text">
+              When ready click the ""X" in the upper right corner to begin 
+              playing the Tic-Tac-Toe game.
+            </span>{' '}
+            <br />
+            <br />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default GreetingPopup;