Merge branch 'feat/game-screen'

1 files changed, 582 insertions, 1 deletions

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
index a0751e0..f4fc6c5 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx
@@ -1,3 +1,584 @@
 export default function GolfPlayAppWaiting() {
-  return <div>Waiting...</div>;
+  return (
+    <>
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold text-black-600 mb-4">Waiting...</h1>
+        </div>
+      </div>
+      <style>
+        {`
+        @keyframes changeHeight {
+          0% { height: 20%; }
+          50% { height: 100%; }
+          100% { height: 20%; }
+        }
+      `}
+      </style>
+      <div
+        style={{
+          position: "fixed",
+          bottom: 0,
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "flex-end",
+          height: "100px",
+          margin: "0 2px",
+        }}
+      >
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "2.0s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.9s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.8s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.7s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.6s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.1s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.0s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.9s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.8s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.7s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.6s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.1s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.1s",
+          }}
+        ></div>
+
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.1s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.1s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.6s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.7s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.8s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "0.9s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.0s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.1s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.2s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.3s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.4s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.5s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.6s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.7s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.8s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "1.9s",
+          }}
+        ></div>
+        <div
+          style={{
+            width: "2%",
+            margin: "0 2px",
+            background:
+              "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)",
+            display: "inline-block",
+            animation: "changeHeight 1s infinite ease-in-out",
+            animationDelay: "2.0s",
+          }}
+        ></div>
+      </div>
+    </>
+  );
 }