jsjoeio / mentored.dev Goto Github PK

Currently, there is no container for the text

Ideally, when you click on a lesson, it should open up as an overlay (similar to Duolingo) where there's dialog and you can walk through the lesson.

It should be completed filled out. Maybe add some color to it like emojis, or pictures.

Inspiration: https://github.com/withspectrum/spectrum

Add contributors table: https://github.com/all-contributors/all-contributors

TODO

• Update todo areas
• Add contributors table
• Add images/emojis

The Ritchie Hall Map should look like the inside of an academic building.

As a User, I should be able to answer questions to show I completed the lesson.

#22 introduced some new features. Now, the user will have the ability to answer some 'Yes' 'No' questions which will change the next state.

You need to account for this.

There will also be a new type of message modification because there is now HAS_LOCAL_KEY which will grab information from another local file (js object or json). I'm thinking you'll have to create a function which takes in the state object then returns the modified message.

Oh and also the quiz answers:

• Handle Yes/No state transition
• Handle local keys with local object
• Write function to generate conclusion message + quiz results

It seems like some of the answers are not working as expected...Could be a good case for a unit test 😉

It seems a bit strange to show the input before the narrator is done speaking.

Ideally, this input will dissolve into the dialog (i.e. opactiy 0 to opactiy 1)

The story could be updated a bit. It should give a short introduction about Professor character.

Also, remove the 'next' button at the very end.

There should be a narrator character

Links for reference:

• Sid's blogpost on CSS animation in games
• Sid's pirate on Codepen

Right now, it's just a button but it should be more welcoming and fun 😄

Currently, only some colors are in the project. To complete this, all colors must be in the lightTheme and the darkTheme.

User should see input field when asked for data.

As a User, I should be able to use the arrow keys and enter to select a radio option.

Currently, the map and the sidebar lay on top of each other on Mobile. Ideally, the map would be constrained and the Sidebar would be at the bottom or a slide out menu from the right.

https://github.com/jstejada/react-typist

^ Might be the easiest solution

As a User, I should be asked to open my Terminal/Command Line depending on my OS.

Check if the user has a mentored-dev repo.

If they do, show success message.

If they don't, create one.

As a user, I should be able to log into the app using GitHub.

Thinking onegraph-auth might be the solution:
https://www.onegraph.com/docs/logging_users_in_and_out.html

The Dorms Map should look like the inside of a dorm building.

Maybe there are a few other places you can do in here...

Currently, there is only one map. However, we need to add functionality so that when you click on a building or location, it opens a new map within the same window.

This important because other people will see this now that it's public.

https://egghead.io/courses/up-and-running-with-typescript

"When I choose windows > yes and go on without filling in any of the answers to the questions and then all the way backwards I'm starting from the end of the quiz as if every answer was correct"

As a User, I should be able to navigate to the next scene by pressing the right arrow key or clicking.

The Professor's Map should look like the inside of a nice house. Maybe here you can chat with the professor, change what he looks like to make him a her or whatever you need.

• Style with arrows
• Animate next arrow after stop talking
• Only show arrows after stop talking
• Add character title

Running into some issues.

Not sure what it is. Could be the conditional or me breaking the rules of hooks somehow. I'll need to look into this later.

If I login with OneGraph, the auth token should be stored in localstorage so that if I refresh the page, I don't have to login again.

As a User, I should be able to enter the game by clicking or pressing Enter.

It would be great to fill the white space and use it to aid the lesson for the command line.

Maybe have a chalkboard, or white board, or screen where he can show things.

Use should see radio buttons when asked a question which has one answer.

Arrow buttons (next/previous)

When asked for input, the inputs should be styled to match the style of the game.

Converts strings to lowercase before submitting

Dialog text should show up in a box like Pokemon

The plan is to send it to 5-10 people and get their feedback. The goal of this task is to write out guidelines for what they should test.

After a user logs into the app, what will they see?

• Add KEY_TERMS key which is an array of strings (we will add these to state and display on chalkboard)
• Display in section

You can use the package now.

Text should have a typewriting effect
react-typist

As a user, I should hear the Narrator talking and I should hear buttons clicks during the Game.

https://www.arden.nl/setting-up-a-gatsby-js-starter-with-type-script-es-lint-prettier-and-pre-commit-hooks

May cause a bunch of errors in the beginning FYI

Add jest and react-testing-library to the project so that we can write tests.

Ideally, add a script in the CI pipeline that runs the tests. I think you might be able to do this with Netlify. (yaml file)?

I don't think I should be trying to store data in my state machine...at least, it's causing me a bunch of issues.

Instead, let's refactor things to useState since I only have two properties: name and os

I'll need to also modify the story.tsx to not have VALUE and instead have some Boolean that indicates HAS_INPUT or something. Also need to use some templating syntax inside the messages.

Then some sort of key that says, "Hey you need to modify MESSAGE", like HAS_VAR or something. and then VAR_NAME, to grab it from state...

Similar to next, but going back

Ideally, it should look like Duolingo's or like Pokemon's.

Also, when you get a wrong answer the back arrow button is not within the container box as the text takes up the space and pushes the arrow down.

Diego said it's possible to get the User's OS with JavaScript

http://www.javascripter.net/faq/operatin.htm

Might be a good idea so then you can skip that question..