├── .gitignore ├── LICENSE ├── README.md ├── build.gradle ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src └── main ├── kotlin └── tictactoe │ ├── Board.kt │ ├── Game.kt │ ├── Square.kt │ └── main.kt └── web ├── default.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | ### Gradle 2 | .gradle 3 | build 4 | local.properties 5 | 6 | ### IntelliJ 7 | .idea 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Tutorial example in Kotlin 2 | 3 | An implementation of the [React Tutorial](https://reactjs.org/tutorial/tutorial.html) using Kotlin. 4 | 5 | See related 6 | [Medium article](https://medium.com/@rivasdiaz/playing-with-kotlin-react-official-wrapper-e4a6f43be4ac). 7 | 8 | This project uses JetBrain official 9 | [Kotlin React](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react) 10 | and 11 | [Kotlin React DOM](https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react-dom) 12 | wrappers. 13 | 14 | Sections of the tutorial are listed below (only the ones that link to tutorial code). Each section contains: 15 | 16 | * Tutorial: A link to the react tutorial section 17 | * JavaScript Code: A link to source code from the tutorial, hosted at codepen.io 18 | * Kotlin Code: Link to the corresponding commit in this project for the equivalent code 19 | 20 | #### Overview 21 | 22 | ###### Getting Started 23 | 24 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#getting-started) / 25 | [JavaScript Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) / 26 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/3a872cae65c2c626332c8046e14d62aa2b393fba) 27 | 28 | ###### Passing Data Through Props 29 | 30 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#passing-data-through-props) / 31 | [JavaScript Code](https://codepen.io/gaearon/pen/aWWQOG?editors=0010) / 32 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/48d08aa3c0e11d79da90df8fc2a4bd28dd8603a2) 33 | 34 | ###### An Interactive Component 35 | 36 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#an-interactive-component) / 37 | [JavaScript Code](https://codepen.io/gaearon/pen/VbbVLg?editors=0010) / 38 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/29e6f715be4953054a297fd7ec731a6d6cba8bb0) 39 | 40 | #### Lifting State Up 41 | 42 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#lifting-state-up) / 43 | [JavaScript Code 1](https://codepen.io/gaearon/pen/gWWQPY?editors=0010) / 44 | [Kotlin Code 1](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/a8be7d8802147c799287134a4edbcb4483564dad) / 45 | [JavaScript Code 2](https://codepen.io/gaearon/pen/ybbQJX?editors=0010) / 46 | [Kotlin Code 2](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/6de5edd8948fb9a2f33bd0f1ff6650b1f366903f) 47 | 48 | ###### Functional Components 49 | 50 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#functional-components) / 51 | [JavaScript Code](https://codepen.io/gaearon/pen/QvvJOv?editors=0010) / 52 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/0d3496f3d67f348d70b494e50da673c117c21635) 53 | 54 | ###### Taking Turns 55 | 56 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#taking-turns) / 57 | [JavaScript Code](https://codepen.io/gaearon/pen/KmmrBy?editors=0010) / 58 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/afdc47d02c418b8ead1d442b33ddba56e87734e2) 59 | 60 | ###### Declaring a Winner 61 | 62 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#declaring-a-winner) / 63 | [JavaScript Code](https://codepen.io/gaearon/pen/LyyXgK?editors=0010) / 64 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/4241c751c1323f872b569e72ce6a75b1aab5dd17) 65 | 66 | #### Storing A History 67 | 68 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#storing-a-history) / 69 | [JavaScript Code](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010) / 70 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/5616593e72fbe89c2949ff689c644a921f42ec1b) 71 | 72 | ###### Showing the Moves 73 | 74 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#showing-the-moves) / 75 | [JavaScript Code](https://codepen.io/gaearon/pen/EmmGEa?editors=0010) / 76 | [Kotlin Code](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/5616593e72fbe89c2949ff689c644a921f42ec1b) 77 | 78 | ###### Implementing Time Travel 79 | 80 | [Tutorial](https://reactjs.org/tutorial/tutorial.html#implementing-time-travel) / 81 | [JavaScript Code 1](https://codepen.io/gaearon/pen/PmmXRE?editors=0010) / 82 | [Kotlin Code 1](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/3bd8f6429eb7e3efa221096511dfb12db4d5b123) / 83 | [JavaScript Code 2](https://codepen.io/gaearon/pen/gWWZgR?editors=0010) / 84 | [Kotlin Code 2](https://github.com/rivasdiaz/react-tutorial-kotlin/tree/dcf8047afe59d2d3f0e03699a9dfd4f59e5a703e) 85 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | kotlin_version = '1.1.60' 4 | kotlin_frontend_version = '0.0.23' 5 | } 6 | repositories { 7 | jcenter() 8 | maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' } 9 | } 10 | dependencies { 11 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 12 | classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:$kotlin_frontend_version" 13 | } 14 | } 15 | 16 | apply plugin: 'kotlin2js' 17 | apply plugin: 'org.jetbrains.kotlin.frontend' 18 | 19 | repositories { 20 | jcenter() 21 | maven { url 'https://kotlin.bintray.com/kotlin-js-wrappers' } 22 | } 23 | 24 | ext { 25 | kotlinx_html_version = '0.6.6' 26 | kotlin_react_version = '16.0.0-pre.8-kotlin-1.1.51' 27 | } 28 | 29 | task wrapper(type: Wrapper) { 30 | gradleVersion = '4.3.1' 31 | } 32 | 33 | dependencies { 34 | compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version" 35 | compile "org.jetbrains:kotlin-react-dom:$kotlin_react_version" 36 | } 37 | 38 | kotlin { 39 | experimental { 40 | coroutines 'enable' 41 | } 42 | } 43 | 44 | compileKotlin2Js { 45 | kotlinOptions { 46 | moduleKind = 'commonjs' 47 | } 48 | } 49 | 50 | kotlinFrontend { 51 | npm { 52 | dependency "react" 53 | dependency "react-dom" 54 | } 55 | webpackBundle { 56 | bundleName = 'tictactoe' 57 | contentPath = file('src/main/web') 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rivasdiaz/react-tutorial-kotlin/3f44348fff36a9afff3c7a7d33664064e75c4b2b/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Sat Nov 18 20:43:16 EST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.3.1-bin.zip 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn () { 37 | echo "$*" 38 | } 39 | 40 | die () { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Escape application args 158 | save () { 159 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 160 | echo " " 161 | } 162 | APP_ARGS=$(save "$@") 163 | 164 | # Collect all arguments for the java command, following the shell quoting and substitution rules 165 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 166 | 167 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 168 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 169 | cd "$(dirname "$0")" 170 | fi 171 | 172 | exec "$JAVACMD" "$@" 173 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windows variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | 53 | :win9xME_args 54 | @rem Slurp the command line arguments. 55 | set CMD_LINE_ARGS= 56 | set _SKIP=2 57 | 58 | :win9xME_args_slurp 59 | if "x%~1" == "x" goto execute 60 | 61 | set CMD_LINE_ARGS=%* 62 | 63 | :execute 64 | @rem Setup the command line 65 | 66 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 67 | 68 | @rem Execute Gradle 69 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 70 | 71 | :end 72 | @rem End local scope for the variables with windows NT shell 73 | if "%ERRORLEVEL%"=="0" goto mainEnd 74 | 75 | :fail 76 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 77 | rem the _cmd.exe /c_ return code! 78 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 79 | exit /b 1 80 | 81 | :mainEnd 82 | if "%OS%"=="Windows_NT" endlocal 83 | 84 | :omega 85 | -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'react-tutorial-kotlin' 2 | -------------------------------------------------------------------------------- /src/main/kotlin/tictactoe/Board.kt: -------------------------------------------------------------------------------- 1 | package tictactoe 2 | 3 | import react.RBuilder 4 | import react.RComponent 5 | import react.RProps 6 | import react.RState 7 | import react.dom.div 8 | 9 | class Board(): RComponent() { 10 | 11 | fun RBuilder.renderSquare(i: Int) { 12 | square( 13 | value = props.squares[i], 14 | onClickFunction = { props.onClickFunction(i) }) 15 | } 16 | 17 | override fun RBuilder.render() { 18 | div { 19 | div(classes = "board-row") { 20 | renderSquare(0) 21 | renderSquare(1) 22 | renderSquare(2) 23 | } 24 | div(classes = "board-row") { 25 | renderSquare(3) 26 | renderSquare(4) 27 | renderSquare(5) 28 | } 29 | div(classes = "board-row") { 30 | renderSquare(6) 31 | renderSquare(7) 32 | renderSquare(8) 33 | } 34 | } 35 | } 36 | 37 | interface Props: RProps { 38 | var squares: Array 39 | var onClickFunction: (Int) -> Unit 40 | } 41 | } 42 | 43 | fun RBuilder.board(squares: Array, onClickFunction: (Int) -> Unit) = child(Board::class) { 44 | attrs.squares = squares 45 | attrs.onClickFunction = onClickFunction 46 | } 47 | -------------------------------------------------------------------------------- /src/main/kotlin/tictactoe/Game.kt: -------------------------------------------------------------------------------- 1 | package tictactoe 2 | 3 | import kotlinx.html.js.onClickFunction 4 | import react.RBuilder 5 | import react.RComponent 6 | import react.RProps 7 | import react.RState 8 | import react.dom.button 9 | import react.dom.div 10 | import react.dom.li 11 | import react.dom.ol 12 | import react.setState 13 | 14 | class Game(): RComponent() { 15 | 16 | init { 17 | state.apply { 18 | history = arrayOf(HistoryEntry(Array(9) { null })) 19 | stepNumber = 0 20 | xIsNext = true 21 | } 22 | } 23 | 24 | fun handleClick(i: Int) { 25 | val history = state.history.sliceArray(0..state.stepNumber) 26 | val current = history.last() 27 | val squares = current.squares.copyOf() 28 | if (calculateWinner(squares) != null || squares[i] != null) 29 | return 30 | squares[i] = if (state.xIsNext) "X" else "O" 31 | setState { 32 | this.history = history + HistoryEntry(squares) 33 | stepNumber = history.size 34 | xIsNext = !state.xIsNext 35 | } 36 | } 37 | 38 | fun calculateWinner(squares: Array): String? { 39 | val solutions = arrayOf( 40 | arrayOf(0, 1, 2), 41 | arrayOf(3, 4, 5), 42 | arrayOf(6, 7, 8), 43 | arrayOf(0, 3, 6), 44 | arrayOf(1, 4, 7), 45 | arrayOf(2, 5, 8), 46 | arrayOf(0, 4, 8), 47 | arrayOf(2, 4, 6)) 48 | for (solution in solutions){ 49 | val (a, b, c) = solution 50 | if (squares[a] != null && squares[a] == squares[b] && squares[a] == squares[c]) 51 | return squares[a] 52 | } 53 | return null 54 | } 55 | 56 | fun jumpTo(step: Int) { 57 | setState { 58 | stepNumber = step 59 | xIsNext = (step % 2) == 0 60 | } 61 | } 62 | 63 | fun RBuilder.movesNodes() = 64 | state.history.mapIndexed { step, move -> 65 | val desc = 66 | if (step != 0) 67 | "Go to move #$step" 68 | else 69 | "Go to game start" 70 | li { 71 | key = step.toString() 72 | button { 73 | +desc 74 | attrs.onClickFunction = { jumpTo(step) } 75 | } 76 | } 77 | } 78 | 79 | override fun RBuilder.render() { 80 | val history = state.history 81 | val current = history[state.stepNumber] 82 | val winner = calculateWinner(current.squares) 83 | val status = 84 | if (winner != null) 85 | "Winner: $winner" 86 | else 87 | "Next player: ${if (state.xIsNext) "X" else "O"}" 88 | 89 | div(classes = "game") { 90 | div(classes = "game-board") { 91 | board(current.squares) { 92 | handleClick(it) 93 | } 94 | } 95 | div(classes = "game-info") { 96 | div { +status } 97 | ol { movesNodes() } 98 | } 99 | } 100 | } 101 | 102 | interface State: RState { 103 | var history: Array 104 | var xIsNext: Boolean 105 | var stepNumber: Int 106 | } 107 | 108 | data class HistoryEntry(var squares: Array) 109 | } 110 | 111 | fun RBuilder.game() = child(Game::class) {} 112 | -------------------------------------------------------------------------------- /src/main/kotlin/tictactoe/Square.kt: -------------------------------------------------------------------------------- 1 | package tictactoe 2 | 3 | import kotlinx.html.js.onClickFunction 4 | import org.w3c.dom.events.Event 5 | import react.RBuilder 6 | import react.dom.button 7 | 8 | fun RBuilder.square(value: String?, onClickFunction: (Event) -> Unit) = 9 | button(classes = "square") { 10 | +(value ?: "") 11 | attrs.onClickFunction = onClickFunction 12 | } 13 | -------------------------------------------------------------------------------- /src/main/kotlin/tictactoe/main.kt: -------------------------------------------------------------------------------- 1 | package tictactoe 2 | 3 | import react.dom.render 4 | import kotlin.browser.document 5 | import kotlin.browser.window 6 | 7 | fun main(args: Array) { 8 | window.onload = { 9 | val root = document.getElementById("root") ?: throw IllegalStateException() 10 | render(root) { 11 | game() 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/main/web/default.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px "Century Gothic", Futura, sans-serif; 3 | margin: 20px; 4 | } 5 | 6 | ol, ul { 7 | padding-left: 30px; 8 | } 9 | 10 | .board-row:after { 11 | clear: both; 12 | content: ""; 13 | display: table; 14 | } 15 | 16 | .status { 17 | margin-bottom: 10px; 18 | } 19 | 20 | .square { 21 | background: #fff; 22 | border: 1px solid #999; 23 | float: left; 24 | font-size: 24px; 25 | font-weight: bold; 26 | line-height: 34px; 27 | height: 34px; 28 | margin-right: -1px; 29 | margin-top: -1px; 30 | padding: 0; 31 | text-align: center; 32 | width: 34px; 33 | } 34 | 35 | .square:focus { 36 | outline: none; 37 | } 38 | 39 | .kbd-navigation .square:focus { 40 | background: #ddd; 41 | } 42 | 43 | .game { 44 | display: flex; 45 | flex-direction: row; 46 | } 47 | 48 | .game-info { 49 | margin-left: 20px; 50 | } 51 | -------------------------------------------------------------------------------- /src/main/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tic Tac Toe 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | --------------------------------------------------------------------------------