Added disconnection page

resources/themes/atom/js/src/flash.js

@@ -0,0 +1,32 @@
+const frame = document.getElementById('nitro');
+
+window.FlashExternalInterface = {};
+
+window.FlashExternalInterface.disconnect = () => {
+    const el = document.getElementById('disconnected');
+
+    if (el) {
+        el.classList.remove('pointer-events-none');
+        el.classList.remove('opacity-0');
+        el.classList.add('opacity-100');
+    }
+};
+
+window.FlashExternalInterface.onMessage = (event) => {
+    if (!frame || event.source !== frame.contentWindow) return;
+    if (typeof event.data !== 'string') return;
+    if (!event.data.startsWith('Nitro_LegacyExternalInterface')) return;
+    if (!('FlashExternalInterface' in window)) return;
+
+    const { method, params } = JSON.parse(event.data.substr(29));
+
+    const fn = window.FlashExternalInterface[method];
+
+    if (!fn) return;
+
+    fn(...params);
+}
+
+if (frame && frame.contentWindow) {
+    window.addEventListener('message', (event) => window.FlashExternalInterface.onMessage(event));
+}

resources/themes/atom/views/client.blade.php

@@ -2,6 +2,11 @@
 
 @push('title', __('Nitro'))
 
+@push('scripts')
+    @vite(sprintf('resources/themes/%s/js/src/flash.js', $settings->get('theme')), 'build')
+@endpush
+
 @section('content')
-    <iframe src="{{ $url }}" class="w-screen h-screen" frameborder="0"></iframe>
+    <iframe id="nitro" src="{{ $url }}" class="w-screen h-screen" frameborder="0"></iframe>
+    <x-client.disconnect />
 @endsection

resources/themes/atom/views/components/client/disconnect.blade.php

@@ -0,0 +1,19 @@
+<div id="disconnected" class="absolute inset-0 z-50 w-full h-screen transition-all duration-500 opacity-0 pointer-events-none">
+    <div class="absolute w-full h-full bg-black bg-opacity-50"></div>
+
+    <div class="relative flex flex-col items-center justify-center w-full h-full gap-4">
+        <h2 class="text-2xl text-white">
+            {{ __('Whoops! It seems like you have been disconnected...') }}
+        </h2>
+
+        <div class="flex gap-x-4">
+            <a href="{{ route('game.nitro') }}">
+                <x-button>{{ __('Reload client') }}</x-button>
+            </a>
+
+            <a href="{{ route('users.me') }}">
+                <x-button variant="secondary">{{ __('Back to website') }}</x-button>
+            </a>
+        </div>
+    </div>
+</div>

resources/themes/atom/vite.config.js

@@ -9,6 +9,8 @@ export default defineConfig({
             input: [
                 path.resolve(__dirname, './css/app.css'),
                 path.resolve(__dirname, './js/app.js'),
+                path.resolve(__dirname, './js/src/flash.js'),
+
             ],
             refresh: true,
         }),