hasing version number and using it as part of invite code

playmint · Oct 24, 2024 · b350918 · b350918
1 parent 916bbb4
commit b350918
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     },
     "dependencies": {
         "@react-three/postprocessing": "^2.16.3",
+        "md5": "^2.3.0",
         "postprocessing": "^6.36.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -56,6 +57,7 @@
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/eslint__js": "^8.42.3",
         "@types/libsodium-wrappers": "^0.7.14",
+        "@types/md5": "^2.3.5",
         "@types/mocha": "^10.0.7",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/gui/components/ChannelBoot.tsx b/src/gui/components/ChannelBoot.tsx
@@ -1,3 +1,4 @@
+import md5 from 'md5';
 import { memo, useMemo } from 'react';
 import { config as socketConfig } from 'socket:application';
 import { BOOTSTRAP_PEERS } from '../../runtime/bootstrap';
@@ -288,8 +289,21 @@ const terminalFlow = ({
                         reject('invalid key');
                         return;
                     }
+                    const [channelId, hostVersionHash] = input.split(':');
+                    if (!hostVersionHash) {
+                        reject('invalid key');
+                        return;
+                    }
+                    const clientVersionHash = md5(
+                        getVersionStringFromConfig(socketConfig),
+                    ).slice(0, 4);
+                    if (hostVersionHash !== clientVersionHash) {
+                        reject('client app version incompatible with host');
+                        return;
+                    }
+
                     client
-                        .joinChannel(input)
+                        .joinChannel(channelId)
                         .then(() => {
                             resolve('OK');
                         })

diff --git a/src/gui/components/ChannelView.tsx b/src/gui/components/ChannelView.tsx
@@ -1,11 +1,13 @@
 import { useLiveQuery } from 'dexie-react-hooks';
+import md5 from 'md5';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { config as socketConfig } from 'socket:application';
 import { SESSION_TIME_SECONDS } from '../../examples/spaceshooter';
 import { ChannelInfo } from '../../runtime/channels';
 import { PeerInfo } from '../../runtime/db';
 import { DefaultMetrics } from '../../runtime/metrics';
 import { sleep } from '../../runtime/timers';
-import { hardReset } from '../../runtime/utils';
+import { getVersionStringFromConfig, hardReset } from '../../runtime/utils';
 import { getPlayerColorUi } from '../fixtures/player-colors';
 import { useClient } from '../hooks/use-client';
 import { useCredentials } from '../hooks/use-credentials';
@@ -32,6 +34,14 @@ export const SIM_END = SESSION_TIME_SECONDS / (FIXED_UPDATE_RATE / 1000);
 
 const src = '/examples/spaceshooter.js'; // not a real src yet see runtime/game.ts
 
+const getChannelCode = (channelId: string) => {
+    return (
+        channelId +
+        ':' +
+        md5(getVersionStringFromConfig(socketConfig)).slice(0, 4)
+    );
+};
+
 export default memo(function ChannelView({
     channel,
     details,
@@ -48,9 +58,11 @@ export default memo(function ChannelView({
     const [showConnectedPeers, setShowConnectedPeers] = useState(false);
 
     const copyKeyToClipboard = () => {
-        navigator.clipboard.writeText(channel.id).catch((err) => {
-            console.error('clipboard write failed:', err);
-        });
+        navigator.clipboard
+            .writeText(getChannelCode(channel.id))
+            .catch((err) => {
+                console.error('clipboard write failed:', err);
+            });
     };
 
     const socket = useSocket();
@@ -207,7 +219,7 @@ export default memo(function ChannelView({
                             alignItems: 'center',
                         }}
                     >
-                        {channel.id}{' '}
+                        {getChannelCode(channel.id)}{' '}
                         <span
                             className={`${theme.materialSymbolsOutlined} ${termstyles.promptTextColor}`}
                             style={{ padding: '0 4px', cursor: 'pointer' }}

diff --git a/src/gui/components/Titlebar.tsx b/src/gui/components/Titlebar.tsx
@@ -1,3 +1,5 @@
+import { config as socketConfig } from 'socket:application';
+import { getVersionStringFromConfig } from '../../runtime/utils';
 import theme from '../styles/default.module.css';
 import { isWindows } from '../system/menu';
 
@@ -37,7 +39,9 @@ export function Titlebar({
                     flexGrow: 1,
                 }}
             >
-                <strong>Playerchain Demo</strong>
+                <strong>
+                    Playerchain Demo v{getVersionStringFromConfig(socketConfig)}
+                </strong>
             </div>
             <div
                 style={{