3 files changed, 56 insertions, 1 deletions

diff --git a/src/server.rs b/src/server.rs
index 774cff4..5e5d61b 100644
--- a/src/server.rs
+++ b/src/server.rs
@@ -211,6 +211,8 @@ async fn gen_examples_page(mut req: Request<State>) -> tide::Result {
                   </div>
                   <div id="gen_ex_words" class="vocabtable">
                   </div>
+                  <div id="gen_ex_kanji" class="vocabtable">
+                  </div>
                 </div>
               </div>
             </body>
@@ -261,11 +263,50 @@ async fn gen_examples_page(mut req: Request<State>) -> tide::Result {
                 }
             }
 
+            let mut kanji = "<table>".to_string();
+            let mut chrvec = ex
+                .chars
+                .iter()
+                .map(|chr| {
+                    (
+                        chr,
+                        req.state()
+                            .batches
+                            .iter()
+                            .take(last_level + 1)
+                            .enumerate()
+                            .flat_map(|(ib, b)| {
+                                b.examples
+                                    .iter()
+                                    .filter(|ex| ex.chars.contains(chr))
+                                    .map(move |ex| (ib, ex))
+                            })
+                            .collect::<Vec<_>>(),
+                    )
+                })
+                .collect::<Vec<_>>();
+            chrvec.sort_by_key(|(_, exs)| exs.len());
+            for (chr, exs) in chrvec.iter().take(5) {
+                for (cnt, (ib, ex)) in exs.iter().enumerate().take(4) {
+                    if cnt == 0 {
+                        kanji +=
+                            &format!(r#"<tr><td class="tab_large font_ja">{}&nbsp;&nbsp;"#, chr);
+                    } else {
+                        kanji += &format!(r#"<tr><td>"#);
+                    }
+                    kanji += &format!(
+                        r#"</td><td><a href="{:03}.html">{:03}</a>&nbsp;&nbsp;</td><td class="tab_large font_ja">{}</td></tr>"#,
+                        ib, ib, ex.ja
+                    );
+                }
+            }
+
             let item = serde_json::json!({
                 "ja": ex.ja,
                 "en": ex.en,
                 "furi": ex.furigana_markup(),
                 "vocab": expl + "</table>",
+                "kanji": kanji + "</table>",
             });
             tx.send_blocking(Ok(format!(
                 "<script> add_example({}); </script>\n",
diff --git a/static/script.js b/static/script.js
index 72fcb1c..639e743 100644
--- a/static/script.js
+++ b/static/script.js
@@ -26,6 +26,7 @@ function display_example(i) {
     $("#gen_ex_display").html(examples[i].furi);
     $("#gen_ex_en").html(examples[i].en);
     $("#gen_ex_words").html(examples[i].vocab);
+    $("#gen_ex_kanji").html(examples[i].kanji);
     $("#gen_section").addClass("gen_hidden");
     current = i;
     revealed = false;
@@ -45,4 +46,5 @@ function spacebar() {
     $("#gen_section").removeClass("gen_hidden");
     revealed = true;
   }
+  window.scrollTo(0, 0);
 }
diff --git a/static/style.css b/static/style.css
index fbe8e7d..b699ead 100644
--- a/static/style.css
+++ b/static/style.css
@@ -150,7 +150,11 @@ details .chars {
     padding-bottom: 1em;
 }
 
-#gen_ex_words table td {
+#gen_ex_words table, #gen_ex_kanji table {
+    margin: auto;
+}
+
+#gen_ex_words table td, #gen_ex_kanji table td {
     text-align: left;
 }
 
@@ -160,6 +164,10 @@ details .chars {
     padding-bottom: 3em;
 }
 
+#gen_ex_words {
+    padding-bottom: 1em;
+}
+
 #gen_section.gen_hidden #gen_ex_en {
     visibility: hidden;
 }
@@ -168,6 +176,10 @@ details .chars {
     visibility: hidden;
 }
 
+#gen_section.gen_hidden #gen_ex_kanji {
+    visibility: hidden;
+}
+
 #gen_section.gen_hidden #gen_ex_display rt {
     visibility: hidden;
 }