已完成等待玩家的頁面並介接/join

backend/src/main/java/tw/waterballsa/gaas/unoflip/controller/SSEController.java

@@ -4,10 +4,7 @@
 import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
 import tw.waterballsa.gaas.unoflip.service.SseService;
 
@@ -21,6 +18,7 @@ public SSEController(SseService sseService) {
     }
 
     @GetMapping(value = "{playerId}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
+    @CrossOrigin(origins = "http://localhost:3000")
     public ResponseEntity<SseEmitter> broadcast(@PathVariable String playerId) {
         HttpHeaders httpHeaders = new HttpHeaders();
         httpHeaders.set("X-Accel-Buffering", "no");

frontend/__tests__/WaittingJoin.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import WaittingJoinHomepage from '@/app/waittingJoin/page';
+import fetchMock from 'jest-fetch-mock';
+
+
+
+beforeEach(() => {
+  fetchMock.resetMocks();
+});
+
+describe('WaittingJoinHomepage', () => {
+  it('should update player count when a message is received', async () => {
+    const mockData = { position: 3 };
+
+    fetchMock.mockResponse(JSON.stringify(mockData));
+
+    render(<WaittingJoinHomepage />);
+
+    // 模拟 EventSource 的事件回调
+    const playerCount = await screen.findByText('目前玩家人數: 3');
+    expect(playerCount).toBeInTheDocument();
+  });
+});

frontend/app/layout.tsx

@@ -1,11 +1,11 @@
-import './globals.css';
 import { Inter } from 'next/font/google';
+import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'UNO Flip',
+  description: '正反面都能玩，比傳統 UNO 更刺激有趣。',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

frontend/app/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 import Image from 'next/image';
-import React from 'react';
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           UNO Flip
-          <code className="font-mono font-bold">app/page.tsx</code>
+          {/* <code className="font-mono font-bold">app/page.tsx</code> */}
         </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
           <a

frontend/app/waittingJoin/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export default function WaittingJoinHomepage() {
+
+    const name = useRef<HTMLInputElement>(null).current?.value || '未命名的玩家';
+    const playerId = useRef<HTMLInputElement>(null).current?.value || '01';
+    const [number, setNumber] = useState(0);
+
+    useEffect(() => {
+        // 創建 EventSource 連接
+        const eventSource = new EventSource("http://localhost:9090/sse/"+playerId);
+
+        eventSource.onopen = () => {
+            console.log('EventSource 連接已打開');
+        };
+
+        eventSource.onmessage = (event) => {
+            console.log('收到事件：', event.data);
+            const eventData = JSON.parse(event.data); 
+            if(eventData.position){
+            setNumber(eventData.position);}
+        };
+
+        eventSource.onerror = (error) => {
+            console.error('EventSource 錯誤：', error);
+        };
+
+        return () => {
+            eventSource.close();
+        };
+
+    }, []);
+    return (
+        <div className="flex flex-col justify-center items-center">
+            <h1 className="mt-10">說明: 因為尚未決定玩家順序，不能表現其他玩家的相對位置</h1>
+            <div className="border-gray-300 border-2 w-2/3 h-2/3 border-solid rounded-md p-10 m-10 flex flex-col justify-center items-center">
+                <div className="border-sky-200 border-4 w-2/3 h-1/4 border-double rounded-md p-10 m-10 flex flex-col justify-center items-center">
+                    <div className="text-center mb-auto">目前玩家人數: {number}</div>
+                    <br />
+                    <div className="text-center">等待其他玩家加入...</div>
+                </div>
+
+                <div className="border-2 border-red-300 border-solid rounded-md p-2 m-2 flex flex-col justify-center items-center" style={{ display: 'inline-block' }}>
+                    <span className="text-center">{name}</span>
+                </div>
+            </div>
+
+        </div>
+    );
+};