Merge pull request #1 from coreyg142/tempGraveyard

Author: coreyg142

viewer-queue-frontend/src/components/GraveComponent.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="queuebox">
+    <h2>Murdered Pokemons</h2>
+    <div class="queue">
+      <TransitionGroup name="list" tag="ol" reversed>
+        <li v-for="(key, val) in queue" :key="key" class="list-item">
+          <QueueItemComponent
+            :name="val"
+            :showModTools="loggedIn"
+            :buttonsToShow="['del']"
+          />
+        </li>
+      </TransitionGroup>
+      <Transition name="emptyMsg"
+        ><p v-if="Object.keys(queue).length === 0" class="empty">
+          The graveyard is empty.
+        </p>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { state } from "@/socket";
+import store from "@/store";
+import QueueItemComponent from "./QueueItemComponent.vue";
+
+export default defineComponent({
+  name: "GraveComponent",
+
+  components: {
+    QueueItemComponent,
+  },
+  computed: {
+    queue() {
+      return state.graveyard;
+    },
+    loggedIn() {
+      return store.state.loggedIn;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.queue {
+  text-align: left;
+  list-style: decimal;
+  position: relative;
+  width: fit-content;
+  max-width: 60vw;
+  overflow-wrap: break-word;
+  margin: 0 auto;
+}
+
+.list-item {
+  text-align: left;
+  font-size: 1.5em;
+  padding: 0.5em;
+  transition: all 0.5s ease;
+}
+
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+  opacity: 0;
+}
+
+.emptyMsg-enter-active,
+.emptyMsg-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.emptyMsg-enter-from,
+.emptyMsg-leave-to {
+  opacity: 0;
+}
+
+.empty {
+  color: gray;
+  font-style: italic;
+  text-align: center;
+  margin-top: 1em;
+}
+</style>

viewer-queue-frontend/src/components/PoppedComponent.vue

@@ -8,6 +8,7 @@
             :name="item"
             :showModTools="loggedIn"
             :buttonsToShow="['del']"
+            :killed="isDeadInCurrentRun(item)"
           />
         </li>
       </TransitionGroup>
@@ -38,6 +39,13 @@ export default defineComponent({
       return store.state.loggedIn;
     },
   },
+  methods: {
+    isDeadInCurrentRun(name: string) {
+      return (
+        Object.keys(state.graveyard).includes(name) && state.graveyard[name]
+      );
+    },
+  },
 });
 </script>
 

viewer-queue-frontend/src/components/QueueItemComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="display: inline-block">
-    <span class="text">{{ name }}</span>
+    <span class="text" :class="killedClass">{{ name }}</span>
     <!-- <font-awesome-icon v-if="showModTools" icon="fa-solid fa-user-secret" /> -->
     <span v-if="showModTools" class="modButton">
       <font-awesome-icon
@@ -27,7 +27,7 @@ import axios from "axios";
 export default defineComponent({
   name: "QueueItemComponent",
   inject: ["apiUrl"],
-  props: ["name", "showModTools", "buttonsToShow"],
+  props: ["name", "showModTools", "buttonsToShow", "killed"],
 
   computed: {
     loggedIn() {
@@ -39,6 +39,9 @@ export default defineComponent({
     showDel() {
       return this.buttonsToShow.includes("del");
     },
+    killedClass() {
+      return this.killed ? "killed" : "";
+    },
   },
   methods: {
     async popName() {
@@ -81,6 +84,10 @@ export default defineComponent({
   margin-left: 0.1em;
 }
 
+.killed {
+  text-decoration: line-through;
+}
+
 .green {
   color: #00ff00;
 }

viewer-queue-frontend/src/socket.ts

@@ -7,6 +7,7 @@ export const state = reactive({
   connected: false,
   queuedNames: [] as string[],
   poppedNames: [] as string[],
+  graveyard: {} as { [key: string]: boolean },
 });
 
 export const socket = io(apiUrl);
@@ -19,9 +20,14 @@ socket.on("name-popped", (...args) => {
   state.queuedNames = state.queuedNames.filter((name) => name !== args[0]);
 });
 
+socket.on("name-killed", (...args) => {
+  state.graveyard[args[0]] = true;
+});
+
 socket.on("refresh-lists", (...args) => {
   state.queuedNames = args[0];
   state.poppedNames = args[1];
+  state.graveyard = args[2];
 });
 
 socket.on("connect", async () => {
@@ -30,6 +36,7 @@ socket.on("connect", async () => {
   const response = await axios.get(apiUrl + "/queue");
   state.queuedNames = response.data.lists.queued;
   state.poppedNames = response.data.lists.popped;
+  state.graveyard = response.data.lists.graveyard;
 
   const loggedIn = storeState.state.loggedIn;
   if (loggedIn) {

viewer-queue-frontend/src/store/index.ts

@@ -5,7 +5,7 @@ const store = createStore({
     loggedIn: false,
     accessKey: "",
     logInTime: -1,
-    queuedOrPrev: true,
+    activeList: 0,
   },
   getters: {},
   mutations: {
@@ -18,8 +18,8 @@ const store = createStore({
     setLogInTime(state, logInTime: number) {
       state.logInTime = logInTime;
     },
-    setQueuedOrPrev(state, queuedOrPrev: boolean) {
-      state.queuedOrPrev = queuedOrPrev;
+    setActiveList(state, activeList: number) {
+      state.activeList = activeList;
     },
   },
   actions: {
@@ -34,8 +34,8 @@ const store = createStore({
       commit("setLoggedIn", false);
       commit("setLogInTime", -1);
     },
-    setQueuedOrPrev({ commit }, queuedOrPrev: boolean) {
-      commit("setQueuedOrPrev", queuedOrPrev);
+    setActiveList({ commit }, activeList: number) {
+      commit("setActiveList", activeList);
     },
   },
   modules: {},

viewer-queue-frontend/src/views/QueueView.vue

@@ -23,9 +23,9 @@
         role="button"
         tabindex="0"
         class="queueBtn btn"
-        v-on:click="toggleQueue"
-        v-on:keypress.enter="toggleQueue"
-        :class="{ btnActive: queuedOrPrev }"
+        v-on:click="setActiveList(0)"
+        v-on:keypress.enter="setActiveList(0)"
+        :class="{ btnActive: activeList === 0 }"
       >
         <span>Pooled</span>
       </span>
@@ -34,12 +34,23 @@
         role="button"
         tabindex="0"
         class="btn"
-        v-on:click="togglePrev"
-        v-on:keypress.enter="togglePrev"
-        :class="{ btnActive: !queuedOrPrev }"
+        v-on:click="setActiveList(1)"
+        v-on:keypress.enter="setActiveList(1)"
+        :class="{ btnActive: activeList === 1 }"
       >
         <span>Current run</span>
       </span>
+      <!-- <span> | </span>
+      <span
+        role="button"
+        tabindex="0"
+        class="btn"
+        v-on:click="setActiveList(2)"
+        v-on:keypress.enter="setActiveList(2)"
+        :class="{ btnActive: activeList === 2 }"
+      >
+        <span>Graveyard</span>
+      </span> -->
       <div v-if="loggedIn">
         <br />
         <span
@@ -67,6 +78,7 @@ import { mapActions } from "vuex";
 import QueueComponent from "@/components/QueueComponent.vue";
 import PoppedComponent from "@/components/PoppedComponent.vue";
 import QueueItemComponent from "@/components/QueueItemComponent.vue";
+import GraveComponent from "@/components/GraveComponent.vue";
 import AddNameModal from "@/components/AddNameModal.vue";
 import store from "@/store";
 import { state as socketState } from "@/socket";
@@ -78,6 +90,7 @@ export default defineComponent({
   components: {
     QueueComponent,
     PoppedComponent,
+    GraveComponent,
     QueueItemComponent,
     AddNameModal,
   },
@@ -98,15 +111,27 @@ export default defineComponent({
       return store.state.loggedIn;
     },
     dynamicComponent() {
-      if (this.queuedOrPrev) return QueueComponent;
-      return PoppedComponent;
+      // if (this.activeList) return QueueComponent;
+      // return PoppedComponent;
+      switch (this.activeList) {
+        case 0:
+          return QueueComponent;
+        case 1:
+          return PoppedComponent;
+        case 2:
+          return GraveComponent;
+        default:
+          return QueueComponent;
+      }
     },
-    queuedOrPrev() {
-      return store.state.queuedOrPrev;
+    activeList() {
+      return store.state.activeList;
     },
     listAnimationDirection() {
-      if (store.state.queuedOrPrev) return "slideXR";
-      return "slideXL";
+      if (store.state.activeList === 0) return "slideXR";
+      else if (store.state.activeList === 1) return "slideXL";
+      // else if (store.state.activeList === 2) return "slideXL";
+      else return "slideXR";
     },
     mostRecentNameMsg() {
       return socketState.poppedNames.length
@@ -125,13 +150,7 @@ export default defineComponent({
     },
   },
   methods: {
-    ...mapActions(["setQueuedOrPrev"]),
-    toggleQueue() {
-      this.setQueuedOrPrev(true);
-    },
-    togglePrev() {
-      this.setQueuedOrPrev(false);
-    },
+    ...mapActions(["setActiveList"]),
     closeModal() {
       this.showAddModal = false;
     },
@@ -187,7 +206,10 @@ export default defineComponent({
 .slideXL-leave-active,
 .slideY-move,
 .slideY-enter-active,
-.slideY-leave-active {
+.slideY-leave-active,
+.slideYImm-move,
+.slideYImm-enter-active,
+.slideYImm-leave-active {
   transition: all 0.6s ease;
 }
 
@@ -202,12 +224,14 @@ export default defineComponent({
 }
 
 .slideXR-leave-active,
-.slideXL-leave-active {
+.slideXL-leave-active,
+.slideYImm-leave-active {
   position: absolute;
   transition: none;
   opacity: 0;
 }
 
+.slideYImm-enter-from,
 .slideY-enter-from {
   opacity: 0;
   transform: translateY(30px);

viewer-queue-webserver/src/routes/index.ts

@@ -8,3 +8,4 @@ export { default as authenticate } from "./authenticate.js";
 export { default as verifyAuth } from "./verifyauth.js";
 export { default as removeName } from "./remove.js";
 export { default as clearQueues } from "./clearQueues.js";
+export { default as killName } from "./kill.js";

viewer-queue-webserver/src/routes/kill.ts

@@ -0,0 +1,34 @@
+import dotenv from "dotenv";
+import { Request, Response } from "express";
+import { Server } from "socket.io";
+import { killName as kill } from "../utils/names.js";
+import AuthKeyManager from "../utils/authKeyManager.js";
+dotenv.config();
+
+export default async function killName(req: Request, res: Response, io: Server) {
+  const method = req.method;
+  const key = method === "PATCH" ? req.headers?.api_auth : req.query?.key;
+  const name = req.query?.name;
+  const ip = req.headers?.["cf-connecting-ip"] || req.socket.remoteAddress;
+  const verified =
+    typeof key === "string" && typeof ip === "string" ? AuthKeyManager.verifyKey(key, ip) : { valid: false };
+
+  if ((method === "GET" && key === process.env.WRITE_KEY) || (method === "PATCH" && verified.valid)) {
+    let result;
+    if (name && typeof name === "string") {
+      result = await kill(name);
+    } else {
+      res.status(400).json({ error: "No name provided" });
+      return;
+    }
+    if (result.error) {
+      res.status(400).json({ error: result.error });
+      return;
+    }
+    res.status(200).json({ result: result.result, name: result.name });
+    io.emit("name-killed", result.name);
+  } else {
+    res.status(401).json({ error: "Unauthorized" });
+    return;
+  }
+}