Falling balls in new flavour

Still lot of things to tune
4 years ago · 2cb37c014c
17 changed files with 782 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -18,6 +18,7 @@ at https://android.googlesource.com/platform/frameworks/support.
       * [imageviewer](examples/imageviewer) - Image Viewer application for Android and Desktop
       * [issues](examples/issues) - GitHub issue tracker with an adaptive UI and ktor-client
       * [game](examples/falling_balls) - Simple game
+       * [game](examples/falling_balls_with_web) - Simple game for web target
       * [todoapp](examples/todoapp) - TODO items tracker with persistence and multiple screens
       * [widgetsgallery](examples/widgetsgallery) - Gallery of standard widgets
       * [IDEA plugin](examples/intelliJPlugin) - Plugin for IDEA using Compose for Desktop      
--- a/examples/falling_balls_with_web/build.gradle.kts
+++ b/examples/falling_balls_with_web/build.gradle.kts
@ -0,0 +1,81 @@
+import org.jetbrains.compose.compose
+import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+
+plugins {
+    id("org.jetbrains.kotlin.multiplatform") version "1.4.32"
+    id("org.jetbrains.compose") version "0.0.0-web-dev-11"
+    //id("org.jetbrains.compose") version "0.0.6-SNAPSHOT"
+}
+
+version = "1.0-SNAPSHOT"
+
+repositories {
+    mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+}
+
+compose.desktop {
+    application {
+        mainClass = ""
+    }
+}
+
+kotlin {
+    jvm()
+    js(IR) {
+        browser()
+        binaries.executable()
+    }
+
+    sourceSets {
+        val commonMain by getting {
+            dependencies {
+                implementation(kotlin("stdlib-common"))
+                implementation(compose.web.web)
+                implementation(compose.runtime)
+            }
+        }
+
+        val jvmMain by getting {
+             dependencies {
+                implementation(compose.desktop.currentOs)
+             }
+        }
+
+
+        val commonTest by getting {
+            dependencies {
+                implementation(kotlin("test-common"))
+                implementation(kotlin("test-annotations-common"))
+            }
+        }
+    }
+}
+
+compose.desktop {
+    application {
+        mainClass = "org.jetbrains.compose.common.demo.AppKt"
+
+        nativeDistributions {
+            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
+            packageName = "ImageViewer"
+            packageVersion = "1.0.0"
+            
+            modules("jdk.crypto.ec")
+
+            val iconsRoot = project.file("../common/src/desktopMain/resources/images")
+            macOS {
+                iconFile.set(iconsRoot.resolve("icon-mac.icns"))
+            }
+            windows {
+                iconFile.set(iconsRoot.resolve("icon-windows.ico"))
+                menuGroup = "Compose Examples"
+                // see https://wixtoolset.org/documentation/manual/v3/howtos/general/generate_guids.html
+                upgradeUuid = "18159995-d967-4CD2-8885-77BFA97CFA9F"
+            }
+            linux {
+                iconFile.set(iconsRoot.resolve("icon-linux.png"))
+            }
+        }
+    }
+}
--- a/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.jar
+++ b/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.jar
--- a/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.properties
+++ b/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.properties
@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.3-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/examples/falling_balls_with_web/gradlew
+++ b/examples/falling_balls_with_web/gradlew
@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"
--- a/examples/falling_balls_with_web/gradlew.bat
+++ b/examples/falling_balls_with_web/gradlew.bat
@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/Game.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/Game.kt
@ -0,0 +1,77 @@
+package org.jetbrains.compose.demo.falling
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import org.jetbrains.compose.common.ui.unit.IntSize
+import org.jetbrains.compose.common.core.graphics.Color
+import kotlin.random.Random
+
+private fun Color.Companion.random() =
+    Color((0..255).random(), (0..255).random(), (0..255).random())
+
+abstract class Game {
+    internal var previousTime: Long = Long.MAX_VALUE
+    private var startTime = 0L
+
+    var size by mutableStateOf(IntSize(0, 0))
+
+    var width: Int
+        get() = size.width
+        set(newWidth: Int) {
+            size = IntSize(newWidth, height)
+        }
+
+    var height: Int
+        get() = size.height
+        set(newHeight) {
+            size = IntSize(width, newHeight)
+        }
+
+    var pieces = mutableStateListOf<PieceData>()
+        private set
+
+    var elapsed by mutableStateOf(0L)
+    var score by mutableStateOf(0)
+    var clicked by mutableStateOf(0)
+
+    var started by mutableStateOf(false)
+    var paused by mutableStateOf(false)
+    var finished by mutableStateOf(false)
+
+    var numBlocks by mutableStateOf(5)
+
+    fun isInBoundaries(pieceData: PieceData): Boolean = pieceData.position < size.height
+
+    abstract fun saveTime()
+
+    fun togglePause() {
+        paused = !paused
+        saveTime()
+    }
+
+    fun start() {
+        saveTime()
+        startTime = previousTime
+        clicked = 0
+        started = true
+        finished = false
+        paused = false
+        pieces.clear()
+        repeat(numBlocks) { index ->
+            pieces.add(
+                PieceData(this, index * 1.5f + 5f, Color.random()).also { piece ->
+                    piece.position = Random.nextDouble(0.0, 100.0).toFloat()
+                }
+            )
+        }
+    }
+
+    fun update(nanos: Long) {
+        val dt = (nanos - previousTime).coerceAtLeast(0)
+        previousTime = nanos
+        elapsed = nanos - startTime
+        pieces.forEach { it.update(dt) }
+    }
+}
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/PieceData.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/PieceData.kt
@ -0,0 +1,32 @@
+package org.jetbrains.compose.demo.falling
+
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.getValue
+import org.jetbrains.compose.common.core.graphics.Color
+
+data class PieceData(val game: Game, val velocity: Float, val color: Color) {
+    var picked: Boolean by mutableStateOf(false)
+    var position: Float by mutableStateOf(0f)
+
+    private fun Game.pickPiece(piece: PieceData) {
+        score += piece.velocity.toInt()
+        clicked++
+        if (clicked == numBlocks) {
+            finished = true
+        }
+    }
+
+    fun update(dt: Long) {
+        if (picked) return
+        val delta = (dt / 1E8 * velocity).toFloat()
+        position = if (game.isInBoundaries(this)) position + delta else 0f
+    }
+
+    fun pick() {
+        if (!picked && !game.paused) {
+            picked = true
+            game.pickPiece(this)
+        }
+    }
+}
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
@ -0,0 +1,102 @@
+package org.jetbrains.compose.demo.falling.views
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.withFrameNanos
+import org.jetbrains.compose.demo.falling.Game
+import org.jetbrains.compose.common.material.Text
+import org.jetbrains.compose.common.foundation.layout.Column
+import org.jetbrains.compose.common.material.Slider
+import org.jetbrains.compose.common.foundation.layout.Row
+import org.jetbrains.compose.common.foundation.layout.Box
+import org.jetbrains.compose.common.material.Button
+import org.jetbrains.compose.common.ui.Modifier
+import org.jetbrains.compose.common.ui.unit.em
+import org.jetbrains.compose.common.ui.unit.dp
+import org.jetbrains.compose.common.foundation.layout.offset
+import org.jetbrains.compose.common.foundation.layout.width
+import org.jetbrains.compose.common.ui.layout.onSizeChanged
+import org.jetbrains.compose.common.ui.background
+import org.jetbrains.compose.common.foundation.border
+import org.jetbrains.compose.common.ui.size
+import org.jetbrains.compose.common.core.graphics.Color
+
+@Composable
+fun fallingBalls(game: Game) {
+    Column() {
+        Box() {
+            Text(
+                "Catch balls!${if (game.finished) " Game over!" else ""}",
+                size = 1.8f.em,
+                color = Color(218, 120, 91)
+            )
+        }
+        Box() {
+            Text(
+                "Score: ${game.score} Time: ${game.elapsed / 1_000_000} Blocks: ${game.numBlocks}",
+                size = 1.8f.em
+            )
+        }
+        Row() {
+            if (!game.started) {
+                Slider(
+                    value = game.numBlocks / 20f,
+                    onValueChange = { game.numBlocks = (it * 20f).toInt().coerceAtLeast(1) },
+                    modifier = Modifier.width(100.dp)
+                )
+            }
+            Button(
+                Modifier
+                    .border(2.dp, Color(255, 215, 0))
+                    .background(Color.Yellow),
+                onClick = {
+                    game.started = !game.started
+                    if (game.started) {
+                        game.start()
+                    }
+                }
+            ) {
+                Text(if (game.started) "Stop" else "Start", size = 2f.em)
+            }
+            if (game.started) {
+                Button(
+                    Modifier
+                        .offset(10.dp, 0.dp)
+                        .border(2.dp, Color(255, 215, 0))
+                        .background(Color.Yellow),
+                    onClick = {
+                        game.togglePause()
+                    }
+                ) {
+                    Text(if (game.paused) "Resume" else "Pause", size = 2f.em)
+                }
+            }
+        }
+
+        if (game.started) {
+            Box(
+                Modifier
+//                    .fillMaxWidth()
+//                    .fillMaxHeight(0.5f)
+                    .background(Color(248, 248, 255))
+                    .size(game.width.dp, game.height.dp)
+                    .onSizeChanged {
+                        game.size = it
+                    }
+            ) {
+                game.pieces.forEachIndexed { index, piece ->
+                    piece(index, piece)
+                }
+            }
+        }
+
+        LaunchedEffect(Unit) {
+            while (true) {
+                withFrameNanos {
+                    if (game.started && !game.paused && !game.finished)
+                        game.update(it)
+                }
+            }
+        }
+    }
+}
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/piece.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/piece.kt
@ -0,0 +1,29 @@
+package org.jetbrains.compose.demo.falling.views
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.demo.falling.PieceData
+import org.jetbrains.compose.common.ui.Modifier
+import org.jetbrains.compose.common.foundation.layout.Box
+import org.jetbrains.compose.common.ui.unit.dp
+import org.jetbrains.compose.common.ui.unit.Dp
+import org.jetbrains.compose.common.foundation.layout.offset
+import org.jetbrains.compose.common.ui.background
+import org.jetbrains.compose.common.ui.size
+import org.jetbrains.compose.common.foundation.clickable
+import org.jetbrains.compose.common.ui.draw.clip
+import org.jetbrains.compose.common.core.graphics.Color
+import jetbrains.compose.common.shapes.CircleShape
+import org.jetbrains.compose.common.demo.position
+
+@Composable
+fun piece(index: Int, piece: PieceData) {
+    val boxSize = 40.dp
+    Box(
+        Modifier
+            .position(Dp(boxSize.value * index * 5 / 3), Dp(piece.position))
+            .size(boxSize, boxSize)
+            .background(if (piece.picked) Color.Gray else piece.color)
+            .clickable { piece.pick() }
+            .clip(CircleShape)
+    ) {}
+}
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/modifiers/position.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/modifiers/position.kt
@ -0,0 +1,8 @@
+package org.jetbrains.compose.common.demo
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.Modifier
+import org.jetbrains.compose.common.ui.unit.Dp
+
+@Composable
+expect fun Modifier.position(width: Dp, height: Dp): Modifier
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
@ -0,0 +1,35 @@
+package org.jetbrainsc.compose.common.demo
+
+import androidx.compose.web.renderComposable
+import kotlinx.browser.document
+import org.w3c.dom.HTMLElement
+import org.jetbrains.compose.demo.falling.views.fallingBalls
+import org.jetbrains.compose.demo.falling.Game
+import androidx.compose.runtime.remember
+import kotlinx.browser.window
+import androidx.compose.web.css.Style
+import org.jetbrains.compose.web.ui.Styles
+
+class JsGame : Game() {
+    override fun saveTime() {
+        previousTime = window.performance.now().toLong()
+    }
+}
+
+fun main() {
+    val root = document.getElementById("root") as HTMLElement
+
+    renderComposable(
+        root = root
+    ) {
+        Style(Styles)
+        fallingBalls(
+            remember {
+                JsGame()?.apply {
+                    width = 600
+                    height = 400
+                }
+            }
+        )
+    }
+}
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
@ -0,0 +1,21 @@
+package org.jetbrains.compose.common.demo
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.Modifier
+import org.jetbrains.compose.common.foundation.layout.offset
+import org.jetbrains.compose.common.ui.unit.Dp
+import org.jetbrains.compose.common.internal.castOrCreate
+import androidx.compose.web.css.top
+import androidx.compose.web.css.left
+import androidx.compose.web.css.px
+import androidx.compose.web.css.position
+import androidx.compose.web.css.Position
+
+@Composable
+actual fun Modifier.position(width: Dp, height: Dp): Modifier  = castOrCreate().apply {
+    add {
+        position(Position.Relative)
+        top(height.value.px)
+        left(width.value.px)
+    }
+}
--- a/examples/falling_balls_with_web/src/jsMain/resources/index.html
+++ b/examples/falling_balls_with_web/src/jsMain/resources/index.html
@ -0,0 +1,28 @@
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>compose-browser-with-web-demo</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="falling_balls_with_web.js">
+    </script>
+</body>
+</html>
--- a/examples/falling_balls_with_web/src/jsMain/resources/styles.css
+++ b/examples/falling_balls_with_web/src/jsMain/resources/styles.css
@ -0,0 +1,49 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#container {
+    display: flex;
+}
+
+#rootParent {
+    background: lemonchiffon;
+    flex: 1 1 0px;
+}
+
+#raw {
+    background: powderblue;
+    flex: 1 1 0px;
+}
+
+.row {
+    width: 150px;
+    height: 150px;
+    background: yellow;
+    display: flex;
+    align-items: end;
+}
+
+.box-a {
+    background: red;
+    width: 50px;
+    height: 50px;
+}
+
+.box-b {
+    background: blue;
+    width: 30px;
+    height: 30px;
+}
--- a/examples/falling_balls_with_web/src/jvmMain/kotlin/App.kt
+++ b/examples/falling_balls_with_web/src/jvmMain/kotlin/App.kt
@ -0,0 +1,26 @@
+package org.jetbrains.compose.common.demo
+
+import androidx.compose.desktop.Window
+import androidx.compose.ui.unit.IntSize
+import org.jetbrains.compose.demo.falling.views.fallingBalls
+import org.jetbrains.compose.demo.falling.Game
+import androidx.compose.runtime.remember
+
+class JvmGame : Game() {
+    override fun saveTime() {
+        previousTime = System.nanoTime()
+    }
+}
+
+fun main() {
+    Window(title = "Demo", size = IntSize(600, 400)) {
+        fallingBalls(
+            remember {
+                JvmGame()?.apply {
+                    width = 600
+                    height = 400
+                }
+            }
+        )
+    }
+}
--- a/examples/falling_balls_with_web/src/jvmMain/kotlin/modifiers/position.kt
+++ b/examples/falling_balls_with_web/src/jvmMain/kotlin/modifiers/position.kt
@ -0,0 +1,14 @@
+package org.jetbrains.compose.common.demo
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.common.ui.Modifier
+import org.jetbrains.compose.common.foundation.layout.offset
+import org.jetbrains.compose.common.ui.unit.Dp
+import org.jetbrains.compose.common.internal.castOrCreate
+import org.jetbrains.compose.common.ui.unit.implementation
+import androidx.compose.foundation.layout.offset
+
+@Composable
+actual fun Modifier.position(width: Dp, height: Dp): Modifier = castOrCreate().apply {
+    modifier = modifier.offset(width.implementation, height.implementation)
+}