test: state persistence

client/src/components/channel-initialization/channel-initialization.test.ts

@@ -21,6 +21,38 @@ describe('Open State Channel Button', () => {
     channelComp.getByText('Funding accounts...');
   });
 
+  it('should have `Reconnecting` title when there is a stored gameState', async () => {
+    localStorage.setItem('gameState', '{}');
+    const channelComp = render(ChannelInitialization, {
+      global: {
+        plugins: [
+          createTestingPinia({
+            initialState: {
+              channel: {
+                channel: {
+                  isOpen: true,
+                  isFunded: true,
+                },
+              },
+            },
+          }),
+        ],
+      },
+    });
+    const button = channelComp.getByText('Start game');
+    await fireEvent.click(button);
+    // button is hidden after clicking it
+    expect(() => {
+      channelComp.getByText('Start game');
+    }).toThrowError();
+
+    expect(
+      channelComp.getByText(
+        'Reconnecting - Waiting for contract to be compiled...'
+      )
+    ).toBeDefined();
+  });
+
   it('shows error message on error', async () => {
     const channelComp = render(ChannelInitialization, {
       global: {

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

@@ -3,24 +3,25 @@ import { computed, ref } from 'vue';
 import { default as Button } from '../generic-button/generic-button.vue';
 import LoadingAnimation from '../loading-animation/loading-animation.vue';
 import { useChannelStore } from '../../stores/channel';
+import ToggleButton from '../toggle-button/toggle-button.vue';
 
 const channelStore = useChannelStore();
 const openChannelInitiated = ref(false);
-const channelisOpening = computed(
+const hasSavedState = ref(!!localStorage.getItem('gameState'));
+const channelIsOpening = computed(
   () => channelStore.channel?.isOpening || openChannelInitiated.value
 );
 
 const emit = defineEmits(['initializeChannel']);
-const hasSavedState = !!localStorage.getItem('gameState');
 
 const title = computed(() => {
-  const prefix = hasSavedState ? 'Reconnecting - ' : '';
+  const prefix = hasSavedState.value ? 'Reconnecting - ' : '';
 
-  const contractRequiredAction = hasSavedState
+  const contractRequiredAction = hasSavedState.value
     ? 'compiled'
     : 'deployed & compiled';
 
-  const status = !channelisOpening.value
+  const status = !channelIsOpening.value
     ? 'Start the game by open state channel'
     : !channelStore.channel?.isFunded
     ? 'Funding accounts...'
@@ -41,46 +42,64 @@ async function openStateChannel(): Promise<void> {
   openChannelInitiated.value = true;
   emit('initializeChannel');
 }
+
+function toggleAutoplay() {
+  if (channelStore.channel) {
+    channelStore.channel.autoplay.enabled =
+      !channelStore.channel.autoplay.enabled;
+  }
+}
 </script>
 
 <template>
   <div class="open-channel">
     <div
-      class="title"
-      :style="{
-        'max-width': channelisOpening ? '100%' : '',
-      }"
+      class="container"
+      :class="{ shadow: !openChannelInitiated && !hasSavedState }"
     >
-      {{ title }}
-    </div>
-    <div class="info-wrapper" v-if="!channelisOpening">
-      <p class="info">
-        State channels refer to the process in which users transact with one
-        another directly outside of the blockchain, or ‘off-chain,’ and greatly
-        minimize their use of ‘on-chain’ operations.
+      <div
+        class="title"
+        :style="{
+          'max-width': channelIsOpening ? '100%' : '',
+        }"
+      >
+        {{ title }}
+      </div>
+      <div class="info-wrapper" v-if="!channelIsOpening">
+        <p class="info">
+          State channels refer to the process in which users transact with one
+          another directly outside of the blockchain, or ‘off-chain,’ and
+          greatly minimize their use of ‘on-chain’ operations.
+        </p>
+        <p class="info">
+          By clicking start game you are initiating state channel with our bot
+          and you make the possibilities of the game practically endless. After
+          the game is over, you can see every action recorded on the blockchain
+          by checking our explorer.
+        </p>
+        <div>
+          <Button
+            :disabled="channelIsOpening"
+            @click="openStateChannel()"
+            text="Start game"
+          />
+          <ToggleButton
+            id="autoplay"
+            v-on:change="toggleAutoplay"
+            label-enable-text="Autoplay"
+            label-disable-text="Autoplay"
+          />
+        </div>
+      </div>
+      <LoadingAnimation v-else-if="!channelStore.channel?.error" />
+      <p v-else>
+        {{ errorMessage }}
       </p>
-      <p class="info">
-        By clicking start game you are initiating state channel with our bot and
-        you make the possibilities of the game practically endless. After the
-        game is over, you can see every action recorded on the blockchain by
-        checking our explorer.
-      </p>
-      <Button
-        :disabled="channelisOpening"
-        @click="openStateChannel()"
-        text="Start game"
-      />
     </div>
-    <LoadingAnimation v-else-if="!channelStore.channel?.error" />
-    <p v-else>
-      {{ errorMessage }}
-    </p>
   </div>
 </template>
-
 <style scoped lang="scss">
 @import '../../mediaqueries.scss';
-
 .open-channel {
   grid-area: body;
   display: flex;
@@ -93,7 +112,6 @@ async function openStateChannel(): Promise<void> {
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    width: min-content;
     border-radius: 25px;
     @include for-phone-only {
       width: unset;
@@ -106,6 +124,7 @@ async function openStateChannel(): Promise<void> {
       padding: 40px 150px;
     }
     &.shadow {
+      width: min-content;
       box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 1px 10px 0 rgb(0 0 0 / 15%);
     }
   }

client/src/components/rock-paper-scissors/rock-paper-scissors.vue

@@ -16,7 +16,7 @@ const userHasSelected = computed(() => {
     : false;
 });
 
-const showSelectionButtons = computed(() => {
+const isSelectingDisabled = computed(() => {
   return userHasSelected.value || selectionClicked.value;
 });
 
@@ -41,7 +41,7 @@ const botSelection = computed(() =>
 );
 
 const status = computed(() => {
-  if (!showSelectionButtons.value) {
+  if (!isSelectingDisabled.value) {
     return 'Choose one';
   }
   if (botIsMakingSelection.value) {
@@ -72,6 +72,7 @@ async function makeSelection(selection: Selections) {
 }
 
 function closeChannel() {
+  localStorage.clear();
   channelIsClosing.value = true;
   gameChannel.channel?.closeChannel();
 }
@@ -98,26 +99,26 @@ function closeChannel() {
         />
       </div>
     </div>
-    <div v-if="showSelectionButtons" class="selections">
+    <div v-if="!isSelectingDisabled" class="selections">
       <button
         data-testid="rock-btn"
-        :disabled="showSelectionButtons"
+        :disabled="isSelectingDisabled"
         class="button"
         @click="makeSelection(Selections.rock)"
       >
         <SelectionIcon :type="Selections.rock" />
       </button>
       <button
         data-testid="paper-btn"
-        :disabled="showSelectionButtons"
+        :disabled="isSelectingDisabled"
         class="button"
         @click="makeSelection(Selections.paper)"
       >
         <SelectionIcon :type="Selections.paper" />
       </button>
       <button
         data-testid="scissors-btn"
-        :disabled="showSelectionButtons"
+        :disabled="isSelectingDisabled"
         class="button"
         @click="makeSelection(Selections.scissors)"
       >

client/src/components/selection-icon/selection-icon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Selections } from '../../utils/game-channel/game-channel';
+import { Selections } from '../../utils/game-channel/game-channel.types';
 
 const props = defineProps<{
   type: Selections;

client/src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './app.vue';
 
-export let app = createApp(App);
+let app = createApp(App);
 let pinia = createPinia();
 app.use(pinia);