kaisunc / vscodevimacademy Goto Github PK

VSCode extension/game to learn and practice vim motions and commands

vscodevimacademy's Introduction

VSCODE VIM ACADEMY

ABOUT

An educational game to learn vim and vscode keys in logical, digestable levels. Builds up your vim muscle memories by practicing vim keys 2~5 keys each level. Level text and keys are randomly generated on a per level basis. For example,

move forward or backward by word
go up or down a random number of lines
delete word forward or backwards from current position
delete word, undo or redo
select, delete, or change lines
delete, copy, or paste words
and more

players complete 10 sets of the tasks as quickly with as little key presses as possible. Hints and manual will be listed on the right panel(CONSOLE), your performance will be logged per task based on how fast your performed and how many keypresses you used.

Authors Note

2022/6/2 If you didn't receive your license key an hour after using paypal, please email me directly at [email protected]. I'll find your paypal IPN number and generate a license manually. (My license generating server that listens for paypal messages does not work for Paypal users in China)

I intended to add some nifty animations that points from the cursor to the location along with the helpers introduced in this update. But feel that it is too distracting. In the end, a little burnt out, but I'll be doing small updates if possible. Thanks for the people that bought this!

CHANGES / FIXES (2022/6/2)

[Added Hotkey Helpers into the editor interface, note all levels/keys are supported currently]
[Modified how tasks are generated in preparation for better task mixing]
[Updated NPM packages with security warnings(moment, lodash, minimist)]

CHANGES / FIXES (2021/6/3)

COLOR CODED ACTIONS

In the editor, tasks will be shown as a color outline around the text. It can be a single character, words, lines, text objects or blocks.

Inside - Move the curor inside the yellow box
Delete - Delete the contents of the red box
Select - Select the contents of the orange box
Paste - Paste the contents of green box at the green cursor position
Copy - Copy the contents of the grey box
Editing - change, insert, indent, comment, add, minus depending on the level
Outside - Helper type for the mark level, moving outside completes the task

QUICK START

Install VSCODE VIM extension to enable vim emulation in vscode.
Install VSCODE VIM ACADEMY
Open the command palette ctrl+shift+p
Enter "start vva" in the command palette to start the game.

Video Tutorial

USER INTERFACE

LEVEL INFO

Star rating on the top right is for importance
Total time
Performance log, try to keep the cyan line below the red line
1. Current - current task speed
2. Current Avg - average of current level tasks
3. Target - based on my times
4. Hist - these are based on my times while play testing
Task table
Current level keys and key description

LEVEL NAVIGATION

To quickly continue to the next level without using the mouse, this widget will show up at the end of a level. Move the cursor using the vim keys,

0 - Previous Level
b - Retry Current Level
w - Next Level
$ - Open the Buy Extension Page

To choose a specific level, use the console to go back to the level selection page You can also bind keys for previous, next, and retry levels

vva.prevLevel
vva.retryLevel
vva.nextLevel

Vim Cheatsheet HUD

Painstakingly built SVG Animation! Unlimited resolution!

Press ctrl+alt+c to toggle the cheatsheet in editor, this feature does not require activating VVA or a VVA license, as long as the VVA extension is installed, the cheatsheet can be shown in the editor. Grab the extension now before I put this feature behind the pay wall!

NON-ANIMATED DOWNLOADABLE

Light(Printable)	Dark

DEMO

Basic Levels and UI

Word - Move to beginning of word(s) or end of words(s)

Actions Motions

ISSUES

Change to a Dark Theme, VVA currently only supports dark themes.
I had intended to support multiple languages, theres only english, partial chinese and japanese for now. To change language, go to settings/vva/language

LEVEL DETAULS

Motions

Left & Right 1
Up & Down 1
All Directions
Left & Right 2
Up & Down 2
Beginning of Word 1
Beginning of Word 2
End of Word 1
Review - Word Beginning & End
Bol, Eol, First Letter
Review - Word Beginning & BEFCOL
Beginning of Word 3
End of Word 2
Review - WB & ege
Top and Bottom of Page
Up & Down Relative
Review - Top, Bottom & Relative Line
Goto Line
Review - Goto & Relative Line
Top, Middle, Bottom of Screen
Up, Down Half Screen
Up, Down Full Screen
Review - Screen Line Movements
Goto Next Paragraph
Goto Next Sentence
Goto Sections 1 - End Of
Goto Sections 2 - Start Of
Goto Sections 3 - Nearest Start or End
Goto Sections 4 - Start or End
Goto % of File
Hover
Next Pair Match
Searching For Letters 1
Word Search 1
Word Search 2
Word Search 3
Goto Definition
Marks

Actions - Horizontal

Visual Mode 1 - Select & Exit
Visual Mode 2 - Incrementally Select
Select Word
Delete Word
Paste Word
Delete & Paste Word
Copy Word
Change Word
Replace Word
Rename Symbol
Actions + Motion
Actions + Motions
Undo & Redo
Select Find Letter
Select To Letter
Delete & Backspace
Delete & Backspace 2
Change Case
Add, Minus 1
Add, Minus 2 - Numbered
Replace Char & Replace With
Swap Characters
Insert At & After Cursor
Insert At EOL & FCOL

Actions - Vertical

Select Line
Select Line Incrementally
Delete Line
Copy Line
Change Line
Paste Line
Insert Line
Replace Line
All Line
Select Lines
Copy Lines
Insert Lines
Delete Lines
Change Lines
Copy Line & Paste
Join Lines
Swap/Move Line
Indent Lines
Comment Lines

Surrounds

Select Word Text Object
Select All Surround
Select Inside Surround
Delete/Change All
Delete/Change Inside
Add Surround
Delete Surround
Change Surround
Delete HTML Tag Inner/Outer/Surround

Select Group
Left/Right Editor
Left/Right Group
Quick File Navigation 1 - Search
Quick File Navigation 2 - Last File

THANKS

For the four initial buyers and supporters of VVA, gave me some faith that this just might work.

If you find this extension useful, spread the word, give me some feedback at the git repo or extension marketplace and perhaps buy the extension. With enough support, I would like to rework the task decorationOptions to use svg animations instead of the vscode default fadeIn fadeOut css animation. Something cool, like arrows pointing to navigating positions or text delete animations using SVG.

NOTES

Buy a license to unlock all the levels

TODO

demonstrate the learning process of vva
demonstrate what a high level vim user is capable of
my keybindings for other parts of vscode that uses the same keys as vim. (side panels, terminal, command palette)
level descriptions
webpack the extension

vscodevimacademy's People

Stargazers

Watchers

Forkers

plankconst hy-js aaspcodes liyucode ozhasta

vscodevimacademy's Issues

Fora de tela

First, thank you very much for making this extension. It's been the coolest and most practical way I think to be updating VIM. I even got the full version.

But having 2 problems in this learning and I would like to share:

Sometimes it happens that the text in the menu pops up out of nowhere

In the previous challenge I was asked to go down the last line with G, so I went to that position. But the next challenge was getting to the first letter of the sentence, and I was kind of on top of it. At various times this happens, when I go to a position I was already in, having to press l h to continue. Adding a check before giving the next command would be nice

Typo in Up & Down 1

On Up & Down 1 It says that 'j' moves up and 'k' moves down when it is the opposite.

See here:

It doesn't work at all?

Hi,
I can install and start it. And I can open in the console the different levels.
But I can't do any of the actions.
I can click on the text and select it. But pressing any button will result in the letter showing up for a split second, to get deleted after.

So I can't do any of the levels.
pressing h or l - or any other buttons won't move or do anything it is supposed to do...

I can click next to the carret and it moves.. but I would rather try the vim keys

Image.002.mp4

game breaks on press of "u"

Screen.Recording.2021-11-28.at.10.21.01.PM.mov

in the video, you can see what happens when I press "u" it happens slightly differently each time, but every time, text that wasn't supposed to be there appears.
This is an awesome project btw!

Level 'Marks' not loading correctly

The level 'Marks' in the first section does not open correctly for me.

the left window loads something (not sure if it is the correct level)
the level select on the right does not switch to the level control windows

Tested on 2 different systems, both Win10 and latest version of VScode.

Error loading webview: Error: Could not register service workers: InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state..

I'm getting the following when I try and start the app from the command palette:

Error loading webview: Error: Could not register service workers: InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state..

Version: 1.56.2 (system setup)
Commit: 054a9295330880ed74ceaedda236253b4f39a335
Date: 2021-05-12T17:13:13.157Z
Electron: 12.0.4
Chrome: 89.0.4389.114
Node.js: 14.16.0
V8: 8.9.255.24-electron.0
OS: Windows_NT x64 10.0.19042

Is it priced for different countries?

I really want to experience all the features, but the price is too high in China, is it priced for different countries?

Level 'Word Search 3' incorrect setup

Hi there,

first off, thank you very much for creating the extension, it really helped me to get into VIM and I bought the premium license to learn more and support such an awesome project.

In the premium section there are a few levels that not work for seemingly different reasons, so I decided to create separate Issues here for each of them.

The first one is 'Word Search 3' in the first section. This one teaches the commands '#' and '*' for jumping to the next occurrence of the word currently under the cursor. The issue is, the level-setup does not create the option to use these commands, since it has the same block of text as the 2 levels before it and you need works that are separated by whitespace or non-letter-characters.

Easiest fix would probably be to replace the capital filler letters with spaces or non-letter-chars.

Levels 'Goto Definition' and 'Rename Symbol' not loading

The levels 'Goto Defintion' in section 1 and 'Rename Symbol' in section 2 do not load at all for me.

the level window on the left side just shows whichever level was opened before
if you open it as the first level after starting VVA, the left side is empty
the level select on the right does not switch to the level controls

The issue is the same for me on 2 different systems, both Windows 10 and the latest version of VS-Code.

Loading after Word Search 3:

Loading from fresh start:

[Feature Request] Sandbox/Practice Mode

Can you create a free sandbox mode, which has a large mock project or file, and jumps around for you to create arbitrary changes/movements to it? Ideally, this mode would be available to both free and paid users, and not specify any sort of keyboard functionality or have any guides as a concession. It could also have benchmarks or something to allow you to compare your time. I'm asking for this type of change because a lot of the lessons don't combine motions from other lessons, except for the periodic section review ones, and making these sorts of changes with automated direction seems like a good way to get better.

don't work lesson "goto Next Paragraph"

Just to take a look, that for some reason this list is not working for me. Maybe it can happen to other people. And yes, I've tried to reinstall, but in this challenge there's always a problem. Both in VSCode on linux and windows

Is https://github.com/asvetliakov/vscode-neovim supported?

Hi, awesome plugin!

It works with https://github.com/asvetliakov/vscode-neovim , but the behaviour is very buggy. The cursor often jumps away from where it is meant to be and then the level won't end. Also the graphics draw on top of themselves. It is barely usable.

Also, I get this error sometimes:

Some text dont fully load on the console side when using es Language option

(edit) sorry i just read is not fully implemented

Visual Mode Bug

Thanks for making this extension!

Bug:
When "vim.statusBarColorControl": true is set in settings.json, entering Visual mode will cause the text on the screen to change and make the level unplayable.

invisible hint in challenge

invisible hint in challenge Goto Sections 3 - Nearest Start or End

Game is not loading

Game is not loading.
I have vim extension installed.

Level 'Swap Characters' breaks VVA

The level 'Swap Characters' in section 2 does break VVA for me after opening.

level window on the left loads something
select window on the right does not change after clicking
after loading, it's not possible to change levels anymore or do anything else in VVA