add watchmode

assets/js/views/xoi/main.js

@@ -326,7 +326,7 @@ const gameinput = {
 
 
 const xoi = {
-  props: ['page', 'active', 'stack', 'inspect'],
+  props: ['page', 'active', 'stack', 'inspect', 'watch'],
   components: {
     "d-player": player,
     "d-score": score,
@@ -344,13 +344,20 @@ const xoi = {
       current_leg = computed(() => current_set.value.legs[leg_id.value]);
       current_stat = computed( () => props.page.stats?.sets[set_id.value].legs[leg_id.value]);
     }
+    if (props.watch) {
+      setInterval(async () => {
+        let gs = await refreshGame(props.page.id);
+        props.page.game = gs.game;
+        props.page.stats = gs.stats;
+      }, 2000);
+    }
     const computedProps = getGameProps(props.page, current_set, current_leg);
     if (!props.inspect) {
       current_stat = computed( () => props.page.stats?.sets[props.page.stats.sets.length-1].legs[computedProps.current_set.value.legs.length-1]);
     }
 
     const mounted = onMounted(async () => {
-      if (props.inspect) {
+      if (props.inspect || props.watch) {
       } else {
         const winner = await gameHandler(gamestack, props.stack, props.page, computedProps)
         context.emit('resolve', winner);
@@ -483,6 +490,15 @@ const gameOverDialog = (winner, points, breaks) => {
 // API
 ////////////////////////////////////////////////////////////////////////////////
 
+function refreshGame(id){
+  return getQuery(`site.find('${id}')`, {
+    select: {
+      game: "page.rounds.parseJSON",
+      stats: "page.stats.parseJSON"
+    }
+  })
+}
+
 function getGame(id){
   return getQuery(`site.find('${id}')`, {
     select: {
@@ -679,12 +695,19 @@ export const gameHandler = async (gamestack, stack, page, computedProps) => {
   return powerStateMachine(sm, gamestack);
 }
 
+function getUrlParam(name) {
+  var url_string = window.location;
+  let url = new URL(url_string);
+  let params = new URLSearchParams(url.search);
+  return params.get(name);
+}
 
 // General State Machine
 const stateMachine = (stack, page) => {
   return {
     0: async (input, reGet) => {
         // Dispatcher
+        // Check if in watchmode
         // Check Game State:
         if (page.players.length != 2 || page.startdate === undefined || page.startdate === ""){
           // Pre Game
@@ -695,6 +718,10 @@ const stateMachine = (stack, page) => {
             return [2, page];
           } else {
             // In Game
+            if (getUrlParam("w") != null){
+              // Watch Game
+              return [5, undefined];
+            }
             return [3, page];
           }
         } else {
@@ -750,6 +777,15 @@ const stateMachine = (stack, page) => {
           return false;
         },1);
         return [4, res];
+    },
+    5: async (_, reGet) => {
+        const [res, e] = await overlayAndPop("d-xoi", { page: page, watch: true }, stack);
+        var re = /^https?:\/\/[^/]+/i;
+        window.setTimeout(() => {
+          window.location.href = re.exec(window.location.href)[0];
+          return false;
+        },1);
+        return [5, res];
     }
   };
 }