feat: analytics (#1078)

Author: jim-at-stink

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/Annotation.tsx

@@ -4,6 +4,7 @@ import { useTransition } from '../hooks/useReducedMotion';
 import useGameStore from '../stores/useGameStore';
 import usePreferences from '../stores/usePreferences';
 import styles from './Annotation.module.css';
+import { trackEvent } from '../utils/analytics';
 
 type Notation = { term: string; title: string; text: string };
 
@@ -103,6 +104,11 @@ export default function Annotation() {
   const moveNumber = game.moveNumber();
   const notation = showAnnotations && player ? resolveAnnotation(player, moveNumber) : null;
 
+  if (notation) {
+    const trackingTerm = notation.term.replace(/[^a-z\s]/g, '').replace(/\s/g, '-');
+    trackEvent(`annotation-${trackingTerm}`);
+  }
+
   return (
     <div className={styles.notationSlot} aria-live="polite" ref={inertRef}>
       <AnimatePresence mode="wait">

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/BoardControls.tsx

@@ -7,6 +7,7 @@ import { useTransition } from '../hooks/useReducedMotion';
 import popoverStyles from './WithPopover.module.css';
 import { WithPopover } from './WithPopover.tsx';
 import { FeatureToggles } from './FeatureToggles';
+import { trackEvent } from '../utils/analytics.ts';
 import styles from './BoardControls.module.css';
 
 export default function BoardControls() {
@@ -26,7 +27,14 @@ export default function BoardControls() {
 
   return (
     <div className={styles.boardControls} ref={inertRef}>
-      <WithPopover id="info" icon="info" label="Game info">
+      <WithPopover
+        id="info"
+        icon="info"
+        label="Game info"
+        onChange={(open) => {
+          trackEvent(`info-${open ? 'open' : 'closed'}`);
+        }}
+      >
         <p>
           Chess is a strategic board game for two players. The object of the game is simple: trap the opponent's king.
           The game has been played for over a thousand years.
@@ -36,7 +44,10 @@ export default function BoardControls() {
         <input
           type="checkbox"
           checked={soundEnabled}
-          onChange={() => toggle('soundEnabled')}
+          onChange={() => {
+            toggle('soundEnabled');
+            trackEvent(`sound-${soundEnabled ? 'off' : 'on'}`);
+          }}
           className={popoverStyles.trigger}
           aria-label="Sound"
         />
@@ -52,7 +63,14 @@ export default function BoardControls() {
           <use xlinkHref={`${svgSymbolPath}#sound-off`} />
         </svg>
       </label>
-      <WithPopover id="settings" icon="settings" label="Settings">
+      <WithPopover
+        id="settings"
+        icon="settings"
+        label="Settings"
+        onChange={(open) => {
+          trackEvent(`settings-${open ? 'open' : 'closed'}`);
+        }}
+      >
         <FeatureToggles />
       </WithPopover>
 

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/FeatureToggles.tsx

@@ -1,5 +1,6 @@
 import usePreferences from '../stores/usePreferences';
 import styles from './FeatureToggles.module.css';
+import { trackEvent } from '../utils/analytics';
 
 export function FeatureToggles() {
   const { toggle, showHeroAnimations, showAnnotations, showHighlights, reducedMotion } = usePreferences();
@@ -14,7 +15,10 @@ export function FeatureToggles() {
               type="checkbox"
               className={styles.switch}
               checked={showHeroAnimations}
-              onChange={() => toggle('showHeroAnimations')}
+              onChange={() => {
+                toggle('showHeroAnimations');
+                trackEvent(`settings-pop-up-animations-${showHeroAnimations ? 'off' : 'on'}`);
+              }}
             />
           </label>
         </li>
@@ -25,7 +29,10 @@ export function FeatureToggles() {
               type="checkbox"
               className={styles.switch}
               checked={reducedMotion}
-              onChange={() => toggle('reducedMotion')}
+              onChange={() => {
+                toggle('reducedMotion');
+                trackEvent(`settings-reduce-motion-${reducedMotion ? 'off' : 'on'}`);
+              }}
             />
           </label>
         </li>
@@ -36,7 +43,10 @@ export function FeatureToggles() {
               type="checkbox"
               className={styles.switch}
               checked={showHighlights}
-              onChange={() => toggle('showHighlights')}
+              onChange={() => {
+                toggle('showHighlights');
+                trackEvent(`settings-highlights-${showHighlights ? 'off' : 'on'}`);
+              }}
             />
           </label>
         </li>
@@ -47,7 +57,10 @@ export function FeatureToggles() {
               type="checkbox"
               className={styles.switch}
               checked={showAnnotations}
-              onChange={() => toggle('showAnnotations')}
+              onChange={() => {
+                toggle('showAnnotations');
+                trackEvent(`settings-board-annotations-${showAnnotations ? 'off' : 'on'}`);
+              }}
             />
           </label>
         </li>

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/GameOver.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Ribbon } from './Ribbon';
 import useGameStore from '../stores/useGameStore';
+import { trackEvent } from '../utils/analytics';
 import styles from './GameOver.module.css';
 
 function formatDuration(totalSeconds: number): string {
@@ -100,6 +101,8 @@ export default function GameOver() {
     },
   ];
 
+  trackEvent('game-over');
+
   return (
     <dialog ref={dialogRef} className={styles.modal} aria-label="Game over" tabIndex={-1}>
       <div className="ribbon">

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/HeroAnimation.tsx

@@ -9,6 +9,7 @@ import { HeroTypes, detectHeroType } from '../utils/heroTypes';
 import { RivePopover } from './RivePopover';
 import useGameStore from '../stores/useGameStore';
 import usePreferences from '../stores/usePreferences';
+import { trackEvent } from '../utils/analytics';
 
 interface Hero {
   src: string;
@@ -40,29 +41,35 @@ export default function HeroAnimation() {
     const player = color === 'black' ? 'Black' : 'White';
     const opponent = color === 'black' ? 'White' : 'Black';
 
-    let src, text;
+    let src, text, event;
     switch (heroType) {
       case HeroTypes.CHECKMATE:
         src = checkmateRiv;
         text = 'Checkmate';
+        event = 'checkmate';
         break;
       case HeroTypes.QUEEN_LOSS:
         src = queenLossRiv;
         text = `${opponent} Loses their queen`;
+        event = 'queen-loss';
         // Invert color when on queen loss.
+        // TODO: This should be switched in the Rive file instead.
         color = color === 'white' ? 'black' : 'white';
         break;
       case HeroTypes.PROMOTION:
         src = promotionRiv;
         text = `${player} Queens`;
+        event = 'promotion';
         break;
       case HeroTypes.CASTLING:
         src = castlingRiv;
         text = `${player} Castles`;
+        event = 'castling';
         break;
       case HeroTypes.FIRST_CAPTURE:
         src = firstCaptureRiv;
         text = `${player} Captures First`;
+        event = 'first-capture';
         break;
       default:
         return;
@@ -71,13 +78,14 @@ export default function HeroAnimation() {
     // Let the board play out before showing the Rive animation.
     const timeout = setTimeout(() => {
       setHero({ src, text, color, step });
+      if (!options.replay.steps.at(options.step)?.winner) trackEvent(`pop-up-animation-${event}`);
     }, 600);
 
     return () => {
       clearTimeout(timeout);
       setHero(null);
     };
-  }, [game, showHeroAnimations]);
+  }, [game, showHeroAnimations, options]);
 
   const isVisible = !!hero && !options.replay.steps.at(options.step)?.winner;
 

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/VersusBanner.tsx

@@ -1,16 +1,21 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { Ribbon } from './Ribbon';
 import useGameStore from '../stores/useGameStore';
+import usePreloader from '../stores/usePreloader';
 import { useTransition } from '../hooks/useReducedMotion';
+import { trackEvent } from '../utils/analytics';
 import styles from './VersusBanner.module.css';
 
 export default function VersusBanner() {
   const game = useGameStore((state) => state.game);
+  const loaded = usePreloader((s) => s.pixiReady && s.assetsReady);
   const enterTransition = useTransition({ duration: 1.3, ease: [0.22, 1.15, 0.36, 1] });
   const exitTransition = useTransition({ duration: 0.3 });
   const whiteName = game.getHeaders()['w'];
   const blackName = game.getHeaders()['b'];
 
+  if (loaded && game.moveNumber() === 1 && game.turn() === 'w') trackEvent('versus-banner');
+
   return (
     <AnimatePresence>
       {game.moveNumber() === 1 && game.turn() === 'w' && (

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/WithPopover.tsx

@@ -10,16 +10,23 @@ interface Props {
   icon: string;
   id: string;
   label: string;
+  onChange?: (open: boolean) => void;
 }
 
-export function WithPopover({ children, icon, id, label }: Props) {
+export function WithPopover({ children, icon, id, label, onChange }: Props) {
   const [open, setOpen] = useState(false);
+  const onChangeRef = useRef(open);
   const transition = useTransition({ duration: 0.2, ease: 'easeOut' });
   const iconPath = `${svgSymbolPath}#${icon}`;
   const triggerRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (onChange && onChangeRef.current !== open) {
+      onChangeRef.current = open;
+      onChange(open);
+    }
+
     if (!open) return;
 
     // Wait a frame, then focus the popover.
@@ -47,7 +54,7 @@ export function WithPopover({ children, icon, id, label }: Props) {
       document.removeEventListener('mousedown', handleMouseDown);
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [open]);
+  }, [open, onChange]);
 
   return (
     <div className={styles.wrapper}>

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/utils/analytics.ts

@@ -0,0 +1,11 @@
+import { postAnalyticsEvent } from '@kaggle-environments/core';
+
+export const GAME_NAME = 'open_spiel_chess';
+
+export function trackEvent(event: string) {
+  if (import.meta.env.DEV && import.meta.env.VITE_LOG_ANALYTICS) {
+    console.log(`Track Event: ${event}`);
+  }
+
+  postAnalyticsEvent({ game: GAME_NAME, action: event });
+}