From 1cef36e0f238fb320c895d5033c593b2e48cb88f Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Wed, 30 Sep 2020 09:41:31 +0200
Subject: [PATCH] embed picture

---
 src/components/Tutorial/Builder/BlocklyExample.js | 2 +-
 src/components/Tutorial/Instruction.js            | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Tutorial/Builder/BlocklyExample.js b/src/components/Tutorial/Builder/BlocklyExample.js
index 217e1db..3983d5a 100644
--- a/src/components/Tutorial/Builder/BlocklyExample.js
+++ b/src/components/Tutorial/Builder/BlocklyExample.js
@@ -134,7 +134,7 @@ class BlocklyExample extends Component {
         {this.state.checked && !this.props.task ?
           <FormHelperText style={{lineHeight: 'initial'}}>Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.</FormHelperText>
         : null}
-        // ensure that the correct xml-file is displayed in the workspace
+        {/* ensure that the correct xml-file is displayed in the workspace */}
         {this.state.checked && this.state.xml? (() => {
           return(
             <div style={{marginTop: '10px'}}>
diff --git a/src/components/Tutorial/Instruction.js b/src/components/Tutorial/Instruction.js
index 739d798..de0095d 100644
--- a/src/components/Tutorial/Instruction.js
+++ b/src/components/Tutorial/Instruction.js
@@ -23,6 +23,11 @@ class Instruction extends Component {
           <Hardware picture={step.hardware}/> : null}
         {areRequirements > 0 ?
           <Requirement tutorialIds={step.requirements}/> : null}
+        {step.picture ?
+          <div style={{display: 'flex', justifyContent: 'center', marginBottom: '5px'}}>
+            <img src={`/media/tutorial/${step.picture}`} alt='' style={{maxWidth: '100%'}}/>
+          </div>
+        : null}
         {step.xml ?
         <Grid container spacing={2} style={{marginBottom: '5px'}}>
           <Grid item xs={12}>