refactor(constants): append uuid to app name for game id

index.html

@@ -49,7 +49,7 @@
 
     <main class="flex justify-center xl:center">
       <div class="flex max-xl:hidden">
-        <h1 class="basis-1/2">Code Arcade</h1>
+        <h1 class="basis-1/2 self-end">Code Arcade</h1>
         <button>► Run</button>
       </div>
 

src/constants/game.ts

@@ -0,0 +1 @@
+export const GAME_ID = `${import.meta.env.VITE_APP_NAME}-${typeof crypto?.randomUUID == 'function' ? crypto.randomUUID() : Date.now()}`

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './game'

src/scenes/game.ts

@@ -1,3 +1,4 @@
+import { GAME_ID } from '../constants'
 import { setData } from '../helpers'
 import {
   addEventListeners,
@@ -51,12 +52,10 @@ export async function go(levelNumber: number) {
 /**
  * Listen to iframe postMessage on level clear.
  */
-addEventListener('message', (event) => {
-  const { origin, data } = event
-
+window.addEventListener('message', (event) => {
   if (
-    !origin.includes(location.origin) ||
-    data?.source !== import.meta.env.VITE_APP_NAME
+    !event.origin.includes(location.origin) ||
+    event.data?.source !== GAME_ID
   ) {
     return
   }

src/templates/events.ts

@@ -1,3 +1,5 @@
+import { GAME_ID } from '../constants'
+
 /**
  * Creates cursor keys for player.
  *
@@ -39,7 +41,7 @@ onKeyDown((key) => {
 export const registerWinCondition = (level: number) => `
 onCollide('player', 'exit', () => {
   parent.postMessage({
-    source: ${JSON.stringify(import.meta.env.VITE_APP_NAME)},
+    source: '${GAME_ID}',
     level: ${level + 1},
   })
 })