Quizの機能をトリ付けた

m3dev · Jun 16, 2024 · 0a0b586 · 0a0b586
1 parent dff9a90
commit 0a0b586
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 25 deletions.
diff --git a/torisetsu/src/jsMain/kotlin/Main.kt b/torisetsu/src/jsMain/kotlin/Main.kt
@@ -5,6 +5,10 @@ import androidx.compose.runtime.setValue
 import components.pages.quizPage
 import components.pages.resultPage
 import components.pages.topPage
+import core.ComposeQuiz
+import core.ComposeResult
+import core.Quiz
+import core.Result
 import org.jetbrains.compose.web.renderComposable
 
 enum class Page {
@@ -15,19 +19,31 @@ enum class Page {
 
 fun main() {
     renderComposable(rootElementId = "root") {
+        var resultId by remember { mutableStateOf(0) }
         var currentPage by remember { mutableStateOf(Page.TOP) }
+        val quiz: Quiz by remember { mutableStateOf(ComposeQuiz()) }
+        val result: Result by remember { mutableStateOf(ComposeResult()) }
 
         when (currentPage) {
             Page.TOP -> topPage(
                 onClickStart = { currentPage = Page.QUIZ }
             )
 
             Page.QUIZ -> quizPage(
-                onClickFinish = { currentPage = Page.RESULT }
+                quiz = quiz,
+                onClickFinish = { nextId: Int ->
+                    resultId = nextId
+                    currentPage = Page.RESULT
+                }
             )
 
             Page.RESULT -> resultPage(
-                onClickBack = { currentPage = Page.TOP }
+                diagnosis = result.getDiagnosis(resultId),
+                onClickBack = {
+                    quiz.reset()
+                    resultId = 0
+                    currentPage = Page.TOP
+                }
             )
         }
 

diff --git a/torisetsu/src/jsMain/kotlin/components/pages/QuizPage.kt b/torisetsu/src/jsMain/kotlin/components/pages/QuizPage.kt
@@ -1,22 +1,19 @@
 package components.pages
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.setValue
 import components.base.card
 import components.base.pageLayout
+import core.Quiz
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Button
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Text
 
-val answerOptions = listOf(
-    "ほとんど触らない",
-    "100回以下",
-    "100回以上"
-)
-
 @Composable
 fun quizPage(
-    onClickFinish: () -> Unit,
+    quiz: Quiz,
+    onClickFinish: (nextId: Int) -> Unit,
 ) {
     pageLayout {
         Div(
@@ -39,7 +36,7 @@ fun quizPage(
                     }
                 }
             ) {
-                Text("1/10")
+                Text("${quiz.currentQuizNumber.value}問目")
             }
             Div(
                 attrs = {
@@ -50,7 +47,7 @@ fun quizPage(
                     }
                 }
             ) {
-                Text("X（旧Twitter）を一日どのくらい触っている?")
+                Text(quiz.getQuestionText())
             }
         }
         Div(
@@ -64,11 +61,12 @@ fun quizPage(
                 }
             }
         ) {
-            answerOptions.map {
+            quiz.getAnswerOptions().map { opt ->
                 Button(
                     attrs = {
-                        // TODO: 次の問題へ進むように
-                        onClick { onClickFinish() }
+                        onClick {
+                            quiz.onClickNext(opt, onClickFinish)
+                        }
                     },
                 ) {
                     card {
@@ -82,7 +80,7 @@ fun quizPage(
                                 }
                             }
                         ) {
-                            Text(it)
+                            Text(opt.text)
                         }
                     }
                 }

diff --git a/torisetsu/src/jsMain/kotlin/components/pages/ResultPage.kt b/torisetsu/src/jsMain/kotlin/components/pages/ResultPage.kt
@@ -2,13 +2,14 @@ package components.pages
 
 import androidx.compose.runtime.Composable
 import components.base.*
+import data.Diagnosis
 import org.jetbrains.compose.web.attributes.ATarget
 import org.jetbrains.compose.web.attributes.target
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*
 
 @Composable
-fun resultPage(onClickBack: () -> Unit) {
+fun resultPage(diagnosis: Diagnosis, onClickBack: () -> Unit) {
     pageLayout {
         Div(
             attrs = {
@@ -44,12 +45,12 @@ fun resultPage(onClickBack: () -> Unit) {
                                 }
                             ) {
                                 Text(
-                                    "あなたのトリタイプ：",
+                                    "あなたのトリタイプ",
                                 )
                             }
                         }
                         Img(
-                            src = "./images/penguin.png",
+                            src = diagnosis.srcImg,
                             attrs = {
                                 style {
                                     width(100.percent)
@@ -76,8 +77,7 @@ fun resultPage(onClickBack: () -> Unit) {
                                 }
                             ) {
                                 Text(
-                                    "どんなインシデントが起きても動じず冷静に対処できる。\n" +
-                                            "そんなあなたは\n\n"
+                                    diagnosis.preText + "\n" + "そんなあなたは\n\n"
                                 )
                                 Span(
                                     attrs = {
@@ -87,12 +87,10 @@ fun resultPage(onClickBack: () -> Unit) {
                                         }
                                     }
                                 ) {
-                                    Text("「ハシビロコウ」")
+                                    Text("「${diagnosis.typeText}」")
                                 }
                                 Text(
-                                    "タイプ\n\n狙った獲物が、現れるまで、数時間も動きを止めることができるトリで、その動じない姿はまさに頼れるシニアなエンジニア。\n" +
-                                            "\n" +
-                                            "関東では、上野動物園、千葉市動物公園で見ることができます。"
+                                    diagnosis.mainText
                                 )
                             }
                             xShareButton()
@@ -122,7 +120,7 @@ fun resultPage(onClickBack: () -> Unit) {
                         }
                     }
                 ) {
-                    Text("動じないエンジニア大募集！")
+                    Text(diagnosis.postText)
                 }
                 A(
                     href = "https://example.com",

diff --git a/torisetsu/src/jsMain/kotlin/core/ComposeQuiz.kt b/torisetsu/src/jsMain/kotlin/core/ComposeQuiz.kt
@@ -0,0 +1,71 @@
+package core
+
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.MutableState
+import data.AnswerOption
+import data.Question
+
+class ComposeQuiz : Quiz {
+    // TODO: Load file
+    private val questions: List<Question> = listOf(
+        Question(
+            id = 0,
+            questionText = "quiz0",
+            answerOptions = listOf(
+                AnswerOption("1", 1, false),
+                AnswerOption("2", 2, false),
+                AnswerOption("3", 3, false),
+            ),
+        ),
+        Question(
+            id = 1,
+            questionText = "quiz1",
+            answerOptions = listOf(
+                AnswerOption("0", 0, false),
+                AnswerOption("2", 2, false),
+                AnswerOption("3", 3, false),
+            ),
+        ),
+        Question(
+            id = 2,
+            questionText = "quiz2",
+            answerOptions = listOf(
+                AnswerOption("0", 0, false),
+                AnswerOption("1", 1, false),
+                AnswerOption("3", 3, false),
+            ),
+        ),
+        Question(
+            id = 3,
+            questionText = "quiz3",
+            answerOptions = listOf(
+                AnswerOption("0", 0, false),
+                AnswerOption("1", 1, false),
+                AnswerOption("2", 2, true),  // finish example
+            ),
+        ),
+    )
+    override var currentQuizId: MutableState<Int> = mutableStateOf(0)
+    override var currentQuizNumber: MutableState<Int> = mutableStateOf(1)
+
+    override fun onClickNext(answerOption: AnswerOption, onClickFinish: (nextId: Int) -> Unit) {
+        if (answerOption.isFinish) {
+            onClickFinish(answerOption.nextId)
+        }
+        currentQuizNumber.value += 1
+        currentQuizId.value = answerOption.nextId
+    }
+
+    override fun getAnswerOptions(): List<AnswerOption> {
+        return questions[currentQuizId.value].answerOptions
+    }
+
+    override fun getQuestionText(): String {
+        return questions[currentQuizId.value].questionText
+    }
+
+    override fun reset() {
+        currentQuizId.value = 0
+        currentQuizNumber.value = 0
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/core/ComposeResult.kt b/torisetsu/src/jsMain/kotlin/core/ComposeResult.kt
@@ -0,0 +1,41 @@
+package core
+
+import data.Diagnosis
+
+class ComposeResult() : Result {
+    // TODO: Load file
+    private val diagnosisList: List<Diagnosis> = listOf(
+        Diagnosis(
+            typeText = "診断結果0です",
+            srcImg = "./images/penguin.png",
+            preText = "どんなインシデントでも冷静",
+            mainText = "タイプ\n\n狙った獲物が、現れるまで、数時間も動きを止めることができるトリで、その動じない姿はまさに頼れるシニアなエンジニア。関東では、上野動物園、千葉市動物公園で見ることができます。",
+            postText = "動じないエンジニア大募集！",
+        ),
+        Diagnosis(
+            typeText = "診断結果1です",
+            srcImg = "./images/penguin.png",
+            preText = "どんなインシデントでも冷静",
+            mainText = "タイプ\n\n狙った獲物が、現れるまで、数時間も動きを止めることができるトリで、その動じない姿はまさに頼れるシニアなエンジニア。関東では、上野動物園、千葉市動物公園で見ることができます。",
+            postText = "動じないエンジニア大募集！",
+        ),
+        Diagnosis(
+            typeText = "診断結果2です",
+            srcImg = "./images/penguin.png",
+            preText = "どんなインシデントでも冷静",
+            mainText = "タイプ\n\n狙った獲物が、現れるまで、数時間も動きを止めることができるトリで、その動じない姿はまさに頼れるシニアなエンジニア。関東では、上野動物園、千葉市動物公園で見ることができます。",
+            postText = "動じないエンジニア大募集！",
+        ),
+        Diagnosis(
+            typeText = "診断結果3です",
+            srcImg = "./images/penguin.png",
+            preText = "どんなインシデントでも冷静",
+            mainText = "タイプ\n\n狙った獲物が、現れるまで、数時間も動きを止めることができるトリで、その動じない姿はまさに頼れるシニアなエンジニア。関東では、上野動物園、千葉市動物公園で見ることができます。",
+            postText = "動じないエンジニア大募集！",
+        ),
+    )
+
+    override fun getDiagnosis(resultId: Int): Diagnosis {
+        return diagnosisList[resultId]
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/core/Quiz.kt b/torisetsu/src/jsMain/kotlin/core/Quiz.kt
@@ -0,0 +1,14 @@
+package core
+
+import androidx.compose.runtime.MutableState
+
+import data.AnswerOption
+
+interface Quiz {
+    var currentQuizId: MutableState<Int>
+    var currentQuizNumber: MutableState<Int>
+    fun onClickNext(answerOption: AnswerOption, onClickFinish: (nextId: Int) -> Unit)
+    fun getAnswerOptions(): List<AnswerOption>
+    fun getQuestionText(): String
+    fun reset()
+}
diff --git a/torisetsu/src/jsMain/kotlin/core/Result.kt b/torisetsu/src/jsMain/kotlin/core/Result.kt
@@ -0,0 +1,7 @@
+package core
+
+import data.Diagnosis
+
+interface Result {
+    fun getDiagnosis(resultId: Int): Diagnosis
+}
diff --git a/torisetsu/src/jsMain/kotlin/data/AnswerOption.kt b/torisetsu/src/jsMain/kotlin/data/AnswerOption.kt
@@ -0,0 +1,7 @@
+package data
+
+data class AnswerOption(
+    val text: String,
+    val nextId: Int,
+    val isFinish: Boolean
+)
diff --git a/torisetsu/src/jsMain/kotlin/data/Diagnosis.kt b/torisetsu/src/jsMain/kotlin/data/Diagnosis.kt
@@ -0,0 +1,9 @@
+package data
+
+data class Diagnosis(
+    val typeText: String,
+    val srcImg: String,
+    val preText: String,
+    val mainText: String,
+    val postText: String,
+)
diff --git a/torisetsu/src/jsMain/kotlin/data/Question.kt b/torisetsu/src/jsMain/kotlin/data/Question.kt
@@ -0,0 +1,7 @@
+package data
+
+data class Question(
+    val id: Int,
+    val questionText: String,
+    val answerOptions: List<AnswerOption>,
+)