Merge pull request #26 from aiden2480/tips-page

Add tips page
aiden2480 · Jun 28, 2022 · 52a3494 · 52a3494
2 parents 52322a7 + b169ec6
commit 52a3494
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -93,5 +93,4 @@ $ curl -L http://kanjithing-backend.chocolatejade42.repl.co/kanji/車
 - [ ] Fix overlap interaction with especially long word descriptions (同 kanji)
 - [x] Use a RapidAPI key in the application to fetch data (Replit downtime)
 - [ ] Unspaghettify everything
-- [ ] Display notification when a custom set has been created successfully
-    - Potentially a small badge text?
+- [ ] Add method of actually accessing the tips page
diff --git a/css/index.css b/css/index.css
@@ -23,10 +23,10 @@ header h1 {
 }
 
 /* Install button */
-#installbutton {
+#installbutton, #tipsbutton {
     position: fixed;
     right: 10px;
-    top: 10px;
+    top: 66px;
 
     min-width: fit-content;
     font-size: 2.75vh;
@@ -44,11 +44,11 @@ header h1 {
     transition: opacity 300ms ease-in-out 500ms, color 300ms ease-in-out;
 }
 
-#installbutton:hover {
+:is(#installbutton, #tipsbutton):hover {
     color: #36393e;
 }
 
-#installbutton img {
+:is(#installbutton, #tipsbutton) img {
     vertical-align: middle;
     margin-right: 0.25vw;
 }
@@ -58,6 +58,13 @@ header h1 {
     cursor: pointer;
 }
 
+#tipsbutton {
+    top: 10px;
+    height: 46px;
+    opacity: 1;
+    cursor: pointer;
+}
+
 div#itemdescription {
     text-align: center;
     display: block;

diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@ <h1>KanjiThing</h1>
 
     <!-- Button to install KanjiThing on the chrome store -->
     <button id="installbutton"><img src="https://www.google.com/images/icons/product/chrome_web_store-32.png" draggable="false" />Install</button>
+    <button id="tipsbutton"><img src="https://icons.iconarchive.com/icons/dtafalonso/ios8/32/Tips-icon.png" draggable="false" />Tips page</button>
 
     <!-- Badges -->
     <div id="githubbadges" style="text-align: center">

diff --git a/js/index.js b/js/index.js
@@ -37,6 +37,10 @@ chrome.extension || document.getElementById("installbutton").addEventListener("c
     window.open("https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab/");
 });
 
+document.getElementById("tipsbutton").addEventListener("click", () => {
+    window.open("/tips.html");
+});
+
 /**
  * Helper function to transform a date to a human readable time
  * 

diff --git a/js/settings.js b/js/settings.js
@@ -159,6 +159,10 @@ async function generateSettingsPage() {
     // Ensure default settings are available
     await ensureDefaultConfiguration();
 
+    document.getElementById("tipsbutton").addEventListener("click", () => {
+        window.open("/tips.html");
+    });    
+
     generateKanjiSets();
     generateMisc();
 }

diff --git a/media/tips/ctxmenu.png b/media/tips/ctxmenu.png
diff --git a/media/tips/default.png b/media/tips/default.png
diff --git a/media/tips/settings.png b/media/tips/settings.png
diff --git a/media/tips/tracing.png b/media/tips/tracing.png
diff --git a/settings.html b/settings.html
@@ -15,6 +15,9 @@
         <h1>KanjiThing</h1>
     </header>
 
+    <!-- Tips page -->
+    <button id="tipsbutton"><img src="https://icons.iconarchive.com/icons/dtafalonso/ios8/32/Tips-icon.png" draggable="false" />Tips page</button>
+
     <!-- Config panel for the custom sets -->
     <h2>Kanji sets</h2>
     <div id="setscontainer">

diff --git a/tips.html b/tips.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>KanjiThing tips</title>
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="icon" href="media/icon64x64.png">
+    <style>
+        #maincontent { text-align: center; }
+        #image-left img { float: left; margin-right: 15px; }
+        #image-right img {float: right; margin-left: 15px; }
+
+        div:is(#image-left, #image-right) {
+            max-width: 85%;
+            margin: auto;
+            padding-top: 30px;
+            display: table;
+        }
+
+        div:is(#image-left, #image-right) span {
+            font-size: 150%;
+        }
+
+        div:is(#image-left, #image-right) img {
+            display: block;
+            box-shadow:
+                5px 5px 5px #6665D2,
+                5px -5px 5px #6665D2,
+                -5px 5px 5px #6665D2,
+                -5px -5px 5px #6665D2;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <img src="media/icon256x256.png" alt="KanjiThing icon" width="192" height="192" />
+        <h1>KanjiThing tips</h1>
+    </header>
+
+    <!-- Badges -->
+    <div id="githubbadges" style="text-align: center">
+        <a href="https://github.com/aiden2480/kanjithing/commits"><img src="https://img.shields.io/github/last-commit/aiden2480/kanjithing?color=red" title="GitHub commit history" /></a>
+        <a href="https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab/reviews"><img src="https://img.shields.io/chrome-web-store/rating/nccfelhkfpbnefflolffkclhenplhiab?color=orange" title="Google chrome store rating" /></a>
+        <a href="https://chrome.google.com/webstore/detail/kanjithing/nccfelhkfpbnefflolffkclhenplhiab"><img src="https://img.shields.io/chrome-web-store/v/nccfelhkfpbnefflolffkclhenplhiab?color=yellow" title="Last version published on chrome web store" /></a>
+        <a href="https://github.com/aiden2480/kanjithing/actions/workflows/updatewebstore.yml"><img src="https://img.shields.io/github/workflow/status/aiden2480/kanjithing/Publish%20to%20chrome%20webstore?label=Publish%20workflow&color=green" title="Webstore publish workflow status" /></a>
+        <a href="https://github.com/aiden2480/kanjithing/blob/main/LICENCE"><img src="https://img.shields.io/github/license/aiden2480/kanjithing?color=blue" /></a>
+        <a href="https://aiden2480.github.io/kanjithing/"><img src="https://img.shields.io/badge/GitHub%20Pages-active-af6eeb" /></a>
+    </div>
+
+    <div id="itemdescription">
+        <b>Learn kanji stroke order from the browser</b>
+    </div>
+    <br />
+
+    <div id="maincontent">
+        <h2>The following is a basic guide to the layout of the extension interface</h2>
+
+        <!-- Main layout of the applciation -->
+        <div id="image-left">
+            <img src="media/tips/default.png" alt="Screenshot of KanjiThing user interface" width="800px"/>
+            <span>
+                The image to the left depicts the main layout of the popup. On the left, a video drawing guide is shown with a control panel underneath. The control panel
+                can be used to pause/play/rewind the drawing video, select a new set to learn kanji from, or select a new kanji from the selected set to learn. Using the
+                mouse, the character displayed can be traced and the drawing can be given a score based on how close the drawing is. This can be done by clicking the green
+                tick button. <br />
+
+                The right side shows the character translation and the two different types of readings for each character, the <ruby>音読み<rt>おんよみ</rt></ruby> and the
+                <ruby>訓読み<rt>くんよみ</rt></ruby>. The difficulty and grade are also shown, along with several example words containing the character. 
+            </span>
+        </div>
+
+        <div id="image-right">
+            <img src="media/tips/tracing.png" alt="Screenshot of KanjiThing user interface" width="800px"/>
+            <span>
+                The video guide shows the correct drawing of the kanji, and the video may be sped up or slowed down in the settings page. When drawing, if you make a mistake
+                and wish to undo a segment you've traced over, hold the <code>Ctrl</code> key and drag to erase. <br />
+
+                By default, the dropdown set menu contains kanji from Units 1-12 in the Japanese textbook Wakatta, plus a list of every prescribed kanji on the Japanese
+                continuers HSC prescribed kanji list (<a href="https://bit.ly/3OcDlwY">Available here - page 66</a>). These sets can be edited from the settings page. Arrow
+                keys may be used to navigate the menus, the up and down arrows will increment and decrement the set, and the left and right arrows will adjust the selected
+                kanji in the same manner.
+            </span>
+        </div>
+
+        <div id="image-left">
+            <img src="media/tips/ctxmenu.png" alt="Screenshot of KanjiThing settings page" width="600px"/>
+            <span>
+                The extension has built-in context menu functionality, allowing you to highlight characters you don't understand and add them to a custom set to study later.
+                The selection can be added to any previously created set, or a new one can be created. <br />
+
+                The extension icon will change after you select a set to add the characters to. If it was successful, a green tick will appear. If an error occured, a red x
+                will appear. Usually an error will only occur in the event that the selection didn't contain any kanji in it. 
+            </span>
+        </div>
+
+        <div id="image-right">
+            <img src="media/tips/settings.png" alt="Screenshot of KanjiThing settings page" width="600px"/>
+            <span>
+                The settings page, accessible from the popup modal by pressing the slash key, allows you to edit which sets are available in the extension. You may enable/disable
+                sets to learn, as well as create new ones, edit old ones, or delete ones you've already learnt. In addition, the speed with which the drawing guide video, and the
+                visibility of the settings button can both be edited. You may also export and import your local configuration to share with your classmates, or reset settings back
+                to the defaults. 
+            </span>
+        </div>
+    </div>
+</body>
+</html>