diff --git a/learn/src/components/HiraganaTableDialog.tsx b/learn/src/components/HiraganaTableDialog.tsx index db938cc5..1c0a3e21 100644 --- a/learn/src/components/HiraganaTableDialog.tsx +++ b/learn/src/components/HiraganaTableDialog.tsx @@ -5,13 +5,14 @@ import { Button, Table, TableHead, + TableBody, TableRow, TableCell, Paper, } from "@mui/material"; import { hiraganaTable } from "@/utils/translateBraille"; -export default function HiraganaTableDialog(): JSX.Element { +export function HiraganaTableDialog(): JSX.Element { const [isHiraganaTableOpen, setIsHiraganaTableOpen] = useState(false); return ( @@ -221,3 +222,222 @@ export default function HiraganaTableDialog(): JSX.Element { ); } + +export function HiraganaTableDialogForTouch(): JSX.Element { + return ( + + + + + 点字とひらがなの対応表 + + + + + 行/列 + あ + い + う + え + お + + + + + あ + {hiraganaTable.あ} + {hiraganaTable.い} + {hiraganaTable.う} + {hiraganaTable.え} + {hiraganaTable.お} + + + か + {hiraganaTable.か} + {hiraganaTable.き} + {hiraganaTable.く} + {hiraganaTable.け} + {hiraganaTable.こ} + + + さ + {hiraganaTable.さ} + {hiraganaTable.し} + {hiraganaTable.す} + {hiraganaTable.せ} + {hiraganaTable.そ} + + + + た + {hiraganaTable.た} + {hiraganaTable.ち} + {hiraganaTable.つ} + {hiraganaTable.て} + {hiraganaTable.と} + + + な + {hiraganaTable.な} + {hiraganaTable.に} + {hiraganaTable.ぬ} + {hiraganaTable.ね} + {hiraganaTable.の} + + + は + {hiraganaTable.は} + {hiraganaTable.ひ} + {hiraganaTable.ふ} + {hiraganaTable.へ} + {hiraganaTable.ほ} + + + ま + {hiraganaTable.ま} + {hiraganaTable.み} + {hiraganaTable.む} + {hiraganaTable.め} + {hiraganaTable.も} + + + や + {hiraganaTable.や} + + {hiraganaTable.ゆ} + + {hiraganaTable.よ} + + + ら + {hiraganaTable.ら} + {hiraganaTable.り} + {hiraganaTable.る} + {hiraganaTable.れ} + {hiraganaTable.ろ} + + + わ + {hiraganaTable.わ} + + {hiraganaTable.を} + + {hiraganaTable.ん} + + +
+ + + + 拗音の対応表 + + + + + + ゃ + ゅ + ょ + + + + + き + ⠈⠡ + ⠈⠩ + ⠈⠪ + + + し + ⠈⠱ + ⠈⠹ + ⠈⠺ + + + ち + ⠈⠕ + ⠈⠝ + ⠈⠞ + + + ひ + ⠈⠥ + ⠈⠭ + ⠈⠮ + + + み + ⠈⠵ + ⠈⠽ + ⠈⠾ + + + り + ⠈⠑ + ⠈⠙ + ⠈⠚ + + + ぎ + ⠘⠡ + ⠘⠩ + ⠘⠪ + + + じ + ⠘⠱ + ⠘⠹ + ⠘⠺ + + + ぢ + ⠘⠕ + ⠘⠝ + ⠘⠞ + + + び + ⠘⠥ + ⠘⠭ + ⠘⠮ + + + ぴ + ⠨⠥ + ⠨⠭ + ⠨⠮ + + +
+ + + + その他の対応表 + + + + + 他 + ん + 長音 + 促音(っ) + 濁音 + 半濁音 + + + + + 点字 + ⠴ + ⠒ + ⠂ + ⠐ + ⠠ + + +
+ + + + ); +} diff --git a/learn/src/components/TouchMain.module.css b/learn/src/components/TouchMain.module.css index 331753e7..64402d20 100644 --- a/learn/src/components/TouchMain.module.css +++ b/learn/src/components/TouchMain.module.css @@ -1,7 +1,5 @@ -.wrapper { - background-color: white; -} .show_chart { + /* background-color: antiquewhite; */ margin-top: auto; margin-bottom: auto; float: left; @@ -10,12 +8,14 @@ } .hide_chart { + /* background-color: aquamarine; */ float: left; margin-top: 150px; - width: 90%; + width: 100%; } .question { + /* background-color: skyblue; */ padding-top: 8px; padding-bottom: 6px; max-width: 100%; @@ -29,6 +29,7 @@ } .touch_field { + /* background-color: lightcoral; */ padding-top: 8px; padding-bottom: 6px; max-width: 100%; @@ -38,7 +39,7 @@ } .judge_and_next_question { - height: 60px; + /* background-color: lightgoldenrodyellow; */ max-width: 100%; width: 800px; margin-left: auto; @@ -47,26 +48,29 @@ } .judge { + /* background-color: lightseagreen; */ flex-basis: 60%; display: flex; } -.judge_icon { +.right_icon { + /* background-color: lightskyblue; */ padding-left: 20px; - margin-top: auto; - margin-bottom: auto; + margin-top: none; font-size: 60px; -} - -.right_icon { color: rgba(130, 211, 102, 1); } .wrong_icon { + /* background-color: lightskyblue; */ + padding-left: 20px; + margin-top: none; + font-size: 60px; color: rgba(228, 99, 99, 1); } .judge_text { + /* background-color: lightgray; */ padding-left: 10px; margin-top: auto; margin-bottom: auto; @@ -82,6 +86,7 @@ } .btn { + /* background-color: lightpink; */ border-radius: 0.5rem; color: white; border-top: none; @@ -95,11 +100,16 @@ font-family: sans-serif; font-size: 24px; font-weight: bold; + + margin-bottom: 10px; + margin-right: 10px; } .btn:hover { margin-top: 3px; margin-left: 3px; + margin-bottom: 7px; + margin-right: 7px; } .judge_btn { @@ -140,8 +150,8 @@ float: left; left: 60%; width: 40%; - height: 600px; - overflow: auto; + height: 80vh; + overflow: scroll; } .hidden_chart { @@ -158,3 +168,11 @@ position: fixed; left: 90%; } + +/* 959px以下に適用されるCSS（タブレット用） */ +@media screen and (max-width: 959px) { + .question { + /* background-color: lightsteelblue; */ + font-size: 25px; + } +} diff --git a/learn/src/components/TouchMain.tsx b/learn/src/components/TouchMain.tsx index 74e6860a..c91e7f1a 100644 --- a/learn/src/components/TouchMain.tsx +++ b/learn/src/components/TouchMain.tsx @@ -7,7 +7,7 @@ import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; import * as tenji from "tenji"; import { BrailleArray } from "braille"; import styles from "./TouchMain.module.css"; -import HiraganaTableDialog from "./HiraganaTableDialog"; +import { HiraganaTableDialogForTouch } from "./HiraganaTableDialog"; export default function TouchMain({ typeOfQuestions, @@ -17,7 +17,7 @@ export default function TouchMain({ brailleDotCount: 6 | 8; }): JSX.Element { const [brailleStrings, setBrailleStrings] = useState( - new BrailleArray([...Array(10)].map((_) => "⠀").join(""), brailleDotCount), + new BrailleArray([...Array(8)].map((_) => "⠀").join(""), brailleDotCount), ); const [hiraganaStrings, setHiraganaStrings] = useState(""); const [question, setQuestion] = useState(typeOfQuestions[0]); // 問題 @@ -73,9 +73,7 @@ export default function TouchMain({ if (afterJudgeAnswer === true && rightOrWrong === true) { return (
- +

正解!!

); @@ -83,9 +81,7 @@ export default function TouchMain({ if (afterJudgeAnswer === true && rightOrWrong === false) { return (
- +

不正解

); @@ -107,7 +103,7 @@ export default function TouchMain({ setQuestion(makeQuestion(typeOfQuestions)); setBrailleStrings( new BrailleArray( - [...Array(10)].map((_) => "⠀").join(""), + [...Array(8)].map((_) => "⠀").join(""), brailleDotCount, ), ); @@ -142,7 +138,7 @@ export default function TouchMain({
- +