feat: add middle stage size and update min-height

packages/scratch-gui/src/components/sprite-info/sprite-info.jsx

@@ -116,7 +116,10 @@ class SpriteInfo extends React.Component {
                         </div> :
                         null
                 }
-                <Label text="x">
+                <Label
+                    text="x"
+                    above={stageSize === STAGE_DISPLAY_SIZES.middle}
+                >
                     <BufferedInput
                         small
                         disabled={this.props.disabled}
@@ -143,7 +146,10 @@ class SpriteInfo extends React.Component {
                         </div> :
                         null
                 }
-                <Label text="y">
+                <Label
+                    text="y"
+                    above={stageSize === STAGE_DISPLAY_SIZES.middle}
+                >
                     <BufferedInput
                         small
                         disabled={this.props.disabled}

packages/scratch-gui/src/components/stage-header/stage-header.jsx

@@ -14,6 +14,7 @@ import {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import fullScreenIcon from './icon--fullscreen.svg';
 import largeStageIcon from './icon--large-stage.svg';
 import smallStageIcon from './icon--small-stage.svg';
+import middleStageIcon from './icon--middle-stage.svg';
 import unFullScreenIcon from './icon--unfullscreen.svg';
 
 import scratchLogo from '../menu-bar/scratch-logo.svg';
@@ -33,6 +34,11 @@ const messages = defineMessages({
         description: 'Button to change stage size to small',
         id: 'gui.stageHeader.stageSizeSmall'
     },
+    middleStageSizeMessage: {
+        defaultMessage: 'Switch to middle stage',
+        description: 'Button to change stage size to middle',
+        id: 'gui.stageHeader.stageSizeMiddle'
+    },
     fullStageSizeMessage: {
         defaultMessage: 'Enter full screen mode',
         description: 'Button to change stage size to full screen',
@@ -63,6 +69,7 @@ const StageHeaderComponent = function (props) {
         onKeyPress,
         onSetStageLarge,
         onSetStageSmall,
+        onSetStageMiddle,
         onSetStageFull,
         onSetStageUnFull,
         onUpdateProjectThumbnail,
@@ -149,6 +156,13 @@ const StageHeaderComponent = function (props) {
                                 isSelected: stageSizeMode === STAGE_SIZE_MODES.small,
                                 title: intl.formatMessage(messages.smallStageSizeMessage)
                             },
+                            {
+                                handleClick: onSetStageMiddle,
+                                icon: middleStageIcon,
+                                iconClassName: styles.stageButtonIcon,
+                                isSelected: stageSizeMode === STAGE_SIZE_MODES.middle,
+                                title: intl.formatMessage(messages.middleStageSizeMessage)
+                            },
                             {
                                 handleClick: onSetStageLarge,
                                 icon: largeStageIcon,
@@ -212,6 +226,7 @@ StageHeaderComponent.propTypes = {
     onSetStageFull: PropTypes.func.isRequired,
     onSetStageLarge: PropTypes.func.isRequired,
     onSetStageSmall: PropTypes.func.isRequired,
+    onSetStageMiddle: PropTypes.func.isRequired,
     onSetStageUnFull: PropTypes.func.isRequired,
     onUpdateProjectThumbnail: PropTypes.func,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

packages/scratch-gui/src/containers/stage-header.jsx

@@ -61,6 +61,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
     onSetStageLarge: () => dispatch(setStageSize(STAGE_SIZE_MODES.large)),
     onSetStageSmall: () => dispatch(setStageSize(STAGE_SIZE_MODES.small)),
+    onSetStageMiddle: () => dispatch(setStageSize(STAGE_SIZE_MODES.middle)),
     onSetStageFull: () => dispatch(setFullScreen(true)),
     onSetStageUnFull: () => dispatch(setFullScreen(false))
 });

packages/scratch-gui/src/lib/layout-constants.js

@@ -13,7 +13,12 @@ const STAGE_SIZE_MODES = keyMirror({
     /**
      * The "small stage" button is pressed; the user would like a small stage.
      */
-    small: null
+    small: null,
+
+    /**
+     * The "middle stage" button is pressed; the user would like a middle stage.
+     */
+    middle: null
 });
 
 /**
@@ -34,7 +39,12 @@ const STAGE_DISPLAY_SIZES = keyMirror({
     /**
      * Small stage (ignores browser width)
      */
-    small: null
+    small: null,
+
+    /**
+     * Middle stage
+     */
+    middle: null
 });
 
 // zoom level to start with
@@ -44,6 +54,7 @@ const STAGE_DISPLAY_SCALES = {};
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.large] = 1; // large mode, wide browser (standard)
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.largeConstrained] = 0.85; // large mode but narrow browser
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.small] = 0.5; // small mode, regardless of browser size
+STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.middle] = 0.75; // middle mode, regardless of browser size
 
 export default {
     standardStageWidth: 480,

packages/scratch-gui/src/lib/screen-utils.js

@@ -29,6 +29,9 @@ const resolveStageSize = (stageSizeMode, isFullSize) => {
     if (stageSizeMode === STAGE_SIZE_MODES.small) {
         return STAGE_DISPLAY_SIZES.small;
     }
+    if (stageSizeMode === STAGE_SIZE_MODES.middle) {
+        return STAGE_DISPLAY_SIZES.middle;
+    }
     if (isFullSize) {
         return STAGE_DISPLAY_SIZES.large;
     }

packages/scratch-gui/src/locales/en.js

@@ -216,5 +216,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'Copied!',
     'gui.connection.networkFiltered.copyButton': 'Copy to clipboard',
     'gui.connection.networkFiltered.tryagainbutton': 'Try again',
-    'gui.connection.networkFiltered.useLegacyMeshButton': 'Use legacy mesh'
+    'gui.connection.networkFiltered.useLegacyMeshButton': 'Use legacy mesh',
+    'gui.stageHeader.stageSizeMiddle': 'Switch to middle stage'
 };

packages/scratch-gui/src/locales/ja-Hira.js

@@ -272,5 +272,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'コピーしました！',
     'gui.connection.networkFiltered.copyButton': 'クリップボードにコピー',
     'gui.connection.networkFiltered.tryagainbutton': 'もういちどためす',
-    'gui.connection.networkFiltered.useLegacyMeshButton': 'じゅうらいのメッシュをつかう'
+    'gui.connection.networkFiltered.useLegacyMeshButton': 'じゅうらいのメッシュをつかう',
+    'gui.stageHeader.stageSizeMiddle': 'ちゅうサイズのステージにきりかえる'
 };

packages/scratch-gui/src/locales/ja.js

@@ -272,5 +272,6 @@ export default {
     'gui.connection.networkFiltered.copied': 'コピーしました！',
     'gui.connection.networkFiltered.copyButton': 'クリップボードにコピー',
     'gui.connection.networkFiltered.tryagainbutton': 'もう一度試す',
-    'gui.connection.networkFiltered.useLegacyMeshButton': '従来のメッシュを使う'
+    'gui.connection.networkFiltered.useLegacyMeshButton': '従来のメッシュを使う',
+    'gui.stageHeader.stageSizeMiddle': '中サイズのステージに切り替える'
 };

packages/scratch-gui/src/playground/index.css

@@ -8,7 +8,7 @@ body,
 
     /* Setting min height/width makes the UI scroll below those sizes */
     min-width: 1024px;
-    min-height: 640px; /* Min height to fit sprite/backdrop button */
+    min-height: 600px; /* Min height to fit sprite/backdrop button */
 }
 
 /* @todo: move globally? Safe / side FX, for blocks particularly? */

packages/scratch-gui/src/reducers/stage-size.js

@@ -3,7 +3,7 @@ import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants.js';
 const SET_STAGE_SIZE = 'scratch-gui/StageSize/SET_STAGE_SIZE';
 
 const initialState = {
-    stageSize: STAGE_DISPLAY_SIZES.large
+    stageSize: STAGE_DISPLAY_SIZES.middle
 };
 
 const reducer = function (state, action) {

packages/scratch-gui/test/unit/lib/layout-constants.test.js

@@ -0,0 +1,21 @@
+import {
+    STAGE_SIZE_MODES,
+    STAGE_DISPLAY_SIZES,
+    STAGE_DISPLAY_SCALES
+} from '../../../src/lib/layout-constants';
+
+describe('Layout Constants', () => {
+    test('STAGE_SIZE_MODES includes middle', () => {
+        expect(STAGE_SIZE_MODES.middle).toBe('middle');
+    });
+
+    test('STAGE_DISPLAY_SIZES includes middle', () => {
+        expect(STAGE_DISPLAY_SIZES.middle).toBe('middle');
+    });
+
+    test('STAGE_DISPLAY_SCALES includes middle', () => {
+        // We need to make sure we are accessing the property after it is defined.
+        // Since we are testing if it exists, using the string key is safer for the test setup if the constant isn't there yet.
+        expect(STAGE_DISPLAY_SCALES.middle).toBe(0.75);
+    });
+});

packages/scratch-gui/test/unit/lib/screen-utils.test.js

@@ -0,0 +1,30 @@
+import {
+    resolveStageSize,
+    getStageDimensions
+} from '../../../src/lib/screen-utils';
+import layout from '../../../src/lib/layout-constants';
+
+describe('resolveStageSize', () => {
+    test('returns middle display size when mode is middle', () => {
+        const mode = 'middle'; 
+        const size = resolveStageSize(mode, false);
+        expect(size).toBe('middle'); 
+    });
+});
+
+describe('getStageDimensions', () => {
+    test('returns correct dimensions for middle size', () => {
+        const size = 'middle';
+        // Mocking STAGE_DISPLAY_SCALES locally if needed, but getStageDimensions imports it.
+        // We expect the implementation to use the constant.
+
+        // Since getStageDimensions uses STAGE_DISPLAY_SCALES from layout-constants, 
+        // and we can't easily mock that internal dependency without complex jest setup or rewire,
+        // we will rely on the fact that we will update layout-constants.
+
+        const dimensions = getStageDimensions(size, false);
+        expect(dimensions.width).toBe(360);
+        expect(dimensions.height).toBe(270);
+        expect(dimensions.scale).toBe(0.75);
+    });
+});

packages/scratch-gui/test/unit/reducers/stage-size-reducer.test.js

@@ -0,0 +1,17 @@
+import stageSizeReducer, {
+    stageSizeInitialState as initialState,
+    setStageSize
+} from '../../../src/reducers/stage-size';
+
+describe('stageSizeReducer', () => {
+    // This test checks for the new default state (Phase 3)
+    test('initial state is middle', () => {
+        expect(initialState.stageSize).toBe('middle');
+    });
+
+    test('handles setStageSize action for middle', () => {
+        const action = setStageSize('middle');
+        const state = stageSizeReducer(initialState, action);
+        expect(state.stageSize).toBe('middle');
+    });
+});