diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala index af743da4ce413..46aef1e144977 100644 --- a/app/views/challenge/mine.scala +++ b/app/views/challenge/mine.scala @@ -49,7 +49,7 @@ object mine: else div(cls := "invite")( div( - h2(cls := "ninja-title", trans.toInviteSomeoneToPlayGiveThisUrl(), ": "), + h2(cls := "ninja-title", trans.toInviteSomeoneToPlayGiveThisUrl()), br, p(cls := "challenge-id-form")( input( @@ -83,6 +83,13 @@ object mine: ), error.map { p(cls := "error")(_) } ) + ), + div(cls := "qr-code-invite")( + h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode()), + img( + src := s"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=$challengeLink", + alt := "QR Code" + ) ) ) }, diff --git a/modules/i18n/src/main/I18nKeys.scala b/modules/i18n/src/main/I18nKeys.scala index a5872c5bb4158..5232d60c4980d 100644 --- a/modules/i18n/src/main/I18nKeys.scala +++ b/modules/i18n/src/main/I18nKeys.scala @@ -8,6 +8,7 @@ object I18nKeys: val `toInviteSomeoneToPlayGiveThisUrl` = I18nKey("toInviteSomeoneToPlayGiveThisUrl") val `gameOver` = I18nKey("gameOver") val `waitingForOpponent` = I18nKey("waitingForOpponent") + val `orLetYourOpponentScanQrCode` = I18nKey("orLetYourOpponentScanQrCode") val `waiting` = I18nKey("waiting") val `yourTurn` = I18nKey("yourTurn") val `aiNameLevelAiLevel` = I18nKey("aiNameLevelAiLevel") diff --git a/translation/source/site.xml b/translation/source/site.xml index d704cf34eb787..5e249b9525de2 100644 --- a/translation/source/site.xml +++ b/translation/source/site.xml @@ -5,6 +5,7 @@ To invite someone to play, give this URL Game Over Waiting for opponent + Or let your opponent scan this QR code Waiting Your turn %1$s level %2$s diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss index 8578b5a7963d4..44f8b3c085ada 100644 --- a/ui/challenge/css/_page.scss +++ b/ui/challenge/css/_page.scss @@ -7,17 +7,20 @@ } } + .qr-code-invite { + @extend %flex-between-nowrap; + gap: $block-gap; + } + .invite { - display: flex; - flex-flow: row wrap; + display: grid; + gap: $block-gap; + grid-template-columns: repeat(auto-fill, minmax(25em, 1fr)); > div { - @extend %box-radius; - @include padding-direction(2em, 2em, 1em, 2em); - + @extend %box-neat; + padding: $block-gap; background: $c-bg-zebra; - margin: 1em; - flex: 1 1 auto; } p.error {