Update Graphics view with static overlay previews

src/dashboard/scoreko-dev/views/Graphics.vue

@@ -12,6 +12,8 @@ type GraphicConfig = {
   height?: number;
 };
 
+type PreviewKind = 'scoreboard' | 'commentary' | null;
+
 useHead({ title: 'Graphics' });
 
 const graphics = computed<GraphicConfig[]>(
@@ -47,6 +49,20 @@ const copyUrl = async (graphic: GraphicConfig) => {
   document.body.removeChild(input);
 };
 
+const getPreviewKind = (graphic: GraphicConfig): PreviewKind => {
+  const name = buildGraphicName(graphic).toLowerCase();
+
+  if (name.includes('scoreboard')) {
+    return 'scoreboard';
+  }
+
+  if (name.includes('commentary')) {
+    return 'commentary';
+  }
+
+  return null;
+};
+
 const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
   const url = buildGraphicUrl(graphic);
   const name = buildGraphicName(graphic);
@@ -111,13 +127,6 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
           <QSeparator />
 
           <QCardSection>
-            <div class="text-caption text-grey-5 q-mb-xs">
-              URL
-            </div>
-            <div class="text-body2 text-mono q-mb-md">
-              {{ buildGraphicUrl(graphic) }}
-            </div>
-
             <div class="row items-center q-gutter-sm">
               <QBtn
                 color="primary"
@@ -133,9 +142,183 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
                 @dragstart="onDragStart($event, graphic)"
               />
             </div>
+
+            <div
+              v-if="getPreviewKind(graphic)"
+              class="graphics-preview q-mt-md"
+            >
+              <div class="graphics-preview__label text-caption text-grey-5 q-mb-sm">
+                Overlay preview (estática)
+              </div>
+
+              <div
+                v-if="getPreviewKind(graphic) === 'scoreboard'"
+                class="graphics-preview__board graphics-preview__board--scoreboard"
+              >
+                <div class="graphics-preview__score-side graphics-preview__score-side--left">
+                  <div class="graphics-preview__team">
+                    TEAM LEFT
+                  </div>
+                  <div class="graphics-preview__player">
+                    PLAYER 1
+                  </div>
+                </div>
+
+                <div class="graphics-preview__score-center">
+                  <span>2</span>
+                  <span class="graphics-preview__score-dash">-</span>
+                  <span>1</span>
+                </div>
+
+                <div class="graphics-preview__score-side graphics-preview__score-side--right">
+                  <div class="graphics-preview__team">
+                    TEAM RIGHT
+                  </div>
+                  <div class="graphics-preview__player">
+                    PLAYER 2
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-else-if="getPreviewKind(graphic) === 'commentary'"
+                class="graphics-preview__board graphics-preview__board--commentary"
+              >
+                <div class="graphics-preview__commentary-side">
+                  <div class="graphics-preview__commentary-label">
+                    COMMENTARY
+                  </div>
+                  <div class="graphics-preview__commentary-name">
+                    COMMENTATOR 1
+                  </div>
+                </div>
+
+                <div class="graphics-preview__vs">
+                  VS
+                </div>
+
+                <div class="graphics-preview__commentary-side graphics-preview__commentary-side--right">
+                  <div class="graphics-preview__commentary-label">
+                    COMMENTARY
+                  </div>
+                  <div class="graphics-preview__commentary-name">
+                    COMMENTATOR 2
+                  </div>
+                </div>
+              </div>
+            </div>
           </QCardSection>
         </QCard>
       </div>
     </div>
   </QPage>
 </template>
+
+<style scoped>
+.graphics-preview {
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  padding-top: 14px;
+}
+
+.graphics-preview__board {
+  width: 100%;
+  min-height: 86px;
+  border-radius: 8px;
+  background: rgb(0 0 0 / 35%);
+  border: 1px solid rgb(255 255 255 / 12%);
+  overflow: hidden;
+}
+
+.graphics-preview__board--scoreboard {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+.graphics-preview__score-side {
+  padding: 10px 16px;
+}
+
+.graphics-preview__score-side--left {
+  background: linear-gradient(95deg, #1e2630 0%, #2f3f55 100%);
+}
+
+.graphics-preview__score-side--right {
+  text-align: right;
+  background: linear-gradient(265deg, #4a1d29 0%, #764064 100%);
+}
+
+.graphics-preview__team {
+  color: rgb(244 247 255 / 75%);
+  font-size: 11px;
+  letter-spacing: 0.15em;
+  font-weight: 700;
+}
+
+.graphics-preview__player {
+  margin-top: 2px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 900;
+}
+
+.graphics-preview__score-center {
+  padding: 0 10px;
+  color: #f5f7ff;
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+
+.graphics-preview__score-dash {
+  opacity: 0.65;
+  margin: 0 5px;
+}
+
+.graphics-preview__board--commentary {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+}
+
+.graphics-preview__commentary-side {
+  padding: 8px 12px;
+  background: linear-gradient(106deg, #20174a 0%, #6e3b9b 100%);
+  border-radius: 6px;
+}
+
+.graphics-preview__commentary-side--right {
+  text-align: right;
+  background: linear-gradient(254deg, #430f33 0%, #b53b58 100%);
+}
+
+.graphics-preview__commentary-label {
+  color: rgb(244 247 255 / 75%);
+  font-size: 10px;
+  letter-spacing: 0.18em;
+  font-weight: 700;
+}
+
+.graphics-preview__commentary-name {
+  margin-top: 2px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.graphics-preview__vs {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #1b1e2d 0%, #0f111b 82%);
+  border: 1px solid rgb(255 255 255 / 35%);
+  color: #eef3ff;
+  font-size: 13px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>