Use real overlay pages in Graphics previews

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

@@ -148,63 +148,16 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
               class="graphics-preview q-mt-md"
             >
               <div class="graphics-preview__label text-caption text-grey-5 q-mb-sm">
-                Overlay preview (estática)
+                Overlay preview (real)
               </div>
 
-              <div
+              <div class="graphics-preview__frame-wrap">
-                v-if="getPreviewKind(graphic) === 'scoreboard'"
+                <iframe
-                class="graphics-preview__board graphics-preview__board--scoreboard"
+                  class="graphics-preview__frame"
-              >
+                  :src="buildGraphicUrl(graphic)"
-                <div class="graphics-preview__score-side graphics-preview__score-side--left">
+                  title="Graphic preview"
-                  <div class="graphics-preview__team">
+                  loading="lazy"
-                    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>
@@ -220,105 +173,25 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
   padding-top: 14px;
 }
 
-.graphics-preview__board {
+.graphics-preview__frame-wrap {
   width: 100%;
-  min-height: 86px;
+  aspect-ratio: 16 / 9;
   border-radius: 8px;
-  background: rgb(0 0 0 / 35%);
   border: 1px solid rgb(255 255 255 / 12%);
+  background:
+    linear-gradient(45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
+    linear-gradient(-45deg, rgb(255 255 255 / 8%) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
+    linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 8%) 75%),
+    rgb(8 8 8 / 70%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
   overflow: hidden;
 }
 
-.graphics-preview__board--scoreboard {
+.graphics-preview__frame {
-  display: grid;
+  width: 100%;
-  grid-template-columns: 1fr auto 1fr;
+  height: 100%;
-  align-items: center;
+  border: 0;
-}
-
-.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>