Adding more logic to make welcome view more cute

README.md

@@ -1,21 +1,22 @@
-# Важно
-Сделано за 3 ночи 1 человеком, который был и швец, и жнец, и на дуде игрец. И девопс, и бэкендер и фронтендер. 
-Спасибо ChatGpt и моей маме.
+# Pokemon or BigData
+This full-stack Kotlin app is a humorous test of 12 questions, made over a couple of nights to illustrate how large a zoo of names has formed in the Big Data world. 
+The original idea was born [here](https://docs.google.com/forms/d/e/1FAIpQLScRsfRHXPTuEXdNvUcI8DzJIU5iazqlpksWucPF0d8l2ztkkA/viewform) and [here](https://pixelastic.github.io/pokemonorbigdata/).
 
-# Покемон Или BigData
+# How to
+### Internals
+-- frontend: React application powered by KotlinJS
+-- backend: Spring Boot application powered by KotlinJVM
 
-Шутливое приложение, которое показывает, насколько огромный зоопарк из названий образовался в дате.
-Оригинальная идея и отсылки к [этой форме](https://docs.google.com/a/octo.com/forms/d/1kckcq_uv8dk9-W5rIdtqRwCHN4Uh209ELPUjTEZJDxc/viewform) и к [этому](https://github.com/pixelastic/pokemonorbigdata) проекту.
-
-
-### How to
+### Build and run
 1) Build: `./gradlew build`
 
-2) Run locally: `./gradlew frontend:jsBrowserDevelopmentRun`
+2) Run backend locally: `./gradlew backend:bootRun`
+
+3) Run frontend locally: `./gradlew frontend:jsBrowserDevelopmentRun`
 
-### Runbook
-We are using deploy-gh action, which will build the project in gh-pages branch.
-To configure it do:
+### Deployment
+We are using deploy-gh action, which will build the frontend in `gh-pages` branch (without resources and images included).
+To configure it do the following:
 ```
 If you do not supply the action with an access token or an SSH key, you must access your repositories settings and provide Read and Write Permissions to the provided GITHUB_TOKEN, otherwise you'll potentially run into permission issues. Alternatively you can set the following in your workflow file to grant the action the permissions it needs.
 ```

frontend/src/jsMain/kotlin/ru/posidata/views/main/AnswerCard.kt

@@ -36,15 +36,15 @@ val answerCard = FC<AnswerProps> { props ->
                     style = jso {
                         display = "inline".unsafeCast<Display>()
                     }
-                    +"${pokemon.getName()} - это "
+                    +"${pokemon.getName()} - is from "
                 }
                 h2 {
                     style = jso {
                         fontFamily = "'Pokemon Solid', sans-serif".unsafeCast<FontFamily>()
                         color = "yellow".unsafeCast<Color>()
                         display = "inline".unsafeCast<Display>()
                     }
-                    +(if (pokemon.type == BIG_DATA) "из БигДаты!" else "Pokémon!")
+                    +(if (pokemon.type == BIG_DATA) "BigData!" else "Pokémon!")
                 }
             }
         }
@@ -94,12 +94,12 @@ val answerCard = FC<AnswerProps> { props ->
                     className = ClassName("btn btn-outline-info")
 
                     if (props.counter < props.answers.size) {
-                        +"Следующий вопрос"
+                        +"Next question"
                         onClick = {
                             props.setSelection(QUESTION)
                         }
                     } else {
-                        +"Результаты"
+                        +"Your results"
                         onClick = {
                             props.setSelection(RESULTS)
                         }

frontend/src/jsMain/kotlin/ru/posidata/views/main/QuestionCard.kt

@@ -151,7 +151,7 @@ val questionCard = FC<QuestionCard> { props ->
                             display = "inline".unsafeCast<Display>()
                             color = "rgb(0, 206, 224)".unsafeCast<Color>()
                         }
-                        +" или "
+                        +" or "
                     }
                     h1 {
                         onClick = {

frontend/src/jsMain/kotlin/ru/posidata/views/main/ResultCard.kt

@@ -26,7 +26,7 @@ import web.cssom.*
 
 val resultCard = FC<ResultProps> { props ->
     val correctAnswers = props.answers.count { it == CORRECT }
-    var (loading, setLoading) = useState(true)
+    val (loading, setLoading) = useState(true)
 
     val updateRound = useDeferredRequest {
         if (props.tgUser != null) {
@@ -66,24 +66,26 @@ val resultCard = FC<ResultProps> { props ->
             h1 {
                 className = ClassName("text-center")
                 style = jso {
+                    fontSize = 50.unsafeCast<FontSize>()
                     color = "yellow".unsafeCast<Color>()
                     display = "inline".unsafeCast<Display>()
                 }
                 +"$correctAnswers"
             }
-            h2 {
+            h1 {
                 style = jso {
+                    fontSize = 35.unsafeCast<FontSize>()
                     color = "white".unsafeCast<Color>()
                     display = "inline".unsafeCast<Display>()
                 }
                 +"/${props.answers.size}"
             }
 
             val textMeme = when (correctAnswers) {
-                in 0..4 -> Pair("А ты точно пришел на SmartData?", "areyousure.png")
-                in 5..8 -> Pair("Тебе надо поисследовать мир Даты (и Покемонов)", "choose-you.webp")
-                in 9..11 -> Pair("Ты хорош, но не идеален", "choose-you.webp")
-                12 -> Pair("Я выбираю тебя!", "choose-you.webp")
+                in 0..4 -> Pair("Are you related to IT?", "areyousure.png")
+                in 5..8 -> Pair("You need to learn more about the world of Data (and Pokemons)", "end.jpeg")
+                in 9..11 -> Pair("You are good, but not the best", "end.jpeg")
+                12 -> Pair("I choose you!", "choose-you.webp")
                 else -> Pair("", "")
             }
 
@@ -121,7 +123,7 @@ val resultCard = FC<ResultProps> { props ->
                         props.setUniqueRandom(listOf())
                         updateRound()
                     }
-                    +"Еще раз!"
+                    +"Once more!"
                 }
             }
             div {

frontend/src/jsMain/kotlin/ru/posidata/views/main/Welcome.kt

@@ -38,6 +38,7 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
                 response.ok -> {
                     props.setUser(response.decodeFromJsonString<UserForSerializationDTO>())
                 }
+
                 else -> window.alert("Failed to authorize you with telegram")
             }
         }
@@ -75,7 +76,7 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
 
             h6 {
                 className = ClassName("mt-3 mb-3 text-start")
-                +("A humorous test of 12 questions, made over a couple of nights to show just how large a zoo of names " +
+                +("A humorous test of 12 questions, made over a couple of nights to illustrate how large a zoo of names " +
                         "has formed in the Big Data world. The original idea was born "
                         )
                 a {
@@ -93,22 +94,22 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
                     +"here"
                 }
 
-                +" The source code of this site can be found on the "
+                +". The source code of this site can be found on the "
 
                 a {
                     href = "https://github.com/orchestr7/PokemonOrBigData"
                     className = ClassName("text-info")
                     +"GitHub"
                 }
 
-                +". ${if (props.tgUser == null) "Чтобы участвовать в розыгрыше и рейтинге - залогинься:" else ""}"
+                +". ${if (props.tgUser == null) "If you wish to share your results - you can register with Telegram using the button below:" else ""}"
             }
 
 
             if (props.tgUser == null) {
                 TLoginButton {
                     botName = "PosiDataBot"
-                    buttonSize = "large"
+                    buttonSize = "small"
                     redirectUrl = null
                     cornerRadius = 15.0
                     requestAccess = "write"
@@ -135,17 +136,28 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
                     style = jso {
                         color = "yellow".unsafeCast<Color>()
                     }
-                    +"Привет, ${props.tgUser?.username}! Теперь ты участвуешь в розыгрыше на SmartData. Если захочешь просто поиграть - обнови страницу."
+                    +"Hello, ${props.tgUser?.username}! Now your results are being recorded, if you don't want this - just refresh the page."
+                }
+            }
+
+            img {
+                className =
+                    ClassName("mt-1 mb-2")
+                src = "img/pokemon-vs-data.jpeg"
+                style = jso {
+                    width = "100%".unsafeCast<Width>()
+                    borderRadius = "2px 2px 2px 2px".unsafeCast<BorderRadius>()
+                    boxShadow = "10px 10px 20px rgba(0, 0, 0, 0.5)".unsafeCast<BoxShadow>()
                 }
             }
 
             img {
                 className =
-                    ClassName("animate__animated animate__shakeX mt-1 border border-info border-5 img-glow3 mb-3")
-                src = "img/pokemonVSBigData.jpeg"
+                    ClassName("animate__animated animate__shakeX border border-info border-4 img-glow3 mb-3")
+                src = if (props.tgUser == null) "img/lets-start.png" else "img/lets-start-registered.png"
                 style = jso {
                     width = "100%".unsafeCast<Width>()
-                    borderRadius = "20px 20px 20px 20px".unsafeCast<BorderRadius>()
+                    borderRadius = "15px 15px 15px 15px".unsafeCast<BorderRadius>()
                     boxShadow = "10px 10px 20px rgba(0, 0, 0, 0.5)".unsafeCast<BoxShadow>()
                     cursor = "pointer".unsafeCast<Cursor>()
                 }