From 8c367ee0bd7b82a0b91ecacedfd1520f07e66f15 Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Sun, 17 Nov 2024 15:06:55 +0100
Subject: [PATCH] Show alert upon clicking kanji with furigana.

And some other minor fixes.
---
 src/Pages/Japan/Japanese/en/if-when.md |  2 +-
 src/Pages/Japan/Japanese/en/verbs.md   | 32 +++++++++++++++++---------
 src/Pages/markdownPage.js              | 15 +++++++++++-
 src/overrides.scss                     |  6 -----
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/Pages/Japan/Japanese/en/if-when.md b/src/Pages/Japan/Japanese/en/if-when.md
index 2d72edf..3b918e7 100644
--- a/src/Pages/Japan/Japanese/en/if-when.md
+++ b/src/Pages/Japan/Japanese/en/if-when.md
@@ -6,7 +6,7 @@
 2. [たら - when / if > (then)](#たら)
 3. [なら - when / if > (first)](#なら)
 4. [ば　 - if](#ば)
-5. [もし - empdasis on: if](#もし)
+5. [もし - emphasis on: if](#もし)
 
 ---
 
diff --git a/src/Pages/Japan/Japanese/en/verbs.md b/src/Pages/Japan/Japanese/en/verbs.md
index c8e526d..9e0ff06 100644
--- a/src/Pages/Japan/Japanese/en/verbs.md
+++ b/src/Pages/Japan/Japanese/en/verbs.md
@@ -37,6 +37,8 @@ Volitional verbs describe actions performed with intent or will by the subject.
 
 Here, reading is an intentional action by the subject.
 
+---
+
 #### 非意志動詞
 ##### Non-Volitional Verbs
 
@@ -53,40 +55,46 @@ Non-volitional verbs describe actions or states that occur without the subject's
 * 雨が降る。- "It rains."
 * In this case, the rain falls naturally without a person’s will or intent.
 
+---
 
 #### 他動詞
-##### Transitive Verbs
+##### Transitive Verbs　たどうし
 
 Transitive verbs act upon a direct object and require one to express what the action affects directly. Transitive verbs are often marked by the particle を (o), which indicates the object of the action.
 
-*Examples:*
 
 * 開ける (あける) - "to open" (something)
 * 閉める (しめる) - "to close" (something)
 * 作る (つくる) - "to make"
 
-*Example sentence:*
-
 * ドアを開ける。 - "I open the door."
-* Here, ドア is the object directly affected by the action 開ける (akeru).
+* Here, ドア is the object directly affected by the action 開ける.
 
 
 #### 自動詞
-##### Intransitive Verbs
+##### Intransitive Verbs　じどうし
 
-Intransitive verbs do not take a direct object. The action occurs without directly impacting another entity, or the subject itself performs or experiences the action. They are often paired with particles like が (ga) to indicate the subject.
-
-*Examples:*
+Intransitive verbs do not take a direct object. The action occurs without directly impacting another entity, or the subject itself performs or experiences the action. They are often paired with particles like <Jps colour="c2" text="が"/> to indicate the subject.
 
 * 開く (あく) - "to open" (by itself)
 * 閉まる (しまる) - "to close" (by itself)
 * 増える (ふえる) - "to increase"
 
-*Example sentence:*
-
 * ドアが開く。- "The door opens."
 * In this case, 開く shows the door opening without anyone performing the action.
 
+##### List of verbs showing equivalents
+
+| 他動詞                                  | 自動詞                                  |
+| ------------------------------------------------------------ | -----------------------------------------------------------|
+| <Furigana kanji="開" kana="あ"/>ける - "to open" (something)  | <Furigana kanji="開" kana="あ"/>く - "to open" (by itself)|
+| <Furigana kanji="閉" kana="し"/>める - "to close" (something) | <Furigana kanji="閉" kana="し"/>まる - "to close" (by itself)|
+| <Furigana kanji="消" kana="け"/>す - "to extinguish" (something) | <Furigana kanji="消" kana="き"/>える - "to extinguish" (by itself)|
+| <Furigana kanji="止" kana="と"/>める - "to stop" (something) | <Furigana kanji="止" kana="と"/>まる - "to stop" (by itself)|
+| <Furigana kanji="壊" kana="こわ"/>す - "to break" (something) | <Furigana kanji="壊" kana="こわ"/>れる - "to break" (by itself)|
+| <Furigana kanji="焼" kana="や"/>く - "to burn", "to bake" (something) | <Furigana kanji="焼" kana="や"/>ける - "to burn", "to bake" (by itself)|
+| かける - "to lock" (something) | かかる - "to lock" (by itself)|
+
 ---
 
 #### 受身形
@@ -182,6 +190,8 @@ Irregular verbs:
 
 * [PASSIVE form┃-られた (rareta)](https://www.youtube.com/watch?v=QPOA3OYFnj4) by: [Japanese Ammo with Misa](https://www.youtube.com/@JapaneseAmmowithMisa)
 
+---
+
 #### 使役形
 ##### Causative form
 
diff --git a/src/Pages/markdownPage.js b/src/Pages/markdownPage.js
index 0cbeb90..050a851 100644
--- a/src/Pages/markdownPage.js
+++ b/src/Pages/markdownPage.js
@@ -48,8 +48,12 @@ const Jps = ({ text, colour, underline, strikethrough }) => {
     return (<span className={classBuilder}>{text}</span>);
 }
 
+function showFurigana (kana) {
+    alert(kana);
+}
+
 const Furigana = ({ kanji, kana }) => {
-    return (<span title={kana}>{kanji}<span className="furigana">{kana}</span></span>)
+    return (<span className="furigana" title={kana} onClick={() => showFurigana(kana)}>{kanji}</span>)
 }
 
 const MyCodeBlock = ({ children, className }) => {
@@ -82,6 +86,12 @@ const MyCodeBlock = ({ children, className }) => {
     );
 }
 
+const MyTable = ({ children }) => {
+    return (
+        <table className="table">{children}</table>
+    )
+}
+
 // TODO 1: Create error if given markdown file does not exist.
 // TODO 2: Create error if file for given language does not exist.
 
@@ -123,6 +133,9 @@ const MarkdownPage = ({ md }) => {
                     code: {
                         component: MyCodeBlock
                     },
+                    table: {
+                        component: MyTable
+                    },
                     Jps: {
                         component: Jps
                     },
diff --git a/src/overrides.scss b/src/overrides.scss
index 004f9af..950b395 100644
--- a/src/overrides.scss
+++ b/src/overrides.scss
@@ -207,12 +207,6 @@ body.light {
   }
 }
 
-.furigana {
-  // Do not display furigana yet until feature is complete.
-  display: none;
-}
-
-
 li.hidden {
   display: none;
 }