wip game requests

Author: h908714124

src/main/client/src/feature/lobby/Lobby.jsx

@@ -29,6 +29,9 @@ import {
 import {
   ActiveGames,
 } from "./ActiveGames.jsx"
+import {
+  Requests,
+} from "./Requests.jsx"
 import {
   useAuthStore,
 } from "src/store.js"
@@ -49,6 +52,7 @@ import {
 const detailData = [
   ["open", "Open Games"],
   ["active", "Active Games"],
+  ["requests", "Game Requests"],
 ]
 
 export function Lobby() {
@@ -118,6 +122,9 @@ export function Lobby() {
         {detail === "active" && (
           <ActiveGames />
         )}
+        {detail === "requests" && (
+          <Requests lobbyState={lobbyState} />
+        )}
       </div>
       <LobbyPanel />
     </div>
@@ -202,6 +209,7 @@ function NewGameDialog({zNewGame, lobbyState, setLobbyState, onNewGame, onStartE
     </form>
   )
 }
+
 function DetailNavigation({detail, setDetail}) {
   return (
     <div className={twJoin(

src/main/client/src/feature/lobby/Requests.jsx

@@ -0,0 +1,110 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  useContext,
+} from "react"
+import {
+  twJoin,
+} from "tailwind-merge"
+import {
+  useNavigate,
+} from "react-router-dom"
+import {
+  base,
+  StompContext,
+  tfetch,
+  doTry,
+} from "src/util.js"
+import {
+  useAuthStore,
+} from "src/store.js"
+
+export function Requests({lobbyState}) {
+  let [requests, setRequests] = useState([])
+  let openGameId = lobbyState.openGameId
+  let stompClient = useContext(StompContext)
+  let navigate = useNavigate()
+  let auth = useAuthStore(state => state.auth)
+  let initialized = useRef()
+  useEffect(() => {
+    if (initialized.current) {
+      return
+    }
+    initialized.current = true
+    doTry(async () => {
+      let r = await tfetch("/api/lobby/requests", {
+        headers: {
+          "Authorization": "Bearer " + auth.token,
+        },
+      })
+      setRequests(r.requests.filter(request => request.gameId === openGameId))
+    })
+    let sub1 = stompClient.subscribe("/topic/lobby/requests", (message) => {
+      let r = JSON.parse(message.body)
+      setRequests(r.requests.filter(request => request.gameId === openGameId))
+    })
+    return () => {
+      sub1.unsubscribe()
+    }
+  }, [auth, initialized, stompClient, navigate, openGameId])
+  if (!openGameId) {
+    return <div />
+  }
+  return (
+    <div>
+      <div className="grid grid-cols-[max-content_max-content_max-content_max-content]">
+        {requests.map((request) => (
+          <Request
+            lobbyState={lobbyState}
+            request={request}
+            key={request.id} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function Request({lobbyState, request}) {
+  let navigate = useNavigate()
+  let auth = useAuthStore(state => state.auth)
+  let openGameId = lobbyState.openGameId
+  let classes = twJoin(
+    "contents",
+    "*:py-3",
+    "cursor-pointer *:hover:bg-sky-200 *:hover:text-black",
+  )
+  return (
+    <div
+      onClick={() => {
+        doTry(async () => {
+          let r = await tfetch("/api/lobby/start", {
+            headers: {
+              "method": "POST",
+              "Authorization": "Bearer " + auth.token,
+            },
+            body: JSON.stringify({
+              gameId: openGameId,
+              request: request.id,
+            }),
+          })
+          navigate(base + "/game/" + r.id)
+        })
+      }}
+      className={classes}
+      key={request.id}>
+      <div className="pl-3 pr-1 rounded-l-lg">
+        {request.white}
+      </div>
+      <div className="px-1">
+        {request.black}
+      </div>
+      <div className="px-1">
+        {request.dim}x{request.dim}
+      </div>
+      <div className="pl-1 pr-3 rounded-r-lg">
+        H{request.handi}
+      </div>
+    </div>
+  )
+}

src/main/client/src/feature/lobby/lobbyState.js

@@ -5,10 +5,16 @@ import {
 export function initialState() {
   return {
     stack: [], // newgame, accept
-    proposals: [],
+    openGameId: "",
   }
 }
 
+export function setOpenGameId(state, openGameId) {
+  return produce(state, draft => {
+    draft.openGameId = openGameId
+  })
+}
+
 function setOpen(state, el, kind, data) {
   if (!el) {
     return state