schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix vertical stepper bug

Browse Source
This commit is contained in:
Delucse 2020-10-17 09:47:03 +02:00
parent b310d290cf
commit a0fd63a2ca
15 changed files with 39 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Blockly/BlocklySvg.js
View File

@ -42,7 +42,13 @@ class BlocklySvg extends Component {
// https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328
cssContent += `.blocklyPath {
fill-opacity: 1;
} `;
}
.blocklyPathDark {
display: flex;
}
.blocklyPathLight {
display: flex;
} `;
var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();

2
src/components/Tutorial/Builder/Hardware.js
View File

@ -15,7 +15,7 @@ import FormLabel from '@material-ui/core/FormLabel';
const styles = theme => ({
multiGridListTile: {
background: "#4EAF47",
background: theme.palette.primary.main,
opacity: 0.9,
height: '30px'
},

4
src/components/Tutorial/Hardware.js
View File

@ -27,7 +27,7 @@ const styles = theme => ({
color: theme.palette.text.primary
},
multiGridListTile: {
background: "#4EAF47",
background: theme.palette.primary.main,
opacity: 0.9,
height: '30px'
},
@ -95,7 +95,7 @@ class Hardware extends Component {
>
<div>
<img src={`/media/hardware/${this.state.hardwareInfo.src}`} width="100%" alt={this.state.hardwareInfo.name} />
Weitere Informationen zur Hardware-Komponente findest du <Link href={this.state.hardwareInfo.url} color="primary">hier</Link>.
Weitere Informationen zur Hardware-Komponente findest du <Link rel="noreferrer" target="_blank" href={this.state.hardwareInfo.url} color="primary">hier</Link>.
</div>
</Dialog>

15
src/components/Tutorial/StepperHorizontal.js
View File

@ -51,6 +51,7 @@ class StepperHorizontal extends Component {
render() {
var tutorialId = this.props.currentTutorialId;
var tutorialIndex = this.props.currentTutorialIndex;
var status = this.props.status.filter(status => status.id === tutorialId)[0];
var tasks = status.tasks;
var error = tasks.filter(task => task.type === 'error').length > 0;
@ -69,8 +70,8 @@ class StepperHorizontal extends Component {
: null}
<div className={this.props.classes.stepper}>
<Button
disabled={tutorialId === 1}
onClick={() => { this.props.history.push(`/tutorial/${tutorialId - 1}`) }}
disabled={tutorialIndex === 0}
onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
>
{'<'}
</Button>
@ -81,8 +82,8 @@ class StepperHorizontal extends Component {
</div>
</Tooltip>
<Button
disabled={tutorialId + 1 > tutorials.length}
onClick={() => { this.props.history.push(`/tutorial/${tutorialId + 1}`) }}
disabled={tutorialIndex + 1 === tutorials.length}
onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
>
{'>'}
</Button>
@ -95,13 +96,15 @@ class StepperHorizontal extends Component {
StepperHorizontal.propTypes = {
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
currentTutorialId: PropTypes.number.isRequired
currentTutorialId: PropTypes.number.isRequired,
currentTutorialIndex: PropTypes.number.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
currentTutorialId: state.tutorial.currentId
currentTutorialId: state.tutorial.currentId,
currentTutorialIndex: state.tutorial.currentIndex
});
export default connect(mapStateToProps, null)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));

8
src/components/WorkspaceFunc.js
View File

@ -106,7 +106,13 @@ class WorkspaceFunc extends Component {
// https://github.com/google/blockly/pull/3431/files#diff-00254795773903d3c0430915a68c9521R328
cssContent += `.blocklyPath {
fill-opacity: 1;
} `;
}
.blocklyPathDark {
display: flex;
}
.blocklyPathLight {
display: flex;
} `;
var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';

44
src/data/Wenn-DannBedingungen.json
View File

@ -1,44 +0,0 @@
{
"id": 1602160884767,
"title": "Wenn-Dann Bedingungen",
"steps": [
{
"id": 1,
"type": "instruction",
"headline": "Wenn-Dann-Was?",
"text": "In diesem Tutorial lernst du die Verwendung von Wenn-Dann Bedingungen kennen. Die Wenn-Dann Bedingung ist eine der wichtigsten Kontrollstrukturen in der Programmierung und hilft dir dabei auf bestimmte Zustände einzugehen. ",
"hardware": [
"senseboxmcu",
"breadboard",
"jst-adapter",
"resistor-470ohm"
],
"requirements": [
1602160534286
]
},
{
"id": 2,
"type": "instruction",
"headline": "Aufbau der Hardware",
"text": "Verbinde die LED mit Hilfe des JST-Adapter Kabel und dem 470 Ohm Widerstand mit einem der 3 digital/analog Ports der senseBox MCU. ",
"media": {
"picture": "01_circuit.png"
}
},
{
"id": 3,
"type": "instruction",
"headline": "Die Wenn-Dann Bedingung",
"text": "Eine Wenn-Dann Bedingung kann dazu verwendet werden bestimmten Zeilen Code auszuführen, wenn eine bestimmte Bedingung erfüllt ist. \n\nwenn Bedingung dann\n Anweisung(en)\nende\n\nDas Beispiel unten zeigt dir wie eine Wenn-Dann Bedingung aufgebaut ist. Es kann zum Beispiel die Temperatur mit einem Wert verglichen werden. Ist dieser Vergleich wahr (true), dann werden die Blöcke ausgeführt, die neben \"dann\" stehen ausgeführt. Ist die Bedingung nicht erfüllt (false) dann wird einfach der Programmcode unterhalb der Wenn-Dann Bedingung ausgeführt.\n",
"xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n <statement name=\"LOOP_FUNC\">\n <block type=\"controls_if\" id=\"yu|L-MD~uP9vg@9F}Lu(\">\n <value name=\"IF0\">\n <block type=\"logic_compare\" id=\"~P6$8C+4++}u[iIr#%2-\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_sensor_temp_hum\" id=\"Wy!eu6l0F#5ST~!$T*^W\">\n <field name=\"NAME\">Temperature</field>\n </block>\n </value>\n </block>\n </value>\n </block>\n </statement>\n </block>\n <block type=\"math_number\" id=\"n1maf$o[.I3`ce3D}]/q\" x=\"644\" y=\"180\">\n <field name=\"NUM\">0</field>\n </block>\n</xml>"
},
{
"id": 4,
"type": "task",
"headline": "Leuchten der LED auf Knopfdruck",
"text": "Lasse die LED leuchten, wenn der \"Button\" auf der senseBox MCU gedrückt wird. Den Block für den Button findest du unter \"Sensoren\".",
"xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n <statement name=\"LOOP_FUNC\">\n <block type=\"controls_if\" id=\"^HaPX`(}uMFuMD~k1ao9\">\n <mutation elseif=\"1\"></mutation>\n <value name=\"IF0\">\n <block type=\"logic_compare\" id=\"|1,]aWRGs/Wp0}YQ{Ln{\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_button\" id=\",@aRkh3M9K(DcYP$A(:[\">\n <field name=\"FUNCTION\">isPressed</field>\n <field name=\"PIN\">0</field>\n </block>\n </value>\n <value name=\"B\">\n <block type=\"logic_boolean\" id=\"ZjXsPgomX!cIM8bll!9;\">\n <field name=\"BOOL\">TRUE</field>\n </block>\n </value>\n </block>\n </value>\n <statement name=\"DO0\">\n <block type=\"sensebox_led\" id=\"fTE4,Kwz5s8uHaE/k:!h\">\n <field name=\"PIN\">1</field>\n <field name=\"STAT\">HIGH</field>\n </block>\n </statement>\n <value name=\"IF1\">\n <block type=\"logic_compare\" id=\"v6U9{L$*?0)r.8qG1$gn\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_button\" id=\"yLypRfX$0DzgPYw8F/q#\">\n <field name=\"FUNCTION\">isPressed</field>\n <field name=\"PIN\">0</field>\n </block>\n </value>\n <value name=\"B\">\n <block type=\"logic_boolean\" id=\"r0c0q~2^GQo7DDjPv1.C\">\n <field name=\"BOOL\">FALSE</field>\n </block>\n </value>\n </block>\n </value>\n <statement name=\"DO1\">\n <block type=\"sensebox_led\" id=\"Zx0)_+JAGfG~b`.fYOIl\">\n <field name=\"PIN\">1</field>\n <field name=\"STAT\">LOW</field>\n </block>\n </statement>\n </block>\n </statement>\n </block>\n</xml>"
}
]
}

2
src/data/hardware.json
View File

@ -7,7 +7,7 @@
},
{
"id": "breadboard",
"name": "Steckboard",
"name": "Breadboard",
"src": "breadboard.png",
"url": "https://sensebox.github.io/books-v2/blockly/de/uebersicht/sensebox_components.html"
},

0
src/data/AnzeigeVonMesswertenAufDemDisplay.json → src/data/tutorial/AnzeigeVonMesswertenAufDemDisplay.json
View File

0
src/data/ErsteSchritte.json → src/data/tutorial/ErsteSchritte.json
View File

1
src/data/tutorial/VerwendungVonVariablen.json Normal file
View File

File diff suppressed because one or more lines are too long

1
src/data/tutorial/Wenn-DannBedingungen.json Normal file
View File

@ -0,0 +1 @@
{"id":1602160884767,"title":"Wenn-Dann Bedingungen","steps":[{"id":1,"type":"instruction","headline":"Wenn-Dann-Was?","text":"In diesem Tutorial lernst du die Verwendung von Wenn-Dann Bedingungen kennen. Die Wenn-Dann Bedingung ist eine der wichtigsten Kontrollstrukturen in der Programmierung und hilft dir dabei auf bestimmte Zustände einzugehen. ","hardware":["senseboxmcu","breadboard","jst-adapter","resistor-470ohm"],"requirements":[1602160534286]},{"id":2,"type":"instruction","headline":"Aufbau der Hardware","text":"Verbinde die LED mit Hilfe des JST-Adapter Kabel und dem 470 Ohm Widerstand mit einem der 3 digital/analog Ports der senseBox MCU. ","media":{"picture":"01_circuit.png"}},{"id":3,"type":"instruction","headline":"Die Wenn-Dann Bedingung","text":"Eine Wenn-Dann Bedingung kann dazu verwendet werden bestimmten Zeilen Code auszuführen, wenn eine bestimmte Bedingung erfüllt ist. \n\nwenn Bedingung dann\n Anweisung(en)\nende\n\nDas Beispiel unten zeigt dir wie eine Wenn-Dann Bedingung aufgebaut ist. Es kann zum Beispiel die Temperatur mit einem Wert verglichen werden. Ist dieser Vergleich wahr (true), dann werden die Blöcke ausgeführt, die neben \"dann\" stehen ausgeführt. Ist die Bedingung nicht erfüllt (false) dann wird einfach der Programmcode unterhalb der Wenn-Dann Bedingung ausgeführt.\n","xml":"<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n <statement name=\"LOOP_FUNC\">\n <block type=\"controls_if\" id=\"yu|L-MD~uP9vg@9F}Lu(\">\n <value name=\"IF0\">\n <block type=\"logic_compare\" id=\"~P6$8C+4++}u[iIr#%2-\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_sensor_temp_hum\" id=\"Wy!eu6l0F#5ST~!$T*^W\">\n <field name=\"NAME\">Temperature</field>\n </block>\n </value>\n <value name=\"B\">\n <block type=\"math_number\" id=\"n1maf$o[.I3`ce3D}]/q\">\n <field name=\"NUM\">0</field>\n </block>\n </value>\n </block>\n </value>\n </block>\n </statement>\n </block>\n</xml>"},{"id":4,"type":"task","headline":"Leuchten der LED auf Knopfdruck","text":"Lasse die LED leuchten, wenn der \"Button\" auf der senseBox MCU gedrückt wird. Den Block für den Button findest du unter \"Sensoren\".","xml":"<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n <statement name=\"LOOP_FUNC\">\n <block type=\"controls_if\" id=\"^HaPX`(}uMFuMD~k1ao9\">\n <mutation elseif=\"1\"></mutation>\n <value name=\"IF0\">\n <block type=\"logic_compare\" id=\"|1,]aWRGs/Wp0}YQ{Ln{\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_button\" id=\",@aRkh3M9K(DcYP$A(:[\">\n <field name=\"FUNCTION\">isPressed</field>\n <field name=\"PIN\">0</field>\n </block>\n </value>\n <value name=\"B\">\n <block type=\"logic_boolean\" id=\"ZjXsPgomX!cIM8bll!9;\">\n <field name=\"BOOL\">TRUE</field>\n </block>\n </value>\n </block>\n </value>\n <statement name=\"DO0\">\n <block type=\"sensebox_led\" id=\"fTE4,Kwz5s8uHaE/k:!h\">\n <field name=\"PIN\">1</field>\n <field name=\"STAT\">HIGH</field>\n </block>\n </statement>\n <value name=\"IF1\">\n <block type=\"logic_compare\" id=\"v6U9{L$*?0)r.8qG1$gn\">\n <field name=\"OP\">EQ</field>\n <value name=\"A\">\n <block type=\"sensebox_button\" id=\"yLypRfX$0DzgPYw8F/q#\">\n <field name=\"FUNCTION\">isPressed</field>\n <field name=\"PIN\">0</field>\n </block>\n </value>\n <value name=\"B\">\n <block type=\"logic_boolean\" id=\"r0c0q~2^GQo7DDjPv1.C\">\n <field name=\"BOOL\">FALSE</field>\n </block>\n </value>\n </block>\n </value>\n <statement name=\"DO1\">\n <block type=\"sensebox_led\" id=\"Zx0)_+JAGfG~b`.fYOIl\">\n <field name=\"PIN\">1</field>\n <field name=\"STAT\">LOW</field>\n </block>\n </statement>\n </block>\n </statement>\n </block>\n</xml>"}]}

0
src/data/loops_01.json → src/data/tutorial/loops_01.json
View File

15
src/data/tutorials.js
View File

@ -1,10 +1,9 @@
let tutorials = [
require('./ErsteSchritte.json'),
require('./loops_01.json'),
require('./Wenn-DannBedingungen.json'),
require('./variablen_01.json'),
require('./AnzeigeVonMesswertenAufDemDisplay.json')
require('./tutorial/ErsteSchritte.json'),
require('./tutorial/loops_01.json'),
require('./tutorial/Wenn-DannBedingungen.json'),
require('./tutorial/VerwendungVonVariablen.json'),
require('./tutorial/AnzeigeVonMesswertenAufDemDisplay.json')
]
module.exports = tutorials;
module.exports = tutorials;

41
src/data/variablen_01.json
View File

@ -1,41 +0,0 @@
{
"id": 1602162172424,
"title": "Verwendung von Variablen",
"steps": [
{
"id": 1,
"type": "instruction",
"headline": "Variablen",
"text": "Variablen, auch Platzhalter genannt, werden in der Informatik für verschiedene Dinge genutzt. Sie sind eine Art Kiste, die mit einem Namen versehen ist. In dieser Kiste kannst du verschiedene Dinge hinterlegen (z.B. Zahlen und Texte) und diese später wieder abrufen. ",
"hardware": [
"senseboxmcu",
"oled",
"jst-jst",
"hdc1080"
],
"requirements": [
1602160534286
]
},
{
"id": 2,
"type": "instruction",
"headline": "Aufbau der Hardware",
"text": "Verbinde das Display und den Temperatur- und Luftfeuchtigkeitssensor jeweils mit einem JST-JST Kabel mit einem der 5 I2C Ports auf der senseBox MCU."
},
{
"id": 3,
"type": "instruction",
"headline": "Variablen in Blockly",
"text": "Variablen können ihren Wert im Laufe des Programmes verändern, sodass du zum Beispiel der Variable „Temperatur“ immer den aktuell gemessenen Temperaturwert zuweist. Eine Variablen besitzt immer einer bestimmten Datentyp. Der Datentyp gibt im Endeffekt an, wie groß die Kiste ist und wie der Wert aussehen kann, der in der Variable gespeichert werden kann. \n\nVariablen - Datentypen\nJe nachdem, was du in einer Variable speichern möchtest, musst du den richten Datentyp auswählen.\nZeichen: Für einzelne Textzeichen\nText: Für ganze Wörter oder Sätze\nZahl: Für Zahlen von -32768 bis +32768\nGroße Zahl: Für Zahlen von -2147483648 bis\n +2147483648\nDezimalzahl: Für Kommazahlen (z.B. 25,3)",
"xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <variables>\n <variable type=\"float\" id=\"s/vc$u-EyvVr.Nj(m}Qu\">Temperatur</variable>\n </variables>\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" x=\"27\" y=\"16\">\n <statement name=\"SETUP_FUNC\">\n <block type=\"sensebox_display_beginDisplay\" id=\"`tj@e,u63(d3fs/K71`A\"></block>\n </statement>\n <statement name=\"LOOP_FUNC\">\n <block type=\"variables_set_dynamic\" id=\"9.`Dj,eU7L15ZD{o2c^{\">\n <field name=\"VAR\" id=\"s/vc$u-EyvVr.Nj(m}Qu\" variabletype=\"float\">Temperatur</field>\n <value name=\"VALUE\">\n <block type=\"sensebox_sensor_temp_hum\" id=\"Ml7-3urP[?9L4k71u5/f\">\n <field name=\"NAME\">Temperature</field>\n </block>\n </value>\n <next>\n <block type=\"sensebox_display_show\" id=\"J[dD~4AnHRXYq3qK5^{z\">\n <statement name=\"SHOW\">\n <block type=\"sensebox_display_printDisplay\" id=\"sg25UA3mp72*zt_.hgR%\">\n <field name=\"COLOR\">WHITE,BLACK</field>\n <field name=\"SIZE\">1</field>\n <field name=\"X\">0</field>\n <field name=\"Y\">0</field>\n </block>\n </statement>\n </block>\n </next>\n </block>\n </statement>\n </block>\n <block type=\"variables_get_dynamic\" id=\"Pi0a=LwOd]Qx1}q[QljS\" x=\"252\" y=\"336\">\n <field name=\"VAR\" id=\"s/vc$u-EyvVr.Nj(m}Qu\" variabletype=\"float\">Temperatur</field>\n </block>\n</xml>"
},
{
"id": 4,
"type": "task",
"headline": "Aufgabe 1:",
"text": "Erste 2 Variablen vom Typ \"Kommazahl\" und weise die Werte für Temperatur und Luftfeuchtigkeit zu. Lasse anschließend den Wert der Variablen auf dem Display anzeigen.",
"xml": "<xml xmlns=\"https://developers.google.com/blockly/xml\">\n <variables>\n <variable type=\"float\" id=\";%_Xz2^W|D@`pj|28,!5\">Temperatur</variable>\n <variable type=\"float\" id=\"[EbZeJmVDy_yf%nn}kg`\">Luftfeuchte</variable>\n </variables>\n <block type=\"arduino_functions\" id=\"QWW|$jB8+*EL;}|#uA\" deletable=\"false\" x=\"27\" y=\"16\">\n <statement name=\"SETUP_FUNC\">\n <block type=\"sensebox_display_beginDisplay\" id=\"#v)|Z-SGAvCfh+tW*u:b\"></block>\n </statement>\n <statement name=\"LOOP_FUNC\">\n <block type=\"variables_set_dynamic\" id=\"4(3O[5o69|]D[1(`OS77\">\n <field name=\"VAR\" id=\";%_Xz2^W|D@`pj|28,!5\" variabletype=\"float\">Temperatur</field>\n <value name=\"VALUE\">\n <block type=\"sensebox_sensor_temp_hum\" id=\"lqo)Q_WfPH/)#n?Kejw9\">\n <field name=\"NAME\">Temperature</field>\n </block>\n </value>\n <next>\n <block type=\"variables_set_dynamic\" id=\"wZ([1QpBf,W-+ML8$yE^\">\n <field name=\"VAR\" id=\"[EbZeJmVDy_yf%nn}kg`\" variabletype=\"float\">Luftfeuchte</field>\n <value name=\"VALUE\">\n <block type=\"sensebox_sensor_temp_hum\" id=\"N@rK(BhH:*:,7?gd0znv\">\n <field name=\"NAME\">Temperature</field>\n </block>\n </value>\n <next>\n <block type=\"sensebox_display_show\" id=\")HB9?-!GebOtxFJ*UF9:\">\n <statement name=\"SHOW\">\n <block type=\"sensebox_display_printDisplay\" id=\"U90y}?~Cvp?uS2KfL#Ph\">\n <field name=\"COLOR\">WHITE,BLACK</field>\n <field name=\"SIZE\">1</field>\n <field name=\"X\">0</field>\n <field name=\"Y\">0</field>\n <value name=\"printDisplay\">\n <block type=\"variables_get_dynamic\" id=\"+.p4#smC?kl[1{cjt70R\">\n <field name=\"VAR\" id=\"[EbZeJmVDy_yf%nn}kg`\" variabletype=\"float\">Luftfeuchte</field>\n </block>\n </value>\n <next>\n <block type=\"sensebox_display_printDisplay\" id=\"GfS)4y,Y7[nm[KUW*uGL\">\n <field name=\"COLOR\">WHITE,BLACK</field>\n <field name=\"SIZE\">1</field>\n <field name=\"X\">0</field>\n <field name=\"Y\">20</field>\n <value name=\"printDisplay\">\n <block type=\"variables_get_dynamic\" id=\"wWCpBCPp9i%M13l9H^Et\">\n <field name=\"VAR\" id=\";%_Xz2^W|D@`pj|28,!5\" variabletype=\"float\">Temperatur</field>\n </block>\n </value>\n </block>\n </next>\n </block>\n </statement>\n <next>\n <block type=\"sensebox_display_clearDisplay\" id=\"E%fqa!5WcG$MDFM..7)G\"></block>\n </next>\n </block>\n </next>\n </block>\n </next>\n </block>\n </statement>\n </block>\n</xml>"
}
]
}

4
src/reducers/tutorialReducer.js
View File

@ -41,6 +41,7 @@ const initialStatus = () => {
const initialState = {
status: initialStatus(),
currentId: null,
currentIndex: null,
activeStep: 0,
change: 0
};
@ -64,7 +65,8 @@ export default function (state = initialState, action) {
case TUTORIAL_ID:
return {
...state,
currentId: action.payload
currentId: action.payload,
currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload)
}
case TUTORIAL_STEP:
return {