refactor: move host logic from constant to stores

Author: r2dev2

src/__tests__/js/networking.js

@@ -101,11 +101,11 @@ describe('networking as a node', () => {
 
     jest.doMock('@/js/constants.js', () => ({
       ...Constants,
-      hivemindBrain: testId2,
-      isHivemindBrain: false,
       external: { Peer },
     }));
 
+    stores.hivemindBrain.set(testId2);
+
     networking = getNetworking();
     givePeerConnectionId(testId1);
     openConnection();
@@ -206,11 +206,11 @@ describe('networking as a hivemind', () => {
 
     jest.doMock('@/js/constants.js', () => ({
       ...Constants,
-      hivemindBrain: null,
-      isHivemindBrain: true,
       external: { Peer },
     }));
 
+    stores.hivemindBrain.set(null);
+
     networking = getNetworking();
     givePeerConnectionId(testId2);
     openConnection();

src/components/Game.svelte

@@ -13,14 +13,15 @@
     toAristocratCipher,
     toPatristocratCipher,
   } from '@/js/quotes.js';
-  import { isHivemindBrain, hivemindBrain } from '@/js/constants.js';
   import {
     hintEnabled,
     patristocratEnabled,
     progress,
     gameProblem,
     solved,
     users,
+    isHivemindBrain,
+    hivemindBrain,
     hivemindConnection,
   } from '@/js/store.js';
 
@@ -38,7 +39,7 @@
     getNewQuote().then((quote) => gameProblem.set(createProblem(quote)));
   };
 
-  $: connectingToHivemind = !isHivemindBrain && $hivemindConnection === null;
+  $: connectingToHivemind = !$isHivemindBrain && $hivemindConnection === null;
 </script>
 
 <div class="game">
@@ -69,7 +70,7 @@
   </Panel>
   {#if connectingToHivemind}
     <Panel title="Connecting...">
-      Connecting to {hivemindBrain ?? ''}
+      Connecting to {$hivemindBrain ?? ''}
     </Panel>
   {:else if $users.length > 0}
     <Panel title="Lobby">
@@ -81,7 +82,7 @@
       <OpponentProgress />
     </Panel>
   {/if}
-  {#if $gameProblem || isHivemindBrain}
+  {#if $gameProblem || $isHivemindBrain}
     <Panel title="Game">
       {#if $gameProblem}
         <CryptogramSolver
@@ -91,7 +92,7 @@
           on:error
         />
       {/if}
-      {#if isHivemindBrain}
+      {#if $isHivemindBrain}
         <button on:click={newProblem}>New Problem</button>
       {/if}
     </Panel>

src/components/JoinLink.svelte

@@ -1,8 +1,9 @@
 <script>
-  import { id as id_ } from '@/js/store.js';
+  import { id as id_, isHivemindBrain as isHivemindBrain_ } from '@/js/store.js';
   import { getJoinLink } from '@/js/cryptoduelutils.js';
 
   export let id = id_;
+  export let isHivemindBrain = isHivemindBrain_;
 
   let clicked = false;
   // whether we can use the navigator.share api
@@ -22,7 +23,7 @@
     clicked = true;
   };
 
-  $: joinLink = getJoinLink($id);
+  $: joinLink = getJoinLink($id, $isHivemindBrain);
 </script>
 
 <div class="join-links">

src/js/cryptoduelutils.js

@@ -3,7 +3,7 @@
  */
 
 import { choose, fmtTime } from './utils.js';
-import { congratulationTitles, isHivemindBrain } from './constants.js';
+import { congratulationTitles } from './constants.js';
 
 /** @typedef {import('./quotes.js').EncryptedQuote} EncryptedQuote */
 
@@ -19,8 +19,8 @@ export const getCongratulationsMessage = (timeTaken) => {
 /** @type {() => string} */
 export const getCongratulationsTitle = () => choose(congratulationTitles);
 
-/** @type {(id: string) => string} */
-export const getJoinLink = (id) =>
+/** @type {(id: string, isHivemindBrain: boolean) => string} */
+export const getJoinLink = (id, isHivemindBrain) =>
   isHivemindBrain
     ? `${window.location.href}?game=${encodeURIComponent(id)}`
     : window.location.href;

src/js/networking.js

@@ -4,6 +4,8 @@ import {
   connections,
   gameProblem,
   id,
+  hivemindBrain,
+  isHivemindBrain,
   hivemindConnection,
   name,
   self,
@@ -13,8 +15,6 @@ import {
 } from './store.js';
 import {
   external,
-  hivemindBrain,
-  isHivemindBrain,
   Messages,
 } from './constants.js';
 import { log } from './utils.js';
@@ -72,7 +72,7 @@ const onNewProblem = (_, data) => {
 
 /** @type {DataResponder<UPDATE_S_MSG>} */
 const updateFromClient = (id, data) => {
-  if (!isHivemindBrain) return;
+  if (!get(isHivemindBrain)) return;
   users.update(($users) =>
     $users.map((u) =>
       u.id !== id
@@ -89,7 +89,7 @@ const updateFromClient = (id, data) => {
 
 /** @type {DataResponder<UPDATE_C_MSG>} */
 const updateFromServer = (_, data) => {
-  if (isHivemindBrain) return;
+  if (get(isHivemindBrain)) return;
   const ourId = get(id);
   users.set(data.users.filter((u) => u.id !== ourId));
 };
@@ -116,7 +116,7 @@ const sendInitialState = (/** @type {Connection} */ conn) =>
 const openConnection = (/** @type {Connection} */ conn) =>
   new Promise((res) => {
     conn.on('open', () => {
-      if (conn.peer === hivemindBrain) hivemindConnection.set(conn);
+      if (conn.peer === get(hivemindBrain)) hivemindConnection.set(conn);
       connections.set(conn.peer, conn);
       conn.on('data', onData(conn.peer));
       conn.on('close', removePlayer(conn.peer));
@@ -142,9 +142,11 @@ export const connectTo = (otherId) =>
   });
 
 peer.on('open', (/** @type {string} */ $id) => {
+  const $isbrain = get(isHivemindBrain);
+  const $brainid = get(hivemindBrain);
   id.set($id);
-  if (!isHivemindBrain && hivemindBrain !== null) {
-    connectTo(hivemindBrain);
+  if (!$isbrain && $brainid !== null) {
+    connectTo($brainid);
   }
 });
 peer.on('connection', openConnection);
@@ -159,15 +161,15 @@ peer.on('error', (/** @type {any} */ e) => {
 
 const subscriptions = [
   users.subscribe(($users) => {
-    if (isHivemindBrain)
+    if (get(isHivemindBrain))
       emit({
         type: Messages.UPDATE_CLIENT_STATE,
         users: [...$users.map((u) => ({ ...u, conn: null })), get(self)],
       });
   }),
   self.subscribe(($self) => {
     log('own state changed', $self);
-    if (isHivemindBrain)
+    if (get(isHivemindBrain))
       emit({
         type: Messages.UPDATE_CLIENT_STATE,
         users: [...get(users).map((u) => ({ ...u, conn: null })), $self],
@@ -186,7 +188,7 @@ const subscriptions = [
     progress.set(null);
     solved.set(false);
 
-    if (isHivemindBrain) {
+    if (get(isHivemindBrain)) {
       users.update((us) =>
         us.map((u) => ({ ...u, progress: null, solved: false }))
       );

src/js/store.js

@@ -14,6 +14,9 @@ const defaultUsers = [
   },
 ].slice(1);
 
+export const hivemindBrain = writable(new URLSearchParams(location.search).get('game'));
+export const isHivemindBrain = derived(hivemindBrain, $brainid => $brainid === null);
+
 /** @typedef {typeof defaultUsers[0]} User */
 /** @typedef {import('peerjs').DataConnection} Connection */