Compose Bird - Improve Structure (#838)

* improve structure by reducing number of lines
(removed unnecessary divs, css, composable etc)

* fix resource not found issue

examples/web-compose-bird/settings.gradle.kts

@@ -4,5 +4,5 @@ pluginManagement {
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }
 }
-rootProject.name = "compose-bird"
+rootProject.name = "web-compose-bird"
 

examples/web-compose-bird/src/jsMain/kotlin/main.kt

@@ -7,8 +7,11 @@ import data.GameFrame
 import kotlinx.browser.document
 import kotlinx.browser.window
 import kotlinx.coroutines.delay
-import org.jetbrains.compose.web.attributes.*
-import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.attributes.InputType
+import org.jetbrains.compose.web.attributes.checked
+import org.jetbrains.compose.web.attributes.disabled
+import org.jetbrains.compose.web.css.marginTop
+import org.jetbrains.compose.web.css.px
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.renderComposable
 import org.w3c.dom.HTMLElement
@@ -31,20 +34,12 @@ fun main() {
         }
     })
 
-    body.onclick = {
-        game.moveBirdUp()
-    }
-
     renderComposable(rootElementId = "root") {
 
         Div(
             attrs = {
                 style {
-                    display(DisplayStyle.Flex)
-                    justifyContent(JustifyContent.Center)
-                }
-                onClick {
-                    game.moveBirdUp()
+                    property("text-align", "center")
                 }
             }
         ) {
@@ -60,29 +55,19 @@ fun main() {
                 }
             }
 
-            Div {
-
-                // Title
-                GameTitle()
-                Score(gameFrame)
-                Br()
+            Header(gameFrame)
 
-                if (gameFrame.isGameOver || gameFrame.isGameWon) {
             Div(
                 attrs = {
                     style {
-                                display(DisplayStyle.Flex)
-                                flexDirection(FlexDirection.Column)
-                                justifyContent(JustifyContent.Center)
+                        marginTop(30.px)
                     }
                 }
             ) {
-                        GameStatus(gameFrame)
-                        TryAgain()
-                    }
-
-
+                if (gameFrame.isGameOver || gameFrame.isGameWon) {
+                    GameResult(gameFrame)
                 } else {
+                    // Play area
                     repeat(ComposeBirdGame.ROWS) { rowIndex ->
                         Div {
                             repeat(ComposeBirdGame.COLUMNS) { columnIndex ->
@@ -90,12 +75,6 @@ fun main() {
                                     InputType.Radio,
 
                                     attrs = {
-
-                                        style {
-                                            width(25.px)
-                                            height(25.px)
-                                        }
-
                                         val tube = gameFrame.tubes.find { it.position == columnIndex }
                                         val isTube = tube?.coordinates?.get(rowIndex) ?: false
                                         val isBird =
@@ -126,27 +105,20 @@ fun main() {
 }
 
 @Composable
-private fun TryAgain() {
-    Button(
-        attrs = {
-            onClick {
-                window.location.reload()
-            }
-        }
-    ) {
-        Text("Try Again!")
+private fun Header(gameFrame: GameFrame) {
+    // Game title
+    H1 {
+        Text(value = "🐦 Compose Bird!")
     }
+
+    // Game score
+    Text(value = "Your Score: ${gameFrame.score} || Top Score: ${ComposeBirdGame.TOTAL_TUBES}")
 }
 
 @Composable
-private fun GameStatus(gameFrame: GameFrame) {
-    H2(
-        attrs = {
-            style {
-                alignSelf(AlignSelf.Center)
-            }
-        }
-    ) {
+private fun GameResult(gameFrame: GameFrame) {
+    // Game Status
+    H2 {
         if (gameFrame.isGameWon) {
             Text("🚀 Won the game! 🚀")
         } else {
@@ -154,32 +126,15 @@ private fun GameStatus(gameFrame: GameFrame) {
             Text("💀 Game Over 💀")
         }
     }
-}
-
-@Composable
-private fun Score(gameFrame: GameFrame) {
-    Div(
-        attrs = {
-            style {
-                display(DisplayStyle.Flex)
-                justifyContent(JustifyContent.Center)
-            }
-        }
-    ) {
-        Text("Your Score: ${gameFrame.score} || Top Score: ${ComposeBirdGame.TOTAL_TUBES}")
-    }
-}
 
-@Composable
-private fun GameTitle() {
-    H1(
+    // Try Again
+    Button(
         attrs = {
-            style {
-                display(DisplayStyle.Flex)
-                justifyContent(JustifyContent.Center)
+            onClick {
+                window.location.reload()
             }
         }
     ) {
-        Text("🐦 Compose Bird!")
+        Text("Try Again!")
     }
 }