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 {