diff options
| -rw-r--r-- | App.js | 36 | ||||
| -rw-r--r-- | characters.js | 4 | ||||
| -rw-r--r-- | index.html | 50 | ||||
| -rw-r--r-- | index.js | 142 | ||||
| -rw-r--r-- | main.js | 14 |
5 files changed, 67 insertions, 179 deletions
@@ -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'], @@ -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(); -} @@ -0,0 +1,14 @@ +'use strict'; + +const h = Inferno.h; + +function render() +{ + Inferno.render( + h(App, {}), + document.getElementById('root') + ); +} + + +window.onload = render; |