From bc594a2d3839d1d0a3cc76eed23ec8535c72f6bf Mon Sep 17 00:00:00 2001 From: sanine-a Date: Mon, 12 Apr 2021 17:40:33 -0500 Subject: begin refactor to use Inferno --- App.js | 36 +++++++++++++++ characters.js | 4 +- index.html | 50 +++++++-------------- index.js | 142 ---------------------------------------------------------- main.js | 14 ++++++ 5 files changed, 67 insertions(+), 179 deletions(-) create mode 100644 App.js delete mode 100644 index.js create mode 100644 main.js 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 @@ - Learn Chinese Characters - - - - - - -
-

100.00%

-

Level 1

-

+ 学汉字 - - - - - - - ? - -
- -
- - - -
+ + + - - -

Tips: This game uses numbered pinyin, so for instance you would write '你' as 'ni3'. Additionally, 'ü' is written with as 'v'.

-
+ + + + + + + + +
- 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') - .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