From 1be6007f81488d0f186b44994fe8ee23385059a1 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 1 Aug 2024 02:02:04 +0900
Subject: feat(frontend): add minimal styling to game pages

---
 .../GolfPlayApps/GolfPlayAppConnecting.tsx         |  10 +-
 .../GolfPlayApps/GolfPlayAppFinished.tsx           |   8 +-
 .../components/GolfPlayApps/GolfPlayAppGaming.tsx  |  43 +-
 .../GolfPlayApps/GolfPlayAppStarting.tsx           |  18 +-
 .../components/GolfPlayApps/GolfPlayAppWaiting.tsx | 583 ++++++++++++++++++++-
 .../GolfWatchApps/GolfWatchAppConnecting.tsx       |  10 +-
 .../GolfWatchApps/GolfWatchAppFinished.tsx         |   8 +-
 .../GolfWatchApps/GolfWatchAppGaming.tsx           |  16 +-
 .../GolfWatchApps/GolfWatchAppStarting.tsx         |  18 +-
 9 files changed, 676 insertions(+), 38 deletions(-)

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
index e92a8e0..6a954c1 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx
@@ -1,3 +1,11 @@
 export default function GolfPlayAppConnecting() {
-  return <div>Connecting...</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">
+          Connecting...
+        </h1>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
index 75ceb71..db06890 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx
@@ -1,3 +1,9 @@
 export default function GolfPlayAppFinished() {
-  return <div>Finished</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">Finished</h1>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 332cb3c..fc672f5 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,29 +1,40 @@
+type Props = {
+  problem: string;
+  onCodeChange: (code: string) => void;
+  currentScore: number | null;
+};
+
 export default function GolfPlayAppGaming({
   problem,
   onCodeChange,
   currentScore,
-}: {
-  problem: string;
-  onCodeChange: (code: string) => void;
-  currentScore: number | null;
-}) {
+}: Props) {
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onCodeChange(e.target.value);
   };
 
   return (
-    <div style={{ display: "flex" }}>
-      <div style={{ flex: 1, padding: "10px", borderRight: "1px solid #ccc" }}>
-        <div>{problem}</div>
-        <div>
-          {currentScore == null ? "Score: -" : `Score: ${currentScore}`}
+    <div className="min-h-screen flex">
+      <div className="mx-auto flex min-h-full flex-grow">
+        <div className="flex w-1/2 flex-col justify-between p-4">
+          <div>
+            <div className="mb-2 text-xl font-bold">TODO</div>
+            <div className="text-gray-700">{problem}</div>
+          </div>
+          <div className="mb-4 mt-auto">
+            <div className="font-semibold text-green-500">
+              Score: {currentScore == null ? "-" : `${currentScore}`}
+            </div>
+          </div>
+        </div>
+        <div className="w-1/2 p-4 flex">
+          <div className="flex-grow">
+            <textarea
+              className="h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              onChange={handleTextChange}
+            ></textarea>
+          </div>
         </div>
-      </div>
-      <div style={{ flex: 1, padding: "10px" }}>
-        <textarea
-          style={{ width: "100%", height: "100%" }}
-          onChange={handleTextChange}
-        />
       </div>
     </div>
   );
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
index bf45abb..df179f1 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx
@@ -1,7 +1,15 @@
-export default function GolfPlayAppStarting({
-  timeLeft,
-}: {
+type Props = {
   timeLeft: number;
-}) {
-  return <div>Starting... ({timeLeft} s)</div>;
+};
+
+export default function GolfPlayAppStarting({ timeLeft }: Props) {
+  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">
+          Starting... ({timeLeft} s)
+        </h1>
+      </div>
+    </div>
+  );
 }
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>
+    </>
+  );
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
index 07e359f..b91339a 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppConnecting.tsx
@@ -1,3 +1,11 @@
 export default function GolfWatchAppConnecting() {
-  return <div>Connecting...</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">
+          Connecting...
+        </h1>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppFinished.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppFinished.tsx
index 330d1a6..866e18a 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppFinished.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppFinished.tsx
@@ -1,3 +1,9 @@
 export default function GolfWatchAppFinished() {
-  return <div>Finished</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">Finished</h1>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index d58a04f..10d68fe 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,16 +1,18 @@
+type Props = {
+  problem: string;
+  codeA: string;
+  scoreA: number | null;
+  codeB: string;
+  scoreB: number | null;
+};
+
 export default function GolfWatchAppGaming({
   problem,
   codeA,
   scoreA,
   codeB,
   scoreB,
-}: {
-  problem: string;
-  codeA: string;
-  scoreA: number | null;
-  codeB: string;
-  scoreB: number | null;
-}) {
+}: Props) {
   return (
     <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ display: "flex", flex: 1, justifyContent: "center" }}>
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
index 643af93..3c9919c 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppStarting.tsx
@@ -1,7 +1,15 @@
-export default function GolfWatchAppStarting({
-  timeLeft,
-}: {
+type Props = {
   timeLeft: number;
-}) {
-  return <div>Starting... ({timeLeft} s)</div>;
+};
+
+export default function GolfWatchAppStarting({ timeLeft }: Props) {
+  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">
+          Starting... ({timeLeft} s)
+        </h1>
+      </div>
+    </div>
+  );
 }
-- 
cgit v1.2.3-70-g09d2