Upgraded package dependencies.

Refactored `styles` definition to only import relevant module styles.
Added additional example bg and floor images.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-with-chrome",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "description": "Educational Coding Development Environment",
   "repository": {
     "type": "git",
@@ -13,88 +13,88 @@
   },
   "homepage": "https://google.github.io/coding-with-chrome/",
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
     "@babel/node": "^7.23.9",
-    "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/plugin-syntax-jsx": "^7.24.1",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
     "@babel/register": "^7.23.7",
     "@codemirror/commands": "^6.3.3",
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/state": "^6.4.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
     "@lhci/cli": "^0.13.0",
-    "@mui/icons-material": "^5.15.12",
-    "@mui/material": "^5.15.12",
-    "@mui/styled-engine": "^5.15.11",
-    "@playwright/test": "^1.41.2",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@mui/styled-engine": "^5.15.14",
+    "@playwright/test": "^1.42.1",
     "@svgr/webpack": "^8.1.0",
-    "@types/react": "^18.2.60",
+    "@types/react": "^18.2.75",
     "@types/serviceworker-webpack-plugin": "^1.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "@uiw/react-codemirror": "^4.21.24",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@uiw/react-codemirror": "^4.21.25",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.10.0",
+    "css-loader": "^7.1.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
-    "emoji-picker-react": "^4.8.0",
+    "emoji-picker-react": "^4.9.2",
     "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.34.1",
     "file-loader": "^6.2.0",
     "gh-pages": "^6.1.1",
     "html-minimizer-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.6.0",
-    "i18next": "^23.10.0",
-    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "^2.5.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
     "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
     "karma-cli": "^2.0.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-firefox-launcher": "^2.1.2",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "^5.1.0",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webkit-launcher": "^2.4.0",
     "karma-webpack": "^5.0.1",
     "material-icons": "^1.13.12",
-    "mini-css-extract-plugin": "^2.8.0",
-    "npm": "^10.4.0",
+    "mini-css-extract-plugin": "^2.8.1",
+    "npm": "^10.5.1",
     "phaser": "^3.80.1",
-    "playwright": "^1.41.2",
+    "playwright": "^1.42.1",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-blockly": "^8.1.1",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.5",
+    "react-i18next": "^14.1.0",
     "react-mosaic-component": "^6.1.0",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.3",
     "react-winbox": "^1.5.0",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
-    "style-loader": "^3.3.4",
+    "style-loader": "^4.0.0",
     "styled-components": "^6.1.8",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.4",
     "uglify-js": "^3.17.4",
     "url-loader": "^4.1.1",
     "uuid": "^9.0.1",
-    "webpack": "^5.90.3",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.0",
+    "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^5.10.0",
     "xterm": "^5.3.0"
   },
@@ -119,6 +119,7 @@
     "test:units:fs": "karma start test/unit_tests/fs.conf",
     "test:units:kernel": "karma start test/unit_tests/kernel.conf",
     "test:units:utils": "karma start test/unit_tests/utils.conf",
+    "pretest:units": "npx playwright install-deps && npx playwright install",
     "== Build Definitions ==": "",
     "build": "webpack --config build/webpack.config.prod.babel.js",
     "build:dev": "webpack --config build/webpack.config.dev.babel.js",

src/components/Assets/Assets.js

@@ -35,7 +35,7 @@ import i18next from '../App/i18next';
 
 import { Toolbar, ToolbarIconButton } from '../Toolbar';
 
-import styles from './style.module.css';
+import { contentWrapper, dragZone, dragZoneActive } from './style.module.css';
 
 /**
  *
@@ -228,13 +228,9 @@ export class Assets extends React.PureComponent {
               {i18next.t('ASSETS')}
             </Typography>
           </Toolbar>
-          <Box className={styles.contentWrapper}>
+          <Box className={contentWrapper}>
             <Box
-              className={
-                this.state.isDraggingOver
-                  ? styles.drag_zone_active
-                  : styles.drag_zone
-              }
+              className={this.state.isDraggingOver ? dragZoneActive : dragZone}
               onDragEnter={this.handleDragEnter.bind(this)}
               onDragLeave={this.handleDragLeave.bind(this)}
               onDragOver={this.handleDragOver.bind(this)}

src/components/Assets/style.module.css

@@ -21,11 +21,11 @@
   overflow: hidden;
 }
 
-.drag_zone, .drag_zone_active {
+.dragZone, .dragZoneActive {
  border: 2px dashed #aaa;
  height: 100%;
 }
 
-.drag_zone_active {
+.dragZoneActive {
   border: 2px dashed #faa;
 }

src/components/BlockEditor/BlockEditor.js

@@ -42,7 +42,7 @@ const CodeEditor = lazy(() => import('../CodeEditor/CodeEditor'));
 
 import 'material-icons/iconfont/filled.css';
 import 'material-icons/iconfont/outlined.css';
-import styles from './style.module.css';
+import { fillScreen, fillWindow } from './style.module.css';
 import './style.global.css';
 import { DataURL } from '../../utils/file/DataURL';
 
@@ -711,7 +711,7 @@ export class BlockEditor extends React.PureComponent {
           )}
           <Box>
             <BlocklyWorkspace
-              className={this.props.windowId ? styles.fillWindow : styles.fill}
+              className={this.props.windowId ? fillWindow : fillScreen}
               toolboxConfiguration={this.props.toolbox || this.state.toolbox}
               workspaceConfiguration={this.state.config}
               initialXml={''}

src/components/BlockEditor/BlockEditorToolbar.js

@@ -64,7 +64,7 @@ import SettingScreen from '../Settings/SettingScreen';
 // Lazy load components
 const ConfirmDialog = lazy(() => import('../Dialogs/ConfirmDialog'));
 
-import styles from './style.module.css';
+import { drawerMiddle, drawerBottom } from './style.module.css';
 
 /**
  *
@@ -387,7 +387,7 @@ export class BlockEditorToolbar extends React.PureComponent {
               </Typography>
             </CardContent>
           </Card>
-          <MenuList sx={{ minWidth: '250px' }} className={styles.drawerMiddle}>
+          <MenuList sx={{ minWidth: '250px' }} className={drawerMiddle}>
             {this.props.onNewProject && (
               <MenuItem onClick={this.handleNewProject.bind(this)}>
                 <ListItemIcon>
@@ -433,7 +433,7 @@ export class BlockEditorToolbar extends React.PureComponent {
           <BottomNavigation
             showLabels
             color="primary"
-            className={styles.drawerBottom}
+            className={drawerBottom}
             sx={{ boxShadow: 3 }}
           >
             <BottomNavigationAction label="About" icon={<InfoIcon />} />

src/components/BlockEditor/style.module.css

@@ -30,7 +30,7 @@
   height: 0 !important;
 }
 
-.fill {
+.fillScreen {
   height: calc(100vh - 42px);
 }
 

src/components/CodeEditor/CodeEditor.js

@@ -39,7 +39,7 @@ import { LanguageType } from './LanguageType';
 import { PreviewService } from '../../service-worker/preview-service-worker';
 import { WindowEventTarget } from '../Desktop/WindowManager/Events';
 
-import styles from './style.module.css';
+import { infobar } from './style.module.css';
 
 /**
  *
@@ -275,7 +275,7 @@ export class CodeEditor extends React.PureComponent {
               onChange={this.onChange.bind(this)}
             />
           )}
-          <Box className={styles.infobar} ref={this.infobar}>
+          <Box className={infobar} ref={this.infobar}>
             Content Type: {this.state.language}
           </Box>
           <Snackbar

src/components/CodeEditor/CodeEditorToolbar.js

@@ -60,7 +60,7 @@ import SettingScreen from '../Settings/SettingScreen';
 
 const ConfirmDialog = lazy(() => import('../Dialogs/ConfirmDialog'));
 
-import styles from './style.module.css';
+import {} from './style.module.css';
 
 /**
  *
@@ -359,7 +359,7 @@ export class CodeEditorToolbar extends React.PureComponent {
               </Typography>
             </CardContent>
           </Card>
-          <MenuList sx={{ minWidth: '250px' }} className={styles.drawerMiddle}>
+          <MenuList sx={{ minWidth: '250px' }}>
             {this.props.onNewProject && (
               <MenuItem onClick={this.handleNewProject.bind(this)}>
                 <ListItemIcon>
@@ -396,12 +396,7 @@ export class CodeEditorToolbar extends React.PureComponent {
               <ListItemText>{i18next.t('EXPORT_PROJECT')}</ListItemText>
             </MenuItem>
           </MenuList>
-          <BottomNavigation
-            showLabels
-            color="primary"
-            className={styles.drawerBottom}
-            sx={{ boxShadow: 3 }}
-          >
+          <BottomNavigation showLabels color="primary" sx={{ boxShadow: 3 }}>
             <BottomNavigationAction label="About" icon={<InfoIcon />} />
             <BottomNavigationAction
               label="Settings"

src/components/Desktop/Desktop.js

@@ -26,7 +26,7 @@ import { Launcher } from './Launcher';
 
 const WindowManager = lazy(() => import('./WindowManager'));
 
-import styles from './style.module.css';
+import { desktop } from './style.module.css';
 
 // Load kernel
 import('./../../kernel/Kernel').then((module) => {
@@ -43,7 +43,7 @@ export class DesktopApp extends React.PureComponent {
   render() {
     return (
       <React.StrictMode>
-        <div className={styles.desktop}>
+        <div className={desktop}>
           <Panel />
           <Launcher />
           <WindowManager />

src/components/Desktop/Launcher/index.js

@@ -34,7 +34,7 @@ import Tooltip from '@mui/material/Tooltip';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 
-import styles from './style.module.css';
+import { launcher, expandArea } from './style.module.css';
 
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 import { WindowCloseEvent } from '../WindowManager/Events';
@@ -168,9 +168,7 @@ export class Launcher extends React.PureComponent {
       <React.StrictMode>
         <Paper
           elevation={3}
-          className={`${styles.launcher} ${
-            this.state.launcher ? 'show' : 'hide'
-          }`}
+          className={`${launcher} ${this.state.launcher ? 'show' : 'hide'}`}
         >
           <IconButton
             edge="start"
@@ -235,10 +233,7 @@ export class Launcher extends React.PureComponent {
               <TerminalIcon />
             </IconButton>
           </Tooltip>
-          <div
-            className={styles.expandArea}
-            onClick={this.handleLauncherToggle}
-          >
+          <div className={expandArea} onClick={this.handleLauncherToggle}>
             {this.state.launcher ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
           </div>
         </Paper>

src/components/Desktop/Panel/index.js

@@ -27,7 +27,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import i18next from 'i18next';
 
-import styles from './style.module.css';
+import { toolbar, title } from './style.module.css';
 import { APP_SUPPORTED_LANGUAGES } from '../../../constants';
 
 /**
@@ -60,8 +60,8 @@ export class Panel extends React.PureComponent {
     return (
       <React.StrictMode>
         <AppBar position="static">
-          <Toolbar className={styles.toolbar}>
-            <Typography variant="h6" className={styles.title}>
+          <Toolbar className={toolbar}>
+            <Typography variant="h6" className={title}>
               Coding with Chrome
             </Typography>
             {Object.keys(this.languages).map((language) => (

src/components/GameEditor/GameEditor.js

@@ -50,7 +50,7 @@ const Preview = lazy(() => import('../Preview'));
 const Screenshot = lazy(() => import('../Screenshot'));
 
 import 'react-mosaic-component/react-mosaic-component.css';
-import styles from './style.module.css';
+import { layout } from './style.module.css';
 import './style.global.css';
 import { BlocksBuilder } from '../BlockEditor/blocks/BlocksBuilder';
 import GameEditorSettings from '../Settings/GameEditorSettings';
@@ -544,7 +544,7 @@ export class GameEditor extends React.PureComponent {
     return (
       <React.StrictMode>
         {this.state.isLoaded && (
-          <Box className={styles.layout}>
+          <Box className={layout}>
             <Mosaic
               renderTile={(id) => this.getLayout()[id]}
               onChange={this.handleMosaicOnChange.bind(this)}

src/components/GameEditor/toolbox/ExampleFilesToolbox.js

@@ -36,6 +36,7 @@ const floorImageBlocks = BlocksHelper.phaserImagesToBlock([
   ['50px_blue', APP_BASE_PATH + 'assets/phaser/samples/50px_blue.png'],
   ['50px_green', APP_BASE_PATH + 'assets/phaser/samples/50px_green.png'],
   ['50px_red', APP_BASE_PATH + 'assets/phaser/samples/50px_red.png'],
+  ['floor_01', APP_BASE_PATH + 'assets/phaser/samples/floor/floor_01.png'],
 ]);
 
 // Ceiling images.
@@ -49,6 +50,8 @@ const ceilingImageBlocks = BlocksHelper.phaserImagesToBlock([
 const backgroundImageBlocks = BlocksHelper.phaserImagesToBlock([
   ['bg_01', APP_BASE_PATH + 'assets/phaser/samples/bg/bg_01.png'],
   ['bg_02', APP_BASE_PATH + 'assets/phaser/samples/bg/bg_02.png'],
+  ['bg_sky_01', APP_BASE_PATH + 'assets/phaser/samples/bg/bg_sky_01.png'],
+  ['bg_city_01', APP_BASE_PATH + 'assets/phaser/samples/bg/bg_city_01.png'],
 ]);
 
 // Paddle images.