save selection

client/src/components/ConfirmButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="confirm-button">
+    <div class="confirm-button__content" @click="click">
+      <div v-if="hasSelection" class="confirm-button__content__has-selection">
+        Save
+      </div>
+      <div v-else  class="confirm-button__content__no-selection">
+        skip round
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    hasSelection() {
+      return Object.keys(this.$store.state.selection.selection).length > 0
+    },
+  },
+  methods: {
+    click() {
+      const { selection } = this.$store.state.selection
+      this.$engine.saveSelection(Object.keys(selection))
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.confirm-button {
+  position: absolute;
+  right: 32px;
+  bottom: 5%;
+
+  &__content {
+    width: 100px;
+    height: 32px;
+    padding: 4px 36px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    color: #ffff80;
+    background-color: #40a020;
+    font-family: Dosis;
+    font-weight: 800;
+    text-align: center;
+    cursor: pointer;
+
+    &__has-selection {
+      font-size: 24px;
+    }
+
+    &__no-selection {
+      padding: 3px 0;
+      font-size: 18px;
+    }
+
+    &:hover {
+      border-color: #ffffc0;
+      background-color: #60c040;
+      color: #ffffc0;
+    }
+
+  }
+}
+</style>

client/src/components/Play.vue

@@ -4,6 +4,7 @@
       <div class="play__layout-playground">
         <Quote :text="quote" />
         <Sources :sources="sources" />
+        <ConfirmButton />
       </div>
       <div class="play__layout-right-column">
         <PlayerList :players="players" />

client/src/pages/play.vue

@@ -18,6 +18,7 @@
 export default {
   async mounted() {
     await this.$engine.start()
+    this.$store.commit('selection/clearSelection')
   },
   async beforeDestroy() {
     await this.$engine.stop()

client/src/plugins/engine/fetchUpdate.js

@@ -4,6 +4,7 @@ export default async function() {
   if (this.shouldStop || !this.isActive) {
     this.isActive = false
     this.shouldStop = false
+    console.debug('engine stopped')
     return
   }
 

client/src/plugins/engine/index.js

@@ -6,6 +6,7 @@ import fetchUserInfo from './fetchUserInfo'
 import startGame from './startGame'
 import resetGame from './resetGame'
 import parseSyncData from './parseSyncData'
+import saveSelection from './saveSelection'
 
 export default (context, inject) => {
   const engine = {
@@ -22,6 +23,7 @@ export default (context, inject) => {
     startGame,
     resetGame,
     parseSyncData,
+    saveSelection,
   }
 
   inject('engine', engine)

client/src/plugins/engine/saveSelection.js

@@ -0,0 +1,8 @@
+export default async function(selection) {
+  const { store } = this.context
+
+  await this.callApi('/api/saveSelection', {
+    g: store.state.engine.user?.game,
+    selection: selection.join(','),
+  })
+}

client/src/plugins/engine/start.js

@@ -12,4 +12,5 @@ export default async function() {
 
   this.isActive = true
   this.fetchUpdate()
+  console.debug('engine started')
 }

client/src/plugins/engine/stop.js

@@ -1,4 +1,5 @@
 export default function() {
   if (!this.isActive) return
   this.shouldStop = true
+  console.debug('shutting down engine')
 }