add disconnection state

Author: cgsdev0

examples/jeopardy-buzzer/pages/host/[room].sh

@@ -4,7 +4,7 @@ ROOM_CODE="${REQUEST_PATH##*/}"
 htmx_page << EOF
 
 <div hx-sse="connect:/sse/host/${ROOM_CODE}">
-    <div hx-trigger="sse:leave, sse:join, sse:unlock, sse:buzz, load" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
+    <div hx-trigger="sse:kick, sse:leave, sse:join, sse:unlock, sse:buzz, load" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
     <form>
     <input type="hidden" name="room_code" value="${ROOM_CODE}" />
     <div class="button-container">

examples/jeopardy-buzzer/pages/kick/[player].sh

@@ -0,0 +1,29 @@
+
+PASSWORD="${COOKIES["password"]}"
+
+if [[ "$REQUEST_METHOD" != "POST" ]]; then
+  return
+fi
+
+PLAYER_ID="${REQUEST_PATH##*/}"
+
+ROOM_CODE="${FORM_DATA["room_code"]}"
+ROOM_PASSWORD=$(cat "data/password-$(basename ${ROOM_CODE})")
+ROOM_DATA="data/room-$(basename ${ROOM_CODE})"
+SCORE_DATA="data/scores-$(basename ${ROOM_CODE})"
+
+if [[ "$ROOM_PASSWORD" != "$PASSWORD" ]]; then
+  echo "Bad auth!"
+  return
+fi
+
+PUBSUB_KEY="room-${ROOM_CODE}"
+
+sed -i "/^${PLAYER_ID}\tX$/d" "$ROOM_DATA"
+sed -i "/^${PLAYER_ID}\t[0-9]*$/d" "$SCORE_DATA"
+
+
+printf "event: kick\ndata: %s\n\n" "Buzz" \
+  | publish "$PUBSUB_KEY" &
+
+echo "$PLAYER_ID"

examples/jeopardy-buzzer/pages/player/[room].sh

@@ -27,8 +27,12 @@ htmx_page << EOF
     .score-controls {
       display: none;
     }
+    .player .disconnected:hover {
+      text-decoration: inherit;
+      cursor: inherit;
+    }
   </style>
-    <div hx-trigger="sse:score, sse:leave, sse:join, sse:buzz, sse:unlock" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
+    <div hx-trigger="sse:kick, sse:score, sse:leave, sse:join, sse:buzz, sse:unlock" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
     <form>
     <input type="hidden" name="room_code" value="${ROOM_CODE}" />
     <div class="button-container">

examples/jeopardy-buzzer/pages/room/players/[room].sh

@@ -3,19 +3,31 @@ ROOM_CODE="${REQUEST_PATH##*/}"
 
 touch "data/room-$(basename ${ROOM_CODE})"
 SCORE_FILE="data/scores-$(basename ${ROOM_CODE})"
-for username in $(cat "data/room-$(basename ${ROOM_CODE})"); do
+PLAYERS=$(cat "data/room-$(basename ${ROOM_CODE})")
+
+while IFS= read -r player; do
+  [[ -z "$player" ]] && break;
   LOOPED=true
   if [[ -f "data/buzzed-$(basename ${ROOM_CODE})" ]]; then
     BUZZED=$(cat "data/buzzed-$(basename ${ROOM_CODE})")
   fi
 
+  read username disconnected << EOF
+$player
+EOF
+
   SCORE=$(set -o pipefail; (grep -P "$username\t" "$SCORE_FILE" | cut -f2) || echo 0);
   BUZZED_CLASS=$([[ "$BUZZED" == "$username" ]] && echo " buzzed")
   RED_CLASS=$([[ "$SCORE" -lt "0" ]] && echo " red")
+  DC_CLASS=$([[ -z "$disconnected" ]] || echo " disconnected")
+  KICK=$([[ -z "$disconnected" ]] || echo " hx-post='/kick/${username}' hx-trigger='click' hx-swap='none'")
   echo """
   <div class='player-wrapper'>
     <div class='player${BUZZED_CLASS}'>
-      <div class='username'>${username}</div>
+<form>
+<input type='hidden' value='${ROOM_CODE}' name='room_code' />
+      <div class='username${DC_CLASS}'${KICK}>${username}</div>
+      </form>
       <div id='score-for-${username}' class='score${RED_CLASS}'>${SCORE}</div>
     </div>
     <form hx-post='/score' hx-swap='none' class='score-controls'>
@@ -28,7 +40,9 @@ for username in $(cat "data/room-$(basename ${ROOM_CODE})"); do
     </form>
   </div>
 """
-done
+done << EOF
+$PLAYERS
+EOF
 
 
 if [[ "$LOOPED" != "true" ]]; then

examples/jeopardy-buzzer/pages/sse/[usertype]/[room].sh

@@ -26,8 +26,9 @@ pid=$!
   printf "event: join\ndata: %s\n\n" "${PLAYER_ID}" \
   | publish "$PUBSUB_KEY" && \
   touch "$ROOM_DATA" && \
-  (grep -qF "$PLAYER_ID" "$ROOM_DATA" || \
-  echo "$PLAYER_ID" >> "$ROOM_DATA" && \
+  ((grep -qP "^${PLAYER_ID}(\tX)*$" "$ROOM_DATA" && \
+  sed -i "s/^${PLAYER_ID}\tX$/${PLAYER_ID}/" "$ROOM_DATA") || \
+  echo -e "$PLAYER_ID" >> "$ROOM_DATA" && \
   sort -o "$ROOM_DATA" "$ROOM_DATA")
 
 while IFS= read -r line; do
@@ -43,4 +44,5 @@ unsubscribe "$sub"
 [[ "$USER_TYPE" == "player" ]] && \
   printf "event: leave\ndata: %s\n\n" "$PLAYER_ID" |\
   publish "$PUBSUB_KEY" &&
-  sed -i "/${PLAYER_ID}/d" "$ROOM_DATA"
+  sed -i "s/^${PLAYER_ID}$/${PLAYER_ID}\tX/" "$ROOM_DATA"
+  # sed -i "/${PLAYER_ID}/d" "$ROOM_DATA"

examples/jeopardy-buzzer/pages/stream/[room].sh

@@ -24,7 +24,13 @@ htmx_page << EOF
       display: flex;
       flex-grow: 1;
     }
+    .player .disconnected {
+      color: inherit;
+    }
+    .player .disconnected::before {
+      content: initial;
+    }
   </style>
-    <div hx-trigger="load, sse:score, sse:leave, sse:join, sse:buzz, sse:unlock" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
+    <div hx-trigger="load, sse:kick, sse:score, sse:leave, sse:join, sse:buzz, sse:unlock" hx-get="/room/players/${ROOM_CODE}" class="players"></div>
 </div>
 EOF

examples/jeopardy-buzzer/static/style.css

@@ -74,6 +74,19 @@ button.subtract:active {
   border: 4px solid cyan;
 }
 
+.player .disconnected {
+  color: red;
+}
+.player .disconnected:hover {
+  color: red;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.player .disconnected::before {
+  color: red;
+  content: "(X) ";
+}
+
 .player.buzzed {
   background-color: #50cc80;
   border: 4px solid lime;