Pablo branch

client/src/components/ActivityPanels/ActivityLevels.less

@@ -74,6 +74,7 @@ p {
   top: 100%;
 }
 
+
 #icon-control-panel {
   display: flex;
   align-items: center;
@@ -134,7 +135,7 @@ p {
   align-items: center;
   flex: 1;
   max-height: 8vh;
-  width: 100%;
+  width: 1s00%;
 
   #logo {
     max-width: 145px;
@@ -194,6 +195,98 @@ p {
   height: 72vh;
 }
 
+#newblockly-canvas {
+  margin: absolute;
+  width: 55%;
+  height: 72vh;
+}
+
+.canvas-container {
+  // display: flex;
+  // justify-content: space-between;
+  width: 95%;
+  margin: auto;
+  height: 72vh;
+}
+
+#topRight-containter{
+  position: absolute;
+  width: 40%;
+  height: 30vh;
+  right: 40px;
+  top: 60px;
+}
+
+#bottomRight-container{
+  position: absolute;
+  width: 40%;
+  height: 30vh;
+  right: 40px;
+  top: 345px;
+}
+
+#block-bs{
+  position: absolute;
+  width: 40%;
+  height: 0vh;
+  right: 40px;
+  top: 13px;
+}
+
+#pre-text{
+  position: absolute;
+  width: 40%;
+  height: 0vh;
+  right: 40px;
+  top: 60px;
+}
+
+#def-text{
+  position: absolute;
+  width: 40%;
+  height: 0vh;
+  right: 40px;
+  top: 230px;
+}
+
+#gen-text{
+  position: absolute;
+  width: 40%;
+  height: 0vh;
+  right: 40px;
+  top: 400px;
+}
+
+#blocklyCanvasTop {
+  position: absolute;
+  width: 40%;
+  height: 20vh;
+  right: 40px;
+  top: 80px;
+  border: 1px solid #000; /* Add a border, adjust the color and size as needed */
+  z-index:1;
+}
+
+#blocklyCanvasMid {
+  position: absolute;
+  width: 40%;
+  height: 20vh;
+  right: 40px;
+  top: 250px;
+  border: 1px solid #000; /* Add a border, adjust the color and size as needed */
+  z-index:1;
+}
+
+#blocklyCanvasBottom {
+  position: absolute;
+  width: 40%;
+  height: 20vh;
+  right: 40px;
+  top: 420px;
+  border: 1px solid #000; /* Add a border, adjust the color and size as needed */
+  z-index:1;
+}
+
 #console-container {
   background-color: white;
   border: 1px solid #colors[secondary];
@@ -261,6 +354,61 @@ p {
   text-align: center;
 }
 
+#toolbox-background {
+  // background-color: grey;
+  // width: 300px;
+  // border: 15px solid green;
+  // padding: 50px;
+  // margin: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: left;
+  background-color: grey;
+  //border-radius: 100px;
+  width: 5%;
+  //min-height: 200px;
+  color: #colors[text-secondary];
+  font-size: 1.2em;
+  font-weight: bold;
+  position: absolute;
+  top: 80px;
+  left: 0px;
+  text-align: center;
+  overflow: auto;
+  scroll-behavior: smooth;//might work dunno
+}
+
+//!!!!!!!!!!!
+#tb-feature-bg {
+  display: flex;
+  justify-content: center;
+  align-items: left;
+  //background-color: #colors[secondary];
+  //border-radius: 100px;
+  width: 515%;
+  //min-height: 200px;
+  color: #colors[text-secondary];
+  position: absolute;
+  font-weight: bold;
+  left: 175%;
+  top: -5px;
+  text-align: center;
+}
+
+#button-visual {
+  display: flex;
+  justify-content: center;
+  align-items: left;
+  background-color: grey;
+  border-radius: 100px;
+  width: 5%;
+  min-height: 450px;
+  color: #colors[text-secondary];
+  font-size: 1.2em;
+  font-weight: bold;
+  position: absolute;
+}
+
 #section-text {
   font-size: 1em;
   font-weight: bold;

client/src/components/ActivityPanels/BlocklyCanvasPanel/BlocklyCanvasPanel.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PublicCanvas from './canvas/PublicCanvas';
+import CustomBlock from './canvas/blockFactory/CustomBlock';
 import StudentCanvas from './canvas/StudentCanvas';
 import MentorCanvas from './canvas/MentorCanvas';
 import ContentCreatorCanvas from './canvas/ContentCreatorCanvas';
@@ -10,9 +11,10 @@ const BlocklyCanvasPanel = ({ activity, isSandbox, setActivity }) => {
 
   const userRole = value.role;
 
+
   switch (userRole) {
     case 'DefaultUser':
-      return <PublicCanvas activity={activity} isSandbox={isSandbox} />;
+      return <PublicCanvas activity={activity} isSandbox={isSandbox}/>;
     case 'Student':
       return <StudentCanvas activity={activity} />;
     case 'Mentor':

client/src/components/ActivityPanels/BlocklyCanvasPanel/canvas/PublicCanvas.jsx

@@ -13,10 +13,11 @@ import {
 } from '../../Utils/consoleHelpers';
 import ArduinoLogo from '../Icons/ArduinoLogo';
 import PlotterLogo from '../Icons/PlotterLogo';
+import CustomBlock from './blockFactory/CustomBlock'
 
 let plotId = 1;
 
-export default function PublicCanvas({ activity, isSandbox }) {
+export default function PublicCanvas({ activity, isSandbox}) {
   const [hoverUndo, setHoverUndo] = useState(false);
   const [hoverRedo, setHoverRedo] = useState(false);
   const [hoverCompile, setHoverCompile] = useState(false);
@@ -32,6 +33,10 @@ export default function PublicCanvas({ activity, isSandbox }) {
   const workspaceRef = useRef(null);
   const activityRef = useRef(null);
 
+    //  useStates for Program your Arduino... / Custom Blocks
+    const [selectedFeature, setSelectedFeature] = useState('Program your Arduino...');
+    const [notSelectedFeature, setNotSelectedFeature] = useState('Custom Blocks')
+
   const setWorkspace = () => {
     workspaceRef.current = window.Blockly.inject('blockly-canvas', {
       toolbox: document.getElementById('toolbox'),
@@ -154,6 +159,30 @@ export default function PublicCanvas({ activity, isSandbox }) {
     </Menu>
   );
 
+    //Program you Arduino... / Custom Blocks | switch
+    const featureList = (buttonText, newFeature) => (
+        <button
+        // fix to switch to CustomBlock canvas
+        onClick={() => {setNotSelectedFeature(selectedFeature);setSelectedFeature(newFeature)}}
+          style={{
+            backgroundColor: 'teal',
+            color: 'white',
+            transition: 'background-color 0.3s',
+          }}
+          onMouseEnter={(e) => {
+            e.target.style.backgroundColor = 'lightblue';
+          }}
+          onMouseLeave={(e) => {
+            e.target.style.backgroundColor = 'teal';
+          }}
+        >
+          {buttonText}
+        </button>
+      );
+
+  if(selectedFeature === 'Custom Blocks'){
+    return <CustomBlock activity={activity} isSandbox={isSandbox} workspaceRef={workspaceRef.current}/>;
+  }
   return (
     <div id='horizontal-container' className='flex flex-column'>
       <div className='flex flex-row'>
@@ -169,7 +198,7 @@ export default function PublicCanvas({ activity, isSandbox }) {
           >
             <Row id='icon-control-panel'>
               <Col flex='none' id='section-header'>
-                Program your Arduino...
+                {selectedFeature}
               </Col>
               <Col flex='auto'>
                 <Row align='middle' justify='end' id='description-container'>
@@ -179,6 +208,9 @@ export default function PublicCanvas({ activity, isSandbox }) {
                         <Link id='link' to={'/'} className='flex flex-column'>
                           <i className='fa fa-home fa-lg' />
                         </Link>
+                        <Row flex='auto' id='tb-feature-bg'>
+                          {featureList(notSelectedFeature, notSelectedFeature)}
+                        </Row>
                       </Col>
                     </Row>
                   </Col>
@@ -323,4 +355,4 @@ export default function PublicCanvas({ activity, isSandbox }) {
       )}
     </div>
   );
-}
+}