1) Created new game HelpComputer where players try to get a stable

   diffusion model to look as closely to a given image as possible.
2) Added `epic-spinners` and `uuid` to dependencies.
3) Removed `a` tag styling from the `Reveal` theme.
4) Created new base reusable component `TextInput` for longer form text
   in games.
5) Added a basic websocket service to share for components.
6) Added new getter to `useGameStore` called `getPlayersFromButton`
   which will provide a list of the players from wherever the button is
   in the game.

package.json

@@ -18,12 +18,14 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.5",
     "animate.css": "^4.1.0",
+    "epic-spinners": "^1.1.0",
     "gsap": "^3.10.2",
     "pinia": "^2.0.13",
     "pinia-plugin-persistedstate": "^1.5.1",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.0.0",
     "reveal.js": "^4.3.0",
+    "uuid": "^8.3.2",
     "vue": "^3.2.31",
     "vue-advanced-chat": "https://github.com/antoine92190/vue-advanced-chat/tarball/next",
     "vue-router": "^4.0.13",

src/assets/styles/reveal_theme.scss

@@ -176,15 +176,6 @@ html.img-top div.slide-background.present {
   margin: unset;
 }
 
-.reveal a {
-  color: $backgroundColor;
-}
-
-.reveal a:hover {
-  color: $backgroundColor;
-  background-color: $childsafeOrange;
-}
-
 .opacity-ghost {
   @apply bg-blue text-white rounded;
 }

src/components/HelpComputer/ChooseWinner.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+GameContentWithSidebar
+  template(v-slot:content)
+    .flex.flex-col.justify-center.items-center.h-screen.w-full
+      .grid.grid-cols-3.gap-2
+        a(
+          class='hover:bg-white'
+          href="#"
+          v-for='image in images'
+          @click.prevent.stop='chooseWinner(image)'
+        )
+          img(
+            :src='/images/ + image.imagePath'
+          )
+  template(v-slot:footer)
+    h1 {{ title }}
+    WinnerCard(
+      v-if='winners.length > 0'
+      :winners='winners'
+      answerName='That'
+      answerValue='a dead ringer'
+      :headerImage='winningImage'
+    )
+</template>
+
+<script>
+import { mapActions } from 'pinia'
+import { useGameStore } from '@/store'
+
+import GameContentWithSidebar from '@/components/base/GameContentWithSidebar.vue'
+import WinnerCard from '@/components/base/WinnerCard.vue'
+
+export default {
+  name: 'ChooseWinner',
+  components: {
+    GameContentWithSidebar,
+    WinnerCard
+  },
+  props: {
+    images: Array,
+    title: String,
+    prize: Number
+  },
+  data () {
+    return {
+      winners: [],
+      winningImage: null
+    }
+  },
+  methods: {
+    chooseWinner (image) {
+      this.increasePlayerScore(image.playerName, this.prize)
+
+      this.winningImage = '/images/' + image.imagePath
+      this.winners.push(image.playerName)
+
+      const audio = new Audio('/sounds/fanfare.mp3')
+      audio.volume = 0.5
+      audio.play()
+
+      this.increasePlayerButton()
+    },
+    ...mapActions(useGameStore, ['increasePlayerScore', 'increasePlayerButton'])
+  }
+}
+</script>

src/components/HelpComputer/GenerateImage.vue

@@ -0,0 +1,121 @@
+<template lang='pug'>
+GameContentWithSidebar
+  template(v-slot:content)
+    TextInput(
+      v-if='!loading'
+      placeholder='Input prompt to generate image...'
+      @inputEvent='handleInput'
+      :buttonColor='buttonColor'
+    )
+    .flex.grow.justify-center
+      AtomSpinner(
+        v-if='loading'
+        :animation-duration='1000'
+        :size='800'
+        color='#00b1e1'
+      )
+      .flex-col.justify-center.items-center(v-if='!loading')
+        h5(v-if='prompt !== false') {{ prompt }}
+        .flex.flex-none.justify-center.items-center(v-if='!loading')
+          img.py-5(
+            v-if='!loading && (image !== false)'
+            :src='image'
+          )
+    .flex.flex-initial.justify-center.items-center.w-full.border-t-4
+      img.pt-5(
+        :src='comparisonImage'
+      )
+  template(v-slot:footer)
+    h1(v-if='playerConfirmed') {{ playerConfirmed }}
+    h1(v-else) {{ playerName }}
+</template>
+
+<script>
+import GameContentWithSidebar from '@/components/base/GameContentWithSidebar.vue'
+
+import TextInput from '@/components/base/TextInput.vue'
+
+import { AtomSpinner } from 'epic-spinners'
+
+import websocket from '@/services/websocket.js'
+
+import { v4 as uuidv4 } from 'uuid'
+
+export default {
+  name: 'GenerateImage',
+  components: {
+    GameContentWithSidebar,
+    TextInput,
+    AtomSpinner
+  },
+  props: {
+    comparisonImage: String,
+    playerName: String
+  },
+  data () {
+    return {
+      loading: false,
+      connected: false,
+      generated: false,
+      image: false,
+      prompt: false,
+      id: null,
+      playerConfirmed: null
+    }
+  },
+  computed: {
+    buttonColor () {
+      if (this.connected === true) {
+        return '#00bc70'
+      } else {
+        return '#f36c3f'
+      }
+    }
+  },
+  created () {
+    this.connection = websocket
+
+    this.connection.addEventListener('open', () => {
+      this.connected = true
+    })
+
+    this.connection.addEventListener('close', () => {
+      this.connected = false
+    })
+
+    this.connection.addEventListener('message', this.handleMessage)
+
+    this.id = uuidv4()
+  },
+  methods: {
+    handleInput (input) {
+      this.connection.send(JSON.stringify({
+        name: 'Image Request',
+        prompt: input.text,
+        playerName: this.playerName,
+        id: this.id
+      }))
+    },
+    handleMessage (event) {
+      event = JSON.parse(event.data)
+
+      if (event.id === this.id) {
+        if (event.name === 'Loading') {
+          this.loading = true
+        } else if (event.name === 'Image Response') {
+          this.loading = false
+          this.generated = true
+
+          this.prompt = event.prompt
+          this.image = '/images/' + event.imagePath
+
+          this.playerConfirmed = event.playerName
+          this.$emit('imageGenerated', event)
+        } else {
+          console.log(event)
+        }
+      }
+    }
+  }
+}
+</script>

src/components/HelpComputer/HelpComputerRound.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+ImageIntro(
+  :image='image'
+  :title='title'
+)
+GenerateImage(
+  v-for='player in getPlayersFromButton'
+  :comparisonImage='image'
+  :playerName='player.name'
+  @imageGenerated='handleImageGenerated'
+)
+ChooseWinner(
+  :images='images'
+  :title='title'
+  :prize='prize'
+)
+</template>
+
+<script>
+import ImageIntro from '@/components/HelpComputer/ImageIntro.vue'
+import GenerateImage from '@/components/HelpComputer/GenerateImage.vue'
+import ChooseWinner from '@/components/HelpComputer/ChooseWinner.vue'
+
+import { mapGetters } from 'pinia'
+import { useGameStore } from '@/store'
+
+export default {
+  name: 'HelpComputerRound',
+  components: {
+    GenerateImage,
+    ImageIntro,
+    ChooseWinner
+  },
+  props: {
+    image: String,
+    title: String,
+    prize: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    ...mapGetters(useGameStore, ['getPlayersFromButton'])
+  },
+  data () {
+    return {
+      images: [],
+      winner: null,
+      completed: false
+    }
+  },
+  methods: {
+    handleImageGenerated (event) {
+      this.images.push(event)
+    }
+  }
+}
+</script>

src/components/HelpComputer/ImageIntro.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+GameContentWithSidebar
+  template(v-slot:content)
+    .flex.flex-col.justify-center.items-center.h-screen.w-full
+      img.pt-5(
+        :src='image'
+      )
+  template(v-slot:footer)
+    h1 {{ title }}
+</template>
+
+<script>
+import GameContentWithSidebar from '@/components/base/GameContentWithSidebar.vue'
+
+export default {
+  name: 'ImageIntro',
+  components: {
+    GameContentWithSidebar
+  },
+  props: {
+    image: String,
+    title: String
+  }
+}
+</script>

src/components/base/Reveal.vue

@@ -55,6 +55,7 @@ export default {
       this.deck.initialize().then(() => {
         this.deck.layout()
         this.$emit('reveal-rendered', this.deck)
+        window.deck = this.deck
       })
     }
   }