Only show doodle game link if not mobile (#419)

Author: markmetcalfe

web/pages/index.vue

@@ -60,14 +60,21 @@
       <LinkButton text="Sequencer" href="/sequencer" large>
         <Icon name="fad:waveform" />
       </LinkButton>
-      <LinkButton text="Doodle" href="/doodle" large>
+      <LinkButton
+        v-if="!isMobile()"
+        text="Doodle"
+        href="/doodle"
+        large
+      >
         <Icon name="bx:paint" />
       </LinkButton>
     </SectionBlock>
   </PageCard>
 </template>
 
 <script setup lang="ts">
+import isMobile from "is-mobile";
+
 const { mailtoLink } = useAppConfig();
 </script>
 

web/tests/e2e/index.spec.ts

@@ -92,7 +92,12 @@ test.describe("HomePage", () => {
     );
   });
 
-  test("can navigate to the doodle page", async ({ page }) => {
+  test("can navigate to the doodle page", async ({
+    page,
+    isMobile,
+  }) => {
+    test.skip(isMobile, "Doodle link is not shown on mobile");
+
     await page.goto("/");
 
     const link = page.locator('a:has-text("Doodle")');
@@ -107,4 +112,17 @@ test.describe("HomePage", () => {
       "Waiting for players",
     );
   });
+
+  test("doodle link is hidden on mobile", async ({
+    page,
+    isMobile,
+  }) => {
+    test.skip(!isMobile, "Only relevant on mobile");
+
+    await page.goto("/");
+
+    await expect(
+      page.locator('a:has-text("Doodle")'),
+    ).not.toBeVisible();
+  });
 });