diff --git a/client/src/App.js b/client/src/App.js index ae8ace5..af5e242 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -7,8 +7,7 @@ import "./Blocks/dom"; import "./Blocks/cyf"; import useBlockly from "./Blockly/useBlockly"; -import * as Exercise1 from "./Exercises/01-stuff"; -import * as Exercise2 from "./Exercises/02-more-stuff"; +import exercises from "./Exercises"; import Split from "react-split-grid"; import TextPanel from "./TextPanel/TextPanel"; @@ -23,9 +22,6 @@ import { ReactComponent as Background } from "../src/svgs/Humaaans-Phone.svg"; Blockly.setLocale(locale); -// just left all this and presumed you will pass whatever you decide to do into the text panel -const exercises = [Exercise1, Exercise2]; - function useExercise() { const [exerciseIndex, setExerciseIndex] = useState(0); @@ -92,7 +88,7 @@ export default function App() { render={({ getGridProps, getGutterProps }) => (
things here things, blah, blah, blah. \ No newline at end of file diff --git a/client/src/Exercises/01-stuff/index.js b/client/src/Exercises/01-stuff/index.js deleted file mode 100644 index 155e81e..0000000 --- a/client/src/Exercises/01-stuff/index.js +++ /dev/null @@ -1,46 +0,0 @@ -import LessonMarkdown from "../../LessonMarkdown"; -import markdownUrl from "./lesson.md"; - -export function Lesson() { - return ; -} - -export const toolbox = { - kind: "categoryToolbox", - contents: [ - { - kind: "category", - name: "Values", - contents: [ - { - kind: "block", - type: "text", - }, - { - kind: "block", - type: "get_randomWord", - }, - ], - }, - { - kind: "category", - name: "HTML", - contents: [ - { - kind: "block", - type: "on_start", - }, - { - kind: "block", - type: "with_element_by_id", - }, - { - kind: "block", - type: "set_content", - blockxml: - " ", - }, - ], - }, - ], -}; diff --git a/client/src/Exercises/01-stuff/lesson.md b/client/src/Exercises/01-stuff/lesson.md deleted file mode 100644 index fd1b8ee..0000000 --- a/client/src/Exercises/01-stuff/lesson.md +++ /dev/null @@ -1,5 +0,0 @@ -## Some stuff - -This lesson is about some stuff™️. - -I'm writing some things here, blah, blah, blah. diff --git a/client/src/Exercises/02-more-stuff/lesson.md b/client/src/Exercises/02-more-stuff.md similarity index 100% rename from client/src/Exercises/02-more-stuff/lesson.md rename to client/src/Exercises/02-more-stuff.md diff --git a/client/src/Exercises/02-more-stuff/index.js b/client/src/Exercises/02-more-stuff/index.js deleted file mode 100644 index 111e3c6..0000000 --- a/client/src/Exercises/02-more-stuff/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import LessonMarkdown from "../../LessonMarkdown"; -import markdownUrl from "./lesson.md"; - -export function Lesson() { - return ; -} - -export const toolbox = { - kind: "categoryToolbox", - contents: [ - { - kind: "category", - name: "Values", - contents: [ - { - kind: "block", - type: "math_number", - }, - { - kind: "block", - type: "text", - }, - { - kind: "block", - type: "colour_picker", - }, - { - kind: "block", - type: "logic_boolean", - }, - ], - }, - { - kind: "category", - name: "HTML", - contents: [ - { - kind: "block", - type: "on_start", - }, - { - kind: "block", - type: "with_element_by_id", - }, - { - kind: "block", - type: "set_content", - blockxml: - " ", - }, - { - kind: "block", - type: "set_attribute", - }, - ], - }, - ], -}; diff --git a/client/src/Exercises/blocksToCategories.json b/client/src/Exercises/blocksToCategories.json new file mode 100644 index 0000000..d32dd09 --- /dev/null +++ b/client/src/Exercises/blocksToCategories.json @@ -0,0 +1,4 @@ +{ + "things": "Value", + "here": "HTML" +} \ No newline at end of file diff --git a/client/src/Exercises/index.js b/client/src/Exercises/index.js new file mode 100644 index 0000000..3fab23c --- /dev/null +++ b/client/src/Exercises/index.js @@ -0,0 +1,68 @@ +import { readdirSync } from 'fs' +import btc from 'blocksToCategories' +import exp from 'constants' + +function ParseToolbox(text) { + const blockPattern = /(\w+)/g + const toolbox = { + kind: "categoryToolbox", + contents: [] + } + + let blocks = [...text.matchAll(blockPattern)] + .map((block) => { + block[1] + }) + + blocks = [...new Set(blocks)] + + let categories = {} + let toolboxContents = [] + + for (let blockName of blocks) { + if (categories[btc[blockName]]) { + categories[btc[blockName]].push({ + kind: 'block', + type: blockName + }) + } else { + categories[btc[blockName]] = [{ + kind: 'block', + type: blockName + }] + } + } + + for (let category in categories) { + toolboxContents.push({ + kind: "category", + name: category, + contents: categories[category] + }) + } + + return { + kind: "categoryToolbox", + contents: toolboxContents + } +} + +function Exercises(dir) { + let exercises = readdirSync(dir).filter((filename) => { + filename.endsWith('.md') + }) + + exercises.map((filename) => { + const res = await fetch(filename); + const fileText = await res.text(); + + return { + 'markdown': fileText, + 'toolbox': ParseToolbox(fileText) + } + }) + + return exercises +} + +export const exercises = Exercises('./') \ No newline at end of file diff --git a/client/src/LessonMarkdown.js b/client/src/LessonMarkdown.js index 9e9d67c..6be82ea 100644 --- a/client/src/LessonMarkdown.js +++ b/client/src/LessonMarkdown.js @@ -1,22 +1,20 @@ import { useEffect, useState } from "react"; import ReactMarkdown from "react-markdown"; -export default function LessonMarkdown({ url }) { +export default function LessonMarkdown({ md }) { const [status, setStatus] = useState("pending"); const [markdown, setMarkdown] = useState(""); useEffect(() => { - (async function getText() { + (function getText() { try { - const res = await fetch(url); - const text = await res.text(); - setMarkdown(text); + setMarkdown(md); setStatus("done"); } catch (e) { setStatus("error"); } })(); - }, [url]); + }, [md]); if (status === "pending") { return Loading…; diff --git a/client/src/TextPanel/TextPanel.js b/client/src/TextPanel/TextPanel.js index c9b63b7..7a6e838 100644 --- a/client/src/TextPanel/TextPanel.js +++ b/client/src/TextPanel/TextPanel.js @@ -1,8 +1,9 @@ import React from "react"; import Button from "../Button/Button"; +import LessonMarkdown from "../LessonMarkdown"; import "./TextPanel.scss"; -const TextPanel = ({ exercise, navigation }) => ( +const TextPanel = ({ exerciseMd, navigation }) => (
- + < LessonMarkdown text={exerciseMd} />
);