UI実装

torisetsu/src/jsMain/kotlin/Main.kt

@@ -1,8 +1,35 @@
+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 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 currentPage by remember { mutableStateOf(Page.TOP) }
+
+        when (currentPage) {
+            Page.TOP -> topPage(
+                onClickStart = { currentPage = Page.QUIZ }
+            )
+
+            Page.QUIZ -> quizPage(
+                onClickFinish = { currentPage = Page.RESULT }
+            )
+
+            Page.RESULT -> resultPage(
+                onClickBack = { currentPage = Page.TOP }
+            )
+        }
+
     }
 }

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(18.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()
+    }
+}

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()
+    }
+}

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()
+            }
+        }
+    }
+}

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でシェア")
+        }
+    }
+}

torisetsu/src/jsMain/kotlin/components/pages/QuizPage.kt

@@ -0,0 +1,92 @@
+package components.pages
+
+import androidx.compose.runtime.Composable
+import components.base.card
+import components.base.pageLayout
+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,
+) {
+    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("1/10")
+            }
+            Div(
+                attrs = {
+                    style {
+                        color(Color.white)
+                        fontWeight(700)
+                        fontSize(32.px)
+                    }
+                }
+            ) {
+                Text("X（旧Twitter）を一日どのくらい触っている?")
+            }
+        }
+        Div(
+            attrs =
+            {
+                style {
+                    marginTop(48.px)
+                    display(DisplayStyle.Flex)
+                    flexDirection(FlexDirection.Column)
+                    gap(20.px)
+                }
+            }
+        ) {
+            answerOptions.map {
+                Button(
+                    attrs = {
+                        // TODO: 次の問題へ進むように
+                        onClick { onClickFinish() }
+                    },
+                ) {
+                    card {
+                        Div(
+                            attrs = {
+                                style {
+                                    color(Color.black)
+                                    fontWeight(700)
+                                    fontSize(24.px)
+                                    textAlign("center")
+                                }
+                            }
+                        ) {
+                            Text(it)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}