feat: new reworked notifications

feat: support for world icons in singleplayer menu

package.json

@@ -49,8 +49,9 @@
     "esbuild": "^0.19.3",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "express": "^4.18.2",
-    "flying-squid": "npm:@zardoy/flying-squid@^0.0.12",
+    "flying-squid": "npm:@zardoy/flying-squid@^0.0.13",
     "fs-extra": "^11.1.1",
+    "google-drive-browserfs": "github:zardoy/browserfs#google-drive",
     "iconify-icon": "^1.0.8",
     "jszip": "^3.10.1",
     "lit": "^2.8.0",
@@ -61,6 +62,7 @@
     "node-gzip": "^1.1.2",
     "peerjs": "^1.5.0",
     "pretty-bytes": "^6.1.1",
+    "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -74,8 +76,7 @@
     "title-case": "3.x",
     "ua-parser-js": "^1.0.37",
     "valtio": "^1.11.1",
-    "workbox-build": "^7.0.0",
-    "google-drive-browserfs": "github:zardoy/browserfs#google-drive"
+    "workbox-build": "^7.0.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.4.6",

src/dragndrop.ts

@@ -4,7 +4,8 @@ import * as nbt from 'prismarine-nbt'
 import RegionFile from 'prismarine-provider-anvil/src/region'
 import { versions } from 'minecraft-data'
 import { openWorldDirectory, openWorldZip } from './browserfs'
-import { isGameActive, showNotification } from './globalState'
+import { isGameActive } from './globalState'
+import { showNotification } from './react/NotificationProvider'
 
 const parseNbt = promisify(nbt.parse)
 const simplifyNbt = nbt.simplify
@@ -100,9 +101,7 @@ async function handleDroppedFile (file: File) {
     alert('Couldn\'t parse nbt, ensure you are opening .dat or file (or .zip/folder with a world)')
     throw err
   })
-  showNotification({
-    message: `${file.name} data available in browser console`,
-  })
+  showNotification(`${file.name} data available in browser console`)
   console.log('raw', parsed)
   console.log('simplified', nbt.simplify(parsed))
 }

src/globalState.ts

@@ -158,17 +158,4 @@ export const gameAdditionalState = proxy({
 
 window.gameAdditionalState = gameAdditionalState
 
-// rename current (non-stackable) notification to one-time (system) notification
-const initialNotification = {
-  show: false,
-  autoHide: true,
-  message: '',
-  type: 'info',
-}
-export const notification = proxy(initialNotification)
-
-export const showNotification = (newNotification: Partial<typeof notification>) => {
-  Object.assign(notification, { show: true, ...newNotification }, initialNotification)
-}
-
 // todo restore auto-save on interval for player data! (or implement it in flying squid since there is already auto-save for world)

src/index.ts

@@ -60,7 +60,6 @@ import {
   insertActiveModalStack,
   isGameActive,
   miscUiState,
-  notification
 } from './globalState'
 
 
@@ -95,6 +94,8 @@ import { downloadSoundsIfNeeded } from './soundSystem'
 import { ua } from './react/utils'
 import { handleMovementStickDelta, joystickPointer } from './react/TouchAreasControls'
 import { possiblyHandleStateVariable } from './googledrive'
+import flyingSquidEvents from './flyingSquidEvents'
+import { hideNotification, notificationProxy } from './react/NotificationProvider'
 
 window.debug = debug
 window.THREE = THREE
@@ -366,13 +367,15 @@ async function connect (connectOptions: {
       })
     }
   }
+  let lastPacket = undefined as string | undefined
   const onPossibleErrorDisconnect = () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
     if (lastPacket && bot?._client && bot._client.state !== 'play') {
       appStatusState.descriptionHint = `Last Server Packet: ${lastPacket}`
     }
   }
   const handleError = (err) => {
+    console.error(err)
     errorAbortController.abort()
     if (isCypress()) throw err
     if (miscUiState.gameLoaded) return
@@ -471,6 +474,7 @@ async function connect (connectOptions: {
           setLoadingScreenStatus(newStatus, false, false, true)
         })
       })
+      flyingSquidEvents()
     }
 
     let initialLoadingText: string
@@ -570,7 +574,6 @@ async function connect (connectOptions: {
     destroyAll()
   })
 
-  let lastPacket = undefined as string | undefined
   const packetBeforePlay = (_, __, ___, fullBuffer) => {
     lastPacket = fullBuffer.toString()
   }
@@ -676,7 +679,9 @@ async function connect (connectOptions: {
     }
 
     function changeCallback () {
-      notification.show = false
+      if (notificationProxy.id === 'pointerlockchange') {
+        hideNotification()
+      }
       if (renderer.xr.isPresenting) return // todo
       if (!pointerLock.hasPointerLock && activeModalStack.length === 0) {
         showModal(pauseMenu)

src/loadSave.ts

@@ -60,6 +60,7 @@ export const loadSave = async (root = '/world') => {
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete forceCachedDataPaths[key]
   }
+  // eslint-disable-next-line guard-for-in
   for (const key in forceRedirectPaths) {
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete forceRedirectPaths[key]

src/menus/pause_screen.js

@@ -4,7 +4,7 @@ const { LitElement, html, css } = require('lit')
 const { subscribe } = require('valtio')
 const { subscribeKey } = require('valtio/utils')
 const { usedServerPathsV1 } = require('flying-squid/dist/lib/modules/world')
-const { hideCurrentModal, showModal, miscUiState, notification, openOptionsMenu } = require('../globalState')
+const { hideCurrentModal, showModal, miscUiState, openOptionsMenu } = require('../globalState')
 const { fsState } = require('../loadSave')
 const { openGithub, setLoadingScreenStatus } = require('../utils')
 const { disconnect } = require('../flyingSquidUtils')
@@ -143,8 +143,6 @@ class PauseScreen extends LitElement {
 
   show () {
     this.focus()
-    // todo?
-    notification.show = false
   }
 
   onReturnPress () {

src/react/Notification.tsx

@@ -0,0 +1,71 @@
+import { Transition } from 'react-transition-group'
+import PixelartIcon from './PixelartIcon'
+
+// slide up
+const startStyle = { opacity: 0, transform: 'translateY(100%)' }
+const endExitStyle = { opacity: 0, transform: 'translateY(-100%)' }
+const endStyle = { opacity: 1, transform: 'translateY(0)' }
+
+const stateStyles = {
+  entering: startStyle,
+  entered: endStyle,
+  exiting: endExitStyle,
+  exited: endExitStyle,
+}
+const duration = 200
+const basicStyle = {
+  transition: `${duration}ms ease-in-out all`,
+}
+
+// save pass: login
+
+export default ({ type = 'message', message, subMessage = '', open, icon = '', action = undefined as (() => void) | undefined }) => {
+  const isError = type === 'error'
+  icon ||= isError ? 'alert' : 'message'
+
+  return <Transition
+    in={open}
+    timeout={duration}
+    mountOnEnter
+    unmountOnExit
+  >
+    {state => {
+      const addStyles = { ...basicStyle, ...stateStyles[state] }
+
+      return <div className={`app-notification ${isError ? 'error-notification' : ''}`} onClick={action} style={{
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        width: '160px',
+        whiteSpace: 'nowrap',
+        fontSize: '9px',
+        display: 'flex',
+        gap: 4,
+        alignItems: 'center',
+        padding: '3px 8px',
+        background: isError ? 'rgba(255, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0.7)',
+        borderRadius: '0 0 0 5px',
+        pointerEvents: action ? 'auto' : 'none',
+        zIndex: 1200, // even above stats
+        ...addStyles
+      }}>
+        <PixelartIcon iconName={icon} styles={{ fontSize: 10 }} />
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}>
+          <div>
+            {message}
+          </div>
+          <div style={{
+            fontSize: '7px',
+            whiteSpace: 'nowrap',
+            color: 'lightgray',
+          }}>{subMessage}</div>
+        </div>
+      </div>
+    }}
+  </Transition>
+
+}