System-End/spaces
1
0
Fork 0
mirror of https://github.com/System-End/spaces.git synced 2026-04-19 15:28:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

playground + godot

Browse source
This commit is contained in:
Charmunks 2025-12-11 11:11:39 -05:00
parent c3b81213fe
commit 51bcbea98e
18 changed files with 3508 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Dockerfile
View file

@ -50,6 +50,9 @@ RUN cd client && npm run build
# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf
# Copy playground folder for static assets (Godot, etc.)
COPY playground /app/playground
# Create supervisor configuration
RUN mkdir -p /var/log/supervisor
COPY <<EOF /etc/supervisor/conf.d/supervisord.conf

29
client/src/App.svelte
View file

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import Auth from './lib/Auth.svelte';
import Dashboard from './lib/Dashboard.svelte';
import Playground from './lib/Playground.svelte';
import AdminPanel from './lib/AdminPanel.svelte';
import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
import Settings from './lib/Settings.svelte';
@ -17,6 +18,7 @@
let showAdminPanel = false;
let showSettings = false;
let showClubs = false;
let currentView = 'spaces';
onMount(() => {
applyTheme(get(currentTheme));
@ -133,14 +135,25 @@
<button on:click={() => showAdminPanel = true}>Admin Panel</button>
</div>
{/if}
<Dashboard
bind:spaces={spaces}
authorization={user.authorization}
username={user.username}
on:signout={handleSignOut}
on:settings={() => showSettings = true}
on:clubs={() => showClubs = true}
/>
{#if currentView === 'playground'}
<Playground
username={user.username}
on:signout={handleSignOut}
on:settings={() => showSettings = true}
on:clubs={() => showClubs = true}
on:switchview={(e) => currentView = e.detail.view}
/>
{:else}
<Dashboard
bind:spaces={spaces}
authorization={user.authorization}
username={user.username}
on:signout={handleSignOut}
on:settings={() => showSettings = true}
on:clubs={() => showClubs = true}
on:switchview={(e) => currentView = e.detail.view}
/>
{/if}
{/if}
{:else}
<Auth on:authenticated={handleAuthenticated} />

2
client/src/config.js
View file

@ -1,4 +1,4 @@
export const API_BASE = 'https://t0080w08wcockgs44ws8w880.b.selfhosted.hackclub.com/api/v1';
export const API_BASE = 'http://localhost:2593/api/v1';
export const ERROR_MESSAGES = {
NETWORK_ERROR: 'Network error. Please try again.',

8
client/src/lib/Dashboard.svelte
View file

@ -302,6 +302,10 @@
function handleClubs() {
dispatch('clubs');
}
function handleSwitchToPlayground() {
dispatch('switchview', { view: 'playground' });
}
</script>
<div class="dashboard">
@ -316,6 +320,10 @@
</div>
</div>
<div class="header-actions">
<div class="view-switcher">
<button class="view-tab active">Spaces</button>
<button class="view-tab" on:click={handleSwitchToPlayground}>Playground</button>
</div>
<button class="clubs-button" on:click={handleClubs}>My Club</button>
<button class="settings-button" on:click={handleSettings}>Settings</button>
<button class="signout-button" on:click={handleSignOut}>Sign Out</button>

452
client/src/lib/Playground.svelte Normal file
View file

@ -0,0 +1,452 @@
<script>
import { createEventDispatcher } from 'svelte';
import { currentTheme } from '../stores/theme.js';
import { themes } from '../themes.js';
import FlagIcon from '../assets/flag.svg?raw';
export let username = '';
const dispatch = createEventDispatcher();
const playgroundTools = [
{
id: 'godot',
name: 'Godot',
description: 'Open-source 2D and 3D game engine',
icon: 'https://godotengine.org/assets/favicon.png',
status: 'available',
url: '/godot'
},
{
id: 'love2d',
name: 'LÖVE 2D',
description: 'Framework for making 2D games in Lua',
icon: 'https://love2d.org/apple-touch-icon.png',
status: 'coming-soon'
}
];
function handleSignOut() {
dispatch('signout');
}
function handleSettings() {
dispatch('settings');
}
function handleClubs() {
dispatch('clubs');
}
function handleSwitchToSpaces() {
dispatch('switchview', { view: 'spaces' });
}
function launchTool(tool) {
if (tool.status === 'coming-soon') {
return;
}
if (tool.url) {
window.location.href = tool.url;
}
}
$: logoColor = (() => {
const theme = themes[$currentTheme];
if (theme && theme.colors['--red']) {
return theme.colors['--red'];
}
return '#ec3750';
})();
</script>
<div class="playground">
<header class="playground-header">
<div class="header-content">
<div class="playground-logo" style="color: {logoColor}">
{@html FlagIcon}
</div>
<div>
<h1 class="playground-title">Hack Club Spaces Playground</h1>
<p class="welcome-text">Welcome, {username}!</p>
</div>
</div>
<div class="header-actions">
<div class="view-switcher">
<button class="view-tab" on:click={handleSwitchToSpaces}>Spaces</button>
<button class="view-tab active">Playground</button>
</div>
<button class="clubs-button" on:click={handleClubs}>My Club</button>
<button class="settings-button" on:click={handleSettings}>Settings</button>
<button class="signout-button" on:click={handleSignOut}>Sign Out</button>
</div>
</header>
<div class="playground-content">
<div class="browser-notice">
<span class="notice-text">
<strong>Browser-only storage:</strong> All playground projects are saved locally in your browser.
They will not sync across devices or be backed up to the cloud.
</span>
</div>
<div class="tools-section">
<h3 class="section-title">Choose a Tool</h3>
<p class="section-description">
Pick a language or tool to start coding instantly in your browser.
</p>
<div class="tools-grid">
{#each playgroundTools as tool}
<button
class="tool-card"
class:coming-soon={tool.status === 'coming-soon'}
on:click={() => launchTool(tool)}
disabled={tool.status === 'coming-soon'}
>
<div class="tool-icon">
{#if tool.icon}
<img src={tool.icon} alt="{tool.name} icon" />
{/if}
</div>
<div class="tool-info">
<h4 class="tool-name">{tool.name}</h4>
<p class="tool-description">{tool.description}</p>
</div>
{#if tool.status === 'coming-soon'}
<span class="coming-soon-badge">Coming Soon</span>
{/if}
</button>
{/each}
</div>
</div>
</div>
</div>
<style>
.playground {
min-height: 100vh;
padding: 32px;
background: var(--snow);
}
.playground-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 64px;
padding-bottom: 32px;
border-bottom: 2px solid var(--smoke);
}
.header-content {
display: flex;
align-items: center;
gap: 16px;
}
.playground-logo {
width: 48px;
height: 48px;
}
.playground-logo :global(svg) {
width: 100%;
height: 100%;
fill: currentColor;
}
.playground-title {
font-size: 32px;
font-weight: bold;
color: var(--black);
margin: 0;
}
.welcome-text {
margin: 8px 0 0 0;
font-size: 16px;
color: var(--muted);
}
.header-actions {
display: flex;
gap: 16px;
align-items: center;
}
.signout-button {
padding: 12px 24px;
background: transparent;
border: 2px solid var(--red);
border-radius: 99999px;
color: var(--red);
font-size: 16px;
font-weight: bold;
font-family: Phantom Sans, sans-serif;
cursor: pointer;
transition: transform 0.125s ease-in-out;
-webkit-tap-highlight-color: transparent;
}
.signout-button:hover {
transform: scale(1.0625);
}
.signout-button:active {
transform: scale(1);
}
.settings-button {
padding: 12px 24px;
background: transparent;
border: 2px solid var(--slate);
border-radius: 99999px;
color: var(--slate);
font-size: 16px;
font-weight: bold;
font-family: Phantom Sans, sans-serif;
cursor: pointer;
transition: transform 0.125s ease-in-out;
-webkit-tap-highlight-color: transparent;
}
.settings-button:hover {
transform: scale(1.0625);
border-color: var(--blue);
color: var(--blue);
}
.settings-button:active {
transform: scale(1);
}
.clubs-button {
padding: 12px 24px;
background: transparent;
border: 2px solid var(--green);
border-radius: 99999px;
color: var(--green);
font-size: 16px;
font-weight: bold;
font-family: Phantom Sans, sans-serif;
cursor: pointer;
transition: transform 0.125s ease-in-out;
-webkit-tap-highlight-color: transparent;
}
.clubs-button:hover {
transform: scale(1.0625);
background: rgba(51, 214, 166, 0.1);
}
.clubs-button:active {
transform: scale(1);
}
.playground-content {
max-width: 1200px;
margin: 0 auto;
}
.view-switcher {
display: flex;
gap: 4px;
padding: 4px;
background: var(--smoke);
border-radius: 99999px;
}
.view-tab {
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 99999px;
color: var(--slate);
font-size: 14px;
font-weight: bold;
font-family: Phantom Sans, sans-serif;
cursor: pointer;
transition: background 0.125s ease-in-out, color 0.125s ease-in-out;
-webkit-tap-highlight-color: transparent;
}
.view-tab:hover:not(.active) {
color: var(--black);
}
.view-tab.active {
background: var(--white);
color: var(--purple);
cursor: default;
}
.browser-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
background: var(--white);
border: 2px solid var(--orange);
border-radius: 8px;
margin-bottom: 32px;
}
.notice-icon {
font-size: 20px;
flex-shrink: 0;
}
.notice-text {
font-size: 14px;
color: var(--slate);
line-height: 1.5;
}
.notice-text strong {
color: var(--orange);
}
.tools-section {
margin-top: 24px;
}
.section-title {
font-size: 24px;
font-weight: bold;
color: var(--black);
margin: 0 0 8px 0;
}
.section-description {
font-size: 16px;
color: var(--muted);
margin: 0 0 24px 0;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.tool-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--white);
border: 2px solid var(--smoke);
border-radius: 8px;
cursor: pointer;
transition: transform 0.125s ease-in-out, border-color 0.125s ease-in-out;
text-align: left;
font-family: Phantom Sans, sans-serif;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.tool-card:hover:not(:disabled) {
transform: scale(1.02);
border-color: var(--purple);
}
.tool-card:active:not(:disabled) {
transform: scale(1);
}
.tool-card:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.tool-card.coming-soon {
border-color: var(--smoke);
}
.tool-card.coming-soon:hover {
transform: none;
border-color: var(--smoke);
}
.tool-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--snow);
border-radius: 8px;
overflow: hidden;
}
.tool-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tool-info {
flex: 1;
min-width: 0;
}
.tool-name {
font-size: 18px;
font-weight: bold;
color: var(--black);
margin: 0 0 4px 0;
}
.tool-description {
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.4;
}
.coming-soon-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
background: var(--muted);
color: var(--white);
font-size: 12px;
font-weight: bold;
border-radius: 99999px;
}
@media (max-width: 768px) {
.playground {
padding: 16px;
}
.playground-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.view-switcher {
flex-direction: column;
width: 100%;
}
.view-tab {
width: 100%;
text-align: center;
}
.tools-grid {
grid-template-columns: 1fr;
}
.browser-notice {
flex-direction: column;
align-items: center;
text-align: center;
}
}
</style>

32
client/src/styles/dashboard.css
View file

@ -126,6 +126,38 @@
margin: 0 auto;
}
.view-switcher {
display: flex;
gap: 4px;
padding: 4px;
background: var(--smoke);
border-radius: 99999px;
}
.view-tab {
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 99999px;
color: var(--slate);
font-size: 14px;
font-weight: bold;
font-family: Phantom Sans, sans-serif;
cursor: pointer;
transition: background 0.125s ease-in-out, color 0.125s ease-in-out;
-webkit-tap-highlight-color: transparent;
}
.view-tab:hover:not(.active) {
color: var(--black);
}
.view-tab.active {
background: var(--white);
color: var(--red);
cursor: default;
}
.actions-bar {
display: flex;
gap: 16px;

9
nginx.conf
View file

@ -135,6 +135,15 @@ http {
proxy_intercept_errors off;
}
# Godot web exports with SharedArrayBuffer support
location /godot {
alias /app/playground/godot;
absolute_redirect off;
add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;
try_files $uri $uri/ =404;
}
# Serve static frontend files - must be last
location / {
root /app/client/dist;

BIN
playground/godot/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

66
playground/godot/godot.editor.audio.position.worklet.js Normal file
View file

@ -0,0 +1,66 @@
/**************************************************************************/
/* godot.audio.position.worklet.js */
/**************************************************************************/
/* This file is part of: */
/* GODOT ENGINE */
/* https://godotengine.org */
/**************************************************************************/
/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur. */
/* */
/* Permission is hereby granted, free of charge, to any person obtaining */
/* a copy of this software and associated documentation files (the */
/* "Software"), to deal in the Software without restriction, including */
/* without limitation the rights to use, copy, modify, merge, publish, */
/* distribute, sublicense, and/or sell copies of the Software, and to */
/* permit persons to whom the Software is furnished to do so, subject to */
/* the following conditions: */
/* */
/* The above copyright notice and this permission notice shall be */
/* included in all copies or substantial portions of the Software. */
/* */
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, */
/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF */
/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY */
/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, */
/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE */
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
/**************************************************************************/
class GodotPositionReportingProcessor extends AudioWorkletProcessor {
static get parameterDescriptors() {
return [
{
name: 'reset',
defaultValue: 0,
minValue: 0,
maxValue: 1,
automationRate: 'k-rate',
},
];
}
constructor(...args) {
super(...args);
this.position = 0;
}
process(inputs, _outputs, parameters) {
if (parameters['reset'][0] > 0) {
this.position = 0;
}
if (inputs.length > 0) {
const input = inputs[0];
if (input.length > 0) {
this.position += input[0].length;
this.port.postMessage({ type: 'position', data: this.position });
}
}
return true;
}
}
registerProcessor('godot-position-reporting-processor', GodotPositionReportingProcessor);

213
playground/godot/godot.editor.audio.worklet.js Normal file
View file

@ -0,0 +1,213 @@
/**************************************************************************/
/* audio.worklet.js */
/**************************************************************************/
/* This file is part of: */
/* GODOT ENGINE */
/* https://godotengine.org */
/**************************************************************************/
/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur. */
/* */
/* Permission is hereby granted, free of charge, to any person obtaining */
/* a copy of this software and associated documentation files (the */
/* "Software"), to deal in the Software without restriction, including */
/* without limitation the rights to use, copy, modify, merge, publish, */
/* distribute, sublicense, and/or sell copies of the Software, and to */
/* permit persons to whom the Software is furnished to do so, subject to */
/* the following conditions: */
/* */
/* The above copyright notice and this permission notice shall be */
/* included in all copies or substantial portions of the Software. */
/* */
/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, */
/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF */
/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY */
/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, */
/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE */
/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
/**************************************************************************/
class RingBuffer {
constructor(p_buffer, p_state, p_threads) {
this.buffer = p_buffer;
this.avail = p_state;
this.threads = p_threads;
this.rpos = 0;
this.wpos = 0;
}
data_left() {
return this.threads ? Atomics.load(this.avail, 0) : this.avail;
}
space_left() {
return this.buffer.length - this.data_left();
}
read(output) {
const size = this.buffer.length;
let from = 0;
let to_write = output.length;
if (this.rpos + to_write > size) {
const high = size - this.rpos;
output.set(this.buffer.subarray(this.rpos, size));
from = high;
to_write -= high;
this.rpos = 0;
}
if (to_write) {
output.set(this.buffer.subarray(this.rpos, this.rpos + to_write), from);
}
this.rpos += to_write;
if (this.threads) {
Atomics.add(this.avail, 0, -output.length);
Atomics.notify(this.avail, 0);
} else {
this.avail -= output.length;
}
}
write(p_buffer) {
const to_write = p_buffer.length;
const mw = this.buffer.length - this.wpos;
if (mw >= to_write) {
this.buffer.set(p_buffer, this.wpos);
this.wpos += to_write;
if (mw === to_write) {
this.wpos = 0;
}
} else {
const high = p_buffer.subarray(0, mw);
const low = p_buffer.subarray(mw);
this.buffer.set(high, this.wpos);
this.buffer.set(low);
this.wpos = low.length;
}
if (this.threads) {
Atomics.add(this.avail, 0, to_write);
Atomics.notify(this.avail, 0);
} else {
this.avail += to_write;
}
}
}
class GodotProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.threads = false;
this.running = true;
this.lock = null;
this.notifier = null;
this.output = null;
this.output_buffer = new Float32Array();
this.input = null;
this.input_buffer = new Float32Array();
this.port.onmessage = (event) => {
const cmd = event.data['cmd'];
const data = event.data['data'];
this.parse_message(cmd, data);
};
}
process_notify() {
if (this.notifier) {
Atomics.add(this.notifier, 0, 1);
Atomics.notify(this.notifier, 0);
}
}
parse_message(p_cmd, p_data) {
if (p_cmd === 'start' && p_data) {
const state = p_data[0];
let idx = 0;
this.threads = true;
this.lock = state.subarray(idx, ++idx);
this.notifier = state.subarray(idx, ++idx);
const avail_in = state.subarray(idx, ++idx);
const avail_out = state.subarray(idx, ++idx);
this.input = new RingBuffer(p_data[1], avail_in, true);
this.output = new RingBuffer(p_data[2], avail_out, true);
} else if (p_cmd === 'stop') {
this.running = false;
this.output = null;
this.input = null;
this.lock = null;
this.notifier = null;
} else if (p_cmd === 'start_nothreads') {
this.output = new RingBuffer(p_data[0], p_data[0].length, false);
} else if (p_cmd === 'chunk') {
this.output.write(p_data);
}
}
static array_has_data(arr) {
return arr.length && arr[0].length && arr[0][0].length;
}
process(inputs, outputs, parameters) {
if (!this.running) {
return false; // Stop processing.
}
if (this.output === null) {
return true; // Not ready yet, keep processing.
}
const process_input = GodotProcessor.array_has_data(inputs);
if (process_input) {
const input = inputs[0];
const chunk = input[0].length * input.length;
if (this.input_buffer.length !== chunk) {
this.input_buffer = new Float32Array(chunk);
}
if (!this.threads) {
GodotProcessor.write_input(this.input_buffer, input);
this.port.postMessage({ 'cmd': 'input', 'data': this.input_buffer });
} else if (this.input.space_left() >= chunk) {
GodotProcessor.write_input(this.input_buffer, input);
this.input.write(this.input_buffer);
} else {
// this.port.postMessage('Input buffer is full! Skipping input frame.'); // Uncomment this line to debug input buffer.
}
}
const process_output = GodotProcessor.array_has_data(outputs);
if (process_output) {
const output = outputs[0];
const chunk = output[0].length * output.length;
if (this.output_buffer.length !== chunk) {
this.output_buffer = new Float32Array(chunk);
}
if (this.output.data_left() >= chunk) {
this.output.read(this.output_buffer);
GodotProcessor.write_output(output, this.output_buffer);
if (!this.threads) {
this.port.postMessage({ 'cmd': 'read', 'data': chunk });
}
} else {
// this.port.postMessage('Output buffer has not enough frames! Skipping output frame.'); // Uncomment this line to debug output buffer.
}
}
this.process_notify();
return true;
}
static write_output(dest, source) {
const channels = dest.length;
for (let ch = 0; ch < channels; ch++) {
for (let sample = 0; sample < dest[ch].length; sample++) {
dest[ch][sample] = source[sample * channels + ch];
}
}
}
static write_input(dest, source) {
const channels = source.length;
for (let ch = 0; ch < channels; ch++) {
for (let sample = 0; sample < source[ch].length; sample++) {
dest[sample * channels + ch] = source[ch][sample];
}
}
}
}
registerProcessor('godot-processor', GodotProcessor);

773
playground/godot/godot.editor.html Normal file
View file

@ -0,0 +1,773 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Godot Engine">
<meta name="description" content="Use the Godot Engine editor directly in your web browser, without having to install anything.">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Godot">
<meta name="apple-mobile-web-app-title" content="Godot">
<meta name="theme-color" content="#202531">
<meta name="msapplication-navbutton-color" content="#202531">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/latest">
<meta property="og:site_name" content="Godot Engine Web Editor">
<meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/">
<meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine">
<meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything.">
<meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<link id="-gd-engine-icon" rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" type="image/png" href="favicon.png">
<link rel="manifest" href="manifest.json">
<title>Godot Engine Web Editor (4.5.1.stable.official)</title>
<style>
*:focus {
/* More visible outline for better keyboard navigation. */
outline: 0.125rem solid hsl(220, 100%, 62.5%);
/* Make the outline always appear above other elements. */
/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
position: relative;
}
body {
touch-action: none;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: #333b4f;
overflow: hidden;
}
a {
color: hsl(205, 100%, 75%);
text-decoration-color: hsla(205, 100%, 75%, 0.3);
text-decoration-thickness: 0.125rem;
}
a:hover {
filter: brightness(117.5%);
}
a:active {
filter: brightness(82.5%);
}
.welcome-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: hsla(0, 0%, 0%, 0.5);
text-align: left;
}
.welcome-modal-title {
text-align: center;
}
.welcome-modal-content {
background-color: #333b4f;
box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
line-height: 1.5;
max-width: 38rem;
margin: 4rem auto 0 auto;
color: white;
border-radius: 0.5rem;
padding: 1rem 1rem 2rem 1rem;
}
#tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531;
}
#tab-game {
/* Use a pure black background to better distinguish the running project */
/* from the editor window, and to use a more neutral background color (no tint). */
background-color: black;
/* Make the background span the entire page height. */
min-height: 100vh;
}
#canvas, #gameCanvas {
display: block;
margin: 0;
color: white;
}
/* Don't show distracting focus outlines for the main tabs' contents. */
#tab-editor canvas:focus,
#tab-game canvas:focus,
#canvas:focus,
#gameCanvas:focus {
outline: none;
}
.godot {
color: #e0e0e0;
background-color: #3b3943;
background-image: linear-gradient(to bottom, #403e48, #35333c);
border: 1px solid #45434e;
box-shadow: 0 0 1px 1px #2f2d35;
}
.btn {
appearance: none;
color: #e0e0e0;
background-color: #262c3b;
border: 1px solid #202531;
padding: 0.5rem 1rem;
margin: 0 0.5rem;
}
.btn:not(:disabled):hover {
color: #e0e1e5;
border-color: #666c7b;
}
.btn:active {
border-color: #699ce8;
color: #699ce8;
}
.btn:disabled {
color: #aaa;
border-color: #242937;
}
.btn.tab-btn {
padding: 0.3rem 1rem;
}
.btn.close-btn {
padding: 0.3rem 1rem;
margin-left: -0.75rem;
font-weight: 700;
}
/* Status display */
#status {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
/* don't consume click events - make children visible explicitly */
visibility: hidden;
}
#status-progress {
width: 366px;
height: 7px;
background-color: #38363A;
border: 1px solid #444246;
padding: 1px;
box-shadow: 0 0 2px 1px #1B1C22;
border-radius: 2px;
visibility: visible;
}
@media only screen and (orientation:portrait) {
#status-progress {
width: 61.8%;
}
}
#status-progress-inner {
height: 100%;
width: 0;
box-sizing: border-box;
transition: width 0.5s linear;
background-color: #202020;
border: 1px solid #222223;
box-shadow: 0 0 1px 1px #27282E;
border-radius: 3px;
}
#status-indeterminate {
visibility: visible;
position: relative;
}
#status-indeterminate > div {
width: 4.5px;
height: 0;
border-style: solid;
border-width: 9px 3px 0 3px;
border-color: #2b2b2b transparent transparent transparent;
transform-origin: center 21px;
position: absolute;
}
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
#status-notice {
margin: 0 100px;
line-height: 1.3;
visibility: visible;
padding: 4px 6px;
}
</style>
</head>
<body>
<div
id="welcome-modal"
class="welcome-modal"
role="dialog"
aria-labelledby="welcome-modal-title"
aria-describedby="welcome-modal-description"
onclick="if (event.target === this) closeWelcomeModal(false)"
>
<div class="welcome-modal-content">
<h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read before continuing</h2>
<div id="welcome-modal-description">
<p>
The Godot Web Editor has some limitations compared to the native version.
Its main focus is education and experimentation;
<strong>it is not recommended for production</strong>.
</p>
<p>
Refer to the
<a
href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
target="_blank"
rel="noopener"
>Web editor documentation</a> for usage instructions and limitations.
</p>
</div>
<div id="welcome-modal-missing-description" style="display: none">
<p>
<strong>The following features required by the Godot Web Editor are missing:</strong>
</p>
<ul id="welcome-modal-missing-list">
</ul>
<p>
If you are self-hosting the web editor,
refer to
<a
href="https://docs.godotengine.org/en/latest/tutorials/export/exporting_for_web.html"
target="_blank"
rel="noopener"
>Exporting for the Web</a> for more information.
</p>
</div>
<div style="text-align: center">
<button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
OK, don't show again
</button>
</div>
</div>
</div>
<div id="tabs-buttons">
<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
<button id="btn-tab-update" class="btn tab-btn" style="display: none;">Update</button>
</div>
<div id="tabs">
<div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence">
<br >
<img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: min(85%, 50vh); max-height: 250px">
<br >
4.5.1.stable.official
<br >
<a href="releases/">Need an old version?</a>
<br >
<br >
<br >
<label for="videoMode" style="margin-right: 1rem">Video driver:</label>
<select id="videoMode">
<option value="" selected="selected">Auto</option>
<option value="opengl3">WebGL 2</option>
</select>
<br >
<br >
<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label>
<input id="zip-file" type="file" name="files" style="margin-bottom: 1rem">
<br >
<a href="demo.zip">(Try this for example)</a>
<br >
<br >
<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
<br >
<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
<br >
<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div>
</div>
<div id="tab-editor" style="display: none;">
<canvas id="editor-canvas" tabindex="1">
HTML5 canvas appears to be unsupported in the current browser.<br >
Please try updating or use a different browser.
</canvas>
</div>
<div id="tab-game" style="display: none;">
<canvas id="game-canvas" tabindex="2">
HTML5 canvas appears to be unsupported in the current browser.<br >
Please try updating or use a different browser.
</canvas>
</div>
<div id="tab-status" style="display: none;">
<div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();">
<div id="status-progress-inner"></div>
</div>
<div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="status-notice" class="godot" style="display: none;"></div>
</div>
</div>
<script>
window.addEventListener('load', () => {
function notifyUpdate(sw) {
const btn = document.getElementById('btn-tab-update');
btn.onclick = function () {
if (!window.confirm('Are you sure you want to update?\nClicking "OK" will reload all active instances!')) {
return;
}
sw.postMessage('update');
btn.innerHTML = 'Updating...';
btn.disabled = true;
};
btn.style.display = '';
}
if ('serviceWorker' in navigator) {
try {
navigator.serviceWorker.register('service.worker.js').then(function (reg) {
if (reg.waiting) {
notifyUpdate(reg.waiting);
}
reg.addEventListener('updatefound', function () {
const update = reg.installing;
update.addEventListener('statechange', function () {
if (update.state === 'installed') {
// It's a new install, claim and perform aggressive caching.
if (!reg.active) {
update.postMessage('claim');
} else {
notifyUpdate(update);
}
}
});
});
});
} catch (e) {
console.error('Error while registering service worker:', e);
}
}
const missing = Engine.getMissingFeatures({
threads: true,
});
if (missing.length) {
// Display error dialog as threading support is required for the editor.
document.getElementById('startButton').disabled = 'disabled';
document.getElementById('welcome-modal-description').style.display = 'none';
document.getElementById('welcome-modal-missing-description').style.display = 'block';
document.getElementById('welcome-modal-dismiss').style.display = 'none';
const list = document.getElementById('welcome-modal-missing-list');
for (let i = 0; i < missing.length; i++) {
const node = document.createElement('li');
node.innerText = missing[i];
list.appendChild(node);
}
}
if (missing.length || localStorage.getItem('welcomeModalDismissed') !== 'true') {
document.getElementById('welcome-modal').style.display = 'block';
document.getElementById('welcome-modal-dismiss').focus();
}
});
function closeWelcomeModal(dontShowAgain) { // eslint-disable-line no-unused-vars
document.getElementById('welcome-modal').style.display = 'none';
if (dontShowAgain) {
localStorage.setItem('welcomeModalDismissed', 'true');
}
}
</script>
<script src="godot.editor.js"></script>
<script>
let editor = null;
let game = null;
let setStatusMode;
let setStatusNotice;
let video_driver = '';
function clearPersistence() { // eslint-disable-line no-unused-vars
function deleteDB(path) {
return new Promise(function (resolve, reject) {
const req = indexedDB.deleteDatabase(path);
req.onsuccess = function () {
resolve();
};
req.onerror = function (err) {
reject(err);
};
req.onblocked = function (err) {
reject(err);
};
});
}
if (!window.confirm('Are you sure you want to delete all the locally stored files?\nClicking "OK" will permanently remove your projects and editor settings!')) {
return;
}
Promise.all([
deleteDB('/home/web_user'),
]).then(function (results) {
alert('Done.');
}).catch(function (err) {
alert('Error deleting local files. Please retry after reloading the page.');
});
}
function selectVideoMode() {
const select = document.getElementById('videoMode');
video_driver = select.selectedOptions[0].value;
}
const tabs = [
document.getElementById('tab-loader'),
document.getElementById('tab-editor'),
document.getElementById('tab-game'),
];
function showTab(name) {
tabs.forEach(function (elem) {
if (elem.id === `tab-${name}`) {
elem.style.display = 'block';
if (name === 'editor' || name === 'game') {
const canvas = document.getElementById(`${name}-canvas`);
canvas.focus();
}
} else {
elem.style.display = 'none';
}
});
}
function setButtonEnabled(id, enabled) {
if (enabled) {
document.getElementById(id).disabled = '';
} else {
document.getElementById(id).disabled = 'disabled';
}
}
function setLoaderEnabled(enabled) {
setButtonEnabled('btn-tab-loader', enabled);
setButtonEnabled('btn-tab-editor', !enabled);
setButtonEnabled('btn-close-editor', !enabled);
}
function setGameTabEnabled(enabled) {
setButtonEnabled('btn-tab-game', enabled);
setButtonEnabled('btn-close-game', enabled);
}
function closeGame() {
if (game) {
game.requestQuit();
}
}
function closeEditor() { // eslint-disable-line no-unused-vars
closeGame();
if (editor) {
editor.requestQuit();
}
}
function startEditor(zip) {
const INDETERMINATE_STATUS_STEP_MS = 100;
const persistentPaths = ['/home/web_user'];
let editorCanvas = document.getElementById('editor-canvas');
let gameCanvas = document.getElementById('game-canvas');
const statusProgress = document.getElementById('status-progress');
const statusProgressInner = document.getElementById('status-progress-inner');
const statusIndeterminate = document.getElementById('status-indeterminate');
const statusNotice = document.getElementById('status-notice');
const headerDiv = document.getElementById('tabs-buttons');
let initializing = true;
let statusMode = 'hidden';
showTab('status');
let animationCallbacks = [];
function animate(time) {
animationCallbacks.forEach((callback) => callback(time));
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
let lastScale = 0;
let lastWidth = 0;
let lastHeight = 0;
function adjustCanvasDimensions() {
const scale = window.devicePixelRatio || 1;
const headerHeight = headerDiv.offsetHeight + 1;
const width = window.innerWidth;
const height = window.innerHeight - headerHeight;
if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
editorCanvas.width = width * scale;
editorCanvas.height = height * scale;
editorCanvas.style.width = `${width}px`;
editorCanvas.style.height = `${height}px`;
lastScale = scale;
lastWidth = width;
lastHeight = height;
}
}
animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions();
function replaceCanvas(from) {
const out = document.createElement('canvas');
out.id = from.id;
out.tabIndex = from.tabIndex;
from.parentNode.replaceChild(out, from);
lastScale = 0;
return out;
}
function animateStatusIndeterminate(ms) {
const i = Math.floor((ms / INDETERMINATE_STATUS_STEP_MS) % 8);
if (statusIndeterminate.children[i].style.borderTopColor === '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach((child) => {
child.style.borderTopColor = '';
});
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
}
}
setStatusMode = function (mode) {
if (statusMode === mode || !initializing) {
return;
}
[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
elem.style.display = 'none';
});
animationCallbacks = animationCallbacks.filter(function (value) {
return (value !== animateStatusIndeterminate);
});
switch (mode) {
case 'progress':
statusProgress.style.display = 'block';
break;
case 'indeterminate':
statusIndeterminate.style.display = 'block';
animationCallbacks.push(animateStatusIndeterminate);
break;
case 'notice':
statusNotice.style.display = 'block';
break;
case 'hidden':
break;
default:
throw new Error('Invalid status mode');
}
statusMode = mode;
};
setStatusNotice = function (text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
const lines = text.split('\n');
lines.forEach((line) => {
statusNotice.appendChild(document.createTextNode(line));
statusNotice.appendChild(document.createElement('br'));
});
};
const gameConfig = {
'persistentPaths': persistentPaths,
'unloadAfterInit': false,
'canvas': gameCanvas,
'canvasResizePolicy': 1,
'onExit': function () {
gameCanvas = replaceCanvas(gameCanvas);
setGameTabEnabled(false);
showTab('editor');
game = null;
},
};
let OnEditorExit = function () {
showTab('loader');
setLoaderEnabled(true);
};
function Execute(args) {
const is_editor = args.filter(function (v) {
return v === '--editor' || v === '-e';
}).length !== 0;
const is_project_manager = args.filter(function (v) {
return v === '--project-manager';
}).length !== 0;
const is_game = !is_editor && !is_project_manager;
if (video_driver) {
args.push('--rendering-driver', video_driver);
}
if (is_game) {
if (game) {
console.error('A game is already running. Close it first');
return;
}
setGameTabEnabled(true);
game = new Engine(gameConfig);
showTab('game');
game.init().then(function () {
requestAnimationFrame(function () {
game.start({ 'args': args, 'canvas': gameCanvas }).then(function () {
gameCanvas.focus();
});
});
});
} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
OnEditorExit = function (code) {
setLoaderEnabled(true);
setTimeout(function () {
editor.init().then(function () {
setLoaderEnabled(false);
OnEditorExit = function () {
showTab('loader');
setLoaderEnabled(true);
};
editor.start({ 'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas });
});
}, 0);
OnEditorExit = null;
};
}
}
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
// We need at least 6 free threads from the pool to start the editor.
// At least 4 more will be reserved for the godot thread pool (3 is the bare minimum with the multithreaded variant of the servers).
const concurrency = clamp(navigator.hardwareConcurrency ?? 1, 12, 24);
const editorConfig = {
'unloadAfterInit': false,
'onProgress': function progressFunction(current, total) {
if (total > 0) {
statusProgressInner.style.width = `${(current / total) * 100}%`;
setStatusMode('progress');
if (current === total) {
// wait for progress bar animation
setTimeout(() => {
setStatusMode('indeterminate');
}, 100);
}
} else {
setStatusMode('indeterminate');
}
},
'canvas': editorCanvas,
'canvasResizePolicy': 0,
'onExit': function () {
editorCanvas = replaceCanvas(editorCanvas);
if (OnEditorExit) {
OnEditorExit();
}
},
'onExecute': Execute,
'persistentPaths': persistentPaths,
'emscriptenPoolSize': concurrency,
'godotPoolSize': Math.floor(concurrency / 3), // Ensures at least 4 threads for the pool (see above).
};
editor = new Engine(editorConfig);
function displayFailureNotice(err) {
console.error(err);
if (err instanceof Error) {
setStatusNotice(err.message);
} else if (typeof err === 'string') {
setStatusNotice(err);
} else {
setStatusNotice('An unknown error occurred.');
}
setStatusMode('notice');
initializing = false;
}
if (!Engine.isWebGLAvailable()) {
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
editor.init('godot.editor').then(function () {
if (zip) {
editor.copyToFS('/tmp/preload.zip', zip);
}
try {
// Avoid user creating project in the persistent root folder.
editor.copyToFS('/home/web_user/keep', new Uint8Array());
} catch (e) {
// File exists
}
selectVideoMode();
showTab('editor');
setLoaderEnabled(false);
const args = ['--project-manager', '--single-window'];
if (video_driver) {
args.push('--rendering-driver', video_driver);
}
editor.start({ 'args': args, 'persistentDrops': true }).then(function () {
setStatusMode('hidden');
initializing = false;
});
}).catch(displayFailureNotice);
}
}
function preloadZip(target) {
return new Promise(function (resolve, reject) {
if (target.files.length > 0) {
target.files[0].arrayBuffer().then(function (data) {
resolve(data);
});
} else {
resolve();
}
});
}
document.getElementById('startButton').onclick = function () {
preloadZip(document.getElementById('zip-file')).then(function (zip) {
startEditor(zip);
});
};
</script>
</body>
</html>

930
playground/godot/godot.editor.js Normal file
View file

File diff suppressed because one or more lines are too long

BIN
playground/godot/godot.editor.wasm Normal file
View file

Binary file not shown.

773
playground/godot/index.html Normal file
View file

@ -0,0 +1,773 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Godot Engine">
<meta name="description" content="Use the Godot Engine editor directly in your web browser, without having to install anything.">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Godot">
<meta name="apple-mobile-web-app-title" content="Godot">
<meta name="theme-color" content="#202531">
<meta name="msapplication-navbutton-color" content="#202531">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/latest">
<meta property="og:site_name" content="Godot Engine Web Editor">
<meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/">
<meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine">
<meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything.">
<meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<link id="-gd-engine-icon" rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" type="image/png" href="favicon.png">
<link rel="manifest" href="manifest.json">
<title>Godot Engine Web Editor (4.5.1.stable.official)</title>
<style>
*:focus {
/* More visible outline for better keyboard navigation. */
outline: 0.125rem solid hsl(220, 100%, 62.5%);
/* Make the outline always appear above other elements. */
/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
position: relative;
}
body {
touch-action: none;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: #333b4f;
overflow: hidden;
}
a {
color: hsl(205, 100%, 75%);
text-decoration-color: hsla(205, 100%, 75%, 0.3);
text-decoration-thickness: 0.125rem;
}
a:hover {
filter: brightness(117.5%);
}
a:active {
filter: brightness(82.5%);
}
.welcome-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: hsla(0, 0%, 0%, 0.5);
text-align: left;
}
.welcome-modal-title {
text-align: center;
}
.welcome-modal-content {
background-color: #333b4f;
box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
line-height: 1.5;
max-width: 38rem;
margin: 4rem auto 0 auto;
color: white;
border-radius: 0.5rem;
padding: 1rem 1rem 2rem 1rem;
}
#tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531;
}
#tab-game {
/* Use a pure black background to better distinguish the running project */
/* from the editor window, and to use a more neutral background color (no tint). */
background-color: black;
/* Make the background span the entire page height. */
min-height: 100vh;
}
#canvas, #gameCanvas {
display: block;
margin: 0;
color: white;
}
/* Don't show distracting focus outlines for the main tabs' contents. */
#tab-editor canvas:focus,
#tab-game canvas:focus,
#canvas:focus,
#gameCanvas:focus {
outline: none;
}
.godot {
color: #e0e0e0;
background-color: #3b3943;
background-image: linear-gradient(to bottom, #403e48, #35333c);
border: 1px solid #45434e;
box-shadow: 0 0 1px 1px #2f2d35;
}
.btn {
appearance: none;
color: #e0e0e0;
background-color: #262c3b;
border: 1px solid #202531;
padding: 0.5rem 1rem;
margin: 0 0.5rem;
}
.btn:not(:disabled):hover {
color: #e0e1e5;
border-color: #666c7b;
}
.btn:active {
border-color: #699ce8;
color: #699ce8;
}
.btn:disabled {
color: #aaa;
border-color: #242937;
}
.btn.tab-btn {
padding: 0.3rem 1rem;
}
.btn.close-btn {
padding: 0.3rem 1rem;
margin-left: -0.75rem;
font-weight: 700;
}
/* Status display */
#status {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
/* don't consume click events - make children visible explicitly */
visibility: hidden;
}
#status-progress {
width: 366px;
height: 7px;
background-color: #38363A;
border: 1px solid #444246;
padding: 1px;
box-shadow: 0 0 2px 1px #1B1C22;
border-radius: 2px;
visibility: visible;
}
@media only screen and (orientation:portrait) {
#status-progress {
width: 61.8%;
}
}
#status-progress-inner {
height: 100%;
width: 0;
box-sizing: border-box;
transition: width 0.5s linear;
background-color: #202020;
border: 1px solid #222223;
box-shadow: 0 0 1px 1px #27282E;
border-radius: 3px;
}
#status-indeterminate {
visibility: visible;
position: relative;
}
#status-indeterminate > div {
width: 4.5px;
height: 0;
border-style: solid;
border-width: 9px 3px 0 3px;
border-color: #2b2b2b transparent transparent transparent;
transform-origin: center 21px;
position: absolute;
}
#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
#status-notice {
margin: 0 100px;
line-height: 1.3;
visibility: visible;
padding: 4px 6px;
}
</style>
</head>
<body>
<div
id="welcome-modal"
class="welcome-modal"
role="dialog"
aria-labelledby="welcome-modal-title"
aria-describedby="welcome-modal-description"
onclick="if (event.target === this) closeWelcomeModal(false)"
>
<div class="welcome-modal-content">
<h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read before continuing</h2>
<div id="welcome-modal-description">
<p>
The Godot Web Editor has some limitations compared to the native version.
Its main focus is education and experimentation;
<strong>it is not recommended for production</strong>.
</p>
<p>
Refer to the
<a
href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
target="_blank"
rel="noopener"
>Web editor documentation</a> for usage instructions and limitations.
</p>
</div>
<div id="welcome-modal-missing-description" style="display: none">
<p>
<strong>The following features required by the Godot Web Editor are missing:</strong>
</p>
<ul id="welcome-modal-missing-list">
</ul>
<p>
If you are self-hosting the web editor,
refer to
<a
href="https://docs.godotengine.org/en/latest/tutorials/export/exporting_for_web.html"
target="_blank"
rel="noopener"
>Exporting for the Web</a> for more information.
</p>
</div>
<div style="text-align: center">
<button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
OK, don't show again
</button>
</div>
</div>
</div>
<div id="tabs-buttons">
<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
<button id="btn-tab-update" class="btn tab-btn" style="display: none;">Update</button>
</div>
<div id="tabs">
<div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence">
<br >
<img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: min(85%, 50vh); max-height: 250px">
<br >
4.5.1.stable.official
<br >
<a href="releases/">Need an old version?</a>
<br >
<br >
<br >
<label for="videoMode" style="margin-right: 1rem">Video driver:</label>
<select id="videoMode">
<option value="" selected="selected">Auto</option>
<option value="opengl3">WebGL 2</option>
</select>
<br >
<br >
<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label>
<input id="zip-file" type="file" name="files" style="margin-bottom: 1rem">
<br >
<a href="demo.zip">(Try this for example)</a>
<br >
<br >
<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
<br >
<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
<br >
<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div>
</div>
<div id="tab-editor" style="display: none;">
<canvas id="editor-canvas" tabindex="1">
HTML5 canvas appears to be unsupported in the current browser.<br >
Please try updating or use a different browser.
</canvas>
</div>
<div id="tab-game" style="display: none;">
<canvas id="game-canvas" tabindex="2">
HTML5 canvas appears to be unsupported in the current browser.<br >
Please try updating or use a different browser.
</canvas>
</div>
<div id="tab-status" style="display: none;">
<div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();">
<div id="status-progress-inner"></div>
</div>
<div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="status-notice" class="godot" style="display: none;"></div>
</div>
</div>
<script>
window.addEventListener('load', () => {
function notifyUpdate(sw) {
const btn = document.getElementById('btn-tab-update');
btn.onclick = function () {
if (!window.confirm('Are you sure you want to update?\nClicking "OK" will reload all active instances!')) {
return;
}
sw.postMessage('update');
btn.innerHTML = 'Updating...';
btn.disabled = true;
};
btn.style.display = '';
}
if ('serviceWorker' in navigator) {
try {
navigator.serviceWorker.register('service.worker.js').then(function (reg) {
if (reg.waiting) {
notifyUpdate(reg.waiting);
}
reg.addEventListener('updatefound', function () {
const update = reg.installing;
update.addEventListener('statechange', function () {
if (update.state === 'installed') {
// It's a new install, claim and perform aggressive caching.
if (!reg.active) {
update.postMessage('claim');
} else {
notifyUpdate(update);
}
}
});
});
});
} catch (e) {
console.error('Error while registering service worker:', e);
}
}
const missing = Engine.getMissingFeatures({
threads: true,
});
if (missing.length) {
// Display error dialog as threading support is required for the editor.
document.getElementById('startButton').disabled = 'disabled';
document.getElementById('welcome-modal-description').style.display = 'none';
document.getElementById('welcome-modal-missing-description').style.display = 'block';
document.getElementById('welcome-modal-dismiss').style.display = 'none';
const list = document.getElementById('welcome-modal-missing-list');
for (let i = 0; i < missing.length; i++) {
const node = document.createElement('li');
node.innerText = missing[i];
list.appendChild(node);
}
}
if (missing.length || localStorage.getItem('welcomeModalDismissed') !== 'true') {
document.getElementById('welcome-modal').style.display = 'block';
document.getElementById('welcome-modal-dismiss').focus();
}
});
function closeWelcomeModal(dontShowAgain) { // eslint-disable-line no-unused-vars
document.getElementById('welcome-modal').style.display = 'none';
if (dontShowAgain) {
localStorage.setItem('welcomeModalDismissed', 'true');
}
}
</script>
<script src="godot.editor.js"></script>
<script>
let editor = null;
let game = null;
let setStatusMode;
let setStatusNotice;
let video_driver = '';
function clearPersistence() { // eslint-disable-line no-unused-vars
function deleteDB(path) {
return new Promise(function (resolve, reject) {
const req = indexedDB.deleteDatabase(path);
req.onsuccess = function () {
resolve();
};
req.onerror = function (err) {
reject(err);
};
req.onblocked = function (err) {
reject(err);
};
});
}
if (!window.confirm('Are you sure you want to delete all the locally stored files?\nClicking "OK" will permanently remove your projects and editor settings!')) {
return;
}
Promise.all([
deleteDB('/home/web_user'),
]).then(function (results) {
alert('Done.');
}).catch(function (err) {
alert('Error deleting local files. Please retry after reloading the page.');
});
}
function selectVideoMode() {
const select = document.getElementById('videoMode');
video_driver = select.selectedOptions[0].value;
}
const tabs = [
document.getElementById('tab-loader'),
document.getElementById('tab-editor'),
document.getElementById('tab-game'),
];
function showTab(name) {
tabs.forEach(function (elem) {
if (elem.id === `tab-${name}`) {
elem.style.display = 'block';
if (name === 'editor' || name === 'game') {
const canvas = document.getElementById(`${name}-canvas`);
canvas.focus();
}
} else {
elem.style.display = 'none';
}
});
}
function setButtonEnabled(id, enabled) {
if (enabled) {
document.getElementById(id).disabled = '';
} else {
document.getElementById(id).disabled = 'disabled';
}
}
function setLoaderEnabled(enabled) {
setButtonEnabled('btn-tab-loader', enabled);
setButtonEnabled('btn-tab-editor', !enabled);
setButtonEnabled('btn-close-editor', !enabled);
}
function setGameTabEnabled(enabled) {
setButtonEnabled('btn-tab-game', enabled);
setButtonEnabled('btn-close-game', enabled);
}
function closeGame() {
if (game) {
game.requestQuit();
}
}
function closeEditor() { // eslint-disable-line no-unused-vars
closeGame();
if (editor) {
editor.requestQuit();
}
}
function startEditor(zip) {
const INDETERMINATE_STATUS_STEP_MS = 100;
const persistentPaths = ['/home/web_user'];
let editorCanvas = document.getElementById('editor-canvas');
let gameCanvas = document.getElementById('game-canvas');
const statusProgress = document.getElementById('status-progress');
const statusProgressInner = document.getElementById('status-progress-inner');
const statusIndeterminate = document.getElementById('status-indeterminate');
const statusNotice = document.getElementById('status-notice');
const headerDiv = document.getElementById('tabs-buttons');
let initializing = true;
let statusMode = 'hidden';
showTab('status');
let animationCallbacks = [];
function animate(time) {
animationCallbacks.forEach((callback) => callback(time));
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
let lastScale = 0;
let lastWidth = 0;
let lastHeight = 0;
function adjustCanvasDimensions() {
const scale = window.devicePixelRatio || 1;
const headerHeight = headerDiv.offsetHeight + 1;
const width = window.innerWidth;
const height = window.innerHeight - headerHeight;
if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
editorCanvas.width = width * scale;
editorCanvas.height = height * scale;
editorCanvas.style.width = `${width}px`;
editorCanvas.style.height = `${height}px`;
lastScale = scale;
lastWidth = width;
lastHeight = height;
}
}
animationCallbacks.push(adjustCanvasDimensions);
adjustCanvasDimensions();
function replaceCanvas(from) {
const out = document.createElement('canvas');
out.id = from.id;
out.tabIndex = from.tabIndex;
from.parentNode.replaceChild(out, from);
lastScale = 0;
return out;
}
function animateStatusIndeterminate(ms) {
const i = Math.floor((ms / INDETERMINATE_STATUS_STEP_MS) % 8);
if (statusIndeterminate.children[i].style.borderTopColor === '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach((child) => {
child.style.borderTopColor = '';
});
statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
}
}
setStatusMode = function (mode) {
if (statusMode === mode || !initializing) {
return;
}
[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
elem.style.display = 'none';
});
animationCallbacks = animationCallbacks.filter(function (value) {
return (value !== animateStatusIndeterminate);
});
switch (mode) {
case 'progress':
statusProgress.style.display = 'block';
break;
case 'indeterminate':
statusIndeterminate.style.display = 'block';
animationCallbacks.push(animateStatusIndeterminate);
break;
case 'notice':
statusNotice.style.display = 'block';
break;
case 'hidden':
break;
default:
throw new Error('Invalid status mode');
}
statusMode = mode;
};
setStatusNotice = function (text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
const lines = text.split('\n');
lines.forEach((line) => {
statusNotice.appendChild(document.createTextNode(line));
statusNotice.appendChild(document.createElement('br'));
});
};
const gameConfig = {
'persistentPaths': persistentPaths,
'unloadAfterInit': false,
'canvas': gameCanvas,
'canvasResizePolicy': 1,
'onExit': function () {
gameCanvas = replaceCanvas(gameCanvas);
setGameTabEnabled(false);
showTab('editor');
game = null;
},
};
let OnEditorExit = function () {
showTab('loader');
setLoaderEnabled(true);
};
function Execute(args) {
const is_editor = args.filter(function (v) {
return v === '--editor' || v === '-e';
}).length !== 0;
const is_project_manager = args.filter(function (v) {
return v === '--project-manager';
}).length !== 0;
const is_game = !is_editor && !is_project_manager;
if (video_driver) {
args.push('--rendering-driver', video_driver);
}
if (is_game) {
if (game) {
console.error('A game is already running. Close it first');
return;
}
setGameTabEnabled(true);
game = new Engine(gameConfig);
showTab('game');
game.init().then(function () {
requestAnimationFrame(function () {
game.start({ 'args': args, 'canvas': gameCanvas }).then(function () {
gameCanvas.focus();
});
});
});
} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
OnEditorExit = function (code) {
setLoaderEnabled(true);
setTimeout(function () {
editor.init().then(function () {
setLoaderEnabled(false);
OnEditorExit = function () {
showTab('loader');
setLoaderEnabled(true);
};
editor.start({ 'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas });
});
}, 0);
OnEditorExit = null;
};
}
}
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
// We need at least 6 free threads from the pool to start the editor.
// At least 4 more will be reserved for the godot thread pool (3 is the bare minimum with the multithreaded variant of the servers).
const concurrency = clamp(navigator.hardwareConcurrency ?? 1, 12, 24);
const editorConfig = {
'unloadAfterInit': false,
'onProgress': function progressFunction(current, total) {
if (total > 0) {
statusProgressInner.style.width = `${(current / total) * 100}%`;
setStatusMode('progress');
if (current === total) {
// wait for progress bar animation
setTimeout(() => {
setStatusMode('indeterminate');
}, 100);
}
} else {
setStatusMode('indeterminate');
}
},
'canvas': editorCanvas,
'canvasResizePolicy': 0,
'onExit': function () {
editorCanvas = replaceCanvas(editorCanvas);
if (OnEditorExit) {
OnEditorExit();
}
},
'onExecute': Execute,
'persistentPaths': persistentPaths,
'emscriptenPoolSize': concurrency,
'godotPoolSize': Math.floor(concurrency / 3), // Ensures at least 4 threads for the pool (see above).
};
editor = new Engine(editorConfig);
function displayFailureNotice(err) {
console.error(err);
if (err instanceof Error) {
setStatusNotice(err.message);
} else if (typeof err === 'string') {
setStatusNotice(err);
} else {
setStatusNotice('An unknown error occurred.');
}
setStatusMode('notice');
initializing = false;
}
if (!Engine.isWebGLAvailable()) {
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
editor.init('godot.editor').then(function () {
if (zip) {
editor.copyToFS('/tmp/preload.zip', zip);
}
try {
// Avoid user creating project in the persistent root folder.
editor.copyToFS('/home/web_user/keep', new Uint8Array());
} catch (e) {
// File exists
}
selectVideoMode();
showTab('editor');
setLoaderEnabled(false);
const args = ['--project-manager', '--single-window'];
if (video_driver) {
args.push('--rendering-driver', video_driver);
}
editor.start({ 'args': args, 'persistentDrops': true }).then(function () {
setStatusMode('hidden');
initializing = false;
});
}).catch(displayFailureNotice);
}
}
function preloadZip(target) {
return new Promise(function (resolve, reject) {
if (target.files.length > 0) {
target.files[0].arrayBuffer().then(function (data) {
resolve(data);
});
} else {
resolve();
}
});
}
document.getElementById('startButton').onclick = function () {
preloadZip(document.getElementById('zip-file')).then(function (zip) {
startEditor(zip);
});
};
</script>
</body>
</html>

1
playground/godot/logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

17
playground/godot/manifest.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "Godot Engine Web Editor",
"short_name": "Godot",
"description": "Multi-platform 2D and 3D game engine with a feature-rich editor (Web edition)",
"lang": "en",
"start_url": "./godot.editor.html",
"display": "standalone",
"theme_color": "#202531",
"icons": [
{
"src": "favicon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"background_color": "#333b4f"
}

44
playground/godot/offline.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#202531">
<meta name="msapplication-navbutton-color" content="#202531">
<title>You are offline</title>
<style>
html {
background-color: #333b4f;
color: #e0e0e0;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 2rem;
}
p {
margin-block: 1rem;
}
button {
display: block;
padding: 1rem 2rem;
margin: 3rem auto 0;
}
</style>
</head>
<body>
<h1>You are offline</h1>
<p>This application requires an Internet connection to run for the first time.</p>
<p>Press the button below to try reloading:</p>
<button type="button">Reload</button>
<script>
document.querySelector('button').addEventListener('click', () => {
window.location.reload();
});
</script>
</body>
</html>

165
playground/godot/service.worker.js Normal file
View file

@ -0,0 +1,165 @@
// This service worker is required to expose an exported Godot project as a
// Progressive Web App. It provides an offline fallback page telling the user
// that they need an Internet connection to run the project if desired.
// Incrementing CACHE_VERSION will kick off the install event and force
// previously cached resources to be updated from the network.
/** @type {string} */
const CACHE_VERSION = '4.5.1.stable.official';
/** @type {string} */
const CACHE_PREFIX = 'GodotEngine-sw-cache-';
const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
/** @type {string} */
const OFFLINE_URL = 'offline.html';
/** @type {boolean} */
const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = true;
// Files that will be cached on load.
/** @type {string[]} */
const CACHED_FILES = ["godot.editor.html", "offline.html", "godot.editor.js", "godot.editor.audio.worklet.js", "godot.editor.audio.position.worklet.js", "logo.svg", "favicon.png"];
// Files that we might not want the user to preload, and will only be cached on first load.
/** @type {string[]} */
const CACHEABLE_FILES = ["godot.editor.wasm"];
const FULL_CACHE = CACHED_FILES.concat(CACHEABLE_FILES);
self.addEventListener('install', (event) => {
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
});
self.addEventListener('activate', (event) => {
event.waitUntil(caches.keys().then(
function (keys) {
// Remove old caches.
return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));
}
).then(function () {
// Enable navigation preload if available.
return ('navigationPreload' in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
}));
});
/**
* Ensures that the response has the correct COEP/COOP headers
* @param {Response} response
* @returns {Response}
*/
function ensureCrossOriginIsolationHeaders(response) {
if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
&& response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
return response;
}
const crossOriginIsolatedHeaders = new Headers(response.headers);
crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
const newResponse = new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: crossOriginIsolatedHeaders,
});
return newResponse;
}
/**
* Calls fetch and cache the result if it is cacheable
* @param {FetchEvent} event
* @param {Cache} cache
* @param {boolean} isCacheable
* @returns {Response}
*/
async function fetchAndCache(event, cache, isCacheable) {
// Use the preloaded response, if it's there
/** @type { Response } */
let response = await event.preloadResponse;
if (response == null) {
// Or, go over network.
response = await self.fetch(event.request);
}
if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
response = ensureCrossOriginIsolationHeaders(response);
}
if (isCacheable) {
// And update the cache
cache.put(event.request, response.clone());
}
return response;
}
self.addEventListener(
'fetch',
/**
* Triggered on fetch
* @param {FetchEvent} event
*/
(event) => {
const isNavigate = event.request.mode === 'navigate';
const url = event.request.url || '';
const referrer = event.request.referrer || '';
const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
const local = url.startsWith(base) ? url.replace(base, '') : '';
const isCacheable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
if (isNavigate || isCacheable) {
event.respondWith((async () => {
// Try to use cache first
const cache = await caches.open(CACHE_NAME);
if (isNavigate) {
// Check if we have full cache during HTML page request.
/** @type {Response[]} */
const fullCache = await Promise.all(FULL_CACHE.map((name) => cache.match(name)));
const missing = fullCache.some((v) => v === undefined);
if (missing) {
try {
// Try network if some cached file is missing (so we can display offline page in case).
const response = await fetchAndCache(event, cache, isCacheable);
return response;
} catch (e) {
// And return the hopefully always cached offline page in case of network failure.
console.error('Network error: ', e); // eslint-disable-line no-console
return caches.match(OFFLINE_URL);
}
}
}
let cached = await cache.match(event.request);
if (cached != null) {
if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
cached = ensureCrossOriginIsolationHeaders(cached);
}
return cached;
}
// Try network if don't have it in cache.
const response = await fetchAndCache(event, cache, isCacheable);
return response;
})());
} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
event.respondWith((async () => {
let response = await fetch(event.request);
response = ensureCrossOriginIsolationHeaders(response);
return response;
})());
}
}
);
self.addEventListener('message', (event) => {
// No cross origin
if (event.origin !== self.origin) {
return;
}
const id = event.source.id || '';
const msg = event.data || '';
// Ensure it's one of our clients.
self.clients.get(id).then(function (client) {
if (!client) {
return; // Not a valid client.
}
if (msg === 'claim') {
self.skipWaiting().then(() => self.clients.claim());
} else if (msg === 'clear') {
caches.delete(CACHE_NAME);
} else if (msg === 'update') {
self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
}
});
});