code raffle

snazzyfox · Nov 25, 2023 · 5021888 · 5021888
1 parent f8c1e95
commit 5021888
Show file tree

Hide file tree

Showing 12 changed files with 979 additions and 8,717 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,15 +22,16 @@
     "pinia": "^2.0.23",
     "quasar": "^2.10.0",
     "spotify-web-api-js": "^1.5.2",
+    "tmi.js": "^1.8.5",
     "twitch-js": "^2.0.0-beta.43",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@quasar/app-webpack": "^3.6.2",
-    "@types/lz-string": "^1.3.34",
     "@types/node": "^18.11.0",
+    "@types/tmi.js": "^1.8.6",
     "@types/webfontloader": "^1.6.35",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",

diff --git a/src/api/twitch.ts b/src/api/twitch.ts
@@ -152,3 +152,11 @@ export async function sendAnnouncement(broadcaster_id: string, message: string,
     await twitchApi.post('chat/announcements', { json: { message, color }, searchParams });
   }
 }
+
+export async function sendWhisper(user_id: string, message: string) {
+  const store = twitchAuthStore();
+  if (store.currentUser) {
+    const searchParams = { from_user_id: store.currentUser.id, to_user_id: user_id };
+    await twitchApi.post('whispers', { json: { message }, searchParams });
+  }
+}
diff --git a/src/components/RevealPasswordInput.vue b/src/components/RevealPasswordInput.vue
@@ -0,0 +1,34 @@
+<template>
+  <q-input
+    :model-value="$props.modelValue"
+    @update:model-value="($event) => $emit('update:modelValue', $event)"
+    :type="showSecret ? 'text' : 'password'"
+    :label="$props.label"
+    :hint="$props.hint"
+  >
+    <template v-slot:append>
+      <q-btn
+        :icon="showSecret ? ionEyeOutline : ionEyeOffOutline"
+        flat
+        round
+        @click="showSecret = !showSecret"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { ionEyeOffOutline, ionEyeOutline } from '@quasar/extras/ionicons-v7';
+
+defineProps<{
+  modelValue: string;
+  label?: string;
+  hint?: string;
+}>();
+
+defineEmits(['update:modelValue']);
+
+const showSecret = ref(false);
+</script>
diff --git a/src/components/SliderField.vue b/src/components/SliderField.vue
@@ -9,6 +9,7 @@
         :max="max"
         :step="step"
         :disable="disable"
+        label
       />
       <input
         class="no-border col-3 vertical-middle"

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -3,8 +3,13 @@
     <q-header reveal bordered class="bg-primary text-white" height-hint="90">
       <q-toolbar>
         <q-toolbar-title> <q-icon :name="mdiSword" /> Snazzy's Twitch Tools </q-toolbar-title>
-        <q-btn flat :icon="ionLogoGithub" href="https://github.com/snazzyfox/twitch-tools" target="_blank"
-          label="Github" />
+        <q-btn
+          flat
+          :icon="ionLogoGithub"
+          href="https://github.com/snazzyfox/twitch-tools"
+          target="_blank"
+          label="Github"
+        />
       </q-toolbar>
 
       <q-tabs align="left">
@@ -13,6 +18,7 @@
         <q-route-tab to="/spotify" label="Spotify Overlay" />
         <q-route-tab to="/chat-timer" label="Chat Timer" />
         <q-route-tab to="/clip-search" label="Clip Search" />
+        <q-route-tab to="/code-raffle" label="Code Raffle" />
       </q-tabs>
     </q-header>
 

diff --git a/src/pages/ChatTimer.vue b/src/pages/ChatTimer.vue
@@ -2,7 +2,7 @@
   <q-page class="q-ma-xl q-gutter-md page-width">
     <div class="text-h4">Chat-Based Twitch Timer</div>
     <p>
-      A timer that counts either down in your Twitch chat. Control the timer on this page. This page
+      A timer that counts down or up in your Twitch chat. Control the timer on this page. This page
       must remain open at all times for the timer to continue running.
     </p>
     <p>
@@ -11,36 +11,81 @@
     <q-form ref="form" v-show="!isTimerRunning">
       <div class="text-h5 q-my-md">Configuration</div>
       <twitch-signin v-model="config.twitchAuth" @update:model-value="autofillChannel" />
-      <twitch-channel-selection v-model="config.channelName" v-model:user-id="config.twitchUserId" label="Twitch Channel"
-        hint="Twitch Channel to send timing messages to" required />
+      <twitch-channel-selection
+        v-model="config.channelName"
+        v-model:user-id="config.twitchUserId"
+        label="Twitch Channel"
+        hint="Twitch Channel to send timing messages to"
+        required
+      />
 
       <div class="q-gutter-md row">
         <q-input type="number" v-model.number="config.totalTime.minutes" suffix="minutes" />
         <q-input type="number" v-model.number="config.totalTime.seconds" suffix="seconds" />
       </div>
 
-      <q-input type="number" v-model.number="config.countdownSeconds" label="Countdown Time (seconds)"
-        hint="Number of seconds to count down before starting the actual timer" />
-      <q-field label="Message Interval (seconds)" v-model="config.messageIntervalSeconds"
-        hint="Send a chat message every this many seconds">
-        <q-slider v-model="config.messageIntervalSeconds" :min="5" :max="120" :step="5" snap label label-always />
+      <q-input
+        type="number"
+        v-model.number="config.countdownSeconds"
+        label="Countdown Time (seconds)"
+        hint="Number of seconds to count down before starting the actual timer"
+      />
+      <q-field
+        label="Message Interval (seconds)"
+        v-model="config.messageIntervalSeconds"
+        hint="Send a chat message every this many seconds"
+      >
+        <q-slider
+          v-model="config.messageIntervalSeconds"
+          :min="5"
+          :max="120"
+          :step="5"
+          snap
+          label
+          label-always
+        />
       </q-field>
-      <q-field label="Final Countdown Time (seconds)" v-model="config.finalCountdownSeconds"
-        hint="Send a chat message every second during the last few seconds">
-        <q-slider v-model="config.finalCountdownSeconds" :min="0" :max="15" snap label label-always />
+      <q-field
+        label="Final Countdown Time (seconds)"
+        v-model="config.finalCountdownSeconds"
+        hint="Send a chat message every second during the last few seconds"
+      >
+        <q-slider
+          v-model="config.finalCountdownSeconds"
+          :min="0"
+          :max="15"
+          snap
+          label
+          label-always
+        />
       </q-field>
-      <q-checkbox v-model="config.useAnnounce" label="Send messages as announcements by prepending /announce" />
+      <q-checkbox
+        v-model="config.useAnnounce"
+        label="Send messages as announcements by prepending /announce"
+      />
     </q-form>
 
     <div class="q-mt-lg">
       <q-btn-group>
-        <q-btn v-if="!isTimerRunning" color="primary" :icon="ionTimerOutline" @click="startTimer"
-          :disabled="!config.twitchAuth || !config.channelName">Start Timer</q-btn>
+        <q-btn
+          v-if="!isTimerRunning"
+          color="primary"
+          :icon="ionTimerOutline"
+          @click="startTimer"
+          :disabled="!config.twitchAuth || !config.channelName"
+          >Start Timer</q-btn
+        >
       </q-btn-group>
       <div v-if="isTimerRunning">
         <q-banner class="bg-info text-white">
           <template v-slot:avatar>
-            <q-circular-progress :value="timeRemainingSec!" :min="0" :max="totalSeconds" size="48px" color="orange" />
+            <q-circular-progress
+              :value="timeRemainingSec!"
+              :min="0"
+              :max="totalSeconds"
+              size="48px"
+              color="orange"
+            />
           </template>
           <div>
             Timer is running! Time remaining:
@@ -50,7 +95,9 @@
             Last chat message sent at: <code class="text-h4">{{ formatTime(lastSentTime) }}</code>
           </div>
           <template v-slot:action>
-            <q-btn color="negative" :icon="ionStopCircleOutline" @click="stopTimer">Stop Timer Now</q-btn>
+            <q-btn color="negative" :icon="ionStopCircleOutline" @click="stopTimer"
+              >Stop Timer Now</q-btn
+            >
           </template>
         </q-banner>
       </div>