Permite cambiar skin de scoreboard en tiempo real con misma URL

src/graphics/scoreboard/main.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
+import { graphicsSettingsReplicant, playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
 import { resolveCountryCode } from '../../shared/countries';
 import type { Schemas } from '../../types';
 
@@ -26,6 +26,20 @@ const defaultScoreboard: Schemas.Scoreboard = {
 
 const players = computed<Schemas.Players>(() => playersReplicant?.data ?? {});
 const scoreboard = computed<Schemas.Scoreboard>(() => scoreboardReplicant?.data ?? defaultScoreboard);
+const scoreboardSkin = computed(() => graphicsSettingsReplicant?.data?.scoreboardSkin ?? 'scoreboard/main.html');
+
+watch(
+  scoreboardSkin,
+  (skin) => {
+    if (skin !== 'scoreboard/main.html') {
+      const targetUrl = new URL('../scoreboard-2xko/main.html', window.location.href).toString();
+      if (window.location.href !== targetUrl) {
+        window.location.replace(targetUrl);
+      }
+    }
+  },
+  { immediate: true },
+);
 
 const leftName = computed(() => {
   if (scoreboard.value.leftNameOverride) {