From 3b9cbfa389254c0564c3910076bdd77aa4a9bdc0 Mon Sep 17 00:00:00 2001 From: sawa3030 Date: Sun, 18 Feb 2024 08:50:29 +0900 Subject: [PATCH 1/5] made the scroll bar not appear --- learn/src/components/TouchMain.module.css | 30 ++++++++++++++++++----- learn/src/components/TouchMain.tsx | 8 ++---- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/learn/src/components/TouchMain.module.css b/learn/src/components/TouchMain.module.css index 331753e7..1d0c334e 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%; } .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,37 @@ } .judge { + background-color: lightseagreen; flex-basis: 60%; display: flex; } -.judge_icon { +/* .judge_icon { + background-color: lightgreen; padding-left: 20px; margin-top: auto; margin-bottom: auto; font-size: 60px; -} +} */ .right_icon { + background-color: lightskyblue; + padding-left: 20px; + margin-top: none; + font-size: 60px; 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 +94,7 @@ } .btn { + background-color: lightpink; border-radius: 0.5rem; color: white; border-top: none; @@ -95,11 +108,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 { diff --git a/learn/src/components/TouchMain.tsx b/learn/src/components/TouchMain.tsx index 74e6860a..407b67f6 100644 --- a/learn/src/components/TouchMain.tsx +++ b/learn/src/components/TouchMain.tsx @@ -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 (
- +

不正解

); From 4144c7d25ce4fa45cb21479de28cc7b24871f892 Mon Sep 17 00:00:00 2001 From: sawa3030 Date: Mon, 19 Feb 2024 08:17:34 +0900 Subject: [PATCH 2/5] added css for other devices --- learn/src/components/TouchMain.module.css | 10 +++++++++- learn/src/components/TouchMain.tsx | 4 ++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/learn/src/components/TouchMain.module.css b/learn/src/components/TouchMain.module.css index 1d0c334e..16ec3dff 100644 --- a/learn/src/components/TouchMain.module.css +++ b/learn/src/components/TouchMain.module.css @@ -11,7 +11,7 @@ background-color: aquamarine; float: left; margin-top: 150px; - width: 90%; + width: 100%; } .question { @@ -176,3 +176,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 407b67f6..30705047 100644 --- a/learn/src/components/TouchMain.tsx +++ b/learn/src/components/TouchMain.tsx @@ -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]); // 問題 @@ -103,7 +103,7 @@ export default function TouchMain({ setQuestion(makeQuestion(typeOfQuestions)); setBrailleStrings( new BrailleArray( - [...Array(10)].map((_) => "⠀").join(""), + [...Array(8)].map((_) => "⠀").join(""), brailleDotCount, ), ); From e589efb025c347c08992065bec01f67c41edd16f Mon Sep 17 00:00:00 2001 From: sawa3030 Date: Mon, 19 Feb 2024 13:07:17 +0900 Subject: [PATCH 3/5] added hiraganaTableForTouch --- learn/src/components/HiraganaTableDialog.tsx | 217 ++++++++++++++++++- learn/src/components/TouchMain.module.css | 4 +- learn/src/components/TouchMain.tsx | 4 +- learn/src/components/Tutorial.tsx | 2 +- 4 files changed, 221 insertions(+), 6 deletions(-) diff --git a/learn/src/components/HiraganaTableDialog.tsx b/learn/src/components/HiraganaTableDialog.tsx index db938cc5..908b7cc6 100644 --- a/learn/src/components/HiraganaTableDialog.tsx +++ b/learn/src/components/HiraganaTableDialog.tsx @@ -11,7 +11,7 @@ import { } 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 +221,218 @@ 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 16ec3dff..f63aa25f 100644 --- a/learn/src/components/TouchMain.module.css +++ b/learn/src/components/TouchMain.module.css @@ -158,8 +158,8 @@ float: left; left: 60%; width: 40%; - height: 600px; - overflow: auto; + height: 80vh; + overflow: scroll; } .hidden_chart { diff --git a/learn/src/components/TouchMain.tsx b/learn/src/components/TouchMain.tsx index 30705047..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, @@ -138,7 +138,7 @@ export default function TouchMain({
- +