begin refactor to use Inferno

author: sanine-a <sanine.not@pm.me> 2021-04-12 17:40:33 -0500
committer: sanine-a <sanine.not@pm.me> 2021-04-12 17:40:33 -0500
commit: bc594a2d3839d1d0a3cc76eed23ec8535c72f6bf (patch)
tree: e63cc0faf2d756f5c0d92a14e2ddca59e3a52d39
parent: 82573dc615710c13d988ef27823d24839df100ab (diff)
5 files changed, 67 insertions, 179 deletions
diff --git a/App.js b/App.js
new file mode 100644
index 0000000..ebfcae3
--- /dev/null
+++ b/App.js
@@ -0,0 +1,36 @@
+let state = {};
+let internalState = {};
+
+state.currentChar = '你';
+
+function setState(key, value)
+{
+   state[key] = value;
+   render();
+}
+
+
+const CurrentCharacter = function({character})
+{
+   return h(
+      'h1',
+      { onClick: () => setState('currentChar', '我') },
+      character
+   );
+}
+   
+
+const App = function()
+{
+   const { currentChar } = state;
+   
+   return h(
+      'div', {},
+      [
+         h(
+            CurrentCharacter,
+            {character: currentChar}
+         ),
+      ]
+   );
+}
diff --git a/characters.js b/characters.js
index cec829e..0ed41aa 100644
--- a/characters.js
+++ b/characters.js
@@ -7,7 +7,7 @@ let characters = [['的','de'],
                   ['大','da4'],
                   ['在','zai4'],
                   ['人','ren2'],
-                  ['了','liao3'],
+                  ['了','le'],
                   ['中','zhong1'],
                   ['到','dao4'],
                   ['资','zi1'],
@@ -76,7 +76,7 @@ let characters = [['的','de'],
                   ['成','cheng2'],
                   ['章','zhang1'],
                   ['何','he2'],
-                  ['同','tong4'],
+                  ['同','tong2'],
                   ['道','dao4'],
                   ['地','di4'],
                   ['发','fa3'],
diff --git a/index.html b/index.html
index cac2203..cb79140 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,23 @@
 <!doctype html>
 <html>
   <head>
-    <title>Learn Chinese Characters</title>
     <meta charset="utf-8">
-    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-    <script src="characters.js"></script>
-    <script src="index.js"></script>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="content">
-      <h2 id="score">100.00%</h2>
-      <h2 id="level">Level 1</h2>
-      <h1 id="current-character"></h1>
+    <title>学汉字</title>
 
-      <span style="width: 300px; display: block;">
-        <input id="pinyin-input" type="text">
-      </span>
-      
-      <span id="hint-span">
-        <button id="hint-button">Hint</button>
-        <span id="hint">?</span>
-      </span>
-      <br>
-      <button id="reset-button">Reset</button>
-      <br>
-      
-      <label>Level</label>
-      <select id="level-select">
-      </select>
-      <br>
+    <!-- inferno scripts -->
+    <script src="https://unpkg.com/inferno@7.4.8/dist/inferno.min.js"></script>
+    <script src="https://unpkg.com/inferno-hyperscript@7.4.8/dist/inferno-hyperscript.min.js"></script>
 
-      <label>Mode</label>
-      <select id="mode-select">
-        <option value="newchars">Level Characters Only</option>
-        <option value="allchars">All Characters Up To Level</option>
-      </select>
-      <p> <b>Tips:</b> This game uses numbered pinyin, so for instance you would write '你' as 'ni3'. Additionally, 'ü' is written with as 'v'.</p>
-    </div>
+    <!-- local scripts -->
+    <script src="./characters.js"></script>
+    <script src="./App.js"></script>
+    <script src="./main.js"></script>
+  </head>
+
+  <body>
+    <noscript>
+      <h1>You need JavaScript enabled to view this site.</h1>
+    </noscript>
+    <div id="root"></div>
   </body>
 </html>
-      
diff --git a/index.js b/index.js
deleted file mode 100644
index b7386eb..0000000
--- a/index.js
+++ /dev/null
@@ -1,142 +0,0 @@
-'using strict';
-
-let currentCharacter;
-let score = 100;
-let totalGuesses = 0;
-let totalCorrect = 0;
-let level = 1;
-let hintLevel = 0;
-let previousCharacters = [];
-let completed = false;
-let mode = "newchars";
-
-const CHARS_PER_LEVEL = 20;
-
-let totalChars = CHARS_PER_LEVEL;
-
-function setupLevels()
-{
-    let levelSelect = $('#level-select');
-    let numLevels = Math.floor(characters.length/CHARS_PER_LEVEL);
-    for (let i=0; i<numLevels; i++) {
-        let levelString = `${(i+1) * CHARS_PER_LEVEL} Characters`;
-        levelSelect.append(
-            $('<option></option>')
-                .val(i+1)
-                .text(levelString));
-    }
-}
-
-function randomCharacter()
-{
-    let minVal = level * CHARS_PER_LEVEL - totalChars;
-    let maxVal = level * CHARS_PER_LEVEL;
-    console.log(minVal, maxVal);
-    let index = Math.floor(Math.random() * (maxVal-minVal)) + minVal;
-    return characters[index];
-}
-
-function reset()
-{
-    completed = false;
-    level = Number($('#level-select').val());
-    mode = $('#mode-select').val();
-    if (mode === 'allchars')
-        totalChars = level * CHARS_PER_LEVEL;
-    else
-        totalChars = CHARS_PER_LEVEL;
-
-    $('#level').text(`Level ${level}`);
-    totalGuesses = 0;
-    totalCorrect = 0;
-    previousCharacters = [];
-    updateCharacter();
-    updateScore();
-}
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-$(document).ready(() => {
-    setupLevels();
-    $('#level-select').val('1');
-    $('#level-select').change(reset);
-    $('#mode-select').change(reset);
-    $('#pinyin-input').change(submitGuess);
-    $('#hint-button').click(updateHint);
-    $('#reset-button').click(reset);
-    reset();
-});
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~!
-
-function submitGuess()
-{
-    totalGuesses += 1;
-    let guess = $('#pinyin-input').val();
-    if (guess === currentCharacter[1]) {
-        totalCorrect += 1;
-        updateCharacter();
-    }
-    updateScore();
-}
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-function updateCharacter()
-{
-    if (completed || previousCharacters.length === totalChars) {
-        completed = true;
-        $('#level').text("Completed!");
-        return;
-    }
-    currentCharacter = randomCharacter();
-    while (previousCharacters.includes(currentCharacter[0]))
-        currentCharacter = randomCharacter();
-    previousCharacters.push(currentCharacter[0]);
-    $('#level').text(`Level ${level} (${previousCharacters.length-1}/${totalChars})`);
-    $('#current-character').text(currentCharacter[0]);
-    $('#pinyin-input').val('');
-    $('#pinyin-input').focus();
-    $('#hint').text('?');
-    hintLevel = 0;
-}
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-function updateScore()
-{
-    if (totalGuesses === 0)
-        score = 100;
-    else
-        score = 100 * totalCorrect/totalGuesses;
-    $('#score').text(`${score.toFixed(2)}%`);
-}
-
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-function updateHint()
-{
-    if (hintLevel === 3)
-        return;
-
-    totalGuesses += 1;
-    updateScore();
-    
-    hintLevel += 1;
-    let pinyin = currentCharacter[1];
-    if (hintLevel === 3) {
-        $('#hint').text(pinyin);
-        return;
-    }
-
-    hintString = '';
-    for (let i=0; i<pinyin.length; i++) {
-        if (i < hintLevel)
-            hintString += pinyin[i];
-        else
-            hintString += "*";
-    }
-
-    $('#hint').text(hintString);
-    $('#pinyin-input').focus();
-}
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..0ca765b
--- /dev/null
+++ b/main.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const h = Inferno.h;
+
+function render()
+{
+   Inferno.render(
+      h(App, {}),
+      document.getElementById('root')
+   );
+}
+
+
+window.onload = render;
author	sanine-a <sanine.not@pm.me>	2021-04-12 17:40:33 -0500
committer	sanine-a <sanine.not@pm.me>	2021-04-12 17:40:33 -0500
commit	bc594a2d3839d1d0a3cc76eed23ec8535c72f6bf (patch)
tree	e63cc0faf2d756f5c0d92a14e2ddca59e3a52d39
parent	82573dc615710c13d988ef27823d24839df100ab (diff)