diff --git a/README.md b/README.md index f9ab0dcd18..828c3e2aaa 100644 --- 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 diff --git a/examples/falling_balls_with_web/build.gradle.kts b/examples/falling_balls_with_web/build.gradle.kts new file mode 100644 index 0000000000..7636428ab3 --- /dev/null +++ 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")) + } + } + } +} diff --git a/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.jar b/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.jar new file mode 100644 index 0000000000..e708b1c023 Binary files /dev/null and b/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.jar differ diff --git a/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.properties b/examples/falling_balls_with_web/gradle/wrapper/gradle-wrapper.properties new file mode 100644 index 0000000000..8cf6eb5ad2 --- /dev/null +++ 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 diff --git a/examples/falling_balls_with_web/gradlew b/examples/falling_balls_with_web/gradlew new file mode 100644 index 0000000000..4f906e0c81 --- /dev/null +++ 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" "$@" diff --git a/examples/falling_balls_with_web/gradlew.bat b/examples/falling_balls_with_web/gradlew.bat new file mode 100644 index 0000000000..107acd32c4 --- /dev/null +++ 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 diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/Game.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/Game.kt new file mode 100644 index 0000000000..f8e7fa97fe --- /dev/null +++ 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() + 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) } + } +} diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/PieceData.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/PieceData.kt new file mode 100644 index 0000000000..8617d16642 --- /dev/null +++ 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) + } + } +} diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt new file mode 100644 index 0000000000..316f1bb9cf --- /dev/null +++ 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) + } + } + } + } +} diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/piece.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/piece.kt new file mode 100644 index 0000000000..deec062ac5 --- /dev/null +++ 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) + ) {} +} diff --git a/examples/falling_balls_with_web/src/commonMain/kotlin/modifiers/position.kt b/examples/falling_balls_with_web/src/commonMain/kotlin/modifiers/position.kt new file mode 100644 index 0000000000..795d4ec018 --- /dev/null +++ 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 \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..02822a1735 --- /dev/null +++ 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 + } + } + ) + } +} diff --git a/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt b/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt new file mode 100644 index 0000000000..6edb5abf16 --- /dev/null +++ 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) + } +} \ No newline at end of file diff --git a/examples/falling_balls_with_web/src/jsMain/resources/index.html b/examples/falling_balls_with_web/src/jsMain/resources/index.html new file mode 100644 index 0000000000..e6a92fd90a --- /dev/null +++ b/examples/falling_balls_with_web/src/jsMain/resources/index.html @@ -0,0 +1,28 @@ + + + + + + + compose-browser-with-web-demo + + +
+ + + diff --git a/examples/falling_balls_with_web/src/jsMain/resources/styles.css b/examples/falling_balls_with_web/src/jsMain/resources/styles.css new file mode 100644 index 0000000000..34f25b7f43 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/examples/falling_balls_with_web/src/jvmMain/kotlin/App.kt b/examples/falling_balls_with_web/src/jvmMain/kotlin/App.kt new file mode 100644 index 0000000000..f0c8262577 --- /dev/null +++ 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 + } + } + ) + } +} diff --git a/examples/falling_balls_with_web/src/jvmMain/kotlin/modifiers/position.kt b/examples/falling_balls_with_web/src/jvmMain/kotlin/modifiers/position.kt new file mode 100644 index 0000000000..ed072dac40 --- /dev/null +++ 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) +} \ No newline at end of file