diff --git a/tests/playground.html b/tests/playground.html
index a31b8de75..76e1edeeb 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -356,23 +356,61 @@
};
window.displayTest = function() {
- setTimeout( function() {
- window.n = new scenery.Node( {
+ setTimeout( async function() {
+ const sceneryImports = await import( '../../chipper/dist/js/scenery/js/imports.js' );
+
+ const GridBox = sceneryImports.GridBox;
+ const Rectangle = sceneryImports.Rectangle;
+ const Color = sceneryImports.Color;
+
+ const colors = [
+ new Color( 62, 171, 3 ),
+ new Color( 23, 180, 77 ),
+ new Color( 24, 183, 138 ),
+ new Color( 23, 178, 194 ),
+ new Color( 20, 163, 238 ),
+ new Color( 71, 136, 255 ),
+ new Color( 171, 101, 255 ),
+ new Color( 228, 72, 235 ),
+ new Color( 252, 66, 186 ),
+ new Color( 252, 82, 127 )
+ ];
+
+ const box = new GridBox( {
+ x: 10,
+ y: 10,
+ preferredWidth: 100,
+ preferredHeight: 100,
children: [
- new scenery.Rectangle( 0, 0, 100, 50, { fill: 'rgb(200,0,0)' } ),
- new scenery.Rectangle( 0, 50, 100, 50, { fill: 'rgb(0,200,0)', filters: [ new scenery.Grayscale( 1 ) ] } ),
- new scenery.Rectangle( 0, 100, 100, 50, { fill: 'rgb(0,0,200)' } )
- ],
- // filters: [
- // new scenery.Grayscale( 1 ),
- // // new scenery.Contrast( 2 ),
- // // new scenery.GaussianBlur( 3, 20 )
- // ],
- renderer: 'canvas',
- preventFit: true
+ new Rectangle( 0, 0, 30, 15, {
+ fill: colors[ 2 ],
+ sizable: true,
+ localMinimumWidth: 30,
+ localMinimumHeight: 15,
+ layoutOptions: { column: 1, row: 0, stretch: true, grow: 1 }
+ } ),
+ new Rectangle( 0, 0, 30, 30, {
+ fill: colors[ 4 ],
+ sizable: true,
+ localMinimumWidth: 30,
+ localMinimumHeight: 100,
+ layoutOptions: { column: 0, row: 1, width: 2, height: 2, stretch: true }
+ } ),
+ new Rectangle( 0, 0, 15, 15, {
+ fill: colors[ 0 ],
+ layoutOptions: { column: 0, row: 3 }
+ } )
+ ]
} );
- scene.addChild( n );
+
+ console.log( box.height );
+
+ scene.addChild( box );
+
+ display.width = 120;
+ display.height = 120;
display.updateDisplay();
+
}, 400 );
};