Skip to content

Commit 9ed7cab

Browse files
chrisk-7777chrisk-7777
authored
chore: Migrate playground to core repo (#3598)
Moves the Excalibur Playground sub-site into the core Excalibur repo
1 parent 0f899e4 commit 9ed7cab

35 files changed

+2893
-53
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ build
66
coverage
77
node_cache
88
/site
9+
/playground
910
*.md
1011
*.mdx

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"editor.insertSpaces": true,
55
"editor.detectIndentation": false,
66
"eslint.enable": true,
7-
"eslint.options": { "overrideConfigFile": "./.eslintrc.json" },
7+
"eslint.options": { "overrideConfigFile": "./eslint.config.mjs" },
88
"eslint.alwaysShowStatus": true,
99
"eslint.validate": ["typescript"],
1010
"files.exclude": {

‎eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default tseslint.config(
99
'site',
1010
'sandbox',
1111
'scripts',
12+
'playground',
1213
'docs/api/**',
1314
'**/karma.conf.*',
1415
'**/webpack.config.js',

‎playground/.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
node_modules
3+
dist
4+
types
5+
!types/index.d.ts
6+
.DS_Store
7+
.tsbuildinfo

‎playground/README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Excalibur Studio and Playground
2+
3+
This is the current implementation of the Excalibur Playground for sharing small game examples via links!
4+
5+
## Project Goals
6+
7+
* Eventually we want this to become the Excalibur Studio (a full fledged editor like Godot!) as well as the Playground
8+
* Drag and drop Actors/Entities
9+
* More Terse Built-in Examples
10+
11+
12+
## Developing Locally
13+
14+
### Initial setup
15+
16+
* From the root of the project, run `npm install`
17+
* Navigate to the `playground` directory, run `npm install`
18+
* Still within the `playground` directory, generate the Excalibur engine types:
19+
20+
```sh
21+
npm run build:types
22+
```
23+
24+
### Day to day development
25+
26+
* Navigate to the `playground` directory
27+
* Run `npm start`
28+
29+
### Building locally
30+
31+
The Playground lives as a standalone app at https://excaliburjs.com/playground/ , while the main site, running at https://excaliburjs.com is built with Docusaurus.
32+
The routing to the Playground is handled with Cloudflare rules.
33+
34+
Because of this, care needs to be taken with pathing to static assets within the Playground, such as images and javascript.
35+
A [relative base](https://vite.dev/guide/build#relative-base) is configured in `vite.config.ts` to handle most typical scenarios.
36+
37+
You can test that the built Playground operates correctly in a subdirectory:
38+
39+
```sh
40+
# build to `dist/playground`, instead of the default `playground`
41+
npm run build:dev
42+
43+
# serve the locally built version on http://localhost:8080/playground
44+
npx http-server dist
45+
```
46+
47+
Open [http://localhost:8080/playground](http://localhost:8080/playground) and ensure styles, scripts, and assets load correctly.
48+
49+
### Production
50+
51+
In production, the `BASE_URL` is overridden to route requests properly to `https://excaliburjs.com/playground`.
52+
53+
You can also test this locally:
54+
55+
```sh
56+
BASE_URL=/playground npm start
57+
```
58+
59+
60+
## Contribution Wishlist
61+
62+
* Support multiple versions of Excalibur (maybe even in progress branches?)
63+
* Auto save to the URL on keyup
64+
* Multiple file tree
65+
* Implement Asset Allow List (think similar to ShaderToy)
66+
* Save to local storage (and maybe to disk in the future)
67+
* Migrate html/js to [Lit HTML](https://lit.dev/) components, Shoelace is https://shoelace.style/
68+
- Example: [Excalibur Dev Tools Browser Extension Repo](https://github.com/excaliburjs/excalibur-extension.git)
69+
* Add more debug tools to interface
70+
- Bonus points: Refactor the dev tools browser extension to be embeddable into HTML
71+

‎playground/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="twitter:card" content="summary_large_image" />
7+
<meta property="og:image" content="https://excaliburjs.com/playground/social.jpg" />
8+
<meta name="twitter:image" content="https://excaliburjs.com/playground/social.jpg" />
9+
<meta property="og:url" content="https://excaliburjs.com/playground/" />
10+
<meta property="og:locale" content="en" />
11+
<meta property="og:title" content="Excalibur Playground" />
12+
<meta name="description" content="Excalibur is a friendly TypeScript game engine for the web!" />
13+
<meta property="og:description" content="Excalibur is a friendly TypeScript game engine for the web!" />
14+
<link rel="icon" href="/favicon.ico" />
15+
<link rel="canonical" href="https://excaliburjs.com/playground/" />
16+
<link rel="alternate" href="https://excaliburjs.com/playground/" hreflang="en" />
17+
<link rel="alternate" href="https://excaliburjs.com/playground/" hreflang="x-default" />
18+
<title>Excalibur Playground</title>
19+
</head>
20+
21+
<body>
22+
<header>
23+
<h1>
24+
<picture>
25+
<source srcset="/[email protected]" media="(prefers-color-scheme: light)" />
26+
<source srcset="/[email protected]" media="(prefers-color-scheme: dark)" />
27+
<img src="/[email protected]" alt="Description of what the image shows" />
28+
</picture>
29+
<span class="sr-only">Excalibur Playground</span>
30+
</h1>
31+
</header>
32+
<main>
33+
<div id="container"></div>
34+
<div id="preview">
35+
<div id="canvas-container">
36+
<div class="loading">
37+
<div>Building...</div>
38+
<img src="/icon.png" alt="excalibur sword" />
39+
</div>
40+
<canvas id="preview-canvas"> </canvas>
41+
</div>
42+
<div class="toolbar">
43+
<div class="controls">
44+
<label for="auto-save"
45+
>Auto Save
46+
<input id="auto-save" type="checkbox" checked="checked" />
47+
</label>
48+
<button id="build" title="Build & Run (CTRL+S)">Build & Run</button>
49+
<button id="debug" title="Debug (CTRL+D)">Toggle Debug</button>
50+
<button id="share">Share</button>
51+
</div>
52+
<div class="templates">
53+
<h2>Templates</h2>
54+
<a href="?template=default"><span class="icon">💀</span> <span>Load bare bones template</span></a>
55+
<a href="?template=tileset"><span class="icon">🖼️</span> <span>Load tileset template</span></a>
56+
<a href="?template=spritesheet"><span class="icon">🎞️</span> <span>Load spritesheet template</span></a>
57+
<a href="?template=audio"><span class="icon">🔊</span> <span>Load audio template</span></a>
58+
</div>
59+
</div>
60+
</div>
61+
</main>
62+
63+
<script type="importmap">
64+
{
65+
"imports": {
66+
"excalibur": "https://www.unpkg.com/excalibur@next/build/esm/excalibur.min.js"
67+
}
68+
}
69+
</script>
70+
<script type="module" src="/src/main.ts"></script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)