Add easy mode

package.json

@@ -57,7 +57,8 @@
     "remark-gfm": "^3.0.1",
     "styled-components": "^4.4.1",
     "uuid": "^8.3.1",
-    "watchpack": "^2.3.1"
+    "watchpack": "^2.3.1",
+    "zustand": "3"
   },
   "resolutions": {
     "//": "See https://github.com/facebook/create-react-app/issues/11773",

src/App.css

@@ -1,3 +1,8 @@
+.blocklyLabelBig {
+  font-size: 10.5em;
+  font-weight: bold;
+}
+
 .wrapper {
   min-height: calc(
     100vh - 60px

src/App.jsx

@@ -7,7 +7,6 @@ import { Provider } from "react-redux";
 import store from "./store";
 import { loadUser } from "./actions/authActions";
 import ErrorBoundary from "./components/ErrorBoundary";
-
 import "./App.css";
 
 import {
@@ -18,6 +17,7 @@ import {
 
 import Content from "./components/Content";
 import { setCompiler } from "./actions/generalActions";
+import { useLevelStore } from "./store/useLevelStore";
 
 const theme = createTheme({
   palette: {
@@ -47,6 +47,16 @@ class App extends Component {
     // set initial compiler
     console.log("compiler", import.meta.env.VITE_INITIAL_COMPILER_URL);
     store.dispatch(setCompiler(import.meta.env.VITE_INITIAL_COMPILER_URL));
+
+    const params = new URLSearchParams(window.location.search);
+    const lvl = params.get("level");
+    if (lvl !== null) {
+      const n = parseInt(lvl, 10);
+      if (!isNaN(n) && [1, 2, 3, 4].includes(n)) {
+        // setLevel im Zustand-Store aufrufen
+        useLevelStore.getState().setLevel(n);
+      }
+    }
   }
 
   render() {

src/components/Blockly/BlocklyComponent.jsx

@@ -16,8 +16,11 @@ import {
 } from "@blockly/plugin-scroll-options";
 
 import { PositionedMinimap } from "@blockly/workspace-minimap";
+import LevelSelector from "./LevelSelector";
+import { useLevelStore } from "../../store/useLevelStore";
 
 class BlocklyComponent extends React.Component {
+  level = 0;
   constructor(props) {
     super(props);
     this.blocklyDiv = React.createRef();

src/components/Blockly/LevelSelector.tsx

@@ -0,0 +1,110 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, IconButton } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useLevelStore } from "../../store/useLevelStore";
+import MenuItem from "@mui/material/MenuItem";
+import Menu from "@mui/material/Menu";
+import { faCaretDown, faLevelUp } from "@fortawesome/free-solid-svg-icons";
+
+interface LevelSelectorProps {}
+
+const LevelSelector: React.FC<LevelSelectorProps> = ({}) => {
+  const selectedLevel = useLevelStore((state) => state.level);
+  const setLevel = useLevelStore((state) => state.setLevel);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleSelect = (level: number) => {
+    setLevel(level);
+    handleClose();
+  };
+
+  useEffect(() => {
+    console.log("Selected level changed:", selectedLevel);
+  }, [selectedLevel]);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div style={{ padding: "12px" }}>
+      <Button
+        style={{
+          textTransform: "none",
+          cursor: "pointer",
+          alignItems: "center",
+          alignContent: "center",
+          background: "transparent",
+          color: "inherit",
+          fontWeight: "bold",
+          border: "2px solid white",
+          borderRadius: "25px",
+        }}
+        id="level-button"
+        aria-controls={Boolean(anchorEl) ? "level-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={Boolean(anchorEl) ? "true" : undefined}
+        onClick={(event) => {
+          handleSelect(selectedLevel);
+          setAnchorEl(event.currentTarget);
+        }}
+        variant="contained"
+        color="primary"
+        startIcon={<FontAwesomeIcon icon={faLevelUp} />}
+        endIcon={<FontAwesomeIcon icon={faCaretDown} />}
+      >
+        Level {selectedLevel}
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() => handleSelect(1)}>
+          <FontAwesomeIcon icon="level-up-alt" />
+          Level 1
+        </MenuItem>
+        <MenuItem onClick={() => handleSelect(2)}>
+          <FontAwesomeIcon icon="level-up-alt" />
+          Level 2
+        </MenuItem>
+        <MenuItem onClick={() => handleSelect(3)}>
+          <FontAwesomeIcon icon="level-up-alt" />
+          Level 3
+        </MenuItem>
+        <MenuItem onClick={() => handleSelect(4)}>
+          <FontAwesomeIcon icon="level-up-alt" />
+          Level 4
+        </MenuItem>
+      </Menu>{" "}
+      {/* {[1, 2, 3].map((level) => (
+        <IconButton
+          key={level}
+          onClick={() => handleSelect(level)}
+          style={{
+            padding: "8px 16px",
+            background: selectedLevel === level ? "#1976d2" : "#e0e0e0",
+            color: selectedLevel === level ? "#fff" : "#000",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontWeight: selectedLevel === level ? "bold" : "normal",
+          }}
+        >
+          {level}
+        </IconButton>
+      ))} */}
+    </div>
+  );
+};
+
+export default LevelSelector;

src/components/Blockly/blocks/sensebox-display.js

@@ -88,6 +88,25 @@ Blockly.Blocks["sensebox_display_printDisplay"] = {
   LOOP_TYPES: ["sensebox_display_show"],
 };
 
+Blockly.Blocks["sensebox_display_printEasy"] = {
+  init: function (block) {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(
+      new Blockly.FieldImage(
+        "https://cdn-icons-png.flaticon.com/512/833/833313.png",
+        30,
+        30,
+      ),
+    );
+
+    this.appendValueInput("printDisplay").setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
+};
+
 Blockly.Blocks["sensebox_display_fastPrint"] = {
   init: function (block) {
     this.setColour(getColour().sensebox);

src/components/Blockly/blocks/sensebox-led.js

@@ -107,13 +107,64 @@ Blockly.Blocks["sensebox_ws2818_led"] = {
     this.setTooltip(Blockly.Msg.senseBox_ws2818_rgb_led_tooltip);
     if (selectedBoard().title === "MCU-S2") {
       this.setHelpUrl(Blockly.Msg.senseBox_ws2818_rgb_led_helpurl);
-    }
-    else {
+    } else {
       this.setHelpUrl(Blockly.Msg.senseBox_ws2818_rgb_led_helpurl_2);
     }
   },
 };
 
+Blockly.Blocks["sensebox_ws2818_led_red"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+
+    this.appendDummyInput().appendField(
+      new Blockly.FieldImage("./media/blockly/redLed.png", 30, 30, "*"),
+      "IMAGE",
+    );
+  },
+};
+
+Blockly.Blocks["sensebox_ws2818_led_yellow"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+
+    this.appendDummyInput().appendField(
+      new Blockly.FieldImage("./media/blockly/yellowLed.png", 30, 30, "*"),
+      "IMAGE",
+    );
+  },
+};
+
+Blockly.Blocks["sensebox_ws2818_led_blue"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+
+    this.appendDummyInput().appendField(
+      new Blockly.FieldImage("./media/blockly/blueLed.png", 30, 30, "*"),
+      "IMAGE",
+    );
+  },
+};
+
+Blockly.Blocks["sensebox_ws2818_led_off"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+
+    this.appendDummyInput().appendField(
+      new Blockly.FieldImage("./media/blockly/offLed.png", 30, 30, "*"),
+      "IMAGE",
+    );
+  },
+};
+
 Blockly.defineBlocksWithJsonArray([
   // BEGIN JSON EXTRACT
   // Block for colour picker.
@@ -262,8 +313,6 @@ Blockly.Blocks["sensebox_ws2812_matrix_text"] = {
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_print_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
-
-
   },
 };
 
@@ -293,7 +342,6 @@ Blockly.Blocks["sensebox_ws2812_matrix_drawPixel"] = {
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_draw_pixel_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
-
   },
 };
 
@@ -311,7 +359,6 @@ Blockly.Blocks["sensebox_ws2812_matrix_clear"] = {
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_clear_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
-
   },
 };
 
@@ -332,7 +379,6 @@ Blockly.Blocks["sensebox_ws2812_matrix_showBitmap"] = {
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_show_bitmap_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
-
   },
 };
 
@@ -358,7 +404,6 @@ Blockly.Blocks["sensebox_ws2812_matrix_bitmap"] = {
     this.setOutput(true, Types.BITMAP.typeName);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_bitmap_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
-
   },
 };
 
@@ -902,7 +947,6 @@ Blockly.defineBlocksWithJsonArray([
     colour: getColour().sensebox,
     tooltip: Blockly.Msg.senseBox_ws2812_rgb_matrix_draw_bitmap_tooltip,
     helpUrl: Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl,
-
   },
 ]);