C2LC-292: Expand and Collapse the Scene

src/App.js

@@ -28,7 +28,7 @@ import ProgramSpeedController from './ProgramSpeedController';
 import ProgramSerializer from './ProgramSerializer';
 import ShareButton from './ShareButton';
 import ActionsMenu from './ActionsMenu';
-import type { ActionToggleRegister, AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName } from './types';
+import type { ActionToggleRegister, AudioManager, DeviceConnectionStatus, RobotDriver, RunningState, ThemeName, WorldName, SceneMode } from './types';
 import WorldSelector from './WorldSelector';
 import * as Utils from './Utils';
 import './App.scss';
@@ -53,6 +53,7 @@ type AppContext = {
 type AppSettings = {
     language: string,
     addNodeExpandedMode: boolean,
+    sceneMode: SceneMode,
     theme: ThemeName,
     world: WorldName
 };
@@ -381,6 +382,7 @@ export class App extends React.Component<AppProps, AppState> {
             settings: {
                 language: 'en',
                 addNodeExpandedMode: true,
+                sceneMode: 'default',
                 theme: 'default',
                 world: 'default'
             },
@@ -716,6 +718,30 @@ export class App extends React.Component<AppProps, AppState> {
         });
     }
 
+    handleExpandScene = () => {
+        if (this.state.settings.sceneMode === 'collapsed') {
+            this.setStateSettings({
+                sceneMode: 'default'
+            });
+        } else if (this.state.settings.sceneMode === 'default') {
+            this.setStateSettings({
+                sceneMode: 'expanded'
+            });
+        }
+    }
+
+    handleCollapseScene = () => {
+        if (this.state.settings.sceneMode === 'expanded') {
+            this.setStateSettings({
+                sceneMode: 'default'
+            });
+        } else if (this.state.settings.sceneMode === 'default') {
+            this.setStateSettings({
+                sceneMode: 'collapsed'
+            });
+        }
+    }
+
     render() {
         return (
             <React.Fragment>
@@ -724,6 +750,7 @@ export class App extends React.Component<AppProps, AppState> {
                     role='main'
                     onClick={this.handleRootClick}
                     onKeyDown={this.handleRootKeyDown}>
+                    <div className='App__header-background' />
                     <header className='App__header'>
                         <div className='App__header-row'>
                             <h1 className='App__app-heading'>
@@ -784,6 +811,8 @@ export class App extends React.Component<AppProps, AppState> {
                         <Scene
                             dimensions={this.state.sceneDimensions}
                             characterState={this.state.characterState}
+                            onClickExpandScene={this.handleExpandScene}
+                            onClickCollapseScene={this.handleCollapseScene}
                             world={this.state.settings.world}
                         />
                         <div className='App__scene-controls'>
@@ -990,6 +1019,16 @@ export class App extends React.Component<AppProps, AppState> {
             }
         }
 
+        if (this.state.settings.sceneMode !== prevState.settings.sceneMode) {
+            if (document.body) {
+                if (this.state.settings.sceneMode === 'default') {
+                    document.body.className = '';
+                } else {
+                    document.body.className = `Scene-${this.state.settings.sceneMode}`;
+                }
+            }
+        }
+
         /* Dash connection removed for version 0.5
         if (this.state.dashConnectionStatus !== prevState.dashConnectionStatus) {
             console.log(this.state.dashConnectionStatus);

src/App.scss

@@ -15,6 +15,10 @@ body {
     height: 100vh;
 }
 
+.App__header-background {
+    display: none;
+}
+
 .App__header {
     margin: 0.5rem 0.5rem 0 0.5rem;
     padding: 0 1rem;
@@ -230,3 +234,135 @@ body {
         overflow: scroll;
     }
 }
+
+.Scene-expanded .App__container {
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: min-content 1fr auto 1fr 90px;
+}
+
+.Scene-expanded .App__header {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 2;
+}
+
+.Scene-expanded .App__header-background {
+    display: block;
+    background-color: #000;
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 2;
+}
+
+.Scene-expanded .App__header-row {
+    flex-direction: row;
+}
+
+.Scene-expanded .App__header-audio-toggle {
+    margin: auto 0 auto auto;
+}
+
+.Scene-expanded .App__scene-container {
+    margin: 0 0.5rem;
+    margin-right: 1rem;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    max-width: 1500px;
+    max-height: 1000px;
+}
+
+.Scene-expanded .App__command-palette {
+    display: none;
+}
+
+.Scene-expanded .App__world-selector-container {
+    display: none;
+}
+
+.Scene-expanded .App__program-block-editor {
+    display: none;
+}
+
+.Scene-expanded .App__playAndShare-background {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 5;
+    grid-row-end: 6;
+}
+
+.Scene-expanded .App__playAndShare-container {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 5;
+    grid-row-end: 6;
+}
+
+.Scene-collapsed .App__container {
+    grid-template-columns: 1fr min-content minmax(auto, 30rem) minmax(auto, 55rem) 1fr;
+    grid-template-rows: 8rem 2rem 1fr 90px;
+}
+
+.Scene-collapsed .App__header {
+    margin: 0.5rem 0.5rem 0 0.5rem;
+    padding: 0 1rem;
+    background-color: #000;
+    color: #FFF;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+
+.Scene-collapsed .App__scene-container {
+    position: relative;
+    margin-top: 0.5rem;
+    margin-right: 0.5rem;
+    grid-column-start: 3;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+
+.Scene-collapsed .App__scene-controls {
+    position: initial;
+    padding: 0;
+    margin: auto;
+    margin-left: 1rem;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.Scene-collapsed .App__world-selector-container {
+    grid-column-start: 4;
+    grid-column-end: 5;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+
+.Scene-collapsed .App__command-palette {
+    background-color: #F1F1F1;
+    text-align: center;
+    margin: 0 0.5rem;
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    overflow: hidden;
+}
+
+.Scene-collapsed .App__program-block-editor {
+    margin-right: 0.5rem;
+    grid-column-start: 3;
+    grid-column-end: 5;
+    grid-row-start: 3;
+    grid-row-end: 4;
+    height: auto;
+}

src/Scene.js

@@ -6,6 +6,8 @@ import Character from './Character';
 import SceneDimensions from './SceneDimensions';
 import { injectIntl } from 'react-intl';
 import type {IntlShape} from 'react-intl';
+import { ReactComponent as ExpandIcon } from './svg/Expand.svg';
+import { ReactComponent as MinimizeIcon } from './svg/Minimize.svg';
 
 import './Scene.scss';
 
@@ -15,7 +17,9 @@ export type SceneProps = {
     dimensions: SceneDimensions,
     characterState: CharacterState,
     world: WorldName,
-    intl: IntlShape
+    intl: IntlShape,
+    onClickCollapseScene: () => void,
+    onClickExpandScene: () => void
 };
 
 class Scene extends React.Component<SceneProps, {}> {
@@ -269,6 +273,20 @@ class Scene extends React.Component<SceneProps, {}> {
                             </g>
                         </svg>
                     </div>
+                    <div className='Scene__resize-button-container'>
+                        <button
+                            className='Scene__resize-button'
+                            aria-label={this.props.intl.formatMessage({id: 'Scene.expand'})}
+                            onClick={this.props.onClickExpandScene} >
+                            <ExpandIcon />
+                        </button>
+                        <button
+                            className='Scene__resize-button'
+                            aria-label={this.props.intl.formatMessage({id: 'Scene.minimize'})}
+                            onClick={this.props.onClickCollapseScene} >
+                            <MinimizeIcon />
+                        </button>
+                    </div>
                 </div>
             </React.Fragment>
         );

src/Scene.scss

@@ -92,3 +92,59 @@
     stroke-width: 0.03;
     stroke-linecap: round;
 }
+
+.Scene__resize-button-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 2rem;
+    right: 0;
+}
+
+.Scene__resize-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    margin-top: 1rem;
+    margin-right: 1rem;
+    background-color: $c2lc-primary-button-color;
+}
+
+.Scene__resize-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 $c2lc-focus-indicator-width $c2lc-focus-indicator-color;
+}
+
+.Scene__resize-button:hover {
+    box-shadow: 0 0 0 $c2lc-hover-indicator-width $c2lc-focus-indicator-color;
+    background-color: #e5e5e5;
+}
+
+.Scene-collapsed .Scene__container {
+    grid-column-start: 1;
+    grid-column-end: 2;
+    height: 11rem;
+    max-width: 26rem;
+    grid-template-columns: 10px auto;
+    grid-template-rows: 20px auto;
+}
+
+.Scene-collapsed .Scene__background {
+    left: 0.15rem;
+    top: 0.75rem;
+    height: 10.5rem;
+}
+
+.Scene-collapsed .Scene > svg {
+    width: 26rem;
+}
+
+.Scene-collapsed .Scene__column-header > svg {
+    width: 26rem;
+    height: 20px;
+}
+
+.Scene-collapsed .Scene__row-header > svg {
+    width: 10px;
+    height: 16rem;
+}

src/WorldSelector.scss

@@ -45,3 +45,13 @@
     padding-left: 0.2rem;
 }
 
+.Scene-collapsed .WorldSelector {
+    display: flex;
+    align-items: center;
+}
+
+.Scene-collapsed .WorldIcon {
+    margin-left: 2rem;
+    margin-top: 0;
+}
+

src/messages.json

@@ -120,6 +120,8 @@
         "AudioFeedbackToggleSwitch.audioFeedback": "Audio feedback",
         "Scene.inBounds": "Scene, {numColumns} by {numRows} grid with a character at column {xPos}, row {yPos} facing {direction}",
         "Scene.outOfBounds": "Scene, {numColumns} by {numRows} grid with a character outside of the scene {relativeDirection} the scene, facing {direction}",
+        "Scene.expand": "Expand the scene",
+        "Scene.minimize": "Minimize the scene",
         "StopButton": "Stop",
         "RefreshButton": "Refresh",
         "RelativeDirection.0": "above",

src/types.js

@@ -16,6 +16,8 @@ export type ThemeName = 'default' | 'forest' | 'space';
 
 export type WorldName = 'default' | 'forest' | 'space';
 
+export type SceneMode = 'default' | 'expanded' | 'collapsed';
+
 export type Program = Array<string>;
 
 // use running, paused, stopped