Merge pull request #17 from aiden2480/rembrandt

Use Rembrandt to grade the user's kanji drawing

README.md

@@ -60,17 +60,35 @@ $ curl -L http://kanjithing-backend.chocolatejade42.repl.co/kanji/車
 ## :memo: Future features
 - [ ] Make the user guess readings of kanji in words
 - [ ] Add a check for `loadKanjiDetails` in case the user has loaded a new kanji by the time info loads
-- [ ] Index page with version links and details
+- [ ] Index page
+    - Version links and details
 - [ ] Help page
     - How to use the extention, info about tooltips, etc
+    - Open on the first install
+- [ ] Settings page
+    - Load custom kanji sets
+    - Log in to save
+    - Change the speed with which the drawing guide video is played
 - [ ] Flashcard thing where you get the meaning of the kanji and sample words and have to draw it
+- [ ] Custom flashcards to remember kanji/words
+    - Import from quizlet
 - [ ] Show an extra sample word when the readings string doesn't cross over to the next line
     - Compress space between two lines if it crosses over
 - [ ] Grade stroke order of drawing
     - [Available on GitHub](https://github.com/kanjialive/kanji-data-media/blob/master/kanji-animations/stroke_timings) with timestamps
-- [ ] Settings page
-    - Load custom kanji sets
-    - Log in to save
-    - Change the speed with which the drawing guide video is played
 - [ ] Grey loading screen should only appear after a certain amount of time to account for cached requests that resolve quickly
     - To prevent grey/white flashes that occur when the next character loads quickly
+- [ ] Fix whatever weirdness broke the dynamic browser icon
+- [ ] Able to star/favourite kanji to add them quickly to a custom set.
+- [ ] Right click to remove drawing (all connected strokes)
+- [x] Keybinds to navigate the application via keyboard
+    - Up/down arrow to navigate between kanji sets
+    - Left/right arrow to navigate between kanji in the currently selected set
+    - R to select a random kanji in the currently selected set
+    - Enter to grade kanji drawing
+    - Space to play/pause/replay video guide
+    - Backspace to clear drawing
+    - S to star/unstar selected kanji
+    - Keybinds visible in tooltips
+- [ ] Make the height of the buttons and dropdown selectors consistent
+- [ ] Use static assets for the emojis to keep design consistent between operating systems

css/popup.css

@@ -31,7 +31,6 @@ div#drawcontainer { height: 248px; }
 video#kanjiguide { position: absolute; }
 canvas#drawcanvas {
     position: absolute;
-    z-index: 10;
 }
 
 /* Draw section - buttons panel */
@@ -92,3 +91,28 @@ div#infosection #exampleslist * {
 #articlecontainer { position: relative; }
 #articlecontainer > .article { display: inline-block; }
 #articlecontainer > .article > * { font-weight: bold; font-size: 90%; }
+
+/* Tracing grading system */
+#popup-outer {
+    width: 95%;
+    z-index: 10;
+    position: absolute;
+    display: inline-block;
+    justify-content: center;
+    margin: auto;
+}
+
+#popup-inner {
+    border-radius: 3px;
+    background-color: #2ECC71;
+    color: #1F8B4C;
+    margin: 0 auto;
+    display: table;
+    border: 3px solid #1F8B4C;
+    user-select: none;
+    font-size: 185%;
+}
+
+#popup-inner span {
+    margin: 15px;
+}