index.html

<title>kinda.fun CAMEO</title><meta name=viewport content="width=device-width,initial-scale=1"><link rel=preconnect href=https://fonts.gstatic.com><link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;800&amp;family=Libre+Baskerville:wght@400;700&amp;display=swap" rel=stylesheet><link href=css/cameo.css rel=stylesheet><div id=app v-cloak=v-cloak><main class=title-screen v-if=!game.started><div class=splash><div class=inside><div class=logo-holder><figure class=logo><img src=/svg/wrongest.svg></figure></div><div class=help-holder v-if=!ui.watchingVideo><strong>Need instructions? </strong><a @click=watchVideo()>Click here.</a><br>I promise I'll try to make it quick.</div><div class=video-holder v-if=ui.watchingVideo><figure class=video><iframe id=ytplayer type=text/html src="https://www.youtube-nocookie.com/embed/2jE6ifrz9bU?autoplay=1&amp;controls=0&amp;fs=0&amp;modestbranding=1&amp;playsinline=1&amp;color=white" frameborder=0 allowfullscreen></iframe></figure><figcaption><button class=close-video @click="ui.watchingVideo = false">Okay, close this video.</button></figcaption></div></div></div><div class=create><button @click=createRoom()>Create a New Room</button></div><div class=or><span>or</span></div><div class=join><form @submit.prevent=joinRoom()><button v-if="roomCode &amp;&amp; roomCode.length &gt; 3" type=submit>Join this room.</button> <input id=EnterRoomCode minlength=4 maxlength=4 required v-model=roomCode @input="roomCode = $event.target.value.toUpperCase()" placeholder="Enter A Room Code"><div class=enter-a-room-code></div></form></div></main><main><div class=three-to-compare><draggable class="list-group unranked" :list=round.leftSide group=people :options="{ disabled : ui.animateCameoIndex &lt; 3 }" :class="{ 'no-move-cursor' : ui.animateCameoIndex &lt; 3 }" @start="isDragging = true" @end="isDragging = false" v-if="computedGuessingPhase == 'sort' || computedGuessingPhase == 'submit'"><div class="cameo list-group-item" v-for="(element, index) in round.leftSide" :key=index><figure><img :src="'/cameos/'+element.slug+'.jpg'"></figure><figcaption><div class=name>{{ element.name }}</div><div class=desc v-if=element.desc>{{element.desc}}</div></figcaption></div></draggable><draggable class="list-group ranked" :list=round.rightSide group=people v-if="computedGuessingPhase != 'answers' &amp;&amp; computedGuessingPhase != 'finished'"><div class="cameo list-group-item" v-for="(element, index) in round.rightSide" :rank="(index + 1)" :key=index><figure><img :src="'/cameos/'+element.slug+'.jpg'"></figure><figcaption><div class=rank><sup>#</sup><span>{{(index + 1)}}</span></div><div class=name>{{ element.name }}</div><div class=desc v-if=element.desc>{{element.desc}}</div></figcaption></div><div class=help-text v-if="round.rightSide.length &lt; 1"><div class=inside v-if=ui.showDragHelp>place guesses here</div></div></draggable><div class="list-group correct" v-if="ui.orderConfirmed || computedGuessingPhase == 'finished'"><div class="cameo off-table" v-for="(element, index) in round.correctSide" :rank="(index + 1)" :key=index><figure><img :src="'/cameos/'+element.slug+'.jpg'"></figure><figcaption><div class=name>{{ element.name }}</div><div class=guess-value v-if="round.guessValueIndex == index"><form class=guess-value @submit.prevent=submitCameoValueGuess() v-if=ui.itsTimeToGuessValue><div class=value><span>$</span> <input placeholder=??? type=number v-model=ui.valueGuess :min=ui.valueGuessMin :max=ui.valueGuessMax> <button v-if="ui.valueGuess &gt; 0"><svg fill=#1A1A1A xmlns=http://www.w3.org/2000/svg viewBox="0 0 245 245" fill-rule=evenodd clip-rule=evenodd shape-rendering=geometricPrecision text-rendering=geometricPrecision image-rendering=optimizeQuality><path d="M122 0C55 0 0 55 0 122c0 34 14 65 36 87s53 36 86 36c68 0 123-55 123-123C245 55 190 0 122 0zM62 103l36 36 85-85 26 26L98 191l-62-62 26-26z" fill=#1a1a1a fill-rule=nonzero></path></svg></button></div><div class="fake-tooltip arrow_box"><div class=text>Now guess {{round.correctSide[round.guessValueIndex].name}}'s Cameo value</div></div></form><div class=value v-else-if=round.valueGuessed>{{dollars(element.value)}}</div><div class=value v-else=v-else>$???</div></div><div class=value v-else=v-else>{{dollars(element.value)}}</div></figcaption></div></div><div class="list-group guessed ranked" v-if="computedGuessingPhase == 'answers' || computedGuessingPhase == 'finished'"><div class=cameo v-for="(element, index) in round.rightSide" :rank="(index + 1)" :key=index v-bind:class="{ correct: round.rightSide[index] == round.correctSide[index], incorrect: round.rightSide[index] != round.correctSide[index] }"><figure><img :src="'/cameos/'+element.slug+'.jpg'"></figure><figcaption><div class=rank><sup>#</sup><span>{{(index + 1)}}</span></div><div class=name>{{ element.name }}</div><div class=desc v-if=element.desc>{{element.desc}}</div></figcaption></div><div class=help-text v-if="round.rightSide.length &lt; 1"></div></div></div><div class="underbanner hud"><div class=score><div v-if="my.score &gt; 0">{{my.score}} Points</div><div v-else=v-else>No Points</div></div><div class=interface><div class=sort-the-above v-if="computedGuessingPhase == 'sort'"><span>Sort the above by their relative Cameo value.</span></div><div class=button-holder v-else-if="computedGuessingPhase == 'submit'"><button @click=submitSortOrder()>Submit Answers</button></div><div class=button-holder v-else-if="computedGuessingPhase == 'answers'"><span v-if=ui.itsTimeToGuessValue><button @click=submitCameoValueGuess()>Valuate {{round.correctSide[round.guessValueIndex].name}}</button></span></div><div class=button-holder v-else-if="computedGuessingPhase == 'finished'"><span v-if=ui.showNextRoundButton><button @click=startNextRound()>Okay, Next Round</button></span></div></div><div class=round><div v-if="round.number &gt; 0">Round {{round.number}}</div></div></div></main></div><script src=public/js/libraries/vue.full.js></script><script>const testing=!0</script><script src=public/js/libraries/jquery.min.js></script><script src=//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js></script><script src=//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js></script><script src=public/js/libraries/vue-toast-notification.min.js></script><link href=public/css/libraries/vue-toast-notification.css rel=stylesheet><script src=public/js/min/cameo.min.js?updated2021-01-10@08:55:59></script>