Skip to content

A little game built for the CLI! Demonstrates the power of using React with modern state management strategies in this seemingly limited, yet infinitely powerful environment.

Notifications You must be signed in to change notification settings

ianhaggerty/robot-me-baby

Repository files navigation

wakatime

robot-me-baby

robot-me-baby is little demo app designed to demonstrate the features and power of ink - a react renderer for the CLI.

intro

game

explode

outro

Usage

Download and install.

git clone https://github.com/ianhaggerty/robot-me-baby
cd robot-me-baby
npm install .

Production

Compile and run.

npm run compile
npm run start

Development

  1. Spin up a babel command to watch the src directory for changes.

    npm run watch
  2. In another CLI instance, use nodemon to watch the lib directory.

    npm run nodemon

🌎 Road Map

  • Routing Solution React Router was built for the browser, but it has a MemoryRouter that can be used in different environments.
  • Pew Pew Lasers? There is no absolute positioning as part of the Ink library. Splasers from one's eyeballs would be fun, but ni-un impossible to implement using flexbox.
  • Switch Focus on KeyPress Imperatively changing focus using the Ink library is not possible (only next and previous). A recent commit has pushed this, so just waiting for release cycle.
  • Redux (Little Boilerplate)

Library Links

Learning Links

This is a bunch of stuff I stumbled across whilst developing. Largely kept here for my own benefit.

  • nodemon: Option to allow stdin to be inherited Nodemon hijacks the stdin readstream and does unwanted things. This can make it difficult to develop CLI with an auto refresh... Hot reload would be 10x better. I quickly rolled my own solution in this repo.
  • node: reading keystrokes See answer from Dan Heberden. Raw Mode basically means, feed me what the user types - nothing else! (Including ctrl-c)
  • debug typescript with jest This gets the job done.
  • mapping an empty array Basically you can't call .map on an uninitialized array as the pointers don't point to anything yet. Therefore, the implementation considers there to be nothing to map over.
  • Array.prototype.map weirdness array.map doesn't work on array's created with new Array(size).
  • muted color palette Muted Colors for the robots!
  • string.replace You can pass a function instead of a string - useful when matching regExp patterns.
  • setTimeout & react state Ordinarily, setTimeout takes a function - and that function captures the enclosing scope. Within that scope may be variables populated by state hooks. Therefore, state from accessed within setTimeout isn't necessarily up to date. In hindsight, it's better to useEffect and respond to state changes as necessary. see below
  • TS getters and setters I'm a big fan of getters / setters in TS. However, they must be used carefully in React. If you're wrapping data with classes (like I do here), you need to make sure your classes are immutable - well, at least if you intend to use them as React State within a component. The react diff algorithm only does shallow test (test by reference or value for a primitive).
  • Cleaning up Timers using Hooks This is critical knowledge for a React developer!
  • Understanding esModuleInterop in tsconfig file
  • When to use JSX.Element vs ReactNode vs ReactElement?

Thank You

To the awesome people behind Ink, the React-Renderer used extensively in this project.

+ The Gazzillion other people whose work I've sponged and reincarnated as my own. Projects like this have a heap of dependencies.

A Note from the Author

Thanks for your interest! Please see my GitHub or Linkedin to stay updated.

MIT License

Copyright (c) 2021 Ian Haggerty

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

A little game built for the CLI! Demonstrates the power of using React with modern state management strategies in this seemingly limited, yet infinitely powerful environment.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages