use mobile share for Play with Friend

modules/challenge/src/main/ui/ChallengeUi.scala

@@ -80,7 +80,8 @@ final class ChallengeUi(helpers: Helpers):
           h2("Custom rules:"),
           div(fragList(c.rules.toList.map(showRule), "/"))
         )
-      )
+      ),
+      div(cls := "mobile-instructions none")("Tap here to share")
     )
 
   private def showRule(r: GameRule) =
@@ -139,7 +140,7 @@ final class ChallengeUi(helpers: Helpers):
                     )
                   else
                     div(cls := "invite")(
-                      div(
+                      div(cls := "invite__url")(
                         h2(cls := "ninja-title", trans.site.toInviteSomeoneToPlayGiveThisUrl()),
                         br,
                         copyMeInput(challengeLink),

modules/ui/src/main/Icon.scala

@@ -142,3 +142,5 @@ object Icon:
   val AccountCircle: Icon        = "" // e078
   val Logo: Icon                 = "" // e079
   val Switch: Icon               = "" // e07a
+  val ShareIos: Icon             = "" // e07b
+  val ShareAndroid: Icon         = "" // e07c

public/font/lichess.sfd

@@ -21,7 +21,7 @@ OS2Version: 3
 OS2_WeightWidthSlopeOnly: 0
 OS2_UseTypoMetrics: 0
 CreationTime: 1554434404
-ModificationTime: 1731438430
+ModificationTime: 1731533520
 PfmFamily: 17
 TTFWeight: 400
 TTFWidth: 5
@@ -87,8 +87,8 @@ NameList: AGL For New Fonts
 DisplaySize: -128
 AntiAlias: 1
 FitToEm: 0
-WinInfo: 57366 9 8
-BeginChars: 65539 126
+WinInfo: 57411 9 8
+BeginChars: 65539 128
 
 StartChar: .notdef
 Encoding: 65536 -1 0
@@ -497,7 +497,7 @@ StartChar: die-six
 Encoding: 57371 57371 8
 Width: 512
 GlyphClass: 2
-Flags: WO
+Flags: W
 LayerCount: 2
 Fore
 SplineSet
@@ -7682,5 +7682,158 @@ SplineSet
  332.514648438 263.379882812 332.514648438 263.379882812 338.904296875 260.184570312 c 6,49,-1
 EndSplineSet
 EndChar
+
+StartChar: share-ios
+Encoding: 57467 57467 126
+Width: 512
+LayerCount: 2
+Fore
+SplineSet
+229.599609375 448.971679688 m 6,0,1
+ 229.599609375 460.19140625 229.599609375 460.19140625 237.190429688 467.782226562 c 132,-1,2
+ 244.780273438 475.372070312 244.780273438 475.372070312 256 475.372070312 c 132,-1,3
+ 267.219726562 475.372070312 267.219726562 475.372070312 274.809570312 467.782226562 c 132,-1,4
+ 282.400390625 460.19140625 282.400390625 460.19140625 282.400390625 448.971679688 c 6,5,-1
+ 282.400390625 171.771484375 l 6,6,7
+ 282.400390625 160.551757812 282.400390625 160.551757812 274.809570312 152.961914062 c 132,-1,8
+ 267.219726562 145.372070312 267.219726562 145.372070312 256 145.372070312 c 132,-1,9
+ 244.780273438 145.372070312 244.780273438 145.372070312 237.190429688 152.961914062 c 132,-1,10
+ 229.599609375 160.551757812 229.599609375 160.551757812 229.599609375 171.771484375 c 6,11,-1
+ 229.599609375 448.971679688 l 6,0,1
+272.901367188 455.08984375 m 6,12,-1
+ 193.701171875 389.08984375 l 6,13,14
+ 185.30078125 382.08984375 185.30078125 382.08984375 174.41015625 383.079101562 c 132,-1,15
+ 163.51953125 384.069335938 163.51953125 384.069335938 156.51953125 392.470703125 c 132,-1,16
+ 149.518554688 400.87109375 149.518554688 400.87109375 150.5078125 411.760742188 c 132,-1,17
+ 151.498046875 422.651367188 151.498046875 422.651367188 159.899414062 429.65234375 c 6,18,-1
+ 239.098632812 495.65234375 l 6,19,20
+ 247.5 502.65234375 247.5 502.65234375 258.390625 501.662109375 c 132,-1,21
+ 269.28125 500.672851562 269.28125 500.672851562 276.280273438 492.272460938 c 132,-1,22
+ 283.28125 483.87109375 283.28125 483.87109375 282.291992188 472.98046875 c 132,-1,23
+ 281.302734375 462.090820312 281.302734375 462.090820312 272.901367188 455.08984375 c 6,12,-1
+239.098632812 455.08984375 m 6,24,25
+ 230.698242188 462.090820312 230.698242188 462.090820312 229.708007812 472.98046875 c 132,-1,26
+ 228.717773438 483.87109375 228.717773438 483.87109375 235.71875 492.272460938 c 132,-1,27
+ 242.719726562 500.672851562 242.719726562 500.672851562 253.610351562 501.662109375 c 132,-1,28
+ 264.5 502.65234375 264.5 502.65234375 272.901367188 495.65234375 c 6,29,-1
+ 352.1015625 429.65234375 l 6,30,31
+ 360.501953125 422.651367188 360.501953125 422.651367188 361.4921875 411.760742188 c 132,-1,32
+ 362.481445312 400.87109375 362.481445312 400.87109375 355.48046875 392.470703125 c 132,-1,33
+ 348.481445312 384.069335938 348.481445312 384.069335938 337.590820312 383.079101562 c 132,-1,34
+ 326.700195312 382.08984375 326.700195312 382.08984375 318.298828125 389.08984375 c 6,35,-1
+ 239.098632812 455.08984375 l 6,24,25
+335.200195312 290.572265625 m 6,36,37
+ 323.98046875 290.572265625 323.98046875 290.572265625 316.389648438 298.162109375 c 132,-1,38
+ 308.799804688 305.751953125 308.799804688 305.751953125 308.799804688 316.971679688 c 132,-1,39
+ 308.799804688 328.19140625 308.799804688 328.19140625 316.389648438 335.782226562 c 132,-1,40
+ 323.98046875 343.372070312 323.98046875 343.372070312 335.200195312 343.372070312 c 6,41,-1
+ 361.599609375 343.372070312 l 6,42,43
+ 394.103515625 343.372070312 394.103515625 343.372070312 417.452148438 322.794921875 c 132,-1,44
+ 440.799804688 302.21875 440.799804688 302.21875 440.799804688 272.294921875 c 6,45,-1
+ 440.799804688 71.2490234375 l 6,46,47
+ 440.799804688 41.326171875 440.799804688 41.326171875 417.452148438 20.748046875 c 132,-1,48
+ 394.103515625 0.171875 394.103515625 0.171875 361.599609375 0.171875 c 6,49,-1
+ 150.400390625 0.171875 l 6,50,51
+ 117.896484375 0.171875 117.896484375 0.171875 94.5478515625 20.748046875 c 132,-1,52
+ 71.2001953125 41.326171875 71.2001953125 41.326171875 71.2001953125 71.2490234375 c 6,53,-1
+ 71.2001953125 272.294921875 l 6,54,55
+ 71.2001953125 302.21875 71.2001953125 302.21875 94.5478515625 322.794921875 c 132,-1,56
+ 117.896484375 343.372070312 117.896484375 343.372070312 150.400390625 343.372070312 c 6,57,-1
+ 176.799804688 343.372070312 l 6,58,59
+ 188.01953125 343.372070312 188.01953125 343.372070312 195.610351562 335.782226562 c 132,-1,60
+ 203.200195312 328.19140625 203.200195312 328.19140625 203.200195312 316.971679688 c 132,-1,61
+ 203.200195312 305.751953125 203.200195312 305.751953125 195.610351562 298.162109375 c 132,-1,62
+ 188.01953125 290.572265625 188.01953125 290.572265625 176.799804688 290.572265625 c 6,63,-1
+ 150.400390625 290.572265625 l 6,64,65
+ 139.203125 290.572265625 139.203125 290.572265625 131.6015625 284.966796875 c 132,-1,66
+ 124 279.361328125 124 279.361328125 124 272.294921875 c 6,67,-1
+ 124 71.2490234375 l 6,68,69
+ 124 64.181640625 124 64.181640625 131.6015625 58.576171875 c 132,-1,70
+ 139.203125 52.9716796875 139.203125 52.9716796875 150.400390625 52.9716796875 c 6,71,-1
+ 361.599609375 52.9716796875 l 6,72,73
+ 372.797851562 52.9716796875 372.797851562 52.9716796875 380.3984375 58.576171875 c 132,-1,74
+ 388 64.181640625 388 64.181640625 388 71.2490234375 c 6,75,-1
+ 388 272.294921875 l 6,76,77
+ 388 279.361328125 388 279.361328125 380.3984375 284.966796875 c 132,-1,78
+ 372.797851562 290.572265625 372.797851562 290.572265625 361.599609375 290.572265625 c 6,79,-1
+ 335.200195312 290.572265625 l 6,36,37
+EndSplineSet
+EndChar
+
+StartChar: share-android
+Encoding: 57468 57468 127
+Width: 512
+Flags: WO
+LayerCount: 2
+Fore
+SplineSet
+407.46875 3.552734375 m 132,-1,1
+ 375.913085938 3.552734375 375.913085938 3.552734375 353.82421875 25.6416015625 c 132,-1,2
+ 331.734375 47.73046875 331.734375 47.73046875 331.734375 79.2861328125 c 4,3,4
+ 331.734375 83.0830078125 331.734375 83.0830078125 333.6328125 96.962890625 c 5,5,-1
+ 156.278320312 200.45703125 l 5,6,7
+ 146.1953125 190.990234375 146.1953125 190.990234375 132.931640625 185.639648438 c 132,-1,8
+ 119.66796875 180.265625 119.66796875 180.265625 104.53125 180.265625 c 4,9,10
+ 72.9755859375 180.265625 72.9755859375 180.265625 50.8857421875 202.354492188 c 132,-1,11
+ 28.796875 224.443359375 28.796875 224.443359375 28.796875 256 c 132,-1,12
+ 28.796875 287.556640625 28.796875 287.556640625 50.8857421875 309.645507812 c 132,-1,13
+ 72.9755859375 331.734375 72.9755859375 331.734375 104.53125 331.734375 c 4,14,15
+ 119.66796875 331.734375 119.66796875 331.734375 132.931640625 326.360351562 c 132,-1,16
+ 146.1953125 321.009765625 146.1953125 321.009765625 156.278320312 311.54296875 c 5,17,-1
+ 333.6328125 415.037109375 l 5,18,19
+ 332.375 419.450195312 332.375 419.450195312 332.055664062 423.567382812 c 132,-1,20
+ 331.734375 427.66015625 331.734375 427.66015625 331.734375 432.713867188 c 4,21,22
+ 331.734375 464.26953125 331.734375 464.26953125 353.82421875 486.358398438 c 132,-1,23
+ 375.913085938 508.447265625 375.913085938 508.447265625 407.46875 508.447265625 c 132,-1,24
+ 439.024414062 508.447265625 439.024414062 508.447265625 461.114257812 486.358398438 c 132,-1,25
+ 483.203125 464.26953125 483.203125 464.26953125 483.203125 432.713867188 c 132,-1,26
+ 483.203125 401.158203125 483.203125 401.158203125 461.114257812 379.068359375 c 132,-1,27
+ 439.024414062 356.979492188 439.024414062 356.979492188 407.46875 356.979492188 c 4,28,29
+ 392.33203125 356.979492188 392.33203125 356.979492188 379.068359375 362.353515625 c 132,-1,30
+ 365.8046875 367.704101562 365.8046875 367.704101562 355.721679688 377.169921875 c 5,31,-1
+ 178.3671875 273.676757812 l 5,32,33
+ 179.625 269.263671875 179.625 269.263671875 179.944335938 265.146484375 c 132,-1,34
+ 180.265625 261.053710938 180.265625 261.053710938 180.265625 256 c 132,-1,35
+ 180.265625 250.946289062 180.265625 250.946289062 179.944335938 246.853515625 c 132,-1,36
+ 179.625 242.736328125 179.625 242.736328125 178.3671875 238.323242188 c 5,37,-1
+ 355.721679688 134.830078125 l 5,38,39
+ 365.8046875 144.295898438 365.8046875 144.295898438 379.068359375 149.646484375 c 132,-1,40
+ 392.33203125 155.020507812 392.33203125 155.020507812 407.46875 155.020507812 c 4,41,42
+ 439.024414062 155.020507812 439.024414062 155.020507812 461.114257812 132.931640625 c 132,-1,43
+ 483.203125 110.841796875 483.203125 110.841796875 483.203125 79.2861328125 c 132,-1,44
+ 483.203125 47.73046875 483.203125 47.73046875 461.114257812 25.6416015625 c 132,-1,0
+ 439.024414062 3.552734375 439.024414062 3.552734375 407.46875 3.552734375 c 132,-1,1
+407.46875 54.0419921875 m 132,-1,46
+ 418.193359375 54.0419921875 418.193359375 54.0419921875 425.465820312 61.2900390625 c 132,-1,47
+ 432.713867188 68.5625 432.713867188 68.5625 432.713867188 79.2861328125 c 132,-1,48
+ 432.713867188 90.0107421875 432.713867188 90.0107421875 425.465820312 97.283203125 c 132,-1,49
+ 418.193359375 104.53125 418.193359375 104.53125 407.46875 104.53125 c 132,-1,50
+ 396.745117188 104.53125 396.745117188 104.53125 389.47265625 97.283203125 c 132,-1,51
+ 382.223632812 90.0107421875 382.223632812 90.0107421875 382.223632812 79.2861328125 c 132,-1,52
+ 382.223632812 68.5625 382.223632812 68.5625 389.47265625 61.2900390625 c 132,-1,45
+ 396.745117188 54.0419921875 396.745117188 54.0419921875 407.46875 54.0419921875 c 132,-1,46
+104.53125 230.755859375 m 132,-1,54
+ 115.254882812 230.755859375 115.254882812 230.755859375 122.52734375 238.002929688 c 132,-1,55
+ 129.776367188 245.275390625 129.776367188 245.275390625 129.776367188 256 c 132,-1,56
+ 129.776367188 266.724609375 129.776367188 266.724609375 122.52734375 273.997070312 c 132,-1,57
+ 115.254882812 281.244140625 115.254882812 281.244140625 104.53125 281.244140625 c 132,-1,58
+ 93.806640625 281.244140625 93.806640625 281.244140625 86.5341796875 273.997070312 c 132,-1,59
+ 79.2861328125 266.724609375 79.2861328125 266.724609375 79.2861328125 256 c 132,-1,60
+ 79.2861328125 245.275390625 79.2861328125 245.275390625 86.5341796875 238.002929688 c 132,-1,53
+ 93.806640625 230.755859375 93.806640625 230.755859375 104.53125 230.755859375 c 132,-1,54
+407.46875 407.46875 m 132,-1,62
+ 418.193359375 407.46875 418.193359375 407.46875 425.465820312 414.716796875 c 132,-1,63
+ 432.713867188 421.989257812 432.713867188 421.989257812 432.713867188 432.713867188 c 132,-1,64
+ 432.713867188 443.4375 432.713867188 443.4375 425.465820312 450.709960938 c 132,-1,65
+ 418.193359375 457.958007812 418.193359375 457.958007812 407.46875 457.958007812 c 132,-1,66
+ 396.745117188 457.958007812 396.745117188 457.958007812 389.47265625 450.709960938 c 132,-1,67
+ 382.223632812 443.4375 382.223632812 443.4375 382.223632812 432.713867188 c 132,-1,68
+ 382.223632812 421.989257812 382.223632812 421.989257812 389.47265625 414.716796875 c 132,-1,61
+ 396.745117188 407.46875 396.745117188 407.46875 407.46875 407.46875 c 132,-1,62
+407.46875 79.2861328125 m 1028,69,-1
+104.53125 256 m 1028,70,-1
+407.46875 432.713867188 m 1028,71,-1
+EndSplineSet
+EndChar
 EndChars
 EndSplineFont

public/oops/font.html

@@ -164,5 +164,7 @@
     <i title="AccountCircle">&#xe078;</i>
     <i title="Logo">&#xe079;</i>
     <i title="Switch">&#xe07a;</i>
+    <i title="ShareIos">&#xe07b;</i>
+    <i title="ShareAndroid">&#xe07c;</i>
   </body>
 </html>

ui/bits/src/bits.challengePage.ts

@@ -1,6 +1,7 @@
 import * as xhr from 'common/xhr';
 import StrongSocket from 'common/socket';
 import { userComplete } from 'common/userComplete';
+import { isTouchDevice, isIOS } from 'common/device';
 
 interface ChallengeOpts {
   xhrUrl: string;
@@ -65,6 +66,25 @@ export function initModule(opts: ChallengeOpts): void {
             this.submit();
           });
       });
+    if (isTouchDevice() && typeof navigator.share === 'function') {
+      const inviteUrl = document.querySelector<HTMLElement>('.invite__url');
+      if (!inviteUrl) return;
+      inviteUrl.classList.add('none');
+
+      const instructions = document.querySelector<HTMLElement>(`.mobile-instructions`)!;
+      instructions.classList.remove('none');
+      if (isIOS()) instructions.classList.add('is-ios');
+
+      const details = instructions.closest<HTMLElement>('.details-wrapper')!;
+      details.role = 'button';
+      details.onclick = () =>
+        navigator
+          .share({
+            title: `Fancy a game of chess?`,
+            url: inviteUrl.querySelector<HTMLInputElement>('input')?.value,
+          })
+          .catch(() => {});
+    }
   }
 
   init();

ui/challenge/css/_page.scss

@@ -138,6 +138,24 @@
         }
       }
     }
+
+    .mobile-instructions {
+      @extend %flex-center;
+      justify-content: center;
+      font-size: 1.5rem;
+    }
+
+    .mobile-instructions::after {
+      font-family: 'lichess';
+      font-size: 6rem;
+      padding-inline-start: 1rem;
+      color: $c-primary;
+      content: $licon-ShareAndroid;
+    }
+
+    .mobile-instructions.is-ios::after {
+      content: $licon-ShareIos;
+    }
   }
 
   &.challenge--declined .details {

ui/common/css/abstract/_licon.scss

@@ -133,3 +133,5 @@ $licon-Mute: ''; // e077
 $licon-AccountCircle: ''; // e078
 $licon-Logo: ''; // e079
 $licon-Switch: ''; // e07a
+$licon-ShareIos: ''; // e07b
+$licon-ShareAndroid: ''; // e07c

ui/common/src/licon.ts

@@ -133,3 +133,5 @@ export const Mute = ''; // e077
 export const AccountCircle = ''; // e078
 export const Logo = ''; // e079
 export const Switch = ''; // e07a
+export const ShareIos = ''; // e07b
+export const ShareAndroid = ''; // e07c