From c42777a3ae3766e74d4fac7e521dce6ce2a2f0e2 Mon Sep 17 00:00:00 2001
From: Rob Spectre <rob@brooklynhacker.com>
Date: Fri, 26 Aug 2022 18:09:14 -0400
Subject: [PATCH] 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-lock.json                             |  32 +++++
 package.json                                  |   2 +
 src/assets/styles/reveal_theme.scss           |   9 --
 src/components/HelpComputer/ChooseWinner.vue  |  66 ++++++++++
 src/components/HelpComputer/GenerateImage.vue | 121 ++++++++++++++++++
 .../HelpComputer/HelpComputerRound.vue        |  58 +++++++++
 src/components/HelpComputer/ImageIntro.vue    |  25 ++++
 src/components/base/Reveal.vue                |   1 +
 src/components/base/TextInput.vue             |  56 ++++++++
 src/services/websocket.js                     |   2 +
 src/store/index.js                            |  15 +++
 11 files changed, 378 insertions(+), 9 deletions(-)
 create mode 100644 src/components/HelpComputer/ChooseWinner.vue
 create mode 100644 src/components/HelpComputer/GenerateImage.vue
 create mode 100644 src/components/HelpComputer/HelpComputerRound.vue
 create mode 100644 src/components/HelpComputer/ImageIntro.vue
 create mode 100644 src/components/base/TextInput.vue
 create mode 100644 src/services/websocket.js

diff --git a/package-lock.json b/package-lock.json
index 59ea64d..f7795ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,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",
@@ -4598,6 +4600,18 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/epic-spinners": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/epic-spinners/-/epic-spinners-1.1.0.tgz",
+      "integrity": "sha512-nFyHmFuBFO6LpT37Xu68lQqKDYK50gXoZ6Yj/mpoS1Uslku0YkMtAGDzH8nbeFSiifAIoT1rUDB3S7e/ifnnxg==",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.2"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -11573,6 +11587,14 @@
       "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -15675,6 +15697,11 @@
         "tapable": "^0.1.8"
       }
     },
+    "epic-spinners": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/epic-spinners/-/epic-spinners-1.1.0.tgz",
+      "integrity": "sha512-nFyHmFuBFO6LpT37Xu68lQqKDYK50gXoZ6Yj/mpoS1Uslku0YkMtAGDzH8nbeFSiifAIoT1rUDB3S7e/ifnnxg=="
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -20837,6 +20864,11 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index f6da8be..0c40d5a 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/styles/reveal_theme.scss b/src/assets/styles/reveal_theme.scss
index 037a0f6..0e4ef73 100644
--- a/src/assets/styles/reveal_theme.scss
+++ b/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;
 }
diff --git a/src/components/HelpComputer/ChooseWinner.vue b/src/components/HelpComputer/ChooseWinner.vue
new file mode 100644
index 0000000..801eea8
--- /dev/null
+++ b/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>
diff --git a/src/components/HelpComputer/GenerateImage.vue b/src/components/HelpComputer/GenerateImage.vue
new file mode 100644
index 0000000..968a361
--- /dev/null
+++ b/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>
diff --git a/src/components/HelpComputer/HelpComputerRound.vue b/src/components/HelpComputer/HelpComputerRound.vue
new file mode 100644
index 0000000..dfe0906
--- /dev/null
+++ b/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>
diff --git a/src/components/HelpComputer/ImageIntro.vue b/src/components/HelpComputer/ImageIntro.vue
new file mode 100644
index 0000000..e1ed0ca
--- /dev/null
+++ b/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>
diff --git a/src/components/base/Reveal.vue b/src/components/base/Reveal.vue
index e065fc7..0e5a733 100644
--- a/src/components/base/Reveal.vue
+++ b/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
       })
     }
   }
diff --git a/src/components/base/TextInput.vue b/src/components/base/TextInput.vue
new file mode 100644
index 0000000..b99147d
--- /dev/null
+++ b/src/components/base/TextInput.vue
@@ -0,0 +1,56 @@
+<template lang='pug'>
+div
+  label.text-sm.font-medium.leading-5.text-gray-700(for='inputText')
+  .my-2.bg-white.flex.rounded-md.shadow-sm.mx-20
+    .relative.flex-grow(class='focus-within:z-10')
+      .absolute.inset-y-0.left-0.pl-3.flex.items-center.pointer-events-none
+        ChatAltIcon.h-5.w-5.text-gray-400
+      input.my-2.outline-none.form-input.block.w-full.rounded-none.pl-10.transition.ease-in-out.duration-150(
+        class='sm:text-sm sm:leading-5'
+        :placeholder='placeholder'
+        v-model='inputText'
+        v-on:keydown.enter='emitInput(inputText)'
+      )
+    button.rounded-r-md.flex.items-center.justify-center.border-2.text-white.px-5(
+      v-on:click='emitInput(inputText)'
+      :style='backgroundColor'
+    )
+      SaveIcon.h-5.w-5
+</template>
+
+<script>
+import { SaveIcon, ChatAltIcon } from '@heroicons/vue/solid'
+
+export default {
+  name: 'TextInput',
+  components: {
+    SaveIcon,
+    ChatAltIcon
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: 'Input text here...'
+    },
+    buttonColor: {
+      type: String,
+      default: '#00b1e1'
+    }
+  },
+  data () {
+    return {
+      inputText: ''
+    }
+  },
+  computed: {
+    backgroundColor () {
+      return { backgroundColor: this.buttonColor }
+    }
+  },
+  methods: {
+    emitInput (input) {
+      this.$emit('inputEvent', { text: input })
+    }
+  }
+}
+</script>
diff --git a/src/services/websocket.js b/src/services/websocket.js
new file mode 100644
index 0000000..699f3ef
--- /dev/null
+++ b/src/services/websocket.js
@@ -0,0 +1,2 @@
+const websocket = new WebSocket('ws://localhost:8000/ws')
+export default websocket
diff --git a/src/store/index.js b/src/store/index.js
index ef4b6c4..2f0374d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -45,6 +45,21 @@ const getters = {
       players.push(player)
     })
     return players.sort((a, b) => a.score - b.score).reverse()
+  },
+  getPlayersFromButton (state) {
+    const players = []
+    let index = state.game.playerIndex
+
+    for (let i = 0; i < state.game.players.length; i++) {
+      if (state.game.players[index] === undefined) {
+        index = 0
+      }
+
+      players.push(state.game.players[index])
+      index++
+    }
+
+    return players
   }
 }