Learn the helix editor keymap on the web!

Tom Groenwoldt

Last update: Apr 1, 2023

Overview

Helix Shortcut Quiz

A web quiz built with yew for testing your knowledge of helix editor shortcuts.

Development

Installation

Frontend

If you don't already have it installed, it's time to install Rust: https://www.rust-lang.org/tools/install.

To compile Rust to WASM, we need to have the wasm32-unknown-unknown target installed. Install it with the following command:

rustup target add wasm32-unknown-unknown

Install trunk:

cargo install trunk

GIF generation

The yew app serves GIFs generated by vhs. The current state of vhs doesn't support the recording of the helix block cursor. The problem lies deeper within the ttyd dependency which uses the xterm.js canvas addon.

If you want to generate the GIFs yourself you should go ahead, clone the custom forks I made and use those binaries instead. After building the two binaries place them in the gif_generation/ directory and execute generate_all_gifs.sh.

Running

trunk serve

Comments

Store categories that a user finished in local storage

If a user who already played the first category, he shouldn't be prompted with the same category again after page reload or on a new visit. Store finished categories in local storage and on app creation take this into account.
enhancement

opened by tomgroenwoldt 1
Allow preset for every GIF independently

Currently the window mode has the prefix Ctrl+w, because this shortcut conflicts with the browser interface. This is a great solution, but some GIFs have problematic shortcuts which don't apply for the whole category. Allowing a GIF to have an own preset would solve this.

opened by tomgroenwoldt 0
Add solution button

This PR solves #16. It also removes the Ctrl + R command to restart the application, because we use the local storage now and a dedicated reset button fulfills the purpose of resetting/restarting the game/category.
enhancement

opened by tomgroenwoldt 0
Add basic game and GIF generation

This PR adds the basic game frontend as well logic for the generation of GIFs, which are the main part of the game. The GIFs are generated by a custom fork of vhs which again uses a custom fork of ttyd (otherwise the helix cursor wouldn't be recorded).

opened by tomgroenwoldt 0
Refactor GIF data structure

Solves #9.

I GIFs are no longer stored in a plain Vec<_> but in a Vec<Rc<RefCell<_>>> as I want to share the current GIF and mutate this specific GIF via self.current_gif.

It's quite messy, this will be tidied up before merging into main.
enhancement

opened by tomgroenwoldt 0
Add Spaced Repetition and Randomize Order of Commands
Hi there,

I recently discovered your GitHub project for learning Helix through GIFs and I must say, I'm impressed with the idea. However, I noticed that the commands are always presented in a specific order, which may make it easy for users to simply follow a pattern rather than actually learning the commands.

For example, the project often presents the command "move cursor down" followed by "move cursor up". While this order may help users memorize the commands more easily, it may also lead to users simply following the pattern instead of actually learning the commands. They may automatically press "k" after "j" without reading the statement.

As a suggestion, I would like to request two features that could improve the learning experience:

Spaced Repetition: This would help users to remember the commands more effectively by presenting them at specific intervals to improve long-term memory retention.

Randomized Order: This would ensure that users are actually learning the commands and not just following a memorized pattern. It would also make the learning experience more engaging and challenging.

enhancement
opened by khanra17 4
Refactor the gif data structure

The current approach is kinda messy, let's try to implement a vector of GIFs, which can be playable, played, and so on. This way skipping will be less complicated and everything should be a bit tidier.
enhancement

opened by tomgroenwoldt 0