fix(multiplayer): Make multiplayer stable again (#534)

* fix(multiplayer): prevent online state change flakiness when clicking toggle

Clicking the online room toggle while the room name selector was focused
caused the room state to be toggled twice in an inappropriate manner

* fix(multiplayer): prevent shared room price instability

api-etc/utils.js

@@ -32,7 +32,7 @@ export const getRoomData = async (roomKey, get, set) => {
 
   if (!valueAdjustments) {
     valueAdjustments = generateValueAdjustments()
-    roomData = { activePlayers: {}, valueAdjustments }
+    roomData = { valueAdjustments }
     set(roomKey, JSON.stringify(roomData))
   }
 

api/get-market-data.js

@@ -27,8 +27,5 @@ export default allowCors(async (req, res) => {
 
   set(roomKey, JSON.stringify(roomData))
 
-  res
-    .status(200)
-    // TODO: activePlayers: 1 is for legacy backwards compatibility. Remove it after 10/1/2024.
-    .json({ valueAdjustments, activePlayers: 1 })
+  res.status(200).json({ valueAdjustments })
 })

api/post-day-results.js

@@ -62,13 +62,16 @@ export default allowCors(async (req, res) => {
   } = req
 
   const roomKey = getRoomName(req)
-  const { valueAdjustments } = await getRoomData(roomKey, get, set)
+  const { valueAdjustments, ...roomData } = await getRoomData(roomKey, get, set)
   const updatedValueAdjustments = applyPositionsToMarket(
     valueAdjustments,
     positions
   )
 
-  set(roomKey, JSON.stringify(updatedValueAdjustments))
+  set(
+    roomKey,
+    JSON.stringify({ ...roomData, valueAdjustments: updatedValueAdjustments })
+  )
 
   res.status(200).json({ valueAdjustments: updatedValueAdjustments })
 })

src/components/Navigation/Navigation.js

@@ -101,6 +101,18 @@ const OnlineControls = ({
     handleChatRoomOpenStateChange(true)
   }
 
+  const submitRoomNameChange = () => {
+    handleRoomChange(displayedRoom)
+  }
+
+  /**
+   * @param {boolean} checked
+   */
+  const handleSwitchChange = checked => {
+    submitRoomNameChange()
+    handleOnlineToggleChange(checked)
+  }
+
   return (
     <>
       <FormControl
@@ -113,15 +125,16 @@ const OnlineControls = ({
               <Switch
                 color="primary"
                 checked={isOnline}
-                onChange={handleOnlineToggleChange}
+                onChange={(_, checked) => {
+                  handleSwitchChange(checked)
+                }}
                 name="use-alternate-end-day-button-position"
               />
             }
             label="Play online"
           />
         </FormGroup>
         <TextField
-          variant="standard"
           {...{
             className: 'room-name',
             inputProps: {
@@ -131,13 +144,9 @@ const OnlineControls = ({
             onChange: ({ target: { value } }) => {
               setDisplayedRoom(value)
             },
-            onBlur: ({ target: { value } }) => {
-              handleRoomChange(value)
-            },
-            onKeyUp: ({ target: { value }, which }) => {
-              // Enter
-              if (which === 13) {
-                handleRoomChange(value)
+            onKeyUp: ({ key }) => {
+              if (key === 'Enter') {
+                submitRoomNameChange()
               }
             },
             value: displayedRoom,

src/handlers/ui-events.js

@@ -492,36 +492,32 @@ export default {
     this.openDialogView(dialogView.FARMERS_LOG)
   },
 
-  handleOnlineToggleChange(_e, goOnline) {
+  /**
+   * @param {boolean} goOnline
+   */
+  handleOnlineToggleChange(goOnline) {
     if (!goOnline) {
       this.showNotification(DISCONNECTING_FROM_SERVER, 'info')
     }
 
-    const { room } = this.state
-
-    // Defer this operation to the next thread to prevent this warning:
-    //
-    // "An update (setState, replaceState, or forceUpdate) was scheduled from
-    // inside an update function. Update functions should be pure, with zero
-    // side-effects. Consider using componentDidUpdate or a callback."
-    setTimeout(
-      () =>
-        this.setState(() =>
-          goOnline
-            ? {
-                redirect: `/online/${encodeURIComponent(room)}`,
-              }
-            : {
-                redirect: '/',
-                cowIdOfferedForTrade: '',
-              }
-        ),
-      1
+    this.setState(({ room }) =>
+      goOnline
+        ? {
+            redirect: `/online/${encodeURIComponent(room)}`,
+          }
+        : {
+            redirect: '/',
+            cowIdOfferedForTrade: '',
+          }
     )
   },
 
+  /**
+   * @param {string} room
+   */
   handleRoomChange(room) {
     this.setState(() => ({
+      room,
       redirect: `/online/${encodeURIComponent(room.trim() || DEFAULT_ROOM)}`,
     }))
   },