Merge pull request #2 from m3dev/feat/page-ui

UI実装にトリ組みました
m3dev · Jun 18, 2024 · 4e91b70 · 4e91b70
2 parents 8b7124d + 34eb5d3
commit 4e91b70
Show file tree

Hide file tree

Showing 33 changed files with 853 additions and 11 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -1,6 +1,4 @@
-on:
-  pull_request:
-    branches: ["main"]
+on: [push, pull_request]
 
 jobs:
   build:
@@ -9,7 +7,7 @@ jobs:
       run:
         working-directory: torisetsu
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Set up JDK 17
         uses: actions/setup-java@v1
         with:
@@ -20,14 +18,11 @@ jobs:
       - name: build
         run: |
           ./gradlew build
-
-      - uses: actions/checkout@v4
       - name: Check file existence
         id: check_files
-        working-directory: torisetsu/build/dist/js/productionExecutable
         uses: andstor/file-existence-action@v3
         with:
-          files: "index.html, torisetsu.js"
+          files: "torisetsu/build/dist/js/productionExecutable/index.html"
       - name: File exists
         if: steps.check_files.outputs.files_exists == 'true'
         run: echo All files exists!
diff --git a/torisetsu/gradle/wrapper/gradle-wrapper.jar b/torisetsu/gradle/wrapper/gradle-wrapper.jar
diff --git a/torisetsu/src/jsMain/kotlin/Main.kt b/torisetsu/src/jsMain/kotlin/Main.kt
@@ -1,8 +1,51 @@
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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
-import org.jetbrains.compose.web.dom.*
+
+enum class Page {
+    TOP,
+    QUIZ,
+    RESULT
+}
 
 fun main() {
     renderComposable(rootElementId = "root") {
-        Div { Text("hello world by torisetsu.") }
+        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(
+                quiz = quiz,
+                onClickFinish = { nextId: Int ->
+                    resultId = nextId
+                    currentPage = Page.RESULT
+                }
+            )
+
+            Page.RESULT -> ResultPage(
+                diagnosis = result.getDiagnosis(resultId),
+                onClickBack = {
+                    quiz.reset()
+                    resultId = 0
+                    currentPage = Page.TOP
+                }
+            )
+        }
+
     }
 }
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Button.kt b/torisetsu/src/jsMain/kotlin/components/base/Button.kt
@@ -0,0 +1,47 @@
+package components.base
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Button
+
+enum class ButtonSize {
+    NORMAL,
+    LARGE
+}
+
+@Composable
+fun Button(
+    onClick: () -> Unit,
+    size: ButtonSize,
+    content: @Composable () -> Unit,
+) {
+    Button(
+        attrs = {
+            style {
+                when (size) {
+                    ButtonSize.NORMAL -> {
+                        padding(16.px, 36.px)
+                        borderRadius(16.px)
+                        fontSize(32.px)
+                    }
+
+                    ButtonSize.LARGE -> {
+                        padding(40.px, 100.px)
+                        borderRadius(40.px)
+                        fontSize(60.px)
+                    }
+                }
+                backgroundImage("linear-gradient(#5772FF, #0054DD)")
+                color(Color.white)
+                fontWeight(700)
+                property(
+                    "box-shadow",
+                    "0px 5.13px 5.13px 0px #F9F7F340 inset, 0px -5.13px 5.13px 0px #00000040 inset"
+                )
+            }
+            onClick { onClick() }
+        }
+    ) {
+        content()
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Card.kt b/torisetsu/src/jsMain/kotlin/components/base/Card.kt
@@ -0,0 +1,24 @@
+package components.base
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Div
+
+@Composable
+fun Card(
+    content: @Composable() () -> Unit
+) {
+    Div(
+        attrs = {
+            style {
+                padding(32.px)
+                backgroundColor(rgb(255, 255, 255))
+                borderRadius(16.px)
+                property("box-shadow", "0px 4px 4px rgba(0, 0, 0, 0.25), 0px 8px 6px rgba(0, 0, 0, 0.10)")
+
+            }
+        }
+    ) {
+        content()
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt b/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt
@@ -0,0 +1,72 @@
+package components.base
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.Img
+
+@Composable
+fun PageLayout(
+    content: @Composable() () -> Unit
+) {
+    return Div(
+        attrs = {
+            style {
+                padding(32.px, 12.px)
+                display(DisplayStyle.Flex)
+                flexDirection(FlexDirection.Column)
+                alignItems(AlignItems.Center)
+            }
+        }
+    ) {
+        Div(
+            attrs = {
+                style {
+                    width(649.px)
+                    maxWidth(100.percent)
+                    display(DisplayStyle.Flex)
+                    alignItems(AlignItems.Center)
+                    flexDirection(FlexDirection.Column)
+                }
+            }
+        ) {
+            Div(
+                attrs = {
+                    style {
+                        display(DisplayStyle.Flex)
+                        flexDirection(FlexDirection.Row)
+                        gap(60.px)
+                    }
+                }
+            ) {
+                Img(
+                    src = "./images/service_logo.svg",
+                    alt = "エンジニア トリ診断",
+                    attrs = {
+                        style {
+                            width(150.px)
+                        }
+                    }
+                )
+                Img(
+                    src = "./images/m3_logo_en.svg",
+                    alt = "M3 Inc.",
+                    attrs = {
+                        style {
+                            width(160.px)
+                        }
+                    })
+            }
+            Div(
+                attrs = {
+                    style {
+                        marginTop(40.px)
+                        width(100.percent)
+                    }
+                }
+            ) {
+                content()
+            }
+        }
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/XShareButton.kt b/torisetsu/src/jsMain/kotlin/components/base/XShareButton.kt
@@ -0,0 +1,54 @@
+package components.base
+
+import androidx.compose.runtime.Composable
+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.A
+import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.Img
+import org.jetbrains.compose.web.dom.Text
+
+@Composable
+fun XShareButton() {
+    A(
+        href = "https://twitter.com/intent/tweet?text=私のトリタイプはハシビロコウです！&url=https://example.com&hashtags=トリタイプ診断",
+        attrs = {
+            target(ATarget.Blank)
+            style {
+                backgroundColor(rgb(0, 0, 0))
+                color(Color.white)
+                padding(20.px, 32.px)
+                borderRadius(999.px)
+                textDecoration("none")
+                width(160.px)
+                display(DisplayStyle.Flex)
+                alignItems(AlignItems.Center)
+                gap(10.px)
+                justifyContent(JustifyContent.Center)
+            }
+        }
+
+    ) {
+        Img(
+            src = "/icons/x_icon.svg",
+            attrs = {
+                style {
+                    width(20.px)
+                    flexShrink(0)
+                    property("aspect-ratio", "1")
+                }
+            }
+
+        )
+        Div(
+            attrs = {
+                style {
+                    flexShrink(0)
+                }
+            }
+        ) {
+            Text("Xでシェア")
+        }
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/pages/QuizPage.kt b/torisetsu/src/jsMain/kotlin/components/pages/QuizPage.kt
@@ -0,0 +1,89 @@
+package components.pages
+
+import androidx.compose.runtime.Composable
+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
+
+@Composable
+fun QuizPage(
+    quiz: Quiz,
+    onClickFinish: (nextId: Int) -> Unit,
+) {
+    PageLayout {
+        Div(
+            attrs = {
+                style {
+                    width(100.percent)
+                    display(DisplayStyle.Flex)
+                    flexDirection(FlexDirection.Column)
+                    alignItems(AlignItems.FlexStart)
+                    gap(12.px)
+                }
+            }
+        ) {
+            Div(
+                attrs = {
+                    style {
+                        color(Color.white)
+                        fontWeight(700)
+                        fontSize(20.px)
+                    }
+                }
+            ) {
+                Text("${quiz.currentQuizNumber.value}問目")
+            }
+            Div(
+                attrs = {
+                    style {
+                        color(Color.white)
+                        fontWeight(700)
+                        fontSize(32.px)
+                    }
+                }
+            ) {
+                Text(quiz.getQuestionText())
+            }
+        }
+        Div(
+            attrs =
+            {
+                style {
+                    marginTop(48.px)
+                    display(DisplayStyle.Flex)
+                    flexDirection(FlexDirection.Column)
+                    gap(20.px)
+                }
+            }
+        ) {
+            quiz.getAnswerOptions().map { opt ->
+                Button(
+                    attrs = {
+                        onClick {
+                            quiz.onClickNext(opt, onClickFinish)
+                        }
+                    },
+                ) {
+                    Card {
+                        Div(
+                            attrs = {
+                                style {
+                                    color(Color.black)
+                                    fontWeight(700)
+                                    fontSize(24.px)
+                                    textAlign("center")
+                                }
+                            }
+                        ) {
+                            Text(opt.text)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}