Merge pull request #4 from m3dev/feat/responsive-and-style-refactor

トリ急ぎレスポンシブ対応と、スタイル情報を別ファイルに分離・トップページのトリを追加
m3dev · Jun 21, 2024 · a40efe8 · a40efe8
2 parents 4e91b70 + f3fce9d
commit a40efe8
Show file tree

Hide file tree

Showing 40 changed files with 532 additions and 282 deletions.
diff --git a/torisetsu/.gitignore b/torisetsu/.gitignore
@@ -5,3 +5,7 @@
 build/
 local.properties
 kotlin-js-store/yarn.lock
+
+# generated from base.html
+src/jsMain/resources/*.html
+!src/jsMain/resources/base.html
diff --git a/torisetsu/build.gradle.kts b/torisetsu/build.gradle.kts
@@ -13,7 +13,6 @@ repositories {
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
 }
 
-
 kotlin {
     js(IR) {
         browser {
@@ -42,3 +41,21 @@ kotlin {
     }
 }
 
+tasks.register<Copy>("copyStaticPages") {
+    listOf(
+        "aoitori" to "aoitori",
+        "index" to "banner",
+    ).forEach { (fileName, imageName) ->
+        from("src/jsMain/resources/base.html") {
+            expand(
+                mapOf(
+                    "ogpImageName" to "$imageName.png"
+                )
+            )
+            rename("base", fileName)
+        }
+    }
+    into("src/jsMain/resources/")
+}
+
+tasks["jsProcessResources"].dependsOn("copyStaticPages")
diff --git a/torisetsu/src/jsMain/kotlin/App.kt b/torisetsu/src/jsMain/kotlin/App.kt
@@ -0,0 +1,38 @@
+import androidx.compose.runtime.*
+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 kotlinx.browser.window
+
+@Composable
+fun App() {
+    var currentPage by remember { mutableStateOf(Page.TOP) }
+    val quiz: Quiz by remember { mutableStateOf(ComposeQuiz()) }
+    val result: Result by remember { mutableStateOf(ComposeResult()) }
+
+    if (window.location.pathname in listOf("/", "")) {
+        when (currentPage) {
+            Page.TOP -> {
+                TopPage(
+                    onClickStart = { currentPage = Page.QUIZ }
+                )
+            }
+            Page.QUIZ -> {
+                QuizPage(quiz = quiz)
+            }
+        }
+    } else {
+        ResultPage(
+            diagnosis = result.getDiagnosis(window.location.pathname),
+            onClickBack = {
+                quiz.reset()
+                window.location.pathname = "/"
+            }
+        )
+    }
+
+}
diff --git a/torisetsu/src/jsMain/kotlin/Main.kt b/torisetsu/src/jsMain/kotlin/Main.kt
@@ -1,51 +1,15 @@
-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.css.Style
 import org.jetbrains.compose.web.renderComposable
+import style.GlobalStyle
 
 enum class Page {
     TOP,
-    QUIZ,
-    RESULT
+    QUIZ
 }
 
 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(
-                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
-                }
-            )
-        }
-
+        Style(GlobalStyle)
+        App()
     }
 }
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Button.kt b/torisetsu/src/jsMain/kotlin/components/base/Button.kt
@@ -1,7 +1,6 @@
 package components.base
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Button
 
 enum class ButtonSize {
@@ -17,29 +16,9 @@ fun Button(
 ) {
     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"
-                )
-            }
+            classes(ButtonStyle.rootElm)
             onClick { onClick() }
+            attr("data-size", size.name.lowercase())
         }
     ) {
         content()

diff --git a/torisetsu/src/jsMain/kotlin/components/base/ButtonStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/ButtonStyle.kt
@@ -0,0 +1,45 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+import style.data
+import style.forMobile
+
+object ButtonStyle : StyleSheet(GlobalStyle) {
+    val rootElm by style {
+        data("size", "normal") {
+            padding(16.px, 36.px)
+            borderRadius(16.px)
+            fontSize(32.px)
+        }
+
+
+        data("size", "large") {
+            padding(40.px, 100.px)
+            borderRadius(40.px)
+            fontSize(60.px)
+        }
+
+        forMobile {
+            data("size", "normal") {
+                padding(16.px, 36.px)
+                borderRadius(12.px)
+                fontSize(24.px)
+            }
+
+            data("size", "large") {
+                padding(20.px, 50.px)
+                borderRadius(20.px)
+                fontSize(32.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"
+        )
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/Card.kt b/torisetsu/src/jsMain/kotlin/components/base/Card.kt
@@ -1,24 +1,13 @@
 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)")
-
-            }
-        }
-    ) {
+    Div(attrs = { classes(CardStyle.rootElm) }) {
         content()
     }
 }
diff --git a/torisetsu/src/jsMain/kotlin/components/base/CardStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/CardStyle.kt
@@ -0,0 +1,18 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+import style.forMobile
+
+object CardStyle : StyleSheet(GlobalStyle) {
+    val rootElm by 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)")
+
+        forMobile {
+            padding(24.px)
+        }
+    }
+}
diff --git a/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt b/torisetsu/src/jsMain/kotlin/components/base/PageLayout.kt
@@ -1,69 +1,36 @@
 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
+import org.jetbrains.compose.web.dom.Main
 
 @Composable
 fun PageLayout(
     content: @Composable() () -> Unit
 ) {
     return Div(
-        attrs = {
-            style {
-                padding(32.px, 12.px)
-                display(DisplayStyle.Flex)
-                flexDirection(FlexDirection.Column)
-                alignItems(AlignItems.Center)
-            }
-        }
+        attrs = { classes(PageLayoutStyle.rootElm) }
     ) {
         Div(
-            attrs = {
-                style {
-                    width(649.px)
-                    maxWidth(100.percent)
-                    display(DisplayStyle.Flex)
-                    alignItems(AlignItems.Center)
-                    flexDirection(FlexDirection.Column)
-                }
-            }
+            attrs = { classes(PageLayoutStyle.wrapper) }
         ) {
             Div(
-                attrs = {
-                    style {
-                        display(DisplayStyle.Flex)
-                        flexDirection(FlexDirection.Row)
-                        gap(60.px)
-                    }
-                }
+                attrs = { classes(PageLayoutStyle.header) }
             ) {
                 Img(
                     src = "./images/service_logo.svg",
                     alt = "エンジニア トリ診断",
-                    attrs = {
-                        style {
-                            width(150.px)
-                        }
-                    }
+                    attrs = { classes(PageLayoutStyle.titleLogo) }
                 )
                 Img(
                     src = "./images/m3_logo_en.svg",
                     alt = "M3 Inc.",
-                    attrs = {
-                        style {
-                            width(160.px)
-                        }
-                    })
+                    attrs = { classes(PageLayoutStyle.m3Logo) }
+                )
             }
-            Div(
-                attrs = {
-                    style {
-                        marginTop(40.px)
-                        width(100.percent)
-                    }
-                }
+            Main(
+                attrs = { classes(PageLayoutStyle.main) }
             ) {
                 content()
             }

diff --git a/torisetsu/src/jsMain/kotlin/components/base/PageLayoutStyle.kt b/torisetsu/src/jsMain/kotlin/components/base/PageLayoutStyle.kt
@@ -0,0 +1,35 @@
+package components.base
+
+import org.jetbrains.compose.web.css.*
+import style.GlobalStyle
+
+object PageLayoutStyle : StyleSheet(GlobalStyle) {
+    val rootElm by style {
+        padding(32.px, 24.px)
+        display(DisplayStyle.Flex)
+        flexDirection(FlexDirection.Column)
+        alignItems(AlignItems.Center)
+    }
+    val wrapper by style {
+        width(649.px)
+        maxWidth(100.percent)
+        display(DisplayStyle.Flex)
+        alignItems(AlignItems.Center)
+        flexDirection(FlexDirection.Column)
+    }
+    val header by style {
+        display(DisplayStyle.Flex)
+        flexDirection(FlexDirection.Row)
+        gap(60.px)
+    }
+    val titleLogo by style {
+        width(150.px)
+    }
+    val m3Logo by style {
+        width(160.px)
+    }
+    val main by style {
+        marginTop(40.px)
+        width(100.percent)
+    }
+}