diff --git a/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js b/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js index 4281e8355..f89c89f07 100644 --- a/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js +++ b/DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js @@ -1,24 +1,5 @@ function newTutorialFunctions() { thisObject = { - play: play } - const HEIGHT = 800 - const WIDTH = 500 - const MARGIN = 300 return thisObject - - function play(node) { - let docAppDiv = document.getElementById('tutorialStepDiv') - tutorialPosition = { - x: MARGIN, - y: (browserCanvas.height - HEIGHT) / 2 - } - - docAppDiv.style = ' ' + - 'position:fixed; top:' + tutorialPosition.y + 'px; ' + - 'left:' + tutorialPosition.x + 'px; ' + - 'width: ' + WIDTH + 'px;' + - 'height: ' + HEIGHT + 'px;' + - 'z-index:1;' - } } diff --git a/Spaces/TutorialSpace.js b/Spaces/TutorialSpace.js index 547419a96..937473278 100644 --- a/Spaces/TutorialSpace.js +++ b/Spaces/TutorialSpace.js @@ -88,6 +88,14 @@ function newTutorialSpace() { makeVsible() break } + case 'Playing Topic': { + makeVsible() + break + } + case 'Playing Step': { + makeVsible() + break + } } function makeInvisible() { @@ -116,8 +124,8 @@ function newTutorialSpace() { } function makeVsible() { - const HEIGHT = 800 - const WIDTH = 500 + const HEIGHT = 650 + const WIDTH = 400 const MARGIN = 300 const FORM_HEIGHT = 80 @@ -167,11 +175,14 @@ function newTutorialSpace() { } function done() { - + /* If we are standing at the Tutorial Node, we do this. */ + advance() } function playTutorialTopic(node) { - + currentTopicNode = node + currentNode = node + currentStatus = 'Playing Topic' } function resumeTutorialTopic(node) { @@ -179,7 +190,9 @@ function newTutorialSpace() { } function playTutorialStep(node) { - + currentStepNode = node + currentNode = node + currentStatus = 'Playing Step' } function resumeTutorialStep(node) { @@ -198,6 +211,70 @@ function newTutorialSpace() { } + function advance() { + let found + let advanced + + switch (currentStatus) { + case 'Playing Tutorial': { + found = true + findNextNode(currentTutorialNode) + break + } + case 'Playing Topic': { + found = false + findNextNode(currentTutorialNode) + break + } + case 'Playing Step': { + found = false + findNextNode(currentTutorialNode) + break + } + } + + if (advanced === undefined) { + stop() + } + + function findNextNode(node) { + + for (let i = 0; i < node.tutorialSteps.length; i++) { + + let tutorialStep = node.tutorialSteps[i] + if (found === true) { + currentNode = tutorialStep + currentStatus = 'Playing Step' + advanced = true + return + } + if (tutorialStep.id === currentNode.id) { + found = true + } + } + + for (let i = 0; i < node.tutorialTopics.length; i++) { + + if (advanced === true) { + return + } + + let tutorialTopic = node.tutorialTopics[i] + if (found === true) { + currentNode = tutorialTopic + currentStatus = 'Playing Topic' + advanced = true + return + } + if (tutorialTopic.id === currentNode.id) { + found = true + } + + findNextNode(tutorialTopic, found) + } + } + } + function buildHTML() { let nodeConfig = JSON.parse(currentNode.config) @@ -217,7 +294,7 @@ function newTutorialSpace() { html = html + '' html = html + '' if (nodeConfig.image !== undefined && nodeConfig.image !== '') { - html = html + '' + html = html + '' } html = html + '' html = html + ''