Merge pull request #42 from Pandipipas/add-live-commentary-system-under-scoreboard

Add commentary panel and Tekken-style commentary overlay graphic

package.json

@@ -81,6 +81,11 @@
         "file": "scoreboard/main.html",
         "width": 1920,
         "height": 1080
+      },
+      {
+        "file": "commentary/main.html",
+        "width": 1920,
+        "height": 1080
       }
     ]
   },

schemas/commentary.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "leftCommentator": {
+      "type": "string",
+      "default": ""
+    },
+    "rightCommentator": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "leftCommentator",
+    "rightCommentator"
+  ],
+  "default": {
+    "leftCommentator": "",
+    "rightCommentator": ""
+  }
+}

src/browser_shared/replicants.ts

@@ -12,3 +12,5 @@ const thisBundle = 'scoreko-dev';
 export const exampleReplicant = useReplicant<Schemas.ExampleReplicant>('exampleReplicant', thisBundle);
 export const playersReplicant = useReplicant<Schemas.Players>('players', thisBundle);
 export const scoreboardReplicant = useReplicant<Schemas.Scoreboard>('scoreboard', thisBundle);
+
+export const commentaryReplicant = useReplicant<Schemas.Commentary>('commentary', thisBundle);

src/dashboard/example/components/CommentaryPanel.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useCommentaryStore } from '../stores/commentary';
+
+const commentaryStore = useCommentaryStore();
+</script>
+
+<template>
+  <div class="commentary-panel">
+    <div class="row items-center q-mb-md">
+      <div class="text-h4">
+        Commentary
+      </div>
+      <QSpace />
+      <QBtn
+        color="secondary"
+        outline
+        icon="swap_horiz"
+        label="Intercambiar lados"
+        @click="commentaryStore.swapCommentators"
+      />
+    </div>
+
+    <div class="row q-col-gutter-lg">
+      <div class="col-12 col-md-6">
+        <QCard
+          flat
+          bordered
+        >
+          <QCardSection>
+            <div class="text-subtitle1 text-weight-bold">
+              Left side
+            </div>
+          </QCardSection>
+          <QSeparator />
+          <QCardSection>
+            <QInput
+              v-model="commentaryStore.leftCommentator"
+              label="Commentator"
+              dense
+              outlined
+            />
+          </QCardSection>
+        </QCard>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <QCard
+          flat
+          bordered
+        >
+          <QCardSection>
+            <div class="text-subtitle1 text-weight-bold">
+              Right side
+            </div>
+          </QCardSection>
+          <QSeparator />
+          <QCardSection>
+            <QInput
+              v-model="commentaryStore.rightCommentator"
+              label="Commentator"
+              dense
+              outlined
+            />
+          </QCardSection>
+        </QCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.commentary-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

src/dashboard/example/stores/commentary.ts

@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { commentaryReplicant } from '../../../browser_shared/replicants';
+import type { Schemas } from '../../../types';
+
+type Commentary = Schemas.Commentary;
+
+const defaultCommentary: Commentary = {
+  leftCommentator: '',
+  rightCommentator: '',
+};
+
+const normalizeCommentary = (input: unknown): Commentary => {
+  const candidate = typeof input === 'object' && input !== null ? (input as Record<string, unknown>) : {};
+  return {
+    leftCommentator: typeof candidate.leftCommentator === 'string' ? candidate.leftCommentator : '',
+    rightCommentator: typeof candidate.rightCommentator === 'string' ? candidate.rightCommentator : '',
+  };
+};
+
+export const useCommentaryStore = defineStore('commentary', () => {
+  const commentary = ref<Commentary>({ ...defaultCommentary });
+  const replicant = commentaryReplicant;
+  const isApplyingReplicant = ref(false);
+
+  watch(
+    () => replicant?.data,
+    (value) => {
+      if (!value) {
+        return;
+      }
+      isApplyingReplicant.value = true;
+      commentary.value = normalizeCommentary(value);
+      isApplyingReplicant.value = false;
+    },
+    { deep: true, immediate: true },
+  );
+
+  watch(
+    commentary,
+    (value) => {
+      if (isApplyingReplicant.value || !replicant) {
+        return;
+      }
+      replicant.data = normalizeCommentary(value);
+      replicant.save();
+    },
+    { deep: true, flush: 'sync' },
+  );
+
+  const leftCommentator = computed({
+    get: () => commentary.value.leftCommentator,
+    set: (value: string) => {
+      commentary.value = {
+        ...commentary.value,
+        leftCommentator: value,
+      };
+    },
+  });
+
+  const rightCommentator = computed({
+    get: () => commentary.value.rightCommentator,
+    set: (value: string) => {
+      commentary.value = {
+        ...commentary.value,
+        rightCommentator: value,
+      };
+    },
+  });
+
+  const swapCommentators = () => {
+    commentary.value = {
+      leftCommentator: commentary.value.rightCommentator,
+      rightCommentator: commentary.value.leftCommentator,
+    };
+  };
+
+  return {
+    commentary,
+    leftCommentator,
+    rightCommentator,
+    swapCommentators,
+  };
+});

src/dashboard/example/views/Dashboard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 import BracketPanel from '../components/BracketPanel.vue';
+import CommentaryPanel from '../components/CommentaryPanel.vue';
 import ScoreboardPanel from '../components/ScoreboardPanel.vue';
 
 defineOptions({ name: 'DashboardView' });
@@ -12,14 +13,25 @@ useHead({ title: 'Dashboard' });
   <QPage class="q-pa-lg">
     <div class="row q-col-gutter-lg items-start dashboard-panels q-mt-lg">
       <div class="col-12 col-lg-6">
-        <QCard
+        <div class="column q-gutter-lg">
-          bordered
+          <QCard
-          class="dashboard-panel-card"
+            bordered
-        >
+            class="dashboard-panel-card"
-          <QCardSection class="dashboard-panel-content">
+          >
-            <ScoreboardPanel />
+            <QCardSection class="dashboard-panel-content">
-          </QCardSection>
+              <ScoreboardPanel />
-        </QCard>
+            </QCardSection>
+          </QCard>
+
+          <QCard
+            bordered
+            class="dashboard-panel-card"
+          >
+            <QCardSection class="dashboard-panel-content">
+              <CommentaryPanel />
+            </QCardSection>
+          </QCard>
+        </div>
       </div>
       <div class="col-12 col-lg-6">
         <QCard

src/extension/util/replicants.ts

@@ -19,3 +19,11 @@ function hasNoDefault<T>(name: string) {
 export const exampleReplicant = hasDefault<Schemas.ExampleReplicant>('exampleReplicant');
 export const playersReplicant = hasDefault<Schemas.Players>('players');
 export const scoreboardReplicant = hasDefault<Schemas.Scoreboard>('scoreboard');
+
+export const commentaryReplicant = nodecg.Replicant<Schemas.Commentary>('commentary', {
+  defaultValue: {
+    leftCommentator: '',
+    rightCommentator: '',
+  },
+  persistent: false,
+});

src/graphics/commentary/main.ts

@@ -0,0 +1,8 @@
+import { createHead } from '@unhead/vue/client';
+import { createApp } from 'vue';
+import App from './main.vue';
+
+const app = createApp(App);
+const head = createHead();
+app.use(head);
+app.mount('#app');

src/graphics/commentary/main.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+import { computed } from 'vue';
+import { commentaryReplicant } from '../../browser_shared/replicants';
+import type { Schemas } from '../../types';
+
+useHead({ title: 'Commentary' });
+
+const defaultCommentary: Schemas.Commentary = {
+  leftCommentator: '',
+  rightCommentator: '',
+};
+
+const commentary = computed<Schemas.Commentary>(() => commentaryReplicant?.data ?? defaultCommentary);
+
+const leftCommentator = computed(() => commentary.value.leftCommentator || 'COMMENTATOR 1');
+const rightCommentator = computed(() => commentary.value.rightCommentator || 'COMMENTATOR 2');
+</script>
+
+<template>
+  <div id="commentary-overlay">
+    <div class="bar bar-left">
+      <div class="bar-glow" />
+      <div class="label">
+        COMMENTARY
+      </div>
+      <div class="name">
+        {{ leftCommentator }}
+      </div>
+    </div>
+
+    <div class="center-divider">
+      <div class="divider-core">
+        VS
+      </div>
+    </div>
+
+    <div class="bar bar-right">
+      <div class="bar-glow" />
+      <div class="label">
+        COMMENTARY
+      </div>
+      <div class="name">
+        {{ rightCommentator }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:global(body) {
+  margin: 0;
+  background: transparent;
+  overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#commentary-overlay {
+  position: fixed;
+  left: 50%;
+  bottom: 56px;
+  transform: translateX(-50%);
+  width: min(1480px, calc(100vw - 80px));
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: end;
+  gap: 20px;
+  pointer-events: none;
+}
+
+.bar {
+  position: relative;
+  height: 82px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 10px 28px;
+  border: 2px solid rgba(255, 255, 255, 0.42);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.32),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
+    0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+.bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+  background: repeating-linear-gradient(
+    135deg,
+    transparent 0,
+    transparent 12px,
+    rgba(255, 255, 255, 0.11) 12px,
+    rgba(255, 255, 255, 0.11) 15px
+  );
+}
+
+.bar-left {
+  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
+  background: linear-gradient(106deg, #20174a 0%, #42246f 45%, #6e3b9b 100%);
+}
+
+.bar-right {
+  text-align: right;
+  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
+  background: linear-gradient(254deg, #430f33 0%, #7a214f 42%, #b53b58 100%);
+}
+
+.bar-glow {
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 26px;
+  background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
+  opacity: 0.45;
+}
+
+.label,
+.name {
+  position: relative;
+  z-index: 1;
+  color: #f4f7ff;
+  text-shadow:
+    0 0 8px rgba(0, 0, 0, 0.65),
+    0 1px 0 rgba(0, 0, 0, 0.7);
+}
+
+.label {
+  font-size: 13px;
+  letter-spacing: 0.24em;
+  opacity: 0.8;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.name {
+  font-size: 35px;
+  line-height: 1;
+  font-weight: 900;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-transform: uppercase;
+}
+
+.center-divider {
+  position: relative;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 70%),
+    conic-gradient(from 20deg, #5bd8ff, #cb6cff, #ff726b, #ffd05f, #5bd8ff);
+  box-shadow:
+    0 0 26px rgba(150, 120, 255, 0.5),
+    0 0 40px rgba(130, 80, 255, 0.3);
+}
+
+.divider-core {
+  width: 62px;
+  height: 62px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #eef3ff;
+  font-size: 24px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  background: radial-gradient(circle, #1b1e2d 0%, #0f111b 82%);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+}
+</style>

src/types/schemas.d.ts

@@ -4,6 +4,7 @@
  * Also see index.d.ts for a "grouped" re-export of this as well.
  */
 
+export type { Commentary } from './schemas/commentary.d.ts';
 export type { Configschema } from './schemas/configschema.d.ts';
 export type { ExampleReplicant } from './schemas/exampleReplicant.d.ts';
 export type { Players } from './schemas/players.d.ts';

src/types/schemas/commentary.d.ts

@@ -0,0 +1,12 @@
+/* prettier-ignore */
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export interface Commentary {
+	leftCommentator: string;
+	rightCommentator: string;
+}