excaliburjs / Excalibur / 28136773224

89%

push

github

feat: update playground layout and add console output (#3787)

There isn't an issue for this one, but discussed in Discord. 

## Changes

This PR overhauls the playground to:

 * Have a stronger webapp look and feel, similar to codepen, etc
 * Display logs within the playground
 * Introduce a framework to minimise subtle state bugs


## Tech choice
As discussed in Discord, Erik mentioned using what makes me "happy and productive" - which is React. Even for non-React devs, I hope it is relatively easy to trace the data flow - there is no over the top state management like redux, etc. 

## UI 

The look and feel is heavily inspired by @jyoung4242 IDE work. 

The zinc and purple color scales are from Tailwind v4



## General layout

### Editor

<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 28@2x" src="https://github.com/user-attachments/assets/16e581da-fd9f-41c8-bfbb-6c73f4236ccd" />

### Assets

I'm not 100% on this; it's better than current (which is non-existent) but I will do another pass on this later.

<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 38 59@2x" src="https://github.com/user-attachments/assets/786a906a-1b31-4953-ac3a-7650b26924d8" />

### Console

Supports 3x colors via `console.log`, `console.info`, and `console.warn`. 

<img width="3326" height="2558" alt="CleanShot 2026-06-19 at 21 40 01@2x" src="https://github.com/user-attachments/assets/be6ec2f5-cfc3-4f76-976f-a253904887c3" />


## Embedded

The same embedded search params are applied. It will look like the following when embedded in the docs:

<img width="3160" height="2538" alt="CleanShot 2026-06-17 at 23 08 27@2x" src="https://github.com/user-attachments/assets/40bd49da-cfcd-49bb-af57-23556e34ef1e" />


---

## Deployments

The following `.env` will need to part of the deployment of the playground:

```properties
VITE_PLAYGROUND_PATH='./playground'
VITE_HIJACK_LOGS=true
```

**Note:** I couldn't find the actual deployment steps in `.github`... (continued)

6879 of 9021 branches covered (76.26%)

15513 of 17439 relevant lines covered (88.96%)

24860.22 hits per line