From c2405de04af76af110f98a76c47fa4e8783084f6 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Thu, 23 Jul 2020 15:42:01 +0200
Subject: [PATCH 01/10] adaptation of the functionalities to Blockly package

---
 src/actions/types.js                        |  3 +
 src/actions/workspaceActions.js             | 51 +++++++++++++---
 src/components/Blockly/BlocklyComponent.css |  4 +-
 src/components/BlocklyView.js               | 68 +++++++++++++++++++++
 src/components/ClearWorkspace.js            | 22 ++++---
 src/components/CodeViewer.js                | 28 +++++++++
 src/components/Home.js                      | 48 ++++++++++-----
 src/components/MaxBlocks.js                 | 27 ++++----
 src/components/WorkspaceFunc.js             | 18 +++---
 src/components/WorkspaceStats.js            | 31 +++++++---
 src/reducers/workspaceReducer.js            | 27 +++++---
 11 files changed, 254 insertions(+), 73 deletions(-)
 create mode 100644 src/components/BlocklyView.js
 create mode 100644 src/components/CodeViewer.js

diff --git a/src/actions/types.js b/src/actions/types.js
index 0c9a0a7..26cd445 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -1,5 +1,8 @@
+export const NEW_CODE = 'NEW_CODE';
+export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE';
 export const NEW_WORKSPACE = 'NEW_WORKSPACE';
 export const CREATE_BLOCK = 'CREATE_BLOCK';
+export const MOVE_BLOCK = 'MOVE_BLOCK';
 export const CHANGE_BLOCK = 'CHANGE_BLOCK';
 export const DELETE_BLOCK = 'DELETE_BLOCK';
 export const CLEAR_STATS = 'CLEAR_STATS';
diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js
index 905a699..f692563 100644
--- a/src/actions/workspaceActions.js
+++ b/src/actions/workspaceActions.js
@@ -1,28 +1,61 @@
-import { NEW_WORKSPACE, CREATE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
+import { NEW_CODE, CHANGE_WORKSPACE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
+
+import * as Blockly from 'blockly/core';
+
+export const workspaceChange = () => (dispatch) => {
+  dispatch({
+    type: CHANGE_WORKSPACE
+  })
+}
+
+export const initWorkspace = (workspace) => (dispatch) => {
+  dispatch({
+    type: NEW_WORKSPACE,
+    payload: workspace
+  });
+}
 
 export const onChangeWorkspace = (event) => (dispatch, getState) => {
-  var oldWorkspace = getState().workspace.new; // stored 'new workspace' is from now on old
-  var newWorkspace = window.Ardublockly.workspace;
+    const workspace = Blockly.getMainWorkspace();
     dispatch({
       type: NEW_WORKSPACE,
-      payload: {new: newWorkspace, old: oldWorkspace}
+      payload: workspace
     });
+    dispatch({
+      type: CHANGE_WORKSPACE,
+    })
+    var code = getState().workspace.code;
+    code.arduino = Blockly.Arduino.workspaceToCode(workspace);
+    var xmlDom = Blockly.Xml.workspaceToDom(workspace);
+    code.xml = Blockly.Xml.domToPrettyText(xmlDom);
+    dispatch({
+      type: NEW_CODE,
+      payload: code
+    });
+    console.log(event.type);
     var stats = getState().workspace.stats;
-    if (event.type === window.Blockly.Events.CREATE){
+    if (event.type === Blockly.Events.BLOCK_CREATE){
       stats.create += event.ids.length;
       dispatch({
         type: CREATE_BLOCK,
         payload: stats
       });
     }
-    else if (event.type === window.Blockly.Events.CHANGE){
+    else if (event.type === Blockly.Events.BLOCK_MOVE){
+      stats.move += 1;
+      dispatch({
+        type: MOVE_BLOCK,
+        payload: stats
+      });
+    }
+    else if (event.type === Blockly.Events.BLOCK_CHANGE){
       stats.change += 1;
       dispatch({
         type: CHANGE_BLOCK,
         payload: stats
       });
     }
-    else if (event.type === window.Blockly.Events.DELETE){
+    else if (event.type === Blockly.Events.BLOCK_DELETE){
       if(stats.create > 0){
         stats.delete += event.ids.length;
         dispatch({
@@ -37,7 +70,8 @@ export const clearStats = () => (dispatch) => {
   var stats = {
     create: 0,
     change: 0,
-    delete: 0
+    delete: 0,
+    move: 0
   };
   dispatch({
     type: CLEAR_STATS,
@@ -45,6 +79,7 @@ export const clearStats = () => (dispatch) => {
   });
 };
 
+
 export const setWorkspace = (workspace) => (dispatch, getState) => {
   dispatch({
     type: NEW_WORKSPACE,
diff --git a/src/components/Blockly/BlocklyComponent.css b/src/components/Blockly/BlocklyComponent.css
index 6f8e099..d1ac2b4 100644
--- a/src/components/Blockly/BlocklyComponent.css
+++ b/src/components/Blockly/BlocklyComponent.css
@@ -1,6 +1,4 @@
 #blocklyDiv {
-  height: 90vH;
+  height: 60vH;
   width: 50%;
-  position: absolute;
-  bottom: 0;
 }
diff --git a/src/components/BlocklyView.js b/src/components/BlocklyView.js
new file mode 100644
index 0000000..77060c2
--- /dev/null
+++ b/src/components/BlocklyView.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
+import * as Blockly from 'blockly/core';
+import * as De from './Blockly/msg/de'; // de locale files
+//import * as En from './Blockly/msg/en'; // de locale files
+import './Blockly/blocks/index';
+import './Blockly/generator/index';
+
+
+class BlocklyView extends Component {
+  constructor(props) {
+    super(props);
+    this.simpleWorkspace = React.createRef();
+    this.state = {
+      generatedCode: 'Click text'
+    }
+  }
+
+  componentDidMount() {
+    let workspace = Blockly.getMainWorkspace();
+    workspace.addChangeListener(this.generateCode);
+  }
+
+  generateCode = () => {
+    var code = Blockly.Arduino.workspaceToCode(this.workspace);
+    console.log(code);
+    this.setState({ generatedCode: code })
+  }
+
+  render() {
+    return (
+      <BlocklyComponent ref={this.simpleWorkspace}
+        readOnly={false}
+        trashcan={true}
+        media={'media/'}
+        move={{
+          scrollbars: true,
+          drag: true,
+          wheel: true
+        }}
+        initialXml={''}
+      >
+        <Category name="loops" >
+          <Block type="controls_for" />
+          <Block type="controls_repeat_ext" />
+          <Block type="controls_whileUntil" />
+        </Category>
+        <Category name="senseBox" colour="120" >
+          <Category name="Sensoren" colour="120" >
+            <Block type="sensebox_sensor_temp_hum"></Block>
+          </Category>
+          <Block type="sensebox_telegram" />
+        </Category>
+        <Category name="Logic" colour="#b063c5">
+          <Block type="control_if"></Block>
+          <Block type="controls_ifelse"></Block>
+          <Block type="logic_compare"></Block>
+          <Block type="logic_operation"></Block>
+          <Block type="logic_negate"></Block>
+          <Block type="logic_boolean"></Block>
+        </Category>
+      </BlocklyComponent>
+    );
+  };
+}
+
+export default BlocklyView;
diff --git a/src/components/ClearWorkspace.js b/src/components/ClearWorkspace.js
index 9ab4c57..c22672e 100644
--- a/src/components/ClearWorkspace.js
+++ b/src/components/ClearWorkspace.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { clearStats } from '../actions/workspaceActions';
+import { clearStats, workspaceChange } from '../actions/workspaceActions';
 
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -13,8 +13,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 class ClearWorkspace extends Component {
 
   clearWorkspace = () => {
-    this.props.newWorkspace.clear();
-    this.props.clearStats();
+    if(this.props.workspace){
+      this.props.workspace.clear();
+      this.props.workspace.options.maxBlocks = Infinity;
+      this.props.workspaceChange();
+      this.props.clearStats();
+    }
+    else {
+      alert()
+    }
   }
 
   render() {
@@ -28,12 +35,13 @@ class ClearWorkspace extends Component {
 }
 
 ClearWorkspace.propTypes = {
-  newWorkspace: PropTypes.object.isRequired,
-  clearStats: PropTypes.func.isRequired
+  workspace: PropTypes.object.isRequired,
+  clearStats: PropTypes.func.isRequired,
+  workspaceChange: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({
-  newWorkspace: state.workspace.new
+  workspace: state.workspace.workspace
 });
 
-export default connect(mapStateToProps, { clearStats })(ClearWorkspace);
+export default connect(mapStateToProps, { clearStats, workspaceChange })(ClearWorkspace);
diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
new file mode 100644
index 0000000..caa920b
--- /dev/null
+++ b/src/components/CodeViewer.js
@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+
+class CodeViewer extends Component {
+
+  render() {
+    return (
+      <div>
+        {this.props.arduino}
+        <p>{this.props.xml}</p>
+      </div>
+    );
+  };
+}
+
+CodeViewer.propTypes = {
+  arduino: PropTypes.string.isRequired,
+  xml: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  arduino: state.workspace.code.arduino,
+  xml: state.workspace.code.xml
+});
+
+export default connect(mapStateToProps, null)(CodeViewer);
diff --git a/src/components/Home.js b/src/components/Home.js
index 289b155..1082845 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,7 +1,12 @@
 import React, { Component } from 'react';
 
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { onChangeWorkspace, initWorkspace } from '../actions/workspaceActions';
+
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
+import CodeViewer from './CodeViewer';
 
 import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
 import * as Blockly from 'blockly/core';
@@ -11,25 +16,19 @@ import './Blockly/blocks/index';
 import './Blockly/generator/index';
 
 
-
 class Home extends React.Component {
   constructor(props) {
     super(props);
 
     this.simpleWorkspace = React.createRef();
-    this.state = { generatedCode: 'Click text' }
   }
 
   componentDidMount() {
-
     let workspace = Blockly.getMainWorkspace();
-    workspace.addChangeListener(this.generateCode);
-  }
-
-  generateCode = () => {
-    var code = Blockly.Arduino.workspaceToCode(this.workspace);
-    console.log(code);
-    this.setState({ generatedCode: code })
+    this.props.initWorkspace(workspace);
+    workspace.addChangeListener((event) => {
+      this.props.onChangeWorkspace(event);
+    });
   }
 
   render() {
@@ -37,13 +36,16 @@ class Home extends React.Component {
       <div>
         <WorkspaceStats />
         <BlocklyComponent ref={this.simpleWorkspace}
-          readOnly={false} trashcan={true} media={'media/'}
+          readOnly={false}
+          trashcan={true}
+          media={'media/'}
           move={{
             scrollbars: true,
             drag: true,
             wheel: true
           }}
-          initialXml={''}>
+          initialXml={''}
+        >
           <Category name="loops" >
             <Block type="controls_for" />
             <Block type="controls_repeat_ext" />
@@ -64,10 +66,28 @@ class Home extends React.Component {
             <Block type="logic_boolean"></Block>
           </Category>
         </BlocklyComponent>
-        <WorkspaceFunc generateCode={this.generateCode} />
+        <WorkspaceFunc />
       </div>
     );
   };
 }
 
-export default Home;
+WorkspaceStats.propTypes = {
+  workspace: PropTypes.object.isRequired,
+  create: PropTypes.number.isRequired,
+  change: PropTypes.number.isRequired,
+  delete: PropTypes.number.isRequired,
+  move: PropTypes.number.isRequired,
+  worskpaceChange: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  workspace: state.workspace.workspace,
+  create: state.workspace.stats.create,
+  change: state.workspace.stats.change,
+  delete: state.workspace.stats.delete,
+  move: state.workspace.stats.move,
+  worskpaceChange: state.workspace.change
+});
+
+export default connect(null, { onChangeWorkspace, initWorkspace })(Home);
diff --git a/src/components/MaxBlocks.js b/src/components/MaxBlocks.js
index 014fe2e..01e8caa 100644
--- a/src/components/MaxBlocks.js
+++ b/src/components/MaxBlocks.js
@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { setWorkspace } from '../actions/workspaceActions';
+import { workspaceChange } from '../actions/workspaceActions';
+
+import * as Blockly from 'blockly/core';
 
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
@@ -16,9 +18,13 @@ class MaxBlocks extends Component {
     this.setState({ [e.target.name]: e.target.value});
   }
 
+  setMaxBlocks = () => {
+    const workspace = Blockly.getMainWorkspace();
+    workspace.options.maxBlocks = this.state.max;
+    this.props.workspaceChange();
+  }
+
   render() {
-    // var blockLeft = Object.keys(this.props.newWorkspace).length > 0 ? <p>{this.props.newWorkspace.remainingCapacity()} verbleibende Blöcke möglich</p> : null
-    // var error = this.state.error ? <div>{this.state.error}</div> : null;
     return (
       <div style={{display: 'inline', marginLeft: '10px'}}>
         <TextField
@@ -27,9 +33,9 @@ class MaxBlocks extends Component {
           type="number"
           onChange={this.onChange}
           value={this.state.max}
-          variant='filled'
+          variant='outlined'
         />
-        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={() => {this.props.newWorkspace.options.maxBlocks = this.state.max; this.props.setWorkspace(this.props.newWorkspace)}}>
+        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
           Maximale Blöcke
         </Button>
       </div>
@@ -37,13 +43,4 @@ class MaxBlocks extends Component {
   };
 }
 
-MaxBlocks.propTypes = {
-  newWorkspace: PropTypes.object.isRequired,
-  setWorkspace: PropTypes.func.isRequired
-};
-
-const mapStateToProps = state => ({
-  newWorkspace: state.workspace.new
-});
-
-export default connect(mapStateToProps, { setWorkspace })(MaxBlocks);
+export default connect(null, { workspaceChange })(MaxBlocks);
diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js
index 110324e..07de091 100644
--- a/src/components/WorkspaceFunc.js
+++ b/src/components/WorkspaceFunc.js
@@ -18,11 +18,12 @@ class WorkspaceFunc extends Component {
     open: false
   }
 
-
+  getArduinoCode = () => {
+    this.setState({ title: 'Adurino Code', content: this.props.arduino, open: true });
+  }
 
   getXMLCode = () => {
-    var code = window.Ardublockly.generateXml();
-    this.setState({ title: 'XML Code', content: code, open: true });
+    this.setState({ title: 'XML Code', content: this.props.xml, open: true });
   }
 
   toggleDialog = () => {
@@ -43,15 +44,12 @@ class WorkspaceFunc extends Component {
             </Button>
           </DialogActions>
         </Dialog>
-        <Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.props.generateCode()}>
+        <Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getArduinoCode()}>
           Get Adurino Code
         </Button>
         <Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getXMLCode()}>
           Get XML Code
         </Button>
-        <Button variant="contained" color="primary" onClick={() => { var blocks = this.props.newWorkspace; console.log(blocks); }}>
-          Get workspace
-        </Button>
         <MaxBlocks />
       </div>
     );
@@ -59,11 +57,13 @@ class WorkspaceFunc extends Component {
 }
 
 WorkspaceFunc.propTypes = {
-  newWorkspace: PropTypes.object.isRequired
+  arduino: PropTypes.string.isRequired,
+  xml: PropTypes.string.isRequired
 };
 
 const mapStateToProps = state => ({
-  newWorkspace: state.workspace.new
+  arduino: state.workspace.code.arduino,
+  xml: state.workspace.code.xml
 });
 
 export default connect(mapStateToProps, null)(WorkspaceFunc);
diff --git a/src/components/WorkspaceStats.js b/src/components/WorkspaceStats.js
index 7eadd99..baddbcd 100644
--- a/src/components/WorkspaceStats.js
+++ b/src/components/WorkspaceStats.js
@@ -2,11 +2,13 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import * as Blockly from 'blockly/core';
+
 import { withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 
-import { faPuzzlePiece, faTrash, faPlus, faPen } from "@fortawesome/free-solid-svg-icons";
+import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const styles = (theme) => ({
@@ -22,13 +24,13 @@ const styles = (theme) => ({
 class WorkspaceStats extends Component {
 
   render() {
-    // var check = Object.keys(this.props.newWorkspace).length > 0 && this.props.create - this.props.delete !== this.props.newWorkspace.getAllBlocks().length ?  <h1>FEHLER!</h1> : null;
+    const remainingBlocksInfinity = this.props.workspace ? this.props.workspace.remainingCapacity() !== Infinity : null;
     return (
       <div style={{marginBottom: '20px'}}>
         <Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
           <div>
             <FontAwesomeIcon icon={faPuzzlePiece} />
-            <Typography style={{display: 'inline'}}> {Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.getAllBlocks().length : 0}</Typography>
+            <Typography style={{display: 'inline'}}> {this.props.workspace ? this.props.workspace.getAllBlocks().length : 0}</Typography>
           </div>
         </Tooltip>
         <Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
@@ -45,6 +47,13 @@ class WorkspaceStats extends Component {
             <Typography style={{display: 'inline'}}> {this.props.change}</Typography>
           </div>
         </Tooltip>
+        <Tooltip title="Anzahl bewegter Blöcke" className={this.props.classes.stats}>
+          <div>
+            <FontAwesomeIcon icon={faArrowsAlt} style={{marginRight: '5px'}}/>
+            <FontAwesomeIcon icon={faPuzzlePiece} />
+            <Typography style={{display: 'inline'}}> {this.props.move}</Typography>
+          </div>
+        </Tooltip>
         <Tooltip title="Anzahl gelöschter Blöcke" className={this.props.classes.stats}>
           <div>
             <FontAwesomeIcon icon={faTrash} style={{marginRight: '5px'}}/>
@@ -52,29 +61,31 @@ class WorkspaceStats extends Component {
             <Typography style={{display: 'inline'}}> {this.props.delete}</Typography>
           </div>
         </Tooltip>
-        {Object.keys(this.props.newWorkspace).length > 0 ? this.props.newWorkspace.remainingCapacity() !== Infinity ?
+        {remainingBlocksInfinity ?
           <Tooltip title="verbleibende Blöcke" className={this.props.classes.stats}>
-            <Typography style={{display: 'inline'}}>{this.props.delete} verbleibende Blöcke</Typography>
-          </Tooltip> : null : null}
+            <Typography style={{display: 'inline'}}>{this.props.workspace.remainingCapacity()} verbleibende Blöcke</Typography>
+          </Tooltip> : null}
       </div>
     );
   };
 }
 
 WorkspaceStats.propTypes = {
-  newWorkspace: PropTypes.object.isRequired,
+  workspace: PropTypes.object.isRequired,
   create: PropTypes.number.isRequired,
   change: PropTypes.number.isRequired,
   delete: PropTypes.number.isRequired,
-  test: PropTypes.number.isRequired
+  move: PropTypes.number.isRequired,
+  worskpaceChange: PropTypes.number.isRequired
 };
 
 const mapStateToProps = state => ({
-  newWorkspace: state.workspace.new,
+  workspace: state.workspace.workspace,
   create: state.workspace.stats.create,
   change: state.workspace.stats.change,
   delete: state.workspace.stats.delete,
-  test: state.workspace.test
+  move: state.workspace.stats.move,
+  worskpaceChange: state.workspace.change
 });
 
 export default connect(mapStateToProps, null)(withStyles(styles, {withTheme: true})(WorkspaceStats));
diff --git a/src/reducers/workspaceReducer.js b/src/reducers/workspaceReducer.js
index df9e4bb..22b9082 100644
--- a/src/reducers/workspaceReducer.js
+++ b/src/reducers/workspaceReducer.js
@@ -1,27 +1,40 @@
-import { NEW_WORKSPACE, CREATE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
+import { CHANGE_WORKSPACE, NEW_CODE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
 
 
 const initialState = {
-  old: {},
-  new: {},
+  code: {
+    arduino: '',
+    xml: ''
+  },
+  workspace: null,
   stats: {
     create: 0,
     change: 0,
     delete: 0,
+    move: 0
   },
-  test: 0
+  change: 0
 };
 
 export default function(state = initialState, action){
   switch(action.type){
+    case NEW_CODE:
+      return {
+        ...state,
+        code: action.payload
+      };
+    case CHANGE_WORKSPACE:
+      return {
+        ...state,
+        change: state.change += 1
+      };
     case NEW_WORKSPACE:
       return {
         ...state,
-        old: action.payload.old,
-        new: action.payload.new,
-        test: state.test += 1
+        workspace: action.payload
       };
     case CREATE_BLOCK:
+    case MOVE_BLOCK:
     case CHANGE_BLOCK:
     case DELETE_BLOCK:
     case CLEAR_STATS:

From 168c5fb57571e6e9b3832ec92cc1c41e39d54f5b Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Thu, 23 Jul 2020 15:55:54 +0200
Subject: [PATCH 02/10] removing workspace from Redux

---
 src/actions/types.js             |  1 -
 src/actions/workspaceActions.js  | 22 ++--------------------
 src/components/ClearWorkspace.js | 22 ++++++++--------------
 src/components/Home.js           | 27 ++++++---------------------
 src/components/MaxBlocks.js      |  4 ++++
 src/components/WorkspaceStats.js |  9 ++++-----
 src/reducers/workspaceReducer.js |  8 +-------
 7 files changed, 25 insertions(+), 68 deletions(-)

diff --git a/src/actions/types.js b/src/actions/types.js
index 26cd445..c0be6c2 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -1,6 +1,5 @@
 export const NEW_CODE = 'NEW_CODE';
 export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE';
-export const NEW_WORKSPACE = 'NEW_WORKSPACE';
 export const CREATE_BLOCK = 'CREATE_BLOCK';
 export const MOVE_BLOCK = 'MOVE_BLOCK';
 export const CHANGE_BLOCK = 'CHANGE_BLOCK';
diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js
index f692563..7b0d063 100644
--- a/src/actions/workspaceActions.js
+++ b/src/actions/workspaceActions.js
@@ -1,4 +1,4 @@
-import { NEW_CODE, CHANGE_WORKSPACE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
+import { NEW_CODE, CHANGE_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from './types';
 
 import * as Blockly from 'blockly/core';
 
@@ -8,22 +8,12 @@ export const workspaceChange = () => (dispatch) => {
   })
 }
 
-export const initWorkspace = (workspace) => (dispatch) => {
-  dispatch({
-    type: NEW_WORKSPACE,
-    payload: workspace
-  });
-}
 
 export const onChangeWorkspace = (event) => (dispatch, getState) => {
-    const workspace = Blockly.getMainWorkspace();
-    dispatch({
-      type: NEW_WORKSPACE,
-      payload: workspace
-    });
     dispatch({
       type: CHANGE_WORKSPACE,
     })
+    const workspace = Blockly.getMainWorkspace();
     var code = getState().workspace.code;
     code.arduino = Blockly.Arduino.workspaceToCode(workspace);
     var xmlDom = Blockly.Xml.workspaceToDom(workspace);
@@ -78,11 +68,3 @@ export const clearStats = () => (dispatch) => {
     payload: stats
   });
 };
-
-
-export const setWorkspace = (workspace) => (dispatch, getState) => {
-  dispatch({
-    type: NEW_WORKSPACE,
-    payload: {new: workspace, old: getState().workspace.new}
-  });
-};
diff --git a/src/components/ClearWorkspace.js b/src/components/ClearWorkspace.js
index c22672e..5b48648 100644
--- a/src/components/ClearWorkspace.js
+++ b/src/components/ClearWorkspace.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { clearStats, workspaceChange } from '../actions/workspaceActions';
 
+import * as Blockly from 'blockly/core';
+
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -13,15 +15,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 class ClearWorkspace extends Component {
 
   clearWorkspace = () => {
-    if(this.props.workspace){
-      this.props.workspace.clear();
-      this.props.workspace.options.maxBlocks = Infinity;
-      this.props.workspaceChange();
-      this.props.clearStats();
-    }
-    else {
-      alert()
-    }
+    const workspace = Blockly.getMainWorkspace();
+    workspace.clear();
+    workspace.options.maxBlocks = Infinity;
+    this.props.workspaceChange();
+    this.props.clearStats();
   }
 
   render() {
@@ -35,13 +33,9 @@ class ClearWorkspace extends Component {
 }
 
 ClearWorkspace.propTypes = {
-  workspace: PropTypes.object.isRequired,
   clearStats: PropTypes.func.isRequired,
   workspaceChange: PropTypes.func.isRequired
 };
 
-const mapStateToProps = state => ({
-  workspace: state.workspace.workspace
-});
 
-export default connect(mapStateToProps, { clearStats, workspaceChange })(ClearWorkspace);
+export default connect(null, { clearStats, workspaceChange })(ClearWorkspace);
diff --git a/src/components/Home.js b/src/components/Home.js
index 1082845..de16f85 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { onChangeWorkspace, initWorkspace } from '../actions/workspaceActions';
+import { onChangeWorkspace } from '../actions/workspaceActions';
 
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
@@ -16,7 +15,7 @@ import './Blockly/blocks/index';
 import './Blockly/generator/index';
 
 
-class Home extends React.Component {
+class Home extends Component {
   constructor(props) {
     super(props);
 
@@ -24,8 +23,7 @@ class Home extends React.Component {
   }
 
   componentDidMount() {
-    let workspace = Blockly.getMainWorkspace();
-    this.props.initWorkspace(workspace);
+    const workspace = Blockly.getMainWorkspace();
     workspace.addChangeListener((event) => {
       this.props.onChangeWorkspace(event);
     });
@@ -72,22 +70,9 @@ class Home extends React.Component {
   };
 }
 
-WorkspaceStats.propTypes = {
-  workspace: PropTypes.object.isRequired,
-  create: PropTypes.number.isRequired,
-  change: PropTypes.number.isRequired,
-  delete: PropTypes.number.isRequired,
-  move: PropTypes.number.isRequired,
-  worskpaceChange: PropTypes.number.isRequired
+Home.propTypes = {
+  onChangeWorkspace: PropTypes.func.isRequired
 };
 
-const mapStateToProps = state => ({
-  workspace: state.workspace.workspace,
-  create: state.workspace.stats.create,
-  change: state.workspace.stats.change,
-  delete: state.workspace.stats.delete,
-  move: state.workspace.stats.move,
-  worskpaceChange: state.workspace.change
-});
 
-export default connect(null, { onChangeWorkspace, initWorkspace })(Home);
+export default connect(null, { onChangeWorkspace })(Home);
diff --git a/src/components/MaxBlocks.js b/src/components/MaxBlocks.js
index 01e8caa..4a0b86c 100644
--- a/src/components/MaxBlocks.js
+++ b/src/components/MaxBlocks.js
@@ -43,4 +43,8 @@ class MaxBlocks extends Component {
   };
 }
 
+MaxBlocks.propTypes = {
+  workspaceChange: PropTypes.func.isRequired
+};
+
 export default connect(null, { workspaceChange })(MaxBlocks);
diff --git a/src/components/WorkspaceStats.js b/src/components/WorkspaceStats.js
index baddbcd..51ec1fa 100644
--- a/src/components/WorkspaceStats.js
+++ b/src/components/WorkspaceStats.js
@@ -24,13 +24,14 @@ const styles = (theme) => ({
 class WorkspaceStats extends Component {
 
   render() {
-    const remainingBlocksInfinity = this.props.workspace ? this.props.workspace.remainingCapacity() !== Infinity : null;
+    const workspace = Blockly.getMainWorkspace();
+    const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
     return (
       <div style={{marginBottom: '20px'}}>
         <Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
           <div>
             <FontAwesomeIcon icon={faPuzzlePiece} />
-            <Typography style={{display: 'inline'}}> {this.props.workspace ? this.props.workspace.getAllBlocks().length : 0}</Typography>
+            <Typography style={{display: 'inline'}}> {workspace ? workspace.getAllBlocks().length : 0}</Typography>
           </div>
         </Tooltip>
         <Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
@@ -63,7 +64,7 @@ class WorkspaceStats extends Component {
         </Tooltip>
         {remainingBlocksInfinity ?
           <Tooltip title="verbleibende Blöcke" className={this.props.classes.stats}>
-            <Typography style={{display: 'inline'}}>{this.props.workspace.remainingCapacity()} verbleibende Blöcke</Typography>
+            <Typography style={{display: 'inline'}}>{workspace.remainingCapacity()} verbleibende Blöcke</Typography>
           </Tooltip> : null}
       </div>
     );
@@ -71,7 +72,6 @@ class WorkspaceStats extends Component {
 }
 
 WorkspaceStats.propTypes = {
-  workspace: PropTypes.object.isRequired,
   create: PropTypes.number.isRequired,
   change: PropTypes.number.isRequired,
   delete: PropTypes.number.isRequired,
@@ -80,7 +80,6 @@ WorkspaceStats.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  workspace: state.workspace.workspace,
   create: state.workspace.stats.create,
   change: state.workspace.stats.change,
   delete: state.workspace.stats.delete,
diff --git a/src/reducers/workspaceReducer.js b/src/reducers/workspaceReducer.js
index 22b9082..c5bc543 100644
--- a/src/reducers/workspaceReducer.js
+++ b/src/reducers/workspaceReducer.js
@@ -1,4 +1,4 @@
-import { CHANGE_WORKSPACE, NEW_CODE, NEW_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
+import { CHANGE_WORKSPACE, NEW_CODE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DELETE_BLOCK, CLEAR_STATS } from '../actions/types';
 
 
 const initialState = {
@@ -6,7 +6,6 @@ const initialState = {
     arduino: '',
     xml: ''
   },
-  workspace: null,
   stats: {
     create: 0,
     change: 0,
@@ -28,11 +27,6 @@ export default function(state = initialState, action){
         ...state,
         change: state.change += 1
       };
-    case NEW_WORKSPACE:
-      return {
-        ...state,
-        workspace: action.payload
-      };
     case CREATE_BLOCK:
     case MOVE_BLOCK:
     case CHANGE_BLOCK:

From 7de0ffdebd8c4c9fb2ce38779d1c573d622b7da1 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 11:02:07 +0200
Subject: [PATCH 03/10] trashcan, zoom-control and media

---
 public/media/1x1.gif            | Bin 0 -> 43 bytes
 public/media/click.mp3          | Bin 0 -> 2304 bytes
 public/media/click.ogg          | Bin 0 -> 4865 bytes
 public/media/click.wav          | Bin 0 -> 3782 bytes
 public/media/delete.mp3         | Bin 0 -> 3123 bytes
 public/media/delete.ogg         | Bin 0 -> 5731 bytes
 public/media/delete.wav         | Bin 0 -> 9164 bytes
 public/media/disconnect.mp3     | Bin 0 -> 1586 bytes
 public/media/disconnect.ogg     | Bin 0 -> 4404 bytes
 public/media/disconnect.wav     | Bin 0 -> 1492 bytes
 public/media/dropdown-arrow.svg |   1 +
 public/media/handclosed.cur     | Bin 0 -> 326 bytes
 public/media/handdelete.cur     | Bin 0 -> 766 bytes
 public/media/handopen.cur       | Bin 0 -> 198 bytes
 public/media/pilcrow.png        | Bin 0 -> 1010 bytes
 public/media/quote0.png         | Bin 0 -> 771 bytes
 public/media/quote1.png         | Bin 0 -> 738 bytes
 public/media/sprites.png        | Bin 0 -> 2595 bytes
 public/media/sprites.svg        |  74 ++++++++++++++++++++++++++++++++
 src/components/Home.js          |  10 ++++-
 20 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 public/media/1x1.gif
 create mode 100644 public/media/click.mp3
 create mode 100644 public/media/click.ogg
 create mode 100644 public/media/click.wav
 create mode 100644 public/media/delete.mp3
 create mode 100644 public/media/delete.ogg
 create mode 100644 public/media/delete.wav
 create mode 100644 public/media/disconnect.mp3
 create mode 100644 public/media/disconnect.ogg
 create mode 100644 public/media/disconnect.wav
 create mode 100644 public/media/dropdown-arrow.svg
 create mode 100644 public/media/handclosed.cur
 create mode 100644 public/media/handdelete.cur
 create mode 100644 public/media/handopen.cur
 create mode 100644 public/media/pilcrow.png
 create mode 100644 public/media/quote0.png
 create mode 100644 public/media/quote1.png
 create mode 100644 public/media/sprites.png
 create mode 100644 public/media/sprites.svg

diff --git a/public/media/1x1.gif b/public/media/1x1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3085511236caea65b69ad30a68979c9b95f4a425
GIT binary patch
literal 43
qcmZ?wbhEHbWMp7uXkY+=|Ns9h{$$}~01D`U_#hbuCMF+725SJojRy(<

literal 0
HcmV?d00001

diff --git a/public/media/click.mp3 b/public/media/click.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..4534b0ddca7424a441a5992f78d7defb7ea01834
GIT binary patch
literal 2304
zcmeZtF=l1}0!F_O&k!RZLl%ew@(T(w^U@W3GE)@t(|}Y#QesZ7LU2iDa&}0hYY<Qg
zD-atQ7?_2)1UVyf16&P(TuvYkE=erP$t+2A_V@J#a&v$f1cLKRi;`2V6f#Om3as??
z%gf943Q~&mOY>5S_413-^&w3C0*Djhb23xn^V5J7*a`8)ASWpJ=BH$)Wu~SmB<7_k
z6s6{7Rsh*al?v|p`RO^S3Z8k%djEe<I0CT{iS*1%%Lj7#ftZDXfkT7A0S9Qn1rFc>
z|8W7JU6wwMzOKf4mKH^fXJM`pX;9&~;>5tv0CLC9h9lfCiIGA>B1ot=-=`$KfxB<j
zr|;S?n1F#HWPEp?&rAbgFgWSV;9+aikd(8j_%vlt=b;;p><d~nq)#VWs54*CZOU*G
zU04THb|6g4{f7I&F#GFGb`mLj!{xs3-}|2T_xFz<{{H^{{{8-cnqI+oe{GC7@oBz!
z-zQbm|NrlO-}is%_m}Hu-<xuM@Av;d_r9;a`1|*Jk!5><k|6NXD`?i)dp66R@5#yi
z5MX0tW<2nqz(9n9nW2G=kGElg`H9Z=%nOnnf_^{qaIi@%VY2`KELv?}=Bt`xOoz|@
z|Nk#ZVz-)-Yfp-tjha3GbD)X;a*8?99ZowH#BDgXW#yEV4?_Dv7Clo?IFZ1@`;7gd
zSb~U3n-HT|!XbhAAesNqI24Q$iWu7%9g-4ea40%(8^o{)2&mPACI5FZtSZ~2vQ>g%
z!2xvxQN{%u1ZVItq(kKX|Nq&bz`W(yxy6|b2}}%!6<B;2P8P+82En9(^zvnYuic%s
zt+Y3x`v2d)sSUtzWP0>0c^lW>9qJNYT78cK7X1G`=?E8tc&Ve+j=v1Tvih0*@(UOg
z)*t^hr9ta#q~@}-;m&2rD@0cDT)bT*!L`fq5ld(5;h8Pk2Y6UQCK#ON^K*&Q;bhss
z9BrK3;2d=3SdT^1nUz-!lTNNk@Mmq?@6Ud%@A{J`(*oW^&e)mc81_B)Si14_drS7G
zzq-2c_uuE{Khk^7tTS$rj-Ikr)v)XCym_1Z3znXKSJt+4_U@f=e}9{n-@o_q*!$1_
zEB<}`ef{<C6!T>>-}am~&Ni$6GlPLakVQmBho5g+#P@|YVu44#{>+Kski1s6Sk9!K
zfj8soyG^C-EUk(PA#6;{Q6^WIn`c~D`^7+Hh82hGUKz=t+05<EJ&HE-($AYT#q?(#
zIx2p9=ZWHJzcr@0zCV9t?hD?3ja&cztG|71(d^e>gThWnaIbh@zJJ~KkT2if{=by{
zTQ@IoW{I(Pu>SSez~uDu?f?G|PglO@n5t)*8uVuWesE08RaG}_le~O;$&!upuPt3#
z8=v`Re&nesyE{%Tj?H`UbN#;vFNOjJhOlWaokA)e6P3DTmN+f&5Mr6SvEXOSJm;zB
zK{3S7d@XXazRmOo4h9AjU^KF<Zuyuew@BoYzvCvs2NO98xzt@=RJGi2YTe@NawW!R
zy8DNF!by)FXQ#f}YPGgjT0d@Y^$P!p&{fyhXTSOS`o^x!&(E)p&+wlgU9tK3wQc`$
zvumzxU4J$^wmNF-^)2e>=ZEbV+q!+WU9HsZvvK=+^CR?=u0PulcRlXv+U&QSpI=?S
zCH&&rkF9I7s}8nGoo8jOQ&`u;r3EVh^^8^xAfUf1KrvLqe1L&*2{3~xKx1eCLtxZu
H^bi05jng?>

literal 0
HcmV?d00001

diff --git a/public/media/click.ogg b/public/media/click.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..e8ae42a6106dadbb6861981a696b7f8b8f64c9ae
GIT binary patch
literal 4865
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

literal 0
HcmV?d00001

diff --git a/public/media/click.wav b/public/media/click.wav
new file mode 100644
index 0000000000000000000000000000000000000000..41a50cd76f53e8ea60d878281eb16ded88f13d9f
GIT binary patch
literal 3782
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

literal 0
HcmV?d00001

diff --git a/public/media/delete.mp3 b/public/media/delete.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..442bd9c1f4c9cee39ca9cc776c7cd594c90f2795
GIT binary patch
literal 3123
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

literal 0
HcmV?d00001

diff --git a/public/media/delete.ogg b/public/media/delete.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..67f84ac19a05075a52de49829b3a2bc17af9e29c
GIT binary patch
literal 5731
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

literal 0
HcmV?d00001

diff --git a/public/media/delete.wav b/public/media/delete.wav
new file mode 100644
index 0000000000000000000000000000000000000000..18debcf96d6f76e36f295feb6de2f09dffaec1f5
GIT binary patch
literal 9164
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
R6c)kuZMgU8%=~+f{2#xTwtoNs

literal 0
HcmV?d00001

diff --git a/public/media/disconnect.mp3 b/public/media/disconnect.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..8cfaff6c06253a8b9bbe50dc0d5d05c4a25b6fb5
GIT binary patch
literal 1586
zcmeZtF=l1}0w$Lb&k!RZLl%ew@(T(w^U@W3GE)@t(|}Y#QesZ7LU2iDa&}0hYY<Qg
zD-atQ7?_2)1UVyf16&P(TuvYkE=erP$t+2A_V@J#a&v$f1cLKRi;`2V6f#Om3as??
z%gf943Q~&mOY>5S_413-^&w3C0*Djhb23xn^V5J7*a`8)ASWpJ=BH$)Wu~SmB<7_k
z6s6{7Rsh*al?v|p`RO^S3Z8k%dPufLL`2Zb*8jgJ9D#TfiS*1%%Lj7#ftZPbf#nH9
z1F7IY$pC1VrH`YptFfM?MG@m!m}^8DR9FR^7#JEr?kM%Ux(OyRQfNp73G>`{+H$;s
zxkPL2cI_uj3JklBc57@rmotr*p}~Z$<?zvN9$uq+ekX4h2OiRI%3!*|osiBc@!082
zJc|PJhTdhTAAAuy>azZxO{Z_Yd)K#$9}OR$+G?)epB%pW=1n=9<!9fQPt^1ZnjmMt
z@1<|r_obS?HFtk2pJ-@MC_ZRVBhP;DgTwOx1r8>LA9novfgAxAg&B5r3P5q7BqM|4
zJq4D7AL>8#cC<1JHasZM5n^`|X<!p#YY<>H`Cur-!_&v-`oU`xo3Bym%oMJl(@(rk
zz5iKR$jfjc^J0afDaZf+KUaCe<-_}O-YGLgP8~^pYOepj{<op6&SdpKcY|qy&Egkd
z8O~<mKR^Hf|9=9!%NP!{C7j@X#^!J&VFC9t?gr=k&%Xnc+>wS>@uLhL2WnW(a5)@E
z;qYN#V4nZ`IVdr%T=9Upo1sI1`QigNhF35D#NOXq7r)0EB=y<g^;MorN8&TKUz=VJ
z68Qfw{{Q;>f3vo1*}J(-=+!+T*82Y~&8rv|a9m(8N=ka|z1Y&Q=V_j-ypvF)=>Ol7
zj&L(y^XzB(bG(6rfx!fnR0DrytVsHHc}i8-<W&+}FP?m1yTGbuu&yKXQN6gTg_?uN
zj6=Kl0uwX*Wqq!{x|*$hlP@t(ICat=wL>zc?)r;_ghVv{s;m3N-HP@+J()|YZPUw6
zn|9ZhUuJ*Q)NgIkxc0T_d*!<QXS4TQ+xo5Lcf{8HN7t^20*kJ#hlsXH14X}W|F(5+
b!rpt?vGq}Zz)Az!{=I@_Gd-hKBLV;bpR0d|

literal 0
HcmV?d00001

diff --git a/public/media/disconnect.ogg b/public/media/disconnect.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..467b527b4d0515046b43198c2e0ea0d558d77bfb
GIT binary patch
literal 4404
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

literal 0
HcmV?d00001

diff --git a/public/media/disconnect.wav b/public/media/disconnect.wav
new file mode 100644
index 0000000000000000000000000000000000000000..af5c25447cad1a7ebd705e0f28ffbc4ebec01f49
GIT binary patch
literal 1492
zcmcgse@v8R9Djbiciaz^Ls1l@Ugwr2@*^}OGz~%I%0mZ-QkeuC2WQ9K0Y~UYx-47F
z)a7)e;WE=P*TBL;@<+^7&eSBAzbaP~Jp?=m9rug(eV^y)IZjqvTYvVv`@Y}L_vh#P
zJbT`^z?hr+qY8laS?g9>tKFgj008-u(+0r%#SkE10G3jBX{^8l;|l`D!a0onTPVYT
zjz`0Yj0@sb5eq%430ME^iCE#-BZ5a!g$cYvq&iah&z=$Xi8(0Go0ux%n|SX7C&5lI
z1!S^vdX^j{_sLm0#1i2gv|}`Hbic39e>I>4+5-Cmoq<Ea4U&(pQ+f53hNCeC!`{i&
z`VP%9yhM8b!TEuZr`HqRuNg`Td?=U=p18u<KP2WQ9-qA^VOs30C_`wHcaO*JvEO^f
zJH!79n5JutL9y{MPw8JqHNm0b&i-FK*E~h{b_~`(9AU}PXJ%eVs7XkOe?1Pw>=NAm
z757*5CG~X=Y#y<WnN*vi4^1zgIV0|+nA4gjy4>d*dUkOB!04bbG7y*ptMvU-d*g)o
z!*Q2mzS1Uuxxu#{T=!<*Upp*}PL;ag*HIUB8G1$YxZt2Kj_vVx_!<ME^d!3^)M?jG
zT0FT;zd}<aG=U@JjQo>yUOFg$qe#jha@$x#a7rNLuL`C~edGzGQD<obI<@|H?X{>J
zRU_KN(#R1xLssM#vWV>l80F&%Ay;)rwO>^ul%Ym;TuGPC1qb|zeybk^)zT&6ga?G}
z>K=86Y5~5=?kESO7sfV>d8I<~1^7;|YT9($^qIP)QOogcW|eP;wgiiUheJv7Myfz2
zJXE(tiBV(18JJAZNlQb?!SrBaXpS_j#DjTwi>h6HQr)HM#t!%{GtdTdo}8k+Y(6YU
zX554K;?2kaJK3xBfif(o$g<QVzoXnFwQMe|MQ`F$I2q4E?LfzVBO8gEyhcA|3Rr=j
z!yEC>=mx9@%UCg$$znP}Z?ij~6^7tvkbrhpLYI>LN{doRHqqlu1AVXr?L-a~hdzSS
z;Z}aT%h)j*P0x{5a)s2;Z4AR^^d(mC+c*Q|gH&o)n&ci?Anmjn%tLwjV?2ts!y(p5
zLqtn2(W@*LO0X66pbt<tYz8gt7PZnmT0*^aH=7Au;0nlqo8VTM4Q~Jw_?8tj4?RIU
zs7y=QFk1q4flv6|?*g~Le7Fr>fY)IQ>;>Iy84W0v%08u@{7HWWJJIJ@E1bYyKDmz_
zrFY3`VxX7lT}Hqle2=pip__04KZ|~5;S9O-8tEoU)K9->UEmm8Z7ejO;vcRtKX;8W
zKg;wO$7`J~m(5WruC`f3r<E&LS*g8REOgt--{6^91!f)3Ds-3D+HLL%?#VWptHK^<
zeQkL~rdZ{6yE0Q#8yXr?T$Va#y~9$M;;gMqjlfh_q<x9qW+`!6xf*X@QWtJ7nw%D!
z)mC8<OC1)mwxZg$nd7o8;wq=J(q17N9px#UuOLUw`O?$U76V|jEEF$t%b2qea|PgX
uv(cQ+K_Zv`+KM@+Ae*P~pXYcd^V*e9bExGqv9;_qCKEU9T*B-B+TULuNQTe=

literal 0
HcmV?d00001

diff --git a/public/media/dropdown-arrow.svg b/public/media/dropdown-arrow.svg
new file mode 100644
index 0000000..4e6ce19
--- /dev/null
+++ b/public/media/dropdown-arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/media/handclosed.cur b/public/media/handclosed.cur
new file mode 100644
index 0000000000000000000000000000000000000000..4851755a1690d6631be7c32dcc7e001e6372aafb
GIT binary patch
literal 326
zcmb`>ArgZy5QX7CK}5#YAc(B&4cephDBOgraFhrH5{cWsZDtreZ06gynH32{0;NO}
z9j^cn;3-8u5_G)Ae{U_GW-~k8u8*mL%Q9^6c6*bRZdjrJa+LmXTW#6QRhg67=(=WB
LR`K-RGPP%aOVoiS

literal 0
HcmV?d00001

diff --git a/public/media/handdelete.cur b/public/media/handdelete.cur
new file mode 100644
index 0000000000000000000000000000000000000000..170320fc281ab02ded109f0310aa180b77e465f0
GIT binary patch
literal 766
zcmeHFF%AMD5F9v?Yp*cIl58w|z?Bw6?qT>6zj9Bx!ot!YtV7NVgxDBcCk(s8u)7HX
zurTm`K#vX&3+w@$NKXdRz;P$&Z5XzMF{K1mWu^!r$3MP#feGL$h{26T0d9<;Xe$zH
zyVWAc`hK=AyHX$`lT`DlMSN-BYBYYUZ7#3struI#()e@6fAbs8EI*J})n~VIF{(3v
TWO5|WGG}sm$GKO%-`24&Q~QG0

literal 0
HcmV?d00001

diff --git a/public/media/handopen.cur b/public/media/handopen.cur
new file mode 100644
index 0000000000000000000000000000000000000000..da44588b2fa68ee115deb843e1ce6802e58b3e30
GIT binary patch
literal 198
zcmaLQu?>Sj429wUK<LsSu0o=MGFxPvj6fMi$S8<{no%e+02QJ@9M1`L&iZ6aKKVg{
zBZPz-89h+SU4k^?RR3O#k#yn9s}~#8W`~Eg@;tz=kdHDzr6A+F-{sANS!7OOGK%di
T`ig&RoG(+Rz5ad*I9_l9+qNGy

literal 0
HcmV?d00001

diff --git a/public/media/pilcrow.png b/public/media/pilcrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..f224c35868a35f31f5f836943ac03ef951bbfa2d
GIT binary patch
literal 1010
zcmV<O0}cF%P)<h;3K|Lk000e1NJLTq001li002G+1^@s6P@4IX00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGxhX4Q_hXIe}@nrx202p*dSaefwW^{L9
za%BK;VQFr3E^cLXAT%y9E;jv63FrU-17k@<K~!i%?V8<-4PhL|cdd78BcyG^1y-`T
zK&h2*<)wA!LTPW5+~7+27laT=Ucw>~NpgWidAYDCB{xzCg$v62`}%y(^E=vS&YW}R
zIA_L8olku(cINkc=DV|JXP$Y^G}Nh61N!><ny?i+Z~-niyKo6E#JSjxV{m}AmWA3D
zoPjH_+csAQjg2@BH{n(MfWOUR<oC<(_yX_aZM=!s@Dkp@2lyO6;xEjPtG+giQ67pF
zbT(c_4U{ymaiqm54TVE+EB?U$!87c%IHjR*FrHJ_KcHVwADOSYpM1VxsT1%GdvPN+
zTb$BRsE>ipY&rB1d5HUQ4bI2$I282@AHyK}XVm^?T%-*F?qH)ui3Sa`u+&-jj0bVL
zwS>a{9u)_eXS=n3rrYGvYrCUE(?!=C$~~N7r6r**{=hU$!eUp0yVzo-WuZ2a!0TLJ
z0iUql$|6C1B7u*(z5;rzBr@u8tsXTG{K)kcu-Hl>Lr)@s-@87KpE%k|B12ESfhpGY
zG3;Xh#!4!JzSsi~$FRVUt)wF8i#@RJaGEUzd1)mTL0=-D;U})oL-+S+_w|0zlStr`
zuFper(`8l?8F~^4yx#Q{p!sm*rv^cNB7rAkezxBq-L6+#StO{BKd_+bit8;vSCCa0
zY5GT9Vu3rc*z{6o|2R&>lEK-ZSYTb=cIDcOqqBV;b;c*)Kx_XC+mZ<^Xw>uEh1?M3
z(Pi%y>IrxU>dAU7-oha91Qs;wR(&KlOzns-a2^KHg2vO_aMcrkV8KAcup6&q*zG$i
z$pr2XgO0<cxEar&9-Xv?phb_jn193%yPhW>I1COn2=!MOfm$0Ig(ombIs%8m!4J6%
z9;ps|z-91Ab>Mw2gGZ_Z?{yhGQXP1Y%ixjfz`I=rk5mWV=`whvI`DRv!6Vgyx48@+
zsSdowW$;LKV9hmx)X#9u;NY423}@~tk-6(|=I(Tvn@ePFwwAg1aOR#kGWSdu`sKLo
z*8VwelZU<<uI$V4YS6(@ufH5dy=o9dD@a;<)9VFct4UflJ%t@MWPEUtsd(BBS}htw
ztDmhld~IRi4H$MttK}Vb*<oq}1Fp;s9UuC3cB~z)dKjz?H8a!Floq*b<yq8=BzoJW
g$qrYij!#3wAF_|R%?%z7a{vGU07*qoM6N<$g0mCX%m4rY

literal 0
HcmV?d00001

diff --git a/public/media/quote0.png b/public/media/quote0.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7820d6077e6d346b9015c22996745fbc4586fd4
GIT binary patch
literal 771
zcmeAS@N?(olHy`uVBq!ia0vp^IzX(#!2%>B?g=~xQY`6?zK#qG8~eHcB(eheOiAAE
zE)4(M`_JqL@;D1TB8wRqxP?KOkzv*x37{Z*iKnkC`y)<qVJU<ALZ=jfnv^_U978;g
z@11tmd#a<zG4`D$+OOJbXOup5Qt_1X>ekTZU8^Ck)Z(J+#Hpl_C8`@E!djcq-Ly@x
zBTzylkXvz~n63)P!qy8)8Rakc|JeFrpULw(GmRfFOaJ>g@m}$>%6o-+icyuvlA~g#
z-8f+KK4L!G`48+3ha<QB{lk)Q=UCb2E~oCCb3ZmYo!)ZvAm<XjncI~Ah<#aX5SAEr
z^O|JetZ6&jueAz9q<SWn-$?372)yWjLy+nFC+CFwFAUu-tmE5w$U)-H^&8m>v)4p7
zzhyRSJ2=bg?S!2ha%)7txbUp$$h`W}H23r#(QStdzbxEfJ7dT8@RqkLEi4oc2y@<E
z=cW{1YR4D$<4xmt;cZ1c>w8&^UpAiJqTb`*wXihmckC(N^~E_!2Ny5bExE#6ALuRd
zy)(Du_(8FG)eqW3W)~e^y#L7IcQ=lf^Y5Ly=2L%Cq3Y=y=Wj<G+M(rCf7OY9Wz(GG
zzRG7iPk(&2@xsES_zT8!!h8=36kfH|{$Kv;_ZGFi*11y5dp@4`jSi0Xu3cn$T|&=2
zT_$K^G+)P^_AO4PR*xs_Dqgm2)#7Xm!<aMf=PSQgD0;^8r`~s(TRbJ?VDuKPw-c7_
z`P%zjx?J_Td6vtPNb~=q-+!~*Qg`~K<j8+4X|3t%OV?M*g#>Mq@3mx?nq_!+$Msi{
z_qVCPzL>Gs^~U+0L-RJ--s&>VTfKC@$v?X(HxCQ4NiLkf_T=)i&OWx<p1JSpU+90R
z_~v?V>7p;d1f*Kx8c~vxSdwa$T$Bo=7>o=IEp!bmb&ZTe3@xpU%&bf-v<(cb3=AX=
gELw!3AvZrIGp!Q0hRnHAazG6Xp00i_>zopr0ACYJfB*mh

literal 0
HcmV?d00001

diff --git a/public/media/quote1.png b/public/media/quote1.png
new file mode 100644
index 0000000000000000000000000000000000000000..826583e0ad72dd1424a2ffe9e21a8b653b596058
GIT binary patch
literal 738
zcmV<80v-K{P)<h;3K|Lk000e1NJLTq001li001Ni1ONa4Sl$rl00002VoOIv0RM-N
z%)bBt010qNS#tmY3ljhU3ljkVnw%H_000McNliru-vtU49yW>hppyUq0&_`3K~zY`
zwU*CIR8bVizi%)dr%W2FnSNk}mX$CPQd80l=@=9tO1LP9gf>Aze?W_ZAd3nT+6Pk9
zB8q4gJZRIxeo$192pP3d(M`3B=|$fbGxNOndG9^1MQ3#neBSq+d(J)QUf@5Or#j4F
zE9wy-zzpWS-|kPDMh6-ZAix6Vys`~z<z1>a&kJm|imv7ub-TtLCa_4e4I5=UIc=oR
zMZp~HHelG>w3R-sf=NDc2!CO_CY#_mUAB7>EzoVZHQ_FSe#`~{NC3zSC#Rbm6>q&j
z@5Sbta9Kce=vKUpKxc5ECM?@Y)`jaPksjiTxWXwc3)c%Gy#>t`;U6*3bhw@s=`#LQ
zgx|zK7hC@;CdDkb013dG#HfHafZ=eN#h56ZuI2a!d?)%Hf#Ti4gV;lk^&D{=`uAKH
z>As_!bMQrNY%+xcO4tP87l0Fr(gz&zW+I^^kw+i4SLqVeU+?i=+xKuriC~HwgdGn=
z_h&iBtV2O@KjE8@OLZ0puFhMItm66JPiMSI>{r}(jwa$xtr%TGBJ>G;*cI`RvVMxs
zLL&On7Or35l|6!X?J)HV@n-o}p+{V2`o01_tPF04@MVR5#+7#Pn08lp2(l%u8a;OK
zp!ISz(Yv&yU9p3`nyiop<}_K~ng$MQvd`J#lr2W)iTQcM6h}31f?4O#I;+uB+-3%Q
z`0*cPJNYsaZJP;O!<&(@=W~@+w3!zp^n`Il@%WNyddXfg_AZ&j<Cc=~YUDxH=PcN%
zIFH5(x>jk(TlN%G=_dLieUI)}5eKVv-52W;%U3({kc=kzi09cD^L9+|y1X;sFF|f&
UTm9BGZ2$lO07*qoM6N<$g0UG+&Hw-a

literal 0
HcmV?d00001

diff --git a/public/media/sprites.png b/public/media/sprites.png
new file mode 100644
index 0000000000000000000000000000000000000000..20aadb6c4c31f4a46f0a3316241788687c2fc444
GIT binary patch
literal 2595
zcmZ{mc|6mPAICr2%r$G9Gq=d~t=uisVbfeWBNdTjj>;KwOlgg3o6w=$VTiUQqA*5Z
zqeBNdlP~3NLYQlgzWe@uzkj}e{Qh{qpO4r3{dzs#|Guftj@EE-1#tiX;I=k+7Xf_)
zby-wM&<|a|;wpep5Y7Py09EO*O<$-$s}XEm8~}i*1puUE0N@Koq-g-SWB>qM9{@1R
z0sy&)yoTe41PidAoi!f#eKY-ivp|VO*tkatF7^LYAPb$`IKfQF7LPj-H#nOY93tH>
z^E&<2Kvrjs^Dl@_DIESu)`EnM*Bvjyqg;;QL)~h5irx$z88=G~Q?ZS;dNuY=N~)rP
z!{<J+T{|_4yziF7HUGp{DIY+bW4;r<pk|u{&#G-ACB^>UdRCeJC3|^p@Y^MmSaw|O
zq<KQ(>cgnH`mt=(`nwksF1OpdRwptSWL&g;<#Vt5VHL)|uKRA9#vdbF_=0_?$=A_m
z@F%rT_!cE|G&D6rw}mnJ1_l_g{vf!~zq1Xc|EB$kXZY!_p79<2K9Yrd(OT{Mb{mHR
zIvKG63$q6jt50+|q)^*;#+gBVShnFY)z5nDzRVi4ozb?LsVO@_w2}`s^Nsd45NuI&
zhpaC93Xq=!P!5F+t|m_?X^7vZ!l;zS{DCNSO=s(#>vwURfgYrFL(a3IT>5^I1^Q*X
z;)RoYq>tsN>gj(j@5Vm}xi@}SsB{RVwp&HMV7`=duNpIAN9DD77D=bx@cS4V-&vPO
zs5T{9CdzxiGP{x8MkGN(d=iBWQ`V%DcFT)=J1o)t)H3Td!oc1LAK_<(d3rW6p80;H
z#aIj?rO_f63gW^WOh=(%{(Ndk<7FM|l3yoxnrDV*OW1=m7B0}%cYUk@slC;DWXDJ-
zbzq}6+noaUhkMwYaDbO3K#1{=500{dhi6mjFD;htRSp}2)l<FDdPaTH@}ZBeOksAx
z0o#?&M}sk5yMI66exKj62=faf0;nTlgF)_y0U$aGcJKL$M7FwmZiy@VVlX+@g(xS9
z`u>%ASo_Jf3u6|gk06e31F|)O_QAS*Z)CL|=mx)^$~0VZ>4RvI2=-oxLwg~Smc)R?
ziic42uNo<mXt3?wjgaW?_>hoj(`9tgiNDgQA$gb7jWL6o!tQebl792!%r&rX2iIfd
zwjCA3av?iKJ}2lJ8aH!`0%DB+fVum7^Xn%nzYa~JUtU>O2ppA|Zv3&d&9bUmk59Wz
zU5`&9<z{E){52^*2Cf72NU(1&y82EVD1Ck75cK`{+*Yxwn$bH@&pD^URy0Jq;XjW5
z8UKshV|@lOC4jKi2Du#?0rCXoTK)x}9<ZmpEJ;QF@r~A2P@$rg1olJw#4d<upE2G_
z@_Q#z=?5*$`MGAZf<jkb(>r68bYF9iuIr-eb;&1xz9u|eaG%lNMHX%7WXx1|oiTEa
z>5u=TY{rZ?nC7g%a>`NFGkxo57ecI%fnP_0QMi=h$usgg0U#K-lzo4ICX2@=XH+sc
z?g*KF0<%eFSi+hfrgU<qKtqD-z1H88s_0o%Rs_WhiOg!?KD6WT*qZ6{KX`nZ4MmI;
zKQN(bp);YUV;T+jKCq)ap*yWt{jxaStL%!SlfLCa%BRhgiiFLS1$oK~UNikckus<3
zF(1F=&~|P5${wziTjf?KLq+vk7h5c2khwWg2QbFikCPg{_;12FQ<Kp%6>ltlJ2H-Z
zNgsLbj_fx9j~L$hL?f1QThz~tgbFXL+ABGfgeeV!y6)b(&XBAjndVe&>reu7Pyf=x
zBRL88M<U-KQq_nqs1ur$6~-;qNM_Eh7-u)Fh7Y;5+a{DC*Ziry<%$=SMku4YpDRg>
z)}J=R;=En-&;r8ZUsGq!E5bTZI30ysL<I{<dB7Kc>n0@>FMiMaxg|*of^qCKqJSvJ
z0d>D!A)AgP2XVYFBbH^}&?+aq&<1wvLZ5NZF6a6EL3a$E&MWZh;|@dmkt_PPY2swc
z+FZ<9_A}S`S(YM7D3}&ZL*Y5Un?gWzqSNAI^s+V*l+rQuSk)OZIwLDY;!Y&bp^z16
zThcLSRSRV}#c|Rc5zKweZ=hGB3IQi{K@~RcKnG~SYLwuCuxQAB7^l~i#Xn5RuLq`;
z3x`vtuuU4;q<po9DFq==%GK-`^H9d31EO$jH)TK(-YLZIA2$IraVEu>_@_T}uEHsg
z*4`$9M+;xYYtcWMNO>;}oflgzXxnCsdQ{_X0K-Pe{Ar=B2@EJBsZNI*_oq#3H~VyO
z1+<sgdNzNJEp`A)7<KDFMtT}1^TY`*!d>Z!ok$uzv#fhVV&1M?SNP)52x%dd@WR24
zUs;*7RYd??6)qAX(T^L;oAxHFSVQ#WgHm$*kXwB_I_<irS+|~F4?09qym&9s|Kr59
zgL}(<bl-@@eFG>3T3&DJ&FrTvwioMQ7?w}NWCd{15EH?<YH!~3WgOdVIJ==uQElH&
zROMB6=u-O0=PaZswV1XRGvxg1n*<3qu&m^ovmrz7f@yO5+fBI5FwVpp9C`sk35o<c
zs~~I3q4%}RO!yMzE4$6vfZxm7cf5+libeZp<MUo>+j(m|Bqcpc;aWOw>o##G#~R~B
zUK2Wj&~kbSK&DkUi_rUF{iq$AEzUzRN$hp^Ov$C<?xHf$Q@F$WGcJBdC}FOkG&$_$
zbF=dqGf)S$?Q<4`kkLybB<6Ij{^Tz+iU$hSLyp@QEJAD@$EvGekQ~G=%LOGfBpZcC
zYw9Br8FUd|MK!#p?QQj^o~ukOFRsH+%0pj$q2zYaIupk$d4jkSbrFhZw$e9Q=RjTg
zT)lzphGRAdH(lLsR*^q9Ll;I~W!`(M=c>FzCgWie8o9+7{CS_K5>u>-XXU?4pmmDU
ztF($Uj}mD;7m=xN*ZW;doJicbKz@!Nb9mH-kEnvphMGQMR4Lx<lFf}Ri1k=mXH$*U
zhL?8mX>Yt-BP2MOr8}%g{!FKX!$g&pF<7_#5Ou0bt>ToPvvMIf;;DVHCXEYR{K)FG
zEnpihSH8kHUn+U2iLU)o$`?z<EfZ?@-eX2xb1@;SrIqB!+4Wdsk*O<9ayq@*SY-G>
z?v&TgUglV~^_d5mvWG1PRPvjab=@BKopM~Yml!&Z@v1m=-&Bk&>c>i&w<7pjKM_7i
z4O-r^YC0m*I}`em?^|CtlgnTzZ-0t#cSAfpe}nN7yeacKvaa!Lc^~0`!h$)k2vJas
zVl6|mN7CebXQZr}Ji;q~o8Mu*J6`Z0{e|F3(u}q|9qsQM9biU?3=jY?GB7mVXMovf
zWPHL9V`hXlGcny`U|?oou(O3u|5qS1-2Z%F{QnP}&sR_p1myp@;2Itn9qStz0K~?|
g>YWb@jw1L*1n7lF2IbBjQV^H`TT4g$QwtyR-{S78%>V!Z

literal 0
HcmV?d00001

diff --git a/public/media/sprites.svg b/public/media/sprites.svg
new file mode 100644
index 0000000..3f09ef3
--- /dev/null
+++ b/public/media/sprites.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected>.arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #888;
+}
+.zoom {
+  fill: none;
+  stroke: #888;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #888;
+  stroke-width: 0;
+}
+  </style>
+  <rect id="background" width="96" height="124" x="0" y="0" />
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
+</svg>
diff --git a/src/components/Home.js b/src/components/Home.js
index de16f85..2a58b04 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -36,11 +36,19 @@ class Home extends Component {
         <BlocklyComponent ref={this.simpleWorkspace}
           readOnly={false}
           trashcan={true}
+          zoom={{
+            controls: true,
+            wheel: true,
+            startScale: 1.0,
+            maxScale: 3,
+            minScale: 0.3,
+            scaleSpeed: 1.2
+          }}
           media={'media/'}
           move={{
             scrollbars: true,
             drag: true,
-            wheel: true
+            wheel: false
           }}
           initialXml={''}
         >

From a505fa7ad837f4f0dec4acd58a9eb08519453f20 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 11:07:20 +0200
Subject: [PATCH 04/10] add grid

---
 src/components/Home.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Home.js b/src/components/Home.js
index 2a58b04..818181c 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -36,7 +36,7 @@ class Home extends Component {
         <BlocklyComponent ref={this.simpleWorkspace}
           readOnly={false}
           trashcan={true}
-          zoom={{
+          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
             controls: true,
             wheel: true,
             startScale: 1.0,
@@ -44,8 +44,14 @@ class Home extends Component {
             minScale: 0.3,
             scaleSpeed: 1.2
           }}
+          grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
+            spacing: 20,
+            length: 1,
+            colour: '#4EAF47',
+            snap: false
+          }}
           media={'media/'}
-          move={{
+          move={{ // https://developers.google.com/blockly/guides/configure/web/move
             scrollbars: true,
             drag: true,
             wheel: false

From cacde16ab2e1954cd74912d8cea330dd23fc76f5 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 11:52:49 +0200
Subject: [PATCH 05/10] outsourcing BlocklyComponent to
 blockly/BlocklyWindow.js

---
 src/App.css                                   |  2 +-
 src/App.js                                    |  6 +-
 src/components/Blockly/BlocklyComponent.css   |  6 +-
 .../BlocklyWindow.js}                         | 54 +++++++-----
 src/components/Home.js                        | 84 +++----------------
 src/components/Routes.js                      | 10 ++-
 6 files changed, 60 insertions(+), 102 deletions(-)
 rename src/components/{BlocklyView.js => Blockly/BlocklyWindow.js} (54%)

diff --git a/src/App.css b/src/App.css
index 36f46af..adadb75 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,5 +3,5 @@
   overflow: hidden;
   display: block;
   position: relative;
-  padding-bottom: 60px; /* height of your footer + 30px*/y
+  padding-bottom: 60px; /* height of your footer + 30px*/
 }
diff --git a/src/App.js b/src/App.js
index e340af7..a1a4c84 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,8 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import store from './store';
 
+import './App.css';
+
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
 import Navbar from './components/Navbar';
@@ -27,9 +29,7 @@ function App() {
         <Router>
           <div className="wrapper">
             <Navbar />
-            <div style={{ margin: '0 22px' }}>
-              <Routes />
-            </div>
+            <Routes />
             <Footer />
           </div>
         </Router>
diff --git a/src/components/Blockly/BlocklyComponent.css b/src/components/Blockly/BlocklyComponent.css
index d1ac2b4..14db59a 100644
--- a/src/components/Blockly/BlocklyComponent.css
+++ b/src/components/Blockly/BlocklyComponent.css
@@ -1,4 +1,6 @@
 #blocklyDiv {
-  height: 60vH;
-  width: 50%;
+  height: 100%;
+  min-height: 500px;
+  width: 100%;
+  border: 1px solid #4EAF47;
 }
diff --git a/src/components/BlocklyView.js b/src/components/Blockly/BlocklyWindow.js
similarity index 54%
rename from src/components/BlocklyView.js
rename to src/components/Blockly/BlocklyWindow.js
index 77060c2..c2fbc70 100644
--- a/src/components/BlocklyView.js
+++ b/src/components/Blockly/BlocklyWindow.js
@@ -1,31 +1,28 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { onChangeWorkspace } from '../../actions/workspaceActions';
 
-import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
+import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './';
 import * as Blockly from 'blockly/core';
-import * as De from './Blockly/msg/de'; // de locale files
+import * as De from './msg/de'; // de locale files
 //import * as En from './Blockly/msg/en'; // de locale files
-import './Blockly/blocks/index';
-import './Blockly/generator/index';
+import './blocks/index';
+import './generator/index';
 
 
-class BlocklyView extends Component {
+class BlocklyWindow extends Component {
+
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    this.state = {
-      generatedCode: 'Click text'
-    }
   }
 
   componentDidMount() {
-    let workspace = Blockly.getMainWorkspace();
-    workspace.addChangeListener(this.generateCode);
-  }
-
-  generateCode = () => {
-    var code = Blockly.Arduino.workspaceToCode(this.workspace);
-    console.log(code);
-    this.setState({ generatedCode: code })
+    const workspace = Blockly.getMainWorkspace();
+    workspace.addChangeListener((event) => {
+      this.props.onChangeWorkspace(event);
+    });
   }
 
   render() {
@@ -33,11 +30,25 @@ class BlocklyView extends Component {
       <BlocklyComponent ref={this.simpleWorkspace}
         readOnly={false}
         trashcan={true}
+        zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
+          controls: true,
+          wheel: true,
+          startScale: 1.0,
+          maxScale: 3,
+          minScale: 0.3,
+          scaleSpeed: 1.2
+        }}
+        grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
+          spacing: 20,
+          length: 1,
+          colour: '#4EAF47', // senseBox-green
+          snap: false
+        }}
         media={'media/'}
-        move={{
+        move={{ // https://developers.google.com/blockly/guides/configure/web/move
           scrollbars: true,
           drag: true,
-          wheel: true
+          wheel: false
         }}
         initialXml={''}
       >
@@ -65,4 +76,9 @@ class BlocklyView extends Component {
   };
 }
 
-export default BlocklyView;
+BlocklyWindow.propTypes = {
+  onChangeWorkspace: PropTypes.func.isRequired
+};
+
+
+export default connect(null, { onChangeWorkspace })(BlocklyWindow);
diff --git a/src/components/Home.js b/src/components/Home.js
index 818181c..9d8f30b 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,92 +1,30 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { onChangeWorkspace } from '../actions/workspaceActions';
 
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
-import CodeViewer from './CodeViewer';
-
-import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
-import * as Blockly from 'blockly/core';
-import * as De from './Blockly/msg/de'; // de locale files
-//import * as En from './Blockly/msg/en'; // de locale files
-import './Blockly/blocks/index';
-import './Blockly/generator/index';
+import BlocklyWindow from './Blockly/BlocklyWindow';
 
+import Grid from '@material-ui/core/Grid';
 
 class Home extends Component {
-  constructor(props) {
-    super(props);
 
-    this.simpleWorkspace = React.createRef();
-  }
-
-  componentDidMount() {
-    const workspace = Blockly.getMainWorkspace();
-    workspace.addChangeListener((event) => {
-      this.props.onChangeWorkspace(event);
-    });
-  }
 
   render() {
     return (
       <div>
         <WorkspaceStats />
-        <BlocklyComponent ref={this.simpleWorkspace}
-          readOnly={false}
-          trashcan={true}
-          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-            controls: true,
-            wheel: true,
-            startScale: 1.0,
-            maxScale: 3,
-            minScale: 0.3,
-            scaleSpeed: 1.2
-          }}
-          grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
-            spacing: 20,
-            length: 1,
-            colour: '#4EAF47',
-            snap: false
-          }}
-          media={'media/'}
-          move={{ // https://developers.google.com/blockly/guides/configure/web/move
-            scrollbars: true,
-            drag: true,
-            wheel: false
-          }}
-          initialXml={''}
-        >
-          <Category name="loops" >
-            <Block type="controls_for" />
-            <Block type="controls_repeat_ext" />
-            <Block type="controls_whileUntil" />
-          </Category>
-          <Category name="senseBox" colour="120" >
-            <Category name="Sensoren" colour="120" >
-              <Block type="sensebox_sensor_temp_hum"></Block>
-            </Category>
-            <Block type="sensebox_telegram" />
-          </Category>
-          <Category name="Logic" colour="#b063c5">
-            <Block type="control_if"></Block>
-            <Block type="controls_ifelse"></Block>
-            <Block type="logic_compare"></Block>
-            <Block type="logic_operation"></Block>
-            <Block type="logic_negate"></Block>
-            <Block type="logic_boolean"></Block>
-          </Category>
-        </BlocklyComponent>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={6}>
+            <BlocklyWindow />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <div style={{height: '500px', border: '1px solid black'}}></div>
+          </Grid>
+        </Grid>
         <WorkspaceFunc />
       </div>
     );
   };
 }
 
-Home.propTypes = {
-  onChangeWorkspace: PropTypes.func.isRequired
-};
-
-
-export default connect(null, { onChangeWorkspace })(Home);
+export default Home;
diff --git a/src/components/Routes.js b/src/components/Routes.js
index ce488b0..f1c42c4 100644
--- a/src/components/Routes.js
+++ b/src/components/Routes.js
@@ -9,10 +9,12 @@ class Routes extends Component {
 
   render() {
     return (
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route component={NotFound} />
-      </Switch>
+      <div style={{ margin: '0 22px' }}>
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route component={NotFound} />
+        </Switch>
+      </div>
     );
   }
 }

From 393c89877eceea9af9af633661b9afbc377ead2a Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 12:24:14 +0200
Subject: [PATCH 06/10] code on/off

---
 src/components/CodeViewer.js |  2 +-
 src/components/Home.js       | 25 +++++++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index caa920b..85b5950 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -7,7 +7,7 @@ class CodeViewer extends Component {
 
   render() {
     return (
-      <div>
+      <div style={{height: '500px', border: '1px solid black'}}>
         {this.props.arduino}
         <p>{this.props.xml}</p>
       </div>
diff --git a/src/components/Home.js b/src/components/Home.js
index 9d8f30b..8638b6d 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -3,23 +3,40 @@ import React, { Component } from 'react';
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
 import BlocklyWindow from './Blockly/BlocklyWindow';
+import CodeViewer from './CodeViewer';
 
 import Grid from '@material-ui/core/Grid';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
 
 class Home extends Component {
 
+  state = {
+    codeOn: false
+  }
+
+  onChange = () => {
+    this.setState({ codeOn: !this.state.codeOn });
+  }
 
   render() {
     return (
       <div>
         <WorkspaceStats />
         <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{position: 'relative'}}>
+            <FormControlLabel
+              style={{margin: '5px 10px 0 0', position: 'absolute', top: 0, right:0, zIndex:1}}
+              control={<Switch checked={this.state.codeOn} onChange={this.onChange} color='primary'/>}
+              label="Code"
+            />
             <BlocklyWindow />
           </Grid>
-          <Grid item xs={12} md={6}>
-            <div style={{height: '500px', border: '1px solid black'}}></div>
-          </Grid>
+          {this.state.codeOn ?
+            <Grid item xs={12} md={6}>
+              <CodeViewer/>
+            </Grid>
+          : null}
         </Grid>
         <WorkspaceFunc />
       </div>

From b4a273b32aacee7bc1f623bfd07353921b6bd07c Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 15:45:30 +0200
Subject: [PATCH 07/10] pretty code as output

---
 .gitignore                   |  1 +
 package.json                 |  1 +
 src/components/CodeViewer.js | 27 ++++++++++++++++++++++++---
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 680c904..273210c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
+package-lock.json
diff --git a/package.json b/package.json
index a0bd31d..6a3180b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "blockly": "^3.20200625.2",
+    "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index 85b5950..2651f69 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -2,14 +2,35 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import "prismjs/plugins/line-numbers/prism-line-numbers";
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+
 
 class CodeViewer extends Component {
 
+  componentDidMount() {
+    Prism.highlightAll();
+  }
+
+  componentDidUpdate() {
+    Prism.highlightAll();
+  }
+
   render() {
     return (
-      <div style={{height: '500px', border: '1px solid black'}}>
-        {this.props.arduino}
-        <p>{this.props.xml}</p>
+      <div style={{height: '500px', border: '1px solid black', overflow: 'auto', scrollbarWidth: 'thin'}}>
+        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <code className="language-clike">
+            {this.props.arduino}
+          </code>
+        </pre>
+        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+          <code className="language-xml">
+            {`${this.props.xml}`}
+          </code>
+        </pre>
       </div>
     );
   };

From 338bec2d59241495ee3143b57e8f107e544e76ae Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 18:18:47 +0200
Subject: [PATCH 08/10] accordion to view code of different languages

---
 src/App.js                   |   3 ++
 src/components/CodeViewer.js | 101 +++++++++++++++++++++++++++++++----
 2 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index a1a4c84..67e20d0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,9 @@ const theme = createMuiTheme({
   palette: {
     primary: {
       main: '#4EAF47',
+    },
+    secondary: {
+      main: '#DDDDDD'
     }
   }
 });
diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index 2651f69..0a62b12 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -7,9 +7,56 @@ import "prismjs/themes/prism.css";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
 import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 
+import { withStyles } from '@material-ui/core/styles';
+import MuiAccordion from '@material-ui/core/Accordion';
+import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
+import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
+
+const Accordion = withStyles((theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.secondary.main}`,
+    boxShadow: 'none',
+    '&:before': {
+      display: 'none',
+    },
+    '&$expanded': {
+      margin: 'auto',
+    },
+  },
+  expanded: {},
+}))(MuiAccordion);
+
+const AccordionSummary = withStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.secondary.main,
+    borderBottom: `1px solid white`,
+    marginBottom: -1,
+    minHeight: 50,
+    '&$expanded': {
+      minHeight: 50,
+    },
+  },
+  content: {
+    '&$expanded': {
+      margin: '12px 0',
+    },
+  },
+  expanded: {},
+}))(MuiAccordionSummary);
+
+const AccordionDetails = withStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiAccordionDetails);
+
 
 class CodeViewer extends Component {
 
+  state = {
+    expanded: true
+  }
+
   componentDidMount() {
     Prism.highlightAll();
   }
@@ -18,19 +65,51 @@ class CodeViewer extends Component {
     Prism.highlightAll();
   }
 
+  onChange = () => {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
   render() {
+    var curlyBrackets = '{ }';
+    var unequal = '<>';
     return (
-      <div style={{height: '500px', border: '1px solid black', overflow: 'auto', scrollbarWidth: 'thin'}}>
-        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
-          <code className="language-clike">
-            {this.props.arduino}
-          </code>
-        </pre>
-        <pre className="line-numbers" style={{whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
-          <code className="language-xml">
-            {`${this.props.xml}`}
-          </code>
-        </pre>
+      <div style={{height: '500px'}}>
+        <Accordion
+          square={true}
+          style={{margin: 0}}
+          expanded={this.state.expanded}
+          onChange={this.onChange}
+        >
+          <AccordionSummary>
+            <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{curlyBrackets}</b>
+            <div style={{margin: 'auto 5px 2px 0px'}}>Arduino Quellcode</div>
+          </AccordionSummary>
+          <AccordionDetails style={{padding: 0, height: 'calc(500px - 50px - 50px)', backgroundColor: 'white'}}>
+            <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+              <code className="language-clike">
+                {this.props.arduino}
+              </code>
+            </pre>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          square={true}
+          style={{margin: 0}}
+          expanded={!this.state.expanded}
+          onChange={this.onChange}
+        >
+          <AccordionSummary>
+            <b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{unequal}</b>
+            <div style={{margin: 'auto 5px 2px 0px'}}>XML Blöcke</div>
+          </AccordionSummary>
+          <AccordionDetails style={{padding: 0, height: 'calc(500px - 50px - 50px)', backgroundColor: 'white'}}>
+            <pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
+              <code className="language-xml">
+                {`${this.props.xml}`}
+              </code>
+            </pre>
+          </AccordionDetails>
+        </Accordion>
       </div>
     );
   };

From 9f33b93fddf49c5950ae7554e02003378e49cfd1 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 19:15:41 +0200
Subject: [PATCH 09/10] recalculating positions of trash, zoom, etc

---
 src/actions/workspaceActions.js         |  1 -
 src/components/Blockly/BlocklyWindow.js |  1 +
 src/components/Home.js                  | 11 +++++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js
index 7b0d063..006d15f 100644
--- a/src/actions/workspaceActions.js
+++ b/src/actions/workspaceActions.js
@@ -22,7 +22,6 @@ export const onChangeWorkspace = (event) => (dispatch, getState) => {
       type: NEW_CODE,
       payload: code
     });
-    console.log(event.type);
     var stats = getState().workspace.stats;
     if (event.type === Blockly.Events.BLOCK_CREATE){
       stats.create += event.ids.length;
diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js
index c2fbc70..8ad7486 100644
--- a/src/components/Blockly/BlocklyWindow.js
+++ b/src/components/Blockly/BlocklyWindow.js
@@ -20,6 +20,7 @@ class BlocklyWindow extends Component {
 
   componentDidMount() {
     const workspace = Blockly.getMainWorkspace();
+    this.props.onChangeWorkspace({});
     workspace.addChangeListener((event) => {
       this.props.onChangeWorkspace(event);
     });
diff --git a/src/components/Home.js b/src/components/Home.js
index 8638b6d..47823ff 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import * as Blockly from 'blockly/core';
+
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
 import BlocklyWindow from './Blockly/BlocklyWindow';
@@ -15,6 +17,15 @@ class Home extends Component {
     codeOn: false
   }
 
+  componentDidUpdate(){
+    /* Resize and reposition all of the workspace chrome (toolbox, trash,
+    scrollbars etc.) This should be called when something changes that requires
+    recalculating dimensions and positions of the trash, zoom, toolbox, etc.
+    (e.g. window resize). */
+    const workspace = Blockly.getMainWorkspace();
+    Blockly.svgResize(workspace);
+  }
+
   onChange = () => {
     this.setState({ codeOn: !this.state.codeOn });
   }

From bd28c388be71a21c71e8a56e64334c75721d558c Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Fri, 24 Jul 2020 19:49:40 +0200
Subject: [PATCH 10/10] styling: cahnging color to 'white"

---
 public/favicon.ico               | Bin 3150 -> 0 bytes
 public/favicon.png               | Bin 0 -> 1343 bytes
 public/index.html                |  10 +++-------
 public/manifest.json             |   8 ++++----
 src/App.css                      |   2 +-
 src/components/Footer.js         |   2 +-
 src/components/MaxBlocks.js      |   5 ++---
 src/components/Navbar.js         |   6 +++++-
 src/components/WorkspaceFunc.js  |   4 ++--
 src/components/WorkspaceStats.js |   2 +-
 src/components/sensebox_logo.svg |   3 +++
 11 files changed, 22 insertions(+), 20 deletions(-)
 delete mode 100644 public/favicon.ico
 create mode 100644 public/favicon.png
 create mode 100644 src/components/sensebox_logo.svg

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index bcd5dfd67cd0361b78123e95c2dd96031f27f743..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3150
zcmaKtc{Ei0AIGn;MZ^<@lHD*OV;K7~W1q3jSjJcqNywTkMOhP*k~Oj?GO|6{m(*C2
zC7JA+h<I$-c@W9(>N%%Bp7T4;J@?%2_x=5zbI<2~->=X60stMr0B~{wzpi9D0MG|#
zyuANt7z6;uz%?PEfAnimLl^)6h5ARwGXemG2>?hqQv-I^Gpyh$JH}Ag92}3{$a#z&
zd`il2Sb#$U&e&4#^4R|GTgk!Qs+x*PCL{2+`uB5mqtnqLaaw`*H2oqJ?XF(zUACc2
zSibBrdQzcidqv*TK}rpEv1ie&;Famq2IK5%4c}1Jt2b1x_{y1C!?EU)@`_F)yN*NK
z)(u03@%g%uDawwXGAMm%EnP9FgoucUedioDwL~{6RVO@A-Q$+pwVRR%WYR>{K3E&Q
zzqzT!EEZ$_NHGYM6&PK#CGUV$pTWsiI5#~m>htoJ!vbc0=gm3H8sz8KzIiVN5xdCT
z%;}`UH2Pc8))1VS-unh?v4*H*NIy5On{MRKw7BTmOO9oE2UApwkCl9Z?^dod9M^#w
z51tEZhf+#dpTo#GDDy<bEWGA$<=|8JJ8`t{bCVZ4A=!!(Dnz>#kuzoIjMjZ?%v*h$
z*vwUMOjGc?R0(FjLWkMD)kca4z6~H45FIzQ!Zzu&-yWyMdCBsDr2`l}Q{8fH$H@O<
z$&snNzbqLk?(GIe?!PVh?F~2qk4z^rMcp$P^hw^rUPjyCyoNTRw%;hNOwrCoN?G0E
z!wT^=4Loa9@O{t;Wk(Nj=?ms1Z?UN_;21m%sUm?uib=pg&x|u)8pP#l--$;B9l47n
zUUnMV0sXLe*@Gvy>XWjRoqc2tOzgYn%?g@Lb8C&WsxV1Kjssh^ZBs*Ysr+E6%tsC_
zCo-)hkYY=Bn?wMB4sqm?WS>{kh<6*DO)vXnQpQ9`-_qF6!#b<VC={xV*&!lEsNJc|
z`t*;g-fLc7b7_LnM)Ta?t3vIJLM7sghSx-zRMzeb%4u0$-VyEj(BdgvrPTzeNwt$F
zEIfg<YmdkpE=;j~-BzX!FbtW_53Nsn@RXnAJ3%QrSse4k%XJ=~GI%N6VzajM=J8r~
zj!<cVSAh!k&yr4X#d3-o!Yzw$T2s#YBiVpdba>;3Nf@;#B>e2j$yokl6F|9p1<($2
z=WSr%)Z?^|r6njhgbuMrIN>8JE05u0x5t@_dEfbGn9r0hK4c2vp>(*$GXsjeLL_uz
zWpyfUgdv!~-2N;llVzik#s2*XB*%7u8(^sJv&T3pzaR&<9({17Zs~UY>#ugZZkHBs
zD+>0_an$?}utGp$dcXtyFHnTQZJ}SF=oZ}X07dz~K>^o(vjTzw8ZQc!Fw1W=&Z?9%
zv63|~l}70sJbY?H8ON8j<H;=`G+=`|^e$sliuGbLw8Iim!Ewr$y^uCn5ICD7r{7Ln
zH;!1<P%SIp>)w5=6OpXuaZ}YT03`2%u8{;B0Vafo_iY7&BiQTbRkdJBYL}?%ATfmc
zLG$uXt$@3j#OIjALdT&Ut$=9F8<EGdJ)VPA{^F)=9l8o^O1k>cgV{w_f5eS)PjoVi
z&oemp-SKJ~UuGuCP<tf`^+D0Ssp;_WQ5id(yA1LiiwEjU)zXy4dOw%huD)6Rj!1Cd
z&AhoB&a$9Z505mRqMCf#VRFj!myTXd?(Zc1H=o$crL*W$%l)|z+ZlP>1|iY?J^S&P
z)-IG?O-*=z6kfZrX5H*G=aQ{ZaqnOqP@&+_;nq@mA>EcjgxrYX8EK|Iq4&E&rxR?R
z<O=I6ND<gMq;tYDO(piILIv8wjoVHT3$wOlJ$y@j_D(z?^{V9jX^TV|hdq5muwdcu
zq{rQwJ$5|z4t@JINEzMV-*Rk2wu&e6kWQr$GR(cbsiACnTzCrwJ-cHM=cvIJubkY%
zg}ryq`E4VC7zYN=f?Nor4Y1IaCA=}OP!}t{IdqG`+n;!&_vE)8siLJI6*h4j=(|}#
z19hl4Y=n^X8iOFepolHpaMo*noUV6aK-y?QU%vAt;}WDQR4$_`zP@_D#peuE^vw$6
zY2S^^VQ;nWs)#bgL6-dc6^$o$l+>8N$QOdRwY<X`DuKIVby40Iw%sDU;p6zvCc~ff
zl$0SH;_ct2r|ukF|8YpSJO$5p-5;TXw*D8rC~zC~i{9+Ih$T?W9MKDozlr_t3COdg
zf-;y~c5i3E-wuc$uJE-{dO6(KQU+}R#uo9_81`|gL43Zrl=KnvnJ;yt)6~5})ZBxV
zoxGqjvZCTp$HBirk}WE_O!MkAu7@jK@;I-KmQvAl_^^D`9a_2)atflNVqiFeKR^&>
zr{P`O)=87>YLH<tB^~-!iElm=YCnRFfDVqszi8LLpRH)`dg<c^p<zhH*#~LkERVM}
zFYPeNsR4r(fg|FIDCOT*OTh1BKgvqr`^cm7OsOeb%}wbn&tUxn0Ki~;L_V>tFfGXW
z6P)ucrhj~It_9w<^v5>T6N1U}+BkS))=WX*2JY=}^b2czGhH<`?`(}}qMcpPx_%>M
zM|fs(+I1m&_h(zqp-HgP>re$2O^o$q)xu#fl0ivOJE({du<q;a`}OC8?-%?-JcHw4
zDXjz1UxITzP_o;B>U)a*OD(eYgSi^cdTn}pqcPM(;S)2%1By^Wh%-CaC%>d9hi`7J
zaxL7@;nhA>PE%s99&;z{8>VFgf{u!(-B-x7Of6ueme+ScryL`h(^qKE)DtieWY>-7
zgB)VJESQS4*1LU(2&@pgLvSt{(((C?K_V(rQk``i&5}ZPG;G^FiPlZ$7|-vEmMWlU
z5lQ%iK2nu=h2wd_7>gK@vX=*AG+u~rQP$NwPC`ZA?4nh{3tui1x@bT6-;Rk3yDQ>d
z?3qRD#+PeV7#FAa>s`Xwxsx_oRFcN$StW2=CW<oh>`=qObsT?SD^#^jM1Yk}PSPxJ
zG@-_mnNU_)vM|iLRSI>UMp|hatyS}17R{10IuL0TLlupt>9dR<P*%raE$v@dXIGUv
z1Ep`BX32T#^wS?^xp6U0BtREV1F{F-KgRZV=Vy7XYH4ooAYHr)`$zdR7XjL1Lrx#m
zM`5qjP9vs!f4Qo-rf+8r@t=|_;7O5?Fo~mDYDD6>s_SPQbv7BLYyC#qv16E-y@XZ=
z-!p7I%#r-BVi$nQq3&ssRc_IC%R6$tA&^s_l46880~Wst3@>(|EO<}T4~ci~#!=e;
zD)B>o%1+$ksURD1p7I-<3ehlFyVkqrySf&gg>Bp<brefUF_TT@@`c%GEp3{yjAYV#
zWyI&XXs-Qutym;kFwhB_+1#wU*_mOHW^3Z9a5di9&gX0{E7j|kc1937kYD;Nx4w8|
zEtyqg{?t;$MQ$_0k55&!gt0ac>0Z9?JaG|gyTZ{Cb8SdvAWVmFX7v2ohs!OCc!Udk
zUITUpmZ33rKLI#(&lDj}c<kK0p^!b45kV5jt{;<&B{9gcZN^=<reT+-Jkcaq8c}i~
zI>KA#dpL4Fil=$5pu_wi1XJR<Ms<Hzy-bLUK6{fI*~chP9G}^;nq`|ASCC3>!llw`
zSItPBDEdMHk2>c7#%lBxZ<h*v`Si(R!wEGJET5VLw-4cA&KW~E&kFonpJ^o{oF|{}
zwicO!l9p)>HHvtVUOZ$}v?=?AT~9!Jcqa@IJGuMg(s^7r>pcTrd)pS`{5Cu8WPey`
z9)!!OUUY@L%9Q+bZa*S5`3f_|lFCPN6kdp_M2>{le8;cn^XUsPa+TUk47qd6)IBR%
zk*&Ip?!Ge_gmmdj)BX}P_5o@VI2*wbZ^>UhFju}0gQZh!pP%4XT9{@w;G#b3XK8sN
zF(7i$Jv(IM$8Akys9dhP^^~H2(7BfJp}yDW1#@!CL-!mGcSCnJ599WK9MV@yo_u$v
MDeX2GIKR{Qf5okjU;qFB

diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5dc7b7bd643e54fd470a849a327469fa385f0711
GIT binary patch
literal 1343
zcmV-F1;F}=P)<h;3K|Lk000e1NJLTq001}u001}$0{{R3pIFN*0005bP)t-s0002_
z{r~^}|Nj5~|NsC0|Nj-Z=~S{!qvG~N#Owb5|M~s@ncwvM{{NlQnHRX}|L`n&!*x=z
zO!@u(P_Rk=?Fos>h5z(o|NsAIyJ2p=X#epx|Lq4}&FxpSQ2*@>|NsBr_50HC`X9RK
zEWYbCzv(~1>QKn+OUCP!&yW<i=>PR`klgd9*Q5XTfU@WI|Ns9AwCMl;|Ns8=;PK!8
z?il~=1^?{^RmtpA$n34zssH)2|Lzd~|NlqD>;Lp;XwmSD%ZUH<ZxpxaeAn{-_m=<l
zaT~em61M30{Qm#{|M~s?Ww~Gf?<fEAO#ksd|Ns9^uSW{B=ohx;|Lp+&{{HLu{le_{
z_5A+b^!wTK`*hUuWzX=1*zr@z>?6DCAGznZ==f~W@LJ99RLk#3$L&JJ?L5NkFuv&#
zw(0-w7w-D~%<uZM=l7%H_IlOuTg&ZF$n7-1>o&mYEWPMZut`s^Nc#Q#<@fyG_59TG
z`_S<Eu;=&x{`H>W^<d8K|NP%*yJBLvT;lfp|Ni;N?fIwU_4NAmkK6K1$nO9B=hp1i
z|M{$~+Nz+`osP_j|MrJ;z;6HZS*Yap?f2~9@!z!Fv98*yZoOz&vr*0Z2v-0A08n&N
zPE!C3%L-fje()2!TnGNsj&C+A{rmUtqnB4eHZSt;=;+kb)6mY%!?UoMj*W(fg?C5_
z2L1i{_Vw@Y<KEoLznhkpj*N?ZcX4fHVOUH-C?ze_<TL;P0?<iBK~zY`otF1k8bJ_%
zIZo`FM2#^qCZ_kqnBIGD!!3(K)L0P28e=agsEM(c^#3;Vj)U=*yMyEV!Sy}nV`gt>
z=WtjcKfn9Ikp<F4kLU3F>^wB9ZF}cDDtoK#d)b)MV^k96ZX4b{&khb|Y|7}_Hz^-+
z<6TDi9(Yo?o<UBj>P~lxc<q^#*2{77$fjQH-n`<>Nn^@6P8R?ytZsKFtnJkW09P7Q
zzEsOWBeEQgMwcTHhg+IOr&t@9;JRmSN~alX?S(i!e$h0|DZjeK80+d$!=}T^5+}>5
zTIo$~`5>C@YE)2Bl-`t_g|b1uf*Kcihtd2BNC%1&AiztG?@Gy6z*sXtABru2jL!yt
zfJoz#q6nsRo*@kYEx1g<4*G%}zJ%AQAi278c<n4kBgCNrmjNKWVMXc0RV!aG^9zn}
z_>9Ulzz}1@K=?7TEAjs)!OTCwf@9!|Z?72_KOmH*A2fWL`9#~_NsKK9HD#k(>o<V;
zKuC-CdjUlAZ2UePZDni-pkIAFUZy_Yfc`kVAL9g+q?!NF=^DV`37EvcGXVH4?P3FX
zzbFEZ%g4gy(3Z^g9iWS`Sv-ZX65z@6LoZci+(?9;aR3VuOMMzI)u$_!Fe%ma;fQ8?
zlS-%N<(eLcM%!T1IHVp&Zn6PFVgpda1&lmuIhSF}O=46Cz@+66xvIpl$vN(61`uj;
z;bO@q*NRWgg9=@%7Zw-UjK)FAM>+4;a2g$iFgjiu4AsIC8dijUSQ(GG!kfwQ$XEVs
zY{lkcTN}TBLE2$1CkFD*^*J{YTU!(dvPix93RqkpaqIcFHb!-tymXv=g|ZQUuVOyy
z*Xr$2w-IHf=vh%z={BU|EydU|EA~6mB30V-$b2MjGmkt=>d%boy#pElv_jL4M@Xe3
zf@j~%+hao`)3%4^g);OGp_h$`UKYr8b+YM){{fkc0^ml!|3Ux&002ovPDHLkV1n!~
B0nz{f

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index aa069f2..3cc5778 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,13 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="theme-color" content="#4EAF47" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>senseBox Blockly</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..b5ec843 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,9 +3,9 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "type": "image/png"
     },
     {
       "src": "logo192.png",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#4EAF47",
+  "background_color": "#4EAF47"
 }
diff --git a/src/App.css b/src/App.css
index adadb75..a8c8f37 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,5 +3,5 @@
   overflow: hidden;
   display: block;
   position: relative;
-  padding-bottom: 60px; /* height of your footer + 30px*/
+  /* padding-bottom: 60px; /* height of your footer + 30px*/
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 46466eb..fa068da 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -8,7 +8,7 @@ class Footer extends Component {
   render() {
     return (
       <footer style={{position:'absolute', bottom: '0', width: '100%'}}>
-        <div style={{minHeight:'30px', backgroundColor:'lightgrey', textAlign: 'center', paddingTop: '2px'}}>
+        <div style={{minHeight:'30px', backgroundColor:'#DDDDDD', textAlign: 'center', paddingTop: '2px'}}>
           <div style={{color: 'grey', height: '100%'}}>
             <Link to={"/impressum"} style={{textDecoration: 'none', color: 'inherit'}}>Impressum</Link>
             <Typography style={{margin: '0px 10px 0px 10px', display: 'initial', fontSize: '1rem'}}>|</Typography>
diff --git a/src/components/MaxBlocks.js b/src/components/MaxBlocks.js
index 4a0b86c..bf4981a 100644
--- a/src/components/MaxBlocks.js
+++ b/src/components/MaxBlocks.js
@@ -28,14 +28,13 @@ class MaxBlocks extends Component {
     return (
       <div style={{display: 'inline', marginLeft: '10px'}}>
         <TextField
-          style={{width: '50px'}}
+          style={{width: '50px', marginRight: '5px'}}
           name="max"
           type="number"
           onChange={this.onChange}
           value={this.state.max}
-          variant='outlined'
         />
-        <Button style={{marginRight: '10px'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
+        <Button style={{marginRight: '10px', color: 'white'}} variant="contained" color="primary" onClick={this.setMaxBlocks}>
           Maximale Blöcke
         </Button>
       </div>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index a72d41a..cd6ebf7 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 
 import ClearWorkspace from './ClearWorkspace';
+import senseboxLogo from './sensebox_logo.svg';
 
 import { withStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -51,7 +52,7 @@ class Navbar extends Component {
           style={{height: '50px', marginBottom: '30px'}}
           classes={{root: this.props.classes.appBarColor}}
         >
-          <Toolbar style={{height: '50px', minHeight: '50px', padding: 0}}>
+          <Toolbar style={{height: '50px', minHeight: '50px', padding: 0, color: 'white'}}>
             <IconButton
               color="inherit"
               onClick={this.toggleDrawer}
@@ -64,6 +65,9 @@ class Navbar extends Component {
                 senseBox Blockly
               </Typography>
             </Link>
+            <Link to={"/"} style={{marginLeft: '10px'}}>
+              <img src={senseboxLogo} alt="senseBox-Logo" width="30"/>
+            </Link>
           </Toolbar>
         </AppBar>
         <Drawer
diff --git a/src/components/WorkspaceFunc.js b/src/components/WorkspaceFunc.js
index 07de091..2bf4c11 100644
--- a/src/components/WorkspaceFunc.js
+++ b/src/components/WorkspaceFunc.js
@@ -44,10 +44,10 @@ class WorkspaceFunc extends Component {
             </Button>
           </DialogActions>
         </Dialog>
-        <Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getArduinoCode()}>
+        <Button style={{ marginRight: '10px', color: 'white' }} variant="contained" color="primary" onClick={() => this.getArduinoCode()}>
           Get Adurino Code
         </Button>
-        <Button style={{ marginRight: '10px' }} variant="contained" color="primary" onClick={() => this.getXMLCode()}>
+        <Button style={{ marginRight: '10px', color: 'white' }} variant="contained" color="primary" onClick={() => this.getXMLCode()}>
           Get XML Code
         </Button>
         <MaxBlocks />
diff --git a/src/components/WorkspaceStats.js b/src/components/WorkspaceStats.js
index 51ec1fa..2317d79 100644
--- a/src/components/WorkspaceStats.js
+++ b/src/components/WorkspaceStats.js
@@ -27,7 +27,7 @@ class WorkspaceStats extends Component {
     const workspace = Blockly.getMainWorkspace();
     const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
     return (
-      <div style={{marginBottom: '20px'}}>
+      <div style={{marginBottom: '20px', color: 'white'}}>
         <Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
           <div>
             <FontAwesomeIcon icon={faPuzzlePiece} />
diff --git a/src/components/sensebox_logo.svg b/src/components/sensebox_logo.svg
new file mode 100644
index 0000000..82eb0e1
--- /dev/null
+++ b/src/components/sensebox_logo.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg3336" version="1.1" inkscape:version="0.91 r13725" xml:space="preserve" width="59.352432mm" height="59.350437mm" viewBox="0 0 210.3039 210.29684" sodipodi:docname="sensebox_sticker_randlos.svg"><metadata id="metadata3342"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs id="defs3340"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath3372"><path d="M 1776.56,314.355 1577.99,115.773 1379.41,314.355 1577.99,512.93 1776.56,314.355" id="path3374" inkscape:connector-curvature="0"/></clipPath></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="2560" inkscape:window-height="1385" id="namedview3338" showgrid="false" units="mm" fit-margin-top="0" fit-margin-left="0" fit-margin-bottom="0" fit-margin-right="0" inkscape:zoom="2.8284271" inkscape:cx="96.486743" inkscape:cy="50.741222" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="g3344"/><g id="g3344" inkscape:groupmode="layer" inkscape:label="ink_ext_XXXXXX" transform="matrix(1.25,0,0,-1.25,-144.87458,197.27671)"><g id="g4162"><path d="m 236.25729,25.809652 c -9.41744,8.915872 -22.084,14.430114 -36.05095,14.430465 -14.08981,3.52e-4 -26.84929,-5.570861 -36.27475,-14.569288 l 36.08553,-36.086939 36.2403,36.225907" style="fill:#4ebe4b;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3354" inkscape:connector-curvature="0"/><path d="m 200.30182,117.74887 c -11.35741,2.9e-4 -21.85074,3.73524 -30.34036,10.00385 l 30.06823,30.06865 30.3324,-30.33324 c -8.44695,-6.11398 -18.82147,-9.73954 -30.06027,-9.73926" style="fill:#fff200;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3356" inkscape:connector-curvature="0"/><path d="m 196.62929,105.2736 c 0.52962,-3.27507 -1.68587,-6.326391 -4.93931,-6.839326 -3.25343,-0.519279 -6.31206,1.699746 -6.82474,4.933296 -0.52961,3.26321 1.68588,6.32428 4.93932,6.83551 3.24919,0.53284 6.31207,-1.68788 6.82473,-4.92948" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3358" inkscape:connector-curvature="0"/><path d="m 196.62993,80.152143 c 0.53808,-3.256854 -1.68588,-6.317921 -4.93931,-6.825761 -3.25344,-0.539623 -6.3036,1.684495 -6.82474,4.926516 -0.52962,3.264901 1.68587,6.32597 4.93083,6.838898 3.25768,0.531147 6.32055,-1.686193 6.83322,-4.939653" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3360" inkscape:connector-curvature="0"/><path d="m 216.02407,58.889433 c 0.51267,-3.247108 -1.68587,-6.308171 -4.95625,-6.834233 -3.25768,-0.50785 -6.30361,1.696353 -6.82475,4.944733 -0.52962,3.263205 1.68587,6.312834 4.93931,6.833817 3.25344,0.532839 6.3036,-1.689583 6.84169,-4.944317" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3362" inkscape:connector-curvature="0"/><path d="m 221.97942,92.07404 c 0.52114,-3.236517 -1.68588,-6.29801 -4.94779,-6.824072 -3.24919,-0.53114 -6.3036,1.687887 -6.83321,4.94474 -0.52962,3.251766 1.69859,6.312837 4.93931,6.834234 3.2619,0.524367 6.31208,-1.696353 6.84169,-4.954902" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3364" inkscape:connector-curvature="0"/><path d="m 254.26095,43.693851 -10.90039,10.891908 11.28511,11.285536 -22.57927,5.73e-4 -7.81588,7.824367 7.59542,7.60009 23.00713,-5.81e-4 -11.50172,11.517849 10.91234,10.892857 29.8791,-29.879533 -29.88183,-30.133049" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3366" inkscape:connector-curvature="0"/><g transform="matrix(0.42362617,-1.0656099e-5,-1.0656099e-5,0.42362617,-468.45117,-59.452381)" id="g3368"><g id="g3370" clip-path="url(#clipPath3372)"><path d="m 1413.79,344.719 -8.58,-8.582 c 6.05,-6.059 9.02,-13.887 9.04,-21.824 -0.02,-7.938 -2.99,-15.758 -9.02,-21.797 -6.06,-6.043 -13.89,-9.02 -21.82,-9.036 -7.95,0.016 -15.78,2.993 -21.84,9.047 -6.04,6.047 -9.02,13.871 -9.03,21.805 0.01,7.934 2.99,15.754 9.03,21.805 l 0.31,0.304 -0.32,-0.308 c 6.07,6.047 13.9,9.027 21.84,9.039 7.94,-0.016 15.76,-2.984 21.8,-9.031 l 0.01,-0.004 8.58,8.582 8.58,8.574 c -10.72,10.75 -24.9,16.164 -38.97,16.148 -14.07,0.016 -28.25,-5.406 -38.99,-16.136 l 0.32,0.316 -0.32,-0.324 c -10.74,-10.727 -16.15,-24.902 -16.14,-38.965 -0.01,-14.062 5.4,-28.238 16.14,-38.969 10.74,-10.746 24.93,-16.168 39,-16.152 14.07,-0.012 28.24,5.406 38.98,16.141 10.73,10.722 16.14,24.894 16.13,38.961 0.01,14.062 -5.4,28.246 -16.15,38.984 l 0.32,-0.317 -0.32,0.313 -8.58,-8.574" style="fill:#4abeea;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3376" inkscape:connector-curvature="0"/><path d="m 1444.18,375.129 -8.58,-8.582 c 14.45,-14.457 21.62,-33.277 21.63,-52.215 -0.01,-18.937 -7.19,-37.762 -21.63,-52.215 -14.44,-14.429 -33.28,-21.609 -52.22,-21.625 -18.93,0.016 -37.75,7.18 -52.2,21.625 -14.45,14.453 -21.61,33.266 -21.63,52.188 0.02,18.937 7.2,37.761 21.65,52.215 14.46,14.453 33.28,21.632 52.22,21.648 18.92,-0.016 37.72,-7.18 52.18,-21.621 l 8.58,8.582 8.58,8.582 c -19.13,19.129 -44.29,28.738 -69.34,28.727 -25.08,0.011 -50.26,-9.618 -69.38,-28.754 -19.14,-19.121 -28.77,-44.305 -28.76,-69.379 -0.01,-25.055 9.6,-50.223 28.74,-69.352 19.13,-19.137 44.3,-28.742 69.36,-28.73 25.08,-0.012 50.26,9.605 69.38,28.73 19.13,19.129 28.76,44.309 28.74,69.379 0.02,25.066 -9.6,50.246 -28.74,69.379 l -8.58,-8.582" style="fill:#4abeea;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3378" inkscape:connector-curvature="0"/><path d="m 1474.57,405.523 -8.58,-8.582 c 22.85,-22.851 34.22,-52.664 34.23,-82.589 -0.01,-29.942 -11.4,-59.778 -34.23,-82.625 -22.84,-22.832 -52.67,-34.207 -82.61,-34.219 -29.92,0.012 -59.74,11.375 -82.59,34.219 -22.84,22.839 -34.2,52.644 -34.22,82.566 0.02,29.945 11.4,59.781 34.24,82.637 22.84,22.832 52.67,34.211 82.61,34.222 29.92,-0.011 59.73,-11.371 82.57,-34.211 l 0,0 8.58,8.582 8.58,8.579 c -27.51,27.535 -63.68,41.336 -99.73,41.324 -36.07,0.012 -72.25,-13.813 -99.77,-41.336 -27.54,-27.527 -41.36,-63.719 -41.35,-99.797 -0.01,-36.051 13.79,-72.219 41.33,-99.73 27.52,-27.536 63.7,-41.34 99.75,-41.329 36.07,-0.011 72.25,13.809 99.77,41.329 27.53,27.527 41.35,63.71 41.34,99.789 0.02,36.054 -13.79,72.23 -41.34,99.753 l 0.45,-0.449 -0.45,0.446 -8.58,-8.579" style="fill:#4abeea;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3380" inkscape:connector-curvature="0"/><path d="m 1395.06,317.23 c 1.37,-8.496 -4.38,-16.41 -12.83,-17.746 -8.44,-1.359 -16.37,4.414 -17.72,12.797 -1.37,8.465 4.4,16.41 12.83,17.735 8.44,1.375 16.37,-4.375 17.72,-12.786" style="fill:#45beed;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path3382" inkscape:connector-curvature="0"/></g></g></g></g></svg>
\ No newline at end of file