diff --git a/examples/web-compose-bird/settings.gradle.kts b/examples/web-compose-bird/settings.gradle.kts index 283db2f32c..ff0da4130a 100644 --- a/examples/web-compose-bird/settings.gradle.kts +++ b/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" diff --git a/examples/web-compose-bird/src/jsMain/kotlin/main.kt b/examples/web-compose-bird/src/jsMain/kotlin/main.kt index 972c2dd4ec..5525fc84c5 100644 --- a/examples/web-compose-bird/src/jsMain/kotlin/main.kt +++ b/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 { + Header(gameFrame) - // Title - GameTitle() - Score(gameFrame) - Br() - - if (gameFrame.isGameOver || gameFrame.isGameWon) { - Div( - attrs = { - style { - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Column) - justifyContent(JustifyContent.Center) - } - } - ) { - GameStatus(gameFrame) - TryAgain() + Div( + attrs = { + style { + marginTop(30.px) } - - + } + ) { + 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!") } } \ No newline at end of file