From 903c6ad8cf5b135075a610f4c7ea90ee5afdf3d1 Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sun, 4 Dec 2022 22:02:11 -0800 Subject: [PATCH] Improve challenge display --- .../layouts/challenges/single.html | 154 +++++++++--------- themes/tegakituesday.com/static/css/style.css | 77 +++++++-- themes/tegakituesday.com/static/js/toggle.js | 77 +++++++++ 3 files changed, 218 insertions(+), 90 deletions(-) create mode 100644 themes/tegakituesday.com/static/js/toggle.js diff --git a/themes/tegakituesday.com/layouts/challenges/single.html b/themes/tegakituesday.com/layouts/challenges/single.html index 620183c..c553b82 100644 --- a/themes/tegakituesday.com/layouts/challenges/single.html +++ b/themes/tegakituesday.com/layouts/challenges/single.html @@ -10,92 +10,96 @@ {{- $current := replaceRE `[^0-9]` "" .File -}} {{- partial "nav.html" . -}}
+
+ + + +

Tegaki Tuesday #{{- $current -}}

手(て)書(が)きの火(か)曜(よう)日(び)＃{{- $current -}}・
- {{ if or (.Params.japanese) (.Params.english) }} -
-
-
- - - {{- range.Params.japanese -}} - - {{- range. -}} - -

{{- range. -}} - {{- if eq (printf "%T" .text) "string" -}} - {{- $.Scratch.Set "dictionary" .text -}} - {{- $.Scratch.Set "html" .text -}} - {{- else -}} - {{- $.Scratch.Set "dictionary" "" -}} - {{- $.Scratch.Set "html" "" -}} - {{- range.text -}} - {{- if reflect.IsMap . -}} - {{- range $kanji, $furigana := . -}} - {{- $.Scratch.Add "dictionary" $kanji -}} - {{- $.Scratch.Add "html" "" -}} - {{- $.Scratch.Add "html" $kanji -}} - {{- $.Scratch.Add "html" "(" -}} - {{- $.Scratch.Add "html" $furigana -}} - {{- $.Scratch.Add "html" ")" -}} - {{- end -}} - {{- else -}} - {{- $.Scratch.Add "dictionary" . -}} - {{- $.Scratch.Add "html" . -}} - {{- end -}} - {{- end -}} - {{- end -}} - {{ if .dictionary }} - {{- $.Scratch.Set "dictionary" .dictionary -}} - {{ end }} - {{- if not (and .dictionary (hasPrefix .dictionary "http")) -}} - {{- $.Scratch.Set "dictionary" (printf "%s" ($.Scratch.Get "dictionary") | printf "%s%s" "https://jisho.org/word/" | printf "%s") -}} - {{- end -}} - {{- if and (not .dictionary) (not .pos) -}} - {{- $.Scratch.Get "html" | safeHTML -}} - {{- else -}} - {{- $.Scratch.Get "html" | safeHTML -}} + {{ if .Params.english }} +

+ + {{- range.Params.english -}} +

{{- $.RenderString . -}}

+ {{- end -}} +
+
+ {{ end }} +
+ + + {{- range.Params.japanese -}} + + {{- range. -}} + +

{{- range. -}} + {{- if eq (printf "%T" .text) "string" -}} + {{- $.Scratch.Set "dictionary" .text -}} + {{- $.Scratch.Set "html" .text -}} + {{- else -}} + {{- $.Scratch.Set "dictionary" "" -}} + {{- $.Scratch.Set "html" "" -}} + {{- range.text -}} + {{- if reflect.IsMap . -}} + {{- range $kanji, $furigana := . -}} + {{- $.Scratch.Add "dictionary" $kanji -}} + {{- $.Scratch.Add "html" "" -}} + {{- $.Scratch.Add "html" $kanji -}} + {{- $.Scratch.Add "html" "(" -}} + {{- $.Scratch.Add "html" $furigana -}} + {{- $.Scratch.Add "html" ")" -}} {{- end -}} - {{- end -}}

+ {{- else -}} + {{- $.Scratch.Add "dictionary" . -}} + {{- $.Scratch.Add "html" . -}} + {{- end -}} {{- end -}} {{- end -}} -
-
- - {{- range.Params.english -}} -

{{- $.RenderString . -}}

+ {{ if .dictionary }} + {{- $.Scratch.Set "dictionary" .dictionary -}} + {{ end }} + {{- if not (and .dictionary (hasPrefix .dictionary "http")) -}} + {{- $.Scratch.Set "dictionary" (printf "%s" ($.Scratch.Get "dictionary") | printf "%s%s" "https://jisho.org/word/" | printf "%s") -}} {{- end -}} -
-
-
- - - {{- range.Params.japanese -}} - - {{- range. -}} - -

{{- range. -}} - {{- if eq (printf "%T" .text) "string" -}} - {{- .text -}} - {{- else -}} - {{- range.text -}} - {{- if reflect.IsMap . -}} - {{- range $kanji, $furigana := . -}} - {{- $kanji | safeHTML -}}({{- $furigana | safeHTML -}}) - {{- end -}} - {{- else -}} - {{- . -}} - {{- end -}} + {{- if and (not .dictionary) (not .pos) -}} + {{- $.Scratch.Get "html" | safeHTML -}} + {{- else -}} + {{- $.Scratch.Get "html" | safeHTML -}} + {{- end -}} + {{- end -}}

+ {{- end -}} + {{- end -}} +
+ -
- {{ end }} + {{- end -}}

+ {{- end -}} + {{- end -}} +
+ +
{{- partial "content.html" . -}} diff --git a/themes/tegakituesday.com/static/css/style.css b/themes/tegakituesday.com/static/css/style.css index 2467c55..5d5cc03 100644 --- a/themes/tegakituesday.com/static/css/style.css +++ b/themes/tegakituesday.com/static/css/style.css @@ -3,7 +3,6 @@ :root { /* Catppuccin color palette */ - --ctp-latte-rosewater: #de9584; --ctp-latte-rosewater-rgb: rgb(222, 149, 132); --ctp-latte-rosewater-hsl: hsl(11, 58%, 69%); --ctp-frappe-rosewater: #f2d5cf; @@ -430,6 +429,10 @@ --action-button: var(--ctp-latte-maroon); --action-button-shadow: var(--ctp-mocha-maroon); + --button: var(--ctp-mocha-surface1); + --button-hover: var(--ctp-mocha-surface2); + --button-click: var(--ctp-mocha-surface0); + --adjective: var(--ctp-mocha-red); --noun: var(--ctp-mocha-green); --verb: var(--ctp-mocha-blue); @@ -682,10 +685,35 @@ a:hover img { background: var(--background-2); margin-left: calc(-1 * var(--padding)); margin-right: calc(-1 * var(--padding)); - padding: var(--padding); + flex-shrink: 0; + overflow-x: scroll; + overflow-y: hidden; + transition: 0.75s; font-size: 1.25em; font-weight: normal; font-style: normal; + white-space: nowrap; +} + +#challenge > div { + padding: var(--padding); +} + +.vertical { + writing-mode: vertical-rl; +} + +.vertical a:hover { + border: none; + border-left: 2px solid; +} + +#challenge p { + white-space: nowrap; +} + +#challenge > div { + padding: var(--padding); } #challenge, h1, h2, h3, h4, h5, h6 { @@ -698,6 +726,7 @@ header h1, header h2, header h3, header h4, header h5, header h6 { header { padding-bottom: 8px; + margin-bottom: 8px; } header, :not(header) > h1, :not(header) > h2, :not(header) > h3, :not(header) > h4, :not(header) > h5, :not(header) > h6 { @@ -748,19 +777,10 @@ header rt { counter-increment: section; content: counter(section); text-orientation: upright; - color: #928374; + color: var(--foreground-dim); margin-right: 0.25em; } -#challenge-kanji { - writing-mode: vertical-rl; -} - -#challenge-kanji a:hover { - border: none; - border-left: 2px solid; -} - #challenge-horizontal, #challenge-kanji { flex-shrink: 0; } @@ -802,15 +822,38 @@ p, ul, ol { text-align: center; } -.action-button a { +button { + height: 2em; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75em; + padding-left: 0.5em; + padding-right: 0.5em; + background: var(--button); + border-radius: 0.25em; +} + +button:hover { + background: var(--button-hover); +} + +button:active { + background: var(--button-click); +} + +button, .action-button a { display: inline-flex; border: none !important; cursor: pointer; - background: var(--action-button); font-weight: bold; color: var(--button-text); transition: 0.5s; +} + +.action-button a { font-size: 1em; + background: var(--action-button); } .action-button span { @@ -873,10 +916,14 @@ a.no-underline:hover { border: none; } -.muted, #leaderboard td:first-child { +.muted, #leaderboard td:first-child, .clickable-icon { color: var(--foreground-dim); } +.clickable-icon:hover { + border: none; +} + @media (max-width: 400px) { #leaderboard td:first-child { display: none; diff --git a/themes/tegakituesday.com/static/js/toggle.js b/themes/tegakituesday.com/static/js/toggle.js new file mode 100644 index 0000000..86cb333 --- /dev/null +++ b/themes/tegakituesday.com/static/js/toggle.js @@ -0,0 +1,77 @@ + +const kyujitai = [["万","萬"],["与","與"],["両","兩"],["並","竝"],["乗","乘"],["乱","亂"],["乳","乳"],["争","爭"],["亜","亞"],["仏","佛"],["仮","假"],["会","會"],["伝","傳"],["伴","伴"],["余","餘"],["体","體"],["価","價"],["侮","侮"],["併","倂"],["侵","侵"],["倹","儉"],["偽","僞"],["偉","偉"],["偏","偏"],["傑","傑"],["僧","僧"],["充","充"],["児","兒"],["免","免"],["党","黨"],["内","內"],["全","全"],["兼","兼"],["円","圓"],["冊","册"],["写","寫"],["冴","冱"],["処","處"],["判","判"],["券","券"],["割","割"],["剣","劍"],["剤","劑"],["剰","剩"],["励","勵"],["労","勞"],["効","效"],["勅","敕"],["勉","勉"],["勤","勤"],["勝","勝"],["勧","勸"],["勲","勳"],["包","包"],["区","區"],["医","醫"],["半","半"],["卑","卑"],["即","卽"],["巻","卷"],["参","參"],["及","及"],["収","收"],["双","雙"],["叙","敍"],["号","號"],["台","臺"],["吸","吸"],["周","周"],["啄","啄"],["喝","喝"],["啓","啓"],["喫","喫"],["嘆","嘆"],["器","器"],["嘱","囑"],["噴","噴"],["団","團"],["囲","圍"],["図","圖"],["国","國"],["圏","圈"],["圧","壓"],["坪","坪"],["城","城"],["尭","堯"],["塚","塚"],["塀","塀"],["堕","墮"],["塁","壘"],["墜","墜"],["墳","墳"],["塩","鹽"],["増","增"],["墨","墨"],["壊","壞"],["壌","壤"],["壮","壯"],["壱","壹"],["売","賣"],["声","聲"],["変","變"],["夢","夢"],["契","契"],["奥","奧"],["奨","奬"],["姫","姬"],["媛","媛"],["婿","壻"],["嫌","嫌"],["嬢","孃"],["学","學"],["孤","孤"],["実","實"],["宝","寶"],["害","害"],["宵","宵"],["寛","寬"],["寝","寢"],["寿","壽"],["対","對"],["専","專"],["将","將"],["尋","尋"],["尊","尊"],["導","導"],["当","當"],["尚","尙"],["単","單"],["巣","巢"],["営","營"],["厳","嚴"],["尽","盡"],["届","屆"],["属","屬"],["層","層"],["岳","嶽"],["峡","峽"],["崩","崩"],["巌","巖"],["巡","巡"],["巨","巨"],["巽","巽"],["帯","帶"],["帰","歸"],["帽","帽"],["幣","幣"],["平","平"],["広","廣"],["庁","廳"],["廊","廊"],["廃","廢"],["廉","廉"],["弊","弊"],["弐","貳"],["弥","彌"],["弾","彈"],["彦","彥"],["径","徑"],["従","從"],["徴","徵"],["徳","德"],["応","應"],["忍","忍"],["急","急"],["恒","恆"],["悔","悔"],["恵","惠"],["悩","惱"],["恋","戀"],["悪","惡"],["悦","悅"],["惨","慘"],["情","情"],["愉","愉"],["慎","愼"],["慨","慨"],["憎","憎"],["憤","憤"],["懐","懷"],["懲","懲"],["成","成"],["戦","戰"],["戯","戲"],["戸","戶"],["戻","戾"],["所","所"],["房","房"],["扇","扇"],["扉","扉"],["払","拂"],["扱","扱"],["抜","拔"],["択","擇"],["拝","拜"],["担","擔"],["拠","據"],["拡","擴"],["拒","拒"],["挟","挾"],["挿","插"],["捜","搜"],["挙","擧"],["掲","揭"],["捨","捨"],["掃","掃"],["援","援"],["揺","搖"],["摂","攝"],["撃","擊"],["敏","敏"],["教","敎"],["数","數"],["断","斷"],["既","既"],["旧","舊"],["昼","晝"],["晋","晉"],["晩","晚"],["暑","暑"],["暁","曉"],["暦","曆"],["晴","晴"],["暖","暖"],["曙","曙"],["朗","朗"],["来","來"],["条","條"],["枢","樞"],["栄","榮"],["梅","梅"],["桟","棧"],["桜","櫻"],["検","檢"],["棚","棚"],["楽","樂"],["楼","樓"],["槙","槇"],["様","樣"],["概","槪"],["構","構"],["横","橫"],["権","權"],["欄","欄"],["欠","缺"],["欧","歐"],["歓","歡"],["歩","步"],["歴","歷"],["残","殘"],["殴","毆"],["殺","殺"],["殻","殼"],["毎","每"],["気","氣"],["没","沒"],["沢","澤"],["泡","泡"],["海","海"],["浄","淨"],["浅","淺"],["涙","淚"],["浜","濱"],["浮","浮"],["渉","涉"],["渇","渴"],["渚","渚"],["渓","溪"],["渋","澁"],["済","濟"],["清","淸"],["温","溫"],["満","滿"],["港","港"],["湿","濕"],["湾","灣"],["滞","滯"],["漢","漢"],["溝","溝"],["滝","瀧"],["潜","潛"],["瀬","瀨"],["灰","灰"],["灯","燈"],["炉","爐"],["為","爲"],["点","點"],["煮","煮"],["焼","燒"],["煙","煙"],["爵","爵"],["犠","犧"],["状","狀"],["狭","狹"],["独","獨"],["猪","猪"],["猟","獵"],["献","獻"],["猶","猶"],["獣","獸"],["獲","獲"],["琢","琢"],["瑶","瑤"],["瓶","甁"],["産","產"],["画","畫"],["異","異"],["畳","疊"],["痴","癡"],["癒","癒"],["発","發"],["益","益"],["盗","盜"],["県","縣"],["真","眞"],["瞬","瞬"],["矩","矩"],["研","硏"],["砕","碎"],["硝","硝"],["碑","碑"],["社","社"],["祈","祈"],["祉","祉"],["祐","祐"],["祖","祖"],["祝","祝"],["神","神"],["祥","祥"],["禎","禎"],["禍","禍"],["福","福"],["礼","禮"],["禄","祿"],["禅","禪"],["秘","祕"],["称","稱"],["税","稅"],["程","程"],["穀","穀"],["稲","稻"],["穂","穗"],["穏","穩"],["穫","穫"],["穣","穰"],["突","突"],["窃","竊"],["節","節"],["粋","粹"],["精","精"],["糸","絲"],["約","約"],["経","經"],["終","終"],["絵","繪"],["続","續"],["継","繼"],["緒","緖"],["緑","綠"],["練","練"],["緯","緯"],["編","編"],["総","總"],["縄","繩"],["縁","緣"],["繁","繁"],["縦","縱"],["繊","纖"],["繭","繭"],["缶","罐"],["署","署"],["羽","羽"],["翁","翁"],["習","習"],["翼","翼"],["翻","翻"],["者","者"],["聡","聰"],["聴","聽"],["粛","肅"],["肖","肖"],["肩","肩"],["胞","胞"],["胆","膽"],["脱","脫"],["脳","腦"],["臓","臟"],["臭","臭"],["舎","舍"],["舗","舖"],["舞","舞"],["艶","艷"],["芸","藝"],["茎","莖"],["荘","莊"],["著","著"],["蔵","藏"],["薫","薰"],["薬","藥"],["蘭","蘭"],["虚","虛"],["虜","虜"],["虫","蟲"],["蚕","蠶"],["蛍","螢"],["蛮","蠻"],["衛","衞"],["装","裝"],["褐","褐"],["褒","襃"],["要","要"],["覆","覆"],["覇","霸"],["視","視"],["覚","覺"],["覧","覽"],["観","觀"],["触","觸"],["訳","譯"],["証","證"],["評","評"],["誠","誠"],["誕","誕"],["請","請"],["調","調"],["誉","譽"],["読","讀"],["謁","謁"],["諸","諸"],["謡","謠"],["謹","謹"],["謙","謙"],["講","講"],["謄","謄"],["譲","讓"],["豊","豐"],["賓","賓"],["賛","贊"],["贈","贈"],["赳","赳"],["践","踐"],["転","轉"],["軽","輕"],["辞","辭"],["込","込"],["迅","迅"],["迎","迎"],["近","近"],["返","返"],["迫","迫"],["迭","迭"],["述","述"],["迷","迷"],["追","追"],["退","退"],["送","送"],["逃","逃"],["逆","逆"],["透","透"],["逐","逐"],["途","途"],["通","通"],["逝","逝"],["速","速"],["造","造"],["連","連"],["逮","逮"],["週","週"],["進","進"],["遂","遂"],["遇","遇"],["遊","遊"],["運","運"],["遍","遍"],["過","過"],["道","道"],["達","達"],["違","違"],["遠","遠"],["遣","遣"],["適","適"],["遭","遭"],["遮","遮"],["遵","遵"],["遷","遷"],["選","選"],["遺","遺"],["避","避"],["還","還"],["辺","邊"],["逓","遞"],["逸","逸"],["遥","遙"],["遅","遲"],["郎","郞"],["都","都"],["郷","鄕"],["酌","酌"],["酔","醉"],["醸","釀"],["釈","釋"],["釣","釣"],["鉄","鐵"],["鉱","鑛"],["銭","錢"],["鋭","銳"],["鋳","鑄"],["錬","鍊"],["録","錄"],["鎮","鎭"],["関","關"],["闘","鬪"],["降","降"],["陥","陷"],["隆","隆"],["険","險"],["随","隨"],["隠","隱"],["隣","鄰"],["隷","隸"],["雅","雅"],["雑","雜"],["難","難"],["霊","靈"],["青","靑"],["静","靜"],["響","響"],["頼","賴"],["頻","頻"],["顔","顏"],["類","類"],["顕","顯"],["飢","飢"],["飯","飯"],["飲","飮"],["飼","飼"],["飾","飾"],["餅","餠"],["餓","餓"],["館","館"],["飽","飽"],["駅","驛"],["駆","驅"],["騒","騷"],["騰","騰"],["験","驗"],["髄","髓"],["髪","髮"],["竜","龍"],["鶏","鷄"],["麟","麟"],["麦","麥"],["黄","黃"],["黒","黑"],["黙","默"],["黛","黛"],["斉","齊"],["斎","齋"],["歯","齒"],["齢","齡"],["亀","龜"],["逢","逢"],["芦","芦"],["飴","飴"],["溢","溢"],["茨","茨"],["鰯","鰯"],["淫","淫"],["迂","迂"],["厩","厩"],["噂","噂"],["餌","餌"],["襖","襖"],["迦","迦"],["牙","牙"],["廻","廻"],["恢","恢"],["晦","晦"],["蟹","蟹"],["葛","葛"],["鞄","鞄"],["釜","釜"],["翰","翰"],["翫","翫"],["徽","徽"],["祇","祇"],["汲","汲"],["灸","灸"],["笈","笈"],["卿","卿"],["饗","饗"],["僅","僅"],["喰","喰"],["櫛","櫛"],["屑","屑"],["粂","粂"],["祁","祁"],["隙","隙"],["倦","倦"],["捲","捲"],["牽","牽"],["鍵","鍵"],["諺","諺"],["巷","巷"],["梗","梗"],["膏","膏"],["鵠","鵠"],["甑","甑"],["叉","叉"],["榊","榊"],["薩","薩"],["鯖","鯖"],["錆","錆"],["鮫","鮫"],["餐","餐"],["杓","杓"],["灼","灼"],["酋","酋"],["楯","楯"],["薯","薯"],["藷","藷"],["哨","哨"],["鞘","鞘"],["杖","杖"],["蝕","蝕"],["訊","訊"],["逗","逗"],["摺","摺"],["撰","撰"],["煎","煎"],["煽","煽"],["穿","穿"],["箭","箭"],["詮","詮"],["噌","噌"],["遡","遡"],["揃","揃"],["遜","遜"],["腿","腿"],["蛸","蛸"],["辿","辿"],["樽","樽"],["歎","歎"],["註","註"],["瀦","瀦"],["捗","捗"],["槌","槌"],["鎚","鎚"],["辻","辻"],["挺","挺"],["鄭","鄭"],["擢","擢"],["溺","溺"],["兎","兎"],["堵","堵"],["屠","屠"],["賭","賭"],["瀞","瀞"],["遁","遁"],["謎","謎"],["灘","灘"],["楢","楢"],["禰","禰"],["牌","牌"],["這","這"],["秤","秤"],["駁","駁"],["箸","箸"],["叛","叛"],["挽","挽"],["誹","誹"],["樋","樋"],["稗","稗"],["逼","逼"],["謬","謬"],["豹","豹"],["廟","廟"],["瀕","瀕"],["斧","斧"],["蔽","蔽"],["瞥","瞥"],["蔑","蔑"],["篇","篇"],["娩","娩"],["鞭","鞭"],["庖","庖"],["蓬","蓬"],["鱒","鱒"],["迄","迄"],["儲","儲"],["餅","餅"],["籾","籾"],["爺","爺"],["鑓","鑓"],["愈","愈"],["猷","猷"],["漣","漣"],["煉","煉"],["簾","簾"],["榔","榔"],["屢","屢"],["冤","冤"],["叟","叟"],["咬","咬"],["嘲","嘲"],["囀","囀"],["徘","徘"],["扁","扁"],["棘","棘"],["橙","橙"],["狡","狡"],["甕","甕"],["甦","甦"],["疼","疼"],["祟","祟"],["竈","竈"],["筵","筵"],["篝","篝"],["腱","腱"],["艘","艘"],["芒","芒"],["虔","虔"],["蜃","蜃"],["蠅","蠅"],["訝","訝"],["靄","靄"],["靱","靱"],["騙","騙"],["鴉","鴉"],["史","史"],["交","交"],["朕","朕"],["告","吿"],["寧","寧"],["邦","邦"],["拳","拳"],["機","機"],["空","空"],["竟","竟"],["記","記"],["億","億"],["次","次"],["前","前"],["化","化"],["紀","紀"],["延","延"],["屡","屢"],["湾","灣"],["幾","幾"],["虐","虐"],["誤","誤"],["亘","亙"],["凜","凛"],["刃","刄"],["呉","吳"],["回","囘"],["妊","姙"],["娯","娛"],["強","强"],["携","攜"],["旅","旅"],["曽","曾"],["歳","歲"],["粘","黏"],["糾","糺"],["絶","絕"],["萌","萠"],["説","說"],["祷","禱"],["鎌","鐮"],["閲","閱"],["麺","麵"],["祢","禰"]] + +const challenge = document.getElementById("challenge"); + +const defaultHeight = challenge.scrollHeight + "px"; +challenge.style.height = defaultHeight; + +const vocab = document.getElementById("challenge-vocab"); +const kanji = document.getElementById("challenge-kanji"); +const texts = [vocab, kanji]; + +const rubies = document.getElementsByTagName("ruby"); +let kyujitaiConvertable = []; +let kyujitaiConvertableLinks = []; +for (let i = 0; i < rubies.length; i++) { + const ruby = rubies[i]; + let shinjitai = ruby.firstChild.textContent; + for (let j = 0; j < kyujitai.length; j++) { + const pair = kyujitai[j]; + if (shinjitai !== pair[0]) { + continue; + } + ruby.shinjitai = pair[0]; + ruby.kyujitai = pair[1]; + const encodedURIComponent = encodeURIComponent(pair[0]).toLowerCase(); + if (ruby.parentNode.nodeName === "a" && ruby.parentNode.href.includes(encodedURIComponent) && ruby.parentNode.href.endsWith("%23kanji")) { + ruby.parentNode.shinjitaiHref = ruby.parentNode.href; + ruby.parentNode.kyujitaiHref = ruby.parentNode.href.replace(encodedURIComponent, encodeURIComponent(pair[1])); + kyujitaiConvertableLinks.push(ruby.parentNode); + } + kyujitaiConvertable.push(ruby); + break; + }; +} +const kyujitaiButton = document.getElementById("kyujitai"); +if (kyujitaiConvertable.length === 0) { + kyujitaiButton.parentNode.removeChild(kyujitaiButton); +} else { + document.getElementById("kyujitai").addEventListener("click", function() { + let kyujitai = false; + if (this.innerHTML === "旧字体") { + kyujitai = true; + this.innerHTML = "新字体"; + } else { + this.innerHTML = "旧字体"; + } + kyujitaiConvertable.forEach(ruby => ruby.firstChild.textContent = kyujitai ? ruby.kyujitai : ruby.shinjitai); + kyujitaiConvertableLinks.forEach(link => link.href = kyujitai ? link.kyujitaiHref : link.shinjitaiHref); + }); +} + +const directionButton = document.getElementById("direction"); +directionButton.addEventListener("click", function() { + if (this.innerHTML === "↕") { + texts.forEach(text => text.classList.add("vertical")); + this.innerHTML = "↔"; + challenge.style.height = challenge.scrollHeight + "px"; + } else { + texts.forEach(text => text.classList.remove("vertical")); + this.innerHTML = "↕"; + challenge.style.height = defaultHeight; + } +}); +directionButton.click(); + +document.getElementById("highlight").addEventListener("click", function() { + if (this.innerHTML === "漢字") { + vocab.style.display = "none"; + kanji.style.removeProperty("display"); + this.innerHTML = "単語"; + } else { + kanji.style.display = "none"; + vocab.style.removeProperty("display"); + this.innerHTML = "漢字"; + } +});