Merge pull request #156 from aeternity/feat/re_implement_mobile

Feat/re implement mobile

client/src/app.vue

@@ -10,10 +10,10 @@ import { GameChannel } from './utils/game-channel/game-channel';
 import GameScreen from './components/game-screen/game-screen.vue';
 import { decode, Encoded } from '@aeternity/aepp-sdk/es/utils/encoder';
 import { Node } from '@aeternity/aepp-sdk';
+import { useIsOnMobileStore } from './stores/is-on-mobile';
 
 const channelStore = useChannelStore();
 
-const isOnMobile = ref(false);
 const error = ref();
 
 async function initChannel() {
@@ -41,10 +41,7 @@ const th = urlParams.get('th') as Encoded.TxHash;
 const resultsFromSharedLink = ref();
 
 onMounted(async () => {
-  // check if is on mobile
-  isOnMobile.value = window.innerWidth < 768;
-  if (isOnMobile.value) return;
-
+  if (window.innerWidth < 599) useIsOnMobileStore().isOnMobile = true;
   if (th) {
     // if we have a th, we need to show the end-screen
     const node = new Node(NODE_URL);
@@ -69,15 +66,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="isOnMobile" class="mobile">
-    <p>Unfortunately this demo is not supported on mobile devices yet.</p>
-    <p>Please use another device.</p>
-  </div>
-  <div
-    v-else
-    class="container"
-    :class="{ noSelections: showingAutoplayTxLogs }"
-  >
+  <div class="container" :class="{ noSelections: showingAutoplayTxLogs }">
     <Header :responderId="resultsFromSharedLink?.responderId" />
     <div class="error" v-if="error">
       <p>
@@ -148,16 +137,6 @@ onMounted(async () => {
       grid-template-rows: 20% 50% 30%;
     }
   }
-  > .mobile {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    text-align: center;
-    padding: 10px;
-    height: calc(100vh - 20px);
-  }
 }
 :root {
   --green: #42bd65;

client/src/components/channel-initialization/channel-initialization.vue

@@ -87,7 +87,7 @@ function toggleAutoplay() {
           When being <span class="bold">idle for 2 minutes</span>, a timeout is
           triggered and the state channel closes.
         </p>
-        <div>
+        <div class="buttons">
           <Button
             :disabled="channelIsOpening"
             @click="openStateChannel()"
@@ -136,6 +136,9 @@ function toggleAutoplay() {
     &.shadow {
       width: min-content;
       box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 1px 10px 0 rgb(0 0 0 / 15%);
+      @include for-phone-only {
+        width: unset;
+      }
     }
   }
 }
@@ -146,7 +149,7 @@ function toggleAutoplay() {
   font-weight: 500;
   text-align: center;
   @include for-phone-only {
-    font-size: 28px;
+    font-size: 26px;
     min-width: 100%;
     max-width: 100%;
     margin: 20px;
@@ -169,4 +172,13 @@ function toggleAutoplay() {
     font-weight: 500;
   }
 }
+.buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  @include for-phone-only {
+    flex-direction: column-reverse;
+  }
+}
 </style>

client/src/components/game-info/game-info.vue

@@ -33,7 +33,7 @@ defineProps<{
     font-size: 50px;
     font-weight: bold;
     @include for-phone-only {
-      font-size: 34px;
+      font-size: 26px;
     }
     @include for-tablet-portrait-up {
       font-size: 40px;
@@ -45,7 +45,7 @@ defineProps<{
     text-align: right;
     font-weight: 500;
     @include for-phone-only {
-      font-size: 16px;
+      font-size: 14px;
       text-align: center;
     }
     @include for-tablet-portrait-up {

client/src/components/game-screen/game-screen.vue

@@ -35,6 +35,9 @@ const channelStore = useChannelStore();
   height: 100%;
   font-size: 40px;
   font-weight: 500;
+  @include for-phone-only {
+    font-size: 26px;
+  }
 }
 .game-screen {
   display: grid;
@@ -43,18 +46,35 @@ const channelStore = useChannelStore();
   gap: 0px 0px;
   grid-template-areas: 'user bot';
   grid-area: body;
+  @include for-phone-only {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
 }
 .user,
 .bot {
   display: grid;
   grid-template-rows: 15% 85%;
+  @include for-phone-only {
+    margin-top: 10px;
+  }
 }
 .user {
   grid-area: user;
   border-right: 1px solid var(--pink);
+  @include for-phone-only {
+    height: 65%;
+    border-right: none;
+    border-bottom: 1px solid var(--pink);
+  }
 }
 .bot {
   grid-area: bot;
   border-left: 1px solid var(--pink);
+  @include for-phone-only {
+    height: 35%;
+    border-left: none;
+  }
 }
 </style>

client/src/components/generic-button/generic-button.vue

@@ -38,7 +38,7 @@ defineProps<{
     cursor: not-allowed;
   }
   @include for-phone-only {
-    font-size: 24px;
+    font-size: 22px;
   }
 }
 </style>

client/src/components/header/header.vue

@@ -101,6 +101,7 @@ async function reset() {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
+  justify-content: center;
   padding: var(--padding);
   padding-bottom: 5px;
   img {
@@ -110,7 +111,11 @@ async function reset() {
     }
   }
   @include for-phone-only {
-    height: 15%;
+    grid-template-columns: 25% 50% 25%;
+    grid-template-rows: 1fr 1fr;
+    img {
+      width: 60px;
+    }
   }
   @include for-big-desktop-up {
     align-items: flex-start;
@@ -129,11 +134,20 @@ async function reset() {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-top: 10px;
   width: fit-content;
   justify-self: flex-end;
   .button {
     margin-left: 0;
   }
+  @include for-phone-only {
+    grid-column: 1 / 4;
+    justify-self: center;
+    width: max-content;
+    .button {
+      font-size: 12px;
+      margin: 3px;
+      padding: 5px 10px;
+    }
+  }
 }
 </style>

client/src/components/loading-animation/loading-animation.vue

@@ -45,6 +45,13 @@
   box-sizing: content-box;
 }
 
+@include for-phone-only {
+  .loading {
+    transform: translateZ(0) scale(0.6);
+    transform-origin: 50% 50%;
+  }
+}
+
 @keyframes loadingAnimation {
   0% {
     background: rgba(255, 255, 255, 0);

client/src/components/notification/notification.vue

@@ -36,15 +36,25 @@ function closeNotification() {
   width: max-content;
   max-width: 90%;
 
-  font-size: 16px;
-
   img {
     width: 16px;
     height: 16px;
     margin-left: 10px;
     cursor: pointer;
   }
 
+  .notification-text {
+    font-size: 16px;
+  }
+
+  @include for-phone-only {
+    padding: 5px 10px;
+    width: 100%;
+    .notification-text {
+      font-size: 14px;
+    }
+  }
+
   &.success {
     background-color: var(--green);
   }
@@ -54,8 +64,5 @@ function closeNotification() {
   &.info {
     background-color: orange;
   }
-  .notification-text {
-    font-size: medium;
-  }
 }
 </style>

client/src/components/player-info/player-info.vue

@@ -33,7 +33,7 @@ defineProps<{
     font-weight: bold;
     text-align: center;
     @include for-phone-only {
-      font-size: 34px;
+      font-size: 26px;
     }
   }
 

client/src/components/rock-paper-scissors/rock-paper-scissors.test.ts

@@ -40,7 +40,7 @@ describe('Rock Paper Scissors Component', () => {
     expect(paperBtn).toBeTruthy();
     expect(scissorsBtn).toBeTruthy();
     expect(RockPaperScissorsEl.getByTestId('userSelection').innerHTML).toBe(
-      '<!--v-if-->'
+      '<!--v-if--><!--v-if-->'
     );
     expect(RockPaperScissorsEl.getByTestId('botSelection').innerHTML).toBe(
       '<!--v-if-->'