diff options
| author | lonkaars <loek@pipeframe.xyz> | 2022-12-26 13:46:33 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2022-12-26 13:46:33 +0100 |
| commit | d90e2b8f121534e8004a642f576807dd3ed53507 (patch) | |
| tree | bbdd16b7a0809d0762aa293dc77307372423e199 /card | |
card template working
Diffstat (limited to 'card')
| -rw-r--r-- | card/card.css | 25 | ||||
| -rw-r--r-- | card/card.html | 22 | ||||
| -rw-r--r-- | card/card.js | 37 |
3 files changed, 84 insertions, 0 deletions
diff --git a/card/card.css b/card/card.css new file mode 100644 index 0000000..2e41631 --- /dev/null +++ b/card/card.css @@ -0,0 +1,25 @@ +.card { + text-align: center; +} + +.card span { + display: block; +} + +hr { + height: 10px; + border: none; +} + +.card.front .target-word-reading, +.card.front .target-word-translation, +.card.front .sentence-translation, +.card.front hr, +.card.front ruby rt { + display: none; +} + +.sentence-translation { + margin-top: 1em; +} + diff --git a/card/card.html b/card/card.html new file mode 100644 index 0000000..f0bdb77 --- /dev/null +++ b/card/card.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset='utf-8'> + <title>card template test</title> + <link rel='stylesheet' type='text/css' media='screen' href='./card.css'> + <script defer src='./card.js'></script> +</head> +<body> + +<div class="card back"> +<span class="sentence">[俺](おれ)の[目](め)の[前](まえ)に[全](ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\*escape\* (test)</span> +<hr class="split"> +<span class="target-word-reading">立つ【た・つ】</span> +<span class="target-word-translation">To stand</span> +<span class="sentence-translation">Before my eyes stood Alice, butt-naked.</span> +</div> + +<button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button> + +</span> +</html> diff --git a/card/card.js b/card/card.js new file mode 100644 index 0000000..ad744b7 --- /dev/null +++ b/card/card.js @@ -0,0 +1,37 @@ +function parseSentence(input) { + var bold = false; // currently bold + var mode = "normal"; // normal, kanji, reading + var out = ""; // output html + + var kanji = ""; // current kanji + var reading = ""; // current kanji reading + + for (var i = 0; i < input.length; i++) { + // escape all characters preceded by \ + if (input[i] == "\\") { out += input[i+1]; i++; continue; } + // parse *test* into <b>test</b> + if (input[i] == "*") { bold = !bold; out += `<${bold ? "" : "/"}b>`; continue; } + + // parse [kanji](reading) into ruby text + if (mode == "normal" && input[i] == "[") { kanji = ""; mode = "kanji"; continue; } + if (mode == "kanji" && input[i] == "]") { mode = "normal"; continue; } + if (mode == "normal" && kanji.length > 0 && input[i-1] == "]" && input[i] == "(") { reading = ""; mode = "reading"; continue; } + if (mode == "reading" && input[i] == ")") { mode = "normal"; out += `<ruby>${kanji}<rt>${reading}</rt></ruby>`; continue; } + + // add current character to selected mode buffer + if (mode == "normal") out += input[i]; + if (mode == "kanji") kanji += input[i]; + if (mode == "reading") reading += input[i]; + } + + return out; +} + +function run() { + var sentences = document.getElementsByClassName("sentence"); + + for (var sentence of sentences) + sentence.innerHTML = parseSentence(sentence.innerText); +} + +run(); |