diff --git a/frontend/package.json b/frontend/package.json index 89f8488..9160b9a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,6 +6,7 @@ "dependencies": { "ajv": "^6.4.0", "inkjs": "^1.6.0", + "lodash": "^4.17.10", "react": "^16.3.2", "react-dom": "^16.3.2", "react-scripts": "1.1.4" diff --git a/frontend/src/App.css b/frontend/src/App.css index aaaa7db..629634d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -68,12 +68,30 @@ a:hover { } .resource { - height: 150px; - text-align: right; + height: 10em; + text-align: right; + background: #eeeeee; + padding: .4em; + border-radius: .4em; } -.resource > a > img { - height: 90%; - background: white; - border-radius: .4em; +.error { + background: red; + color: white; + padding: .4em; + border-radius: .4em; +} + +.thumbnail { + height: 80%; +} + +.resource > p { + margin-top: -1em; + font-weight: 500; +} + +img { + height: 100%; + border-radius: .4em; } \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index 0948f3d..104afe8 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,8 +1,11 @@ import React, { Component } from 'react'; +import _ from 'lodash'; + import logo from './logo.svg'; import './App.css'; import {Story} from 'inkjs/dist/ink'; import data from './storyData/FRC Assistant.js.json'; +import resources from './storyData/resources.json'; // Yeah, this is kinda hacky, inky exports v18 files but inkjs only deals with v17 files // The main differences are in whitespace handling which, for html, is irrelevant... so far @@ -22,13 +25,19 @@ class App extends Component { this.setState({messages}) } + extractTag(tag){ + let tagParsed = JSON.parse(tag); + let data = _.get(resources, tagParsed.resource); + return {type: 'tag', path: tagParsed.resource ,data} + } + continueStory = () => { let messages = []; let count = 0; while(this.story.canContinue) { this.story.Continue(); - let tags = this.story.currentTags.map( t => {return {type: 'tag', data: JSON.parse(t)}}); + let tags = this.story.currentTags.map(this.extractTag); messages = [...messages, ...tags]; messages.push({type: 'story', message: this.story.currentText}); console.log(this.story.currentText, count++); @@ -68,14 +77,40 @@ export default App; const Message = ({message, index, onChoiceClick}) => { switch(message.type) { case 'story': - return
{message.message}
+ return case 'choice': - return
{message.message}
+ return case 'tag': - return
+ return default: return null; } } +const BotResponse = ({ message }) => { + return
{message.message}
+} + +const Choice = ({ message, onChoose }) => { + return
{message.message}
+} + +const Tag = ({ message }) => { + if(!message.data){ + return
I'm supposed to know of a resource here at {message.path} but it didn't load correctly.
+ } + return ( +
+
+ + + +
+
+ Source: {message.data.source} +
+ +
+ ); +} \ No newline at end of file diff --git a/frontend/src/storyData/FRC Assistant.js.json b/frontend/src/storyData/FRC Assistant.js.json index 8af3616..62fd683 100644 --- a/frontend/src/storyData/FRC Assistant.js.json +++ b/frontend/src/storyData/FRC Assistant.js.json @@ -1 +1 @@ -{"inkVersion":18,"root":[["\n","^Hey, I'm here to help give you some advice on how to build your robot this year. I'm just a compendium of best practices and resources, at the end of the day it is your robot, you should build something that meets your team's goals, whatever they may be.","\n","^So let's get started...","\n",{"->":"main_start"},["done",{"#f":7,"#n":"g-0"}],null],"done",{"main_start":[["^What ",["ev","visit",2,"seq","/ev","ev","du",0,"==","/ev",{"->":".^.s0","c":true},"ev","du",1,"==","/ev",{"->":".^.s1","c":true},"nop",{"s0":["pop","^what can I help you with?",{"->":".^.^.17"},null],"s1":["pop","^ are you struggling with?",{"->":".^.^.17"},null],"#f":5}],"\n",["ev",{"^->":"main_start.0.3.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-0","flg":2},{"s":["^I need to figure out my drivetrain",{"->":"$r","var":true},null]}],["ev",{"^->":"main_start.0.4.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-1","flg":2},{"s":["^How do I grab the game piece?",{"->":"$r","var":true},null]}],["ev",{"^->":"main_start.0.5.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-2","flg":2},{"s":["^I have the game piece but I don't know what to do next...",{"->":"$r","var":true},null]}],{"c-0":["ev",{"^->":"main_start.0.c-0.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.3.s"},[{"#n":"$r2"}],"\n",{"->":"drivetrain"},{"#f":7}],"c-1":["ev",{"^->":"main_start.0.c-1.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.4.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-2":["ev",{"^->":"main_start.0.c-2.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.5.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}]}],{"#f":3}],"not_implemented":["^Hey, sorry, I don't know how to help you with this yet. If you want to help build this check out my source","\n",{"#":"{\"type\": \"resource\", \"link\":\"http://github.com/schreiaj/frc-assistant\", \"thumbnail\": \"https://avatars3.githubusercontent.com/u/329127?s=460&v=4\"}"},{"->":"main_start"},{"#f":3}],"drivetrain":[["^Ok, great. So to start, let's talk about the kit of parts drivetrain. Are you planning on using that?","\n",["ev",{"^->":"drivetrain.0.2.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-0","flg":2},{"s":["^I just want to know more about drivetrains in FRC",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.3.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-1","flg":2},{"s":["^Yes, it's already built but I'm having problems ",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.4.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-2","flg":2},{"s":["^We want to but we're not sure how to start... ",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.5.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-3","flg":2},{"s":["^We're not sure why we should",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.6.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-4","flg":2},{"s":["^No, we're definitetly building something custom...",{"->":"$r","var":true},null]}],{"c-0":["ev",{"^->":"drivetrain.0.c-0.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.2.s"},[{"#n":"$r2"}],"\n",{"->":".^.^.^.general_info"},{"#f":7}],"c-1":["ev",{"^->":"drivetrain.0.c-1.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.3.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-2":["ev",{"^->":"drivetrain.0.c-2.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.4.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-3":["ev",{"^->":"drivetrain.0.c-3.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.5.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-4":["ev",{"^->":"drivetrain.0.c-4.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.6.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}]}],{"general_info":["^I would suggest the following presentation as a good starting point to learn more about drivetrains.","\n",{"#":"{\"type\": \"resource\", \"link\":\"https://www.thecompassalliance.org/single-post/2017/12/07/Drive-Train-Systems\", \"thumbnail\": \"https://static.wixstatic.com/media/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png/v1/fill/w_556,h_313,al_c,usm_0.66_1.00_0.01/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png\"}"},{"->":"main_start"},{"#f":3}],"#f":3}],"#f":3}],"listDefs":{}} \ No newline at end of file +{"inkVersion":18,"root":[["\n","^Hey, I'm here to help give you some advice on how to build your robot this year. I'm just a compendium of best practices and resources, at the end of the day it is your robot, you should build something that meets your team's goals, whatever they may be.","\n","^So let's get started...","\n",{"->":"main_start"},["done",{"#f":7,"#n":"g-0"}],null],"done",{"main_start":[["^What ",["ev","visit",2,"seq","/ev","ev","du",0,"==","/ev",{"->":".^.s0","c":true},"ev","du",1,"==","/ev",{"->":".^.s1","c":true},"nop",{"s0":["pop","^what can I help you with?",{"->":".^.^.17"},null],"s1":["pop","^ are you struggling with?",{"->":".^.^.17"},null],"#f":5}],"\n",["ev",{"^->":"main_start.0.3.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-0","flg":2},{"s":["^I need to figure out my drivetrain",{"->":"$r","var":true},null]}],["ev",{"^->":"main_start.0.4.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-1","flg":2},{"s":["^How do I grab the game piece?",{"->":"$r","var":true},null]}],["ev",{"^->":"main_start.0.5.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-2","flg":2},{"s":["^I have the game piece but I don't know what to do next...",{"->":"$r","var":true},null]}],{"c-0":["ev",{"^->":"main_start.0.c-0.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.3.s"},[{"#n":"$r2"}],"\n",{"->":"drivetrain"},{"#f":7}],"c-1":["ev",{"^->":"main_start.0.c-1.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.4.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-2":["ev",{"^->":"main_start.0.c-2.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.5.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}]}],{"#f":3}],"not_implemented":["^Hey, sorry, I don't know how to help you with this yet. If you want to help build this check out my source","\n",{"#":"{\"resource\": \"main.repo\"}"},{"->":"main_start"},{"#f":3}],"drivetrain":[["^Ok, great. So to start, let's talk about the kit of parts drivetrain. Are you planning on using that?","\n",["ev",{"^->":"drivetrain.0.2.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-0","flg":2},{"s":["^I just want to know more about drivetrains in FRC",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.3.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-1","flg":2},{"s":["^Yes, it's already built but I'm having problems ",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.4.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-2","flg":2},{"s":["^We want to but we're not sure how to start... ",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.5.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-3","flg":2},{"s":["^We're not sure why we should",{"->":"$r","var":true},null]}],["ev",{"^->":"drivetrain.0.6.$r1"},{"temp=":"$r"},"str",{"->":".^.s"},[{"#n":"$r1"}],"/str","/ev",{"*":".^.^.c-4","flg":2},{"s":["^No, we're definitetly building something custom...",{"->":"$r","var":true},null]}],{"c-0":["ev",{"^->":"drivetrain.0.c-0.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.2.s"},[{"#n":"$r2"}],"\n",{"->":".^.^.^.general_info"},{"#f":7}],"c-1":["ev",{"^->":"drivetrain.0.c-1.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.3.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-2":["ev",{"^->":"drivetrain.0.c-2.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.4.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-3":["ev",{"^->":"drivetrain.0.c-3.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.5.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}],"c-4":["ev",{"^->":"drivetrain.0.c-4.$r2"},"/ev",{"temp=":"$r"},{"->":".^.^.6.s"},[{"#n":"$r2"}],"\n",{"->":"not_implemented"},{"#f":7}]}],{"general_info":["^I would suggest the following presentation as a good starting point to learn more about drivetrains.","\n",{"#":"{\"resource\": \"drivetrain.about\"}"},{"->":"main_start"},{"#f":3}],"#f":3}],"#f":3}],"listDefs":{}} \ No newline at end of file diff --git a/frontend/src/storyData/resources.json b/frontend/src/storyData/resources.json new file mode 100644 index 0000000..dd2b2aa --- /dev/null +++ b/frontend/src/storyData/resources.json @@ -0,0 +1,18 @@ +{ + "main": { + "repo": { + "type": "resource", + "link": "http://github.com/schreiaj/frc-assistant", + "thumbnail": "https://avatars3.githubusercontent.com/u/329127?s=460&v=4", + "source": "Andrew Schreiber" + } + }, + "drivetrain": { + "about": { + "type": "resource", + "link": "https://www.thecompassalliance.org/single-post/2017/12/07/Drive-Train-Systems", + "thumbnail": "https://static.wixstatic.com/media/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png/v1/fill/w_556,h_313,al_c,usm_0.66_1.00_0.01/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png", + "source": "Compass Alliance" + } + } +} \ No newline at end of file diff --git a/ink/Drivetrain.ink b/ink/Drivetrain.ink index 0806cab..d22844f 100644 --- a/ink/Drivetrain.ink +++ b/ink/Drivetrain.ink @@ -15,6 +15,6 @@ Ok, great. So to start, let's talk about the kit of parts drivetrain. Are you pl = general_info I would suggest the following presentation as a good starting point to learn more about drivetrains. -# {"type": "resource", "link":"https:\/\/www.thecompassalliance.org\/single-post\/2017\/12\/07\/Drive-Train-Systems", "thumbnail": "https:\/\/static.wixstatic.com\/media\/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png\/v1\/fill\/w_556,h_313,al_c,usm_0.66_1.00_0.01\/80a609_ecbbbe92d12a4a018d86b361fa541b07~mv2.png"} +# {"resource": "drivetrain.about"} -> main_start \ No newline at end of file diff --git a/ink/FRC Assistant.ink b/ink/FRC Assistant.ink index 62b1818..271e20e 100644 --- a/ink/FRC Assistant.ink +++ b/ink/FRC Assistant.ink @@ -16,7 +16,7 @@ What {~what can I help you with?| are you struggling with?} == not_implemented Hey, sorry, I don't know how to help you with this yet. If you want to help build this check out my source - # {"type": "resource", "link":"http:\/\/github.com\/schreiaj\/frc-assistant", "thumbnail": "https:\/\/avatars3.githubusercontent.com\/u\/329127?s=460&v=4"} + # {"resource": "main.repo"} -> main_start diff --git a/readme.md b/readme.md index 96024ff..0ca4d30 100644 --- a/readme.md +++ b/readme.md @@ -6,4 +6,24 @@ This is an attempt to help share that institutional knowledge that most veteran ## Contributing -Content is written in [Ink](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md) I've tried to break major subsystems into unique files linked into the main ink file. I've done most of the writing in [Inky](https://github.com/inkle/inky). To publish overwrite the FRC Assistant.js file using the _Export to JSON..._ option. \ No newline at end of file +Content is written in [Ink](https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md) I've tried to break major subsystems into unique files linked into the main ink file. I've done most of the writing in [Inky](https://github.com/inkle/inky). To publish overwrite the FRC Assistant.js file using the _Export to JSON..._ option. + + +## Adding a resource + +Adding a resource is a two part process, first you must reference it in Ink using a tag in format of `# { "resource": "path.to.resource"}` then you add that resource to the `resources.json` file. This was done so updating new links to things requires a redeploy but not a regeneration of the Ink text. Also, and more honestly, because embedding links inside the Ink text required extensive escaping and was a general pain. This is easier, trust me. + +Resources consist, minimally of the following structure: + +``` +"key": { + "type": "resource", + "link": "URI for accessing the resource", + "thumbnail": "URI for accessing the displayed thumbnail, currently does not default to anything", + "source": "Text for where you got this from, think of it as attribution" + } +``` + +For now all resources should be of type 'resource'. The main reason for this in the structure is to enable more rich handling of resource types down the road should a need for that occur. + +The path in the Ink file must match to the path in the `resources.json` or it won't be looked up properly and will be stripped out. \ No newline at end of file