Adding more logic to make welcome view more cute

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,13 +66,15 @@ 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>()
                 }
@@ -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 {
@@ -101,14 +102,14 @@ val welcomeCard = FC<WelcomeCardProps> { props ->
                     +"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>()
                 }