@luceosports/play-rendering 2.5.5 → 2.5.7

package/src/layers/line/base/InternalLineLayer.ts

@@ -2,7 +2,7 @@ import InternalBaseLayer from '../../base/InternalBaseLayer';
 import { adjustedBezierCurveWithExclusionZones } from '../../../math/LineDrawingMath';
 import LineDrawOperationsTrait from '../../../traits/LineDrawOperationsTrait';
 import LineLayer from '../../LineLayer';
-import LineModel from '../../../models/LineModel';
+import LineModel, { LinePartAdjusted } from '../../../models/LineModel';
 import { CourtPoint, LinePart } from '../../../types';
 
 export type MaskSettings = {
@@ -19,6 +19,13 @@ export default class InternalLineLayer extends InternalBaseLayer {
   protected angleBetweenLastTwoPoints(): number {
     return 0;
   }
+  maybeDrawBallAtStartPoint(params: {
+    linePart: Pick<LinePartAdjusted, 'animationSegment'>;
+    controlPoints: CourtPoint[];
+    alreadyDrawn: boolean;
+  }): boolean {
+    return false;
+  }
   // ==============================================================
 
   protected lineWidth: number;
@@ -62,7 +69,15 @@ export default class InternalLineLayer extends InternalBaseLayer {
     const g = lineForPlayerInPosition ? 0 : Math.ceil(green * 255);
     const b = lineForPlayerInPosition ? 255 : Math.ceil(blue * 255);
 
-    const color = `rgba(${r}, ${g}, ${b}, ${alphaOverride || alpha})`;
+    const hidePassLikeLinesDuringPlayback =
+      !!this.options.showBallMode &&
+      !!this.options.animationGlobalProgress &&
+      this.options.showPassLinesDuringPlayback === false &&
+      this.line.isBallTransferLine;
+
+    const effectiveAlpha = hidePassLikeLinesDuringPlayback ? 0 : alphaOverride ?? alpha;
+
+    const color = `rgba(${r}, ${g}, ${b}, ${effectiveAlpha})`;
 
     this.ctx.fillStyle = color;
     this.ctx.strokeStyle = color;

package/src/layers/line/layers/DribbleLineLayer.ts

@@ -19,20 +19,30 @@ export default class DribbleLineLayer extends ActionLineLayer {
   setLineOptions() {
     const lineParts = [...this.line.getLineParts()];
     const dribbleLineParts = this.convertLinePartsToDribble(lineParts);
+
     this.line.setLinePartsAdjusted([]);
+
     dribbleLineParts.forEach(lp => {
       const { controlPoints, lpIndex } = lp;
       const [firstPoint] = controlPoints;
-      let alpha = lineParts[lpIndex!].alpha || this.line.color.alpha;
+
+      let animationSegment: LinePartAdjusted['animationSegment'] | undefined = undefined;
+
       if (this.options.animationGlobalProgress) {
         const [start, end] = this.line.animationKeyTimeChunks[lpIndex!];
+
         if (_.inRange(this.options.animationGlobalProgress, start, end)) {
           if (animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time!) {
-            alpha = 0.1;
+            animationSegment = 'processed';
+          } else {
+            animationSegment = 'active';
           }
+        } else if (this.options.animationGlobalProgress > end) {
+          animationSegment = 'processed';
         }
       }
-      this.line.addLinePartAdjusted({ ...lp, controlPoints, alpha });
+
+      this.line.addLinePartAdjusted({ ...lp, controlPoints, animationSegment });
     });
   }
 }

package/src/layers/line/layers/ShotLineLayer.ts

@@ -32,11 +32,13 @@ export default class ShotLineLayer extends ActionLineLayer {
 
     this.ctx.lineJoin = 'round';
 
+    let isBallDrawn = false;
+
     this.getProcessedLinePaths().forEach(linePart => {
       this.ctx.save();
 
-      if (linePart.alpha) {
-        this.setColor(linePart.alpha); // setting color for each line path (animation)
+      if (linePart.animationSegment === 'processed') {
+        this.setColor(0.1); // processed segment (before animation progress)
       }
 
       this.ctx.beginPath();
@@ -78,6 +80,15 @@ export default class ShotLineLayer extends ActionLineLayer {
         this.ctx.stroke();
       });
 
+      // Draw the ball AFTER the stroke so it overlaps the line.
+      if (!isBallDrawn) {
+        isBallDrawn = this.maybeDrawBallAtStartPoint({
+          linePart,
+          controlPoints: cp,
+          alreadyDrawn: isBallDrawn
+        });
+      }
+
       this.ctx.restore();
     });
 

package/src/models/AnimationModel.ts

@@ -30,6 +30,25 @@ export default class AnimationModel {
     this.timeElapsedSaved = 0;
   }
 
+  /**
+   * Extend current options (do not replace object) – same semantics as PlayModel.setOptions().
+   * This is needed because AnimationModel keeps an internal cloned PlayModel instance.
+   */
+  setOptions(options: Partial<PlayModel['options']>) {
+    this.play.options = { ...this.play.options, ...options };
+    this.playBase.options = { ...this.playBase.options, ...options };
+
+    // Recreate frame so any layers/models that cached options are refreshed immediately.
+    this.animationFrame = new FrameModel(this.play, this.currentPlayPhase, this.globalProgress).setContext(this.ctx);
+
+    // If paused/stopped, force immediate visual update.
+    if (!this.running) {
+      this.animationFrame.setPhase(this.currentPlayPhase).setAnimationGlobalProgress(this.globalProgress).draw();
+    }
+
+    return this;
+  }
+
   get animationDuration() {
     return this.play.playData.animationDuration / this.play.options.speed;
   }

package/src/models/FrameModel.ts

@@ -252,14 +252,26 @@ export default class FrameModel {
             if (line.type === 'DRIBBLE') {
               return linePartsAdjusted.push({ ...line.getLineParts()[index] });
             }
+
             const linePathSplitted = splitBezierCurveAtTVal(
               line.getLineParts()[index].controlPoints,
               this.animationProgress(start, end)
             ) as LinePartAdjusted['controlPoints'][];
-            linePartsAdjusted.push({ controlPoints: linePathSplitted[0], alpha: 0.1 });
-            linePartsAdjusted.push({ controlPoints: linePathSplitted[1], alpha: line.color.alpha });
+
+            linePartsAdjusted.push({
+              controlPoints: linePathSplitted[0],
+              animationSegment: 'processed'
+            });
+
+            linePartsAdjusted.push({
+              controlPoints: linePathSplitted[1],
+              animationSegment: 'active'
+            });
           } else if (this.animationGlobalProgress > end) {
-            linePartsAdjusted.push({ ...line.getLineParts()[index], alpha: 0.1 });
+            linePartsAdjusted.push({
+              ...line.getLineParts()[index],
+              animationSegment: 'processed'
+            });
           } else {
             linePartsAdjusted.push({ ...line.getLineParts()[index] });
           }

package/src/models/LineModel.ts

@@ -9,7 +9,14 @@ export type LinePartAdjusted = {
     | [CourtPointAdjusted, CourtPointAdjusted]
     | [CourtPointAdjusted, CourtPointAdjusted, CourtPointAdjusted]
     | [CourtPointAdjusted, CourtPointAdjusted, CourtPointAdjusted, CourtPointAdjusted];
-  alpha?: number;
+
+  /**
+   * Indicates how this segment should be rendered during animation.
+   * - 'processed': segment is before current animation progress (dimmed)
+   * - 'active': segment is the currently "drawn" / normal colored segment
+   */
+  animationSegment?: 'processed' | 'active';
+
   lpIndex?: number;
 };
 
@@ -97,6 +104,10 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
     return this._getAttr('type');
   }
 
+  get isBallTransferLine() {
+    return ['PASS', 'HANDOFF', 'SHOT'].includes(this.type);
+  }
+
   get phase() {
     return this._getAttr('phase');
   }

package/src/models/Play/Options.ts

@@ -22,6 +22,10 @@ export function useDefaults(options?: Partial<PlayModelOptions>): PlayModelOptio
     flipPlayerLabels: false,
     legacyPrintStyle: false,
     playerTokenScale: 1,
+    showBallMode: false,
+    // showBallMode sub-options (defaults match current behavior)
+    highlightPlayerPuck: true,
+    showPassLinesDuringPlayback: true,
     // TODO: refactor NBA court type constants below
     showHalfCourtCircle: true,
     playersMap: [],

package/src/models/PlayModel.ts

@@ -1,11 +1,13 @@
 import _ from 'lodash';
 import playerHatsConfig from '../playerHatsConfig';
 import shapesConfig from '../shapesConfig';
+import ballConfig from '../ballConfig';
 import { useDefaults } from './Play/Options';
 
 import {
   SPORT_TYPE_BASEBALL,
   SPORT_TYPE_BASKETBALL,
+  SPORT_TYPE_BEACH_VOLLEYBALL,
   SPORT_TYPE_FOOTBALL,
   SPORT_TYPE_HOCKEY,
   SPORT_TYPE_LACROSSE,
@@ -21,6 +23,7 @@ import hardwoodImageData from '../assets/wood_bg.png';
 import grassImageData from '../assets/grass_bg.png';
 import iceImageData from '../assets/ice_bg.png';
 import concreteImageData from '../assets/concrete_bg.png';
+import sandImageData from '../assets/sand_bg.png';
 import { loadImage } from '../helpers/common';
 
 const STORAGE_URL = 'https://playbooksstore.blob.core.windows.net/public';
@@ -44,6 +47,7 @@ export type PlayStaticData = {
   watermark: typeof PlayModel.watermark;
   playerHats: readonly ImageConfigItem[];
   shapes: readonly ImageConfigItem[];
+  balls: readonly ImageConfigItem[];
   playerHeadshots: typeof PlayModel.playerHeadshots;
   teamPlayers: typeof PlayModel.teamPlayers;
 };
@@ -88,6 +92,10 @@ export type PlayModelOptions = {
   playersMap: PlayersMapItem[];
   labelsOverrideType: 'Initials' | 'Jersey number' | 'Headshot' | null;
   inDrawingState: boolean;
+  showBallMode: boolean;
+  // sub-options for showBallMode
+  highlightPlayerPuck: boolean;
+  showPassLinesDuringPlayback: boolean;
 };
 
 export default class PlayModel {
@@ -98,6 +106,7 @@ export default class PlayModel {
   public static playerHeadshots: PlayerHeadshotItem[] = [];
   public static playerHats: readonly ImageConfigItem[];
   public static shapes: readonly ImageConfigItem[];
+  public static balls: readonly ImageConfigItem[];
   public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement | null };
   public static backgroundOptions: Record<SportType, HTMLImageElement> & {
     Hardwood: HTMLImageElement;
@@ -113,17 +122,20 @@ export default class PlayModel {
   static async init({ teamLogoPath = '' } = {}) {
     PlayModel.playerHats = await playerHatsConfig();
     PlayModel.shapes = await shapesConfig();
+    PlayModel.balls = await ballConfig();
 
     const hardwoodImage = await loadImage(hardwoodImageData);
     const grassImage = await loadImage(grassImageData);
     const iceImage = await loadImage(iceImageData);
     const concreteImage = await loadImage(concreteImageData);
+    const sandImage = await loadImage(sandImageData);
 
     PlayModel.backgroundOptions = {
       Hardwood: hardwoodImage,
       Concrete: concreteImage,
       [SPORT_TYPE_BASKETBALL]: hardwoodImage,
       [SPORT_TYPE_VOLLEYBALL]: hardwoodImage,
+      [SPORT_TYPE_BEACH_VOLLEYBALL]: sandImage,
       [SPORT_TYPE_FOOTBALL]: grassImage,
       [SPORT_TYPE_LACROSSE]: grassImage,
       [SPORT_TYPE_LACROSSE_BOX]: grassImage,
@@ -190,6 +202,7 @@ export default class PlayModel {
       watermark: PlayModel.watermark,
       playerHats: PlayModel.playerHats,
       shapes: PlayModel.shapes,
+      balls: PlayModel.balls,
       playerHeadshots: PlayModel.playerHeadshots,
       teamPlayers: PlayModel.teamPlayers
     };

package/src/traits/LineDrawOperationsTrait.ts

@@ -1,6 +1,8 @@
-import { CourtPoint, LinePart } from '../types';
+import { CourtPoint, LinePart, PlayData } from '../types';
 import LineModel, { LinePartAdjusted } from '../models/LineModel';
 import ShapeModel from '../models/ShapeModel';
+import { FrameDataOptions } from '../models/FrameModel';
+import { drawBallObject } from '../helpers/draw';
 
 interface InheritedPropsAndMethods {
   ctx: CanvasRenderingContext2D;
@@ -8,6 +10,13 @@ interface InheritedPropsAndMethods {
   setColor: (alpha?: number) => void;
   line?: LineModel;
   shape?: ShapeModel;
+  // below present on layers using this trait (InternalBaseLayer)
+  options: FrameDataOptions;
+  playData: PlayData;
+  courtTypeConstants?: {
+    PLAYER_TOKEN_SCALE: number;
+    PLAYER_TOKEN_RADIUS: number;
+  };
 }
 
 interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
@@ -21,9 +30,44 @@ interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
   angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
   arrowTipPoint: () => CourtPoint;
   setLineOptions: () => void;
+  maybeDrawBallAtStartPoint: (params: {
+    linePart: Pick<LinePartAdjusted, 'animationSegment'>;
+    controlPoints: CourtPoint[];
+    alreadyDrawn: boolean;
+  }) => boolean;
 }
 
 export default {
+  maybeDrawBallAtStartPoint(params: {
+    linePart: Pick<LinePartAdjusted, 'animationSegment'>;
+    controlPoints: CourtPoint[];
+    alreadyDrawn: boolean;
+  }): boolean {
+    const { linePart, controlPoints, alreadyDrawn } = params;
+
+    if (!this.options?.showBallMode) return alreadyDrawn;
+    if (alreadyDrawn) return true;
+    if (linePart.animationSegment !== 'active') return false;
+    if (!this.line?.isBallTransferLine) return false;
+
+    const startPoint = controlPoints[0];
+    if (!startPoint || !this.courtTypeConstants) return false;
+
+    const playerScale = this.courtTypeConstants.PLAYER_TOKEN_SCALE * (this.options?.playerTokenScale ?? 1);
+    const puckRadiusBase = this.courtTypeConstants.PLAYER_TOKEN_RADIUS * playerScale;
+    const radiusMultiplier = this.options?.legacyPrintStyle ? 1.2 : 1;
+    const puckRadius = radiusMultiplier * puckRadiusBase;
+
+    return drawBallObject({
+      sport: this.playData.sport,
+      ctx: this.ctx,
+      staticData: this.options?.staticData,
+      center: { x: startPoint.x, y: startPoint.y },
+      puckRadius,
+      placement: 'center'
+    });
+  },
+
   drawLineFromControlPoints() {
     this.ctx.save();
 
@@ -31,11 +75,13 @@ export default {
 
     this.ctx.lineJoin = 'round';
 
+    let isBallDrawn = false;
+
     this.getProcessedLinePaths().forEach(linePart => {
       this.ctx.save();
 
-      if (linePart.alpha) {
-        this.setColor(linePart.alpha); // setting color for each line path (animation)
+      if (linePart.animationSegment === 'processed') {
+        this.setColor(0.1); // processed segment (before animation progress)
       }
 
       this.ctx.beginPath();
@@ -57,6 +103,15 @@ export default {
 
       this.ctx.stroke();
 
+      // Draw the ball AFTER the stroke so it overlaps the line.
+      if (!isBallDrawn) {
+        isBallDrawn = this.maybeDrawBallAtStartPoint({
+          linePart,
+          controlPoints: cp,
+          alreadyDrawn: isBallDrawn
+        });
+      }
+
       this.ctx.restore();
     });
 

package/src/types/index.ts

@@ -18,6 +18,7 @@ export type SportType =
   | 'FOOTBALL'
   | 'BASKETBALL'
   | 'VOLLEYBALL'
+  | 'BEACH_VOLLEYBALL'
   | 'LACROSSE'
   | 'LACROSSE_BOX'
   | 'SOCCER'
@@ -37,6 +38,8 @@ export type CourtTypeSportBasketball =
 
 export type CourtTypeSportVolleyball = 'VOLLEYBALL_INDOOR';
 
+export type CourtTypeSportBeachVolleyball = 'BEACH_VOLLEYBALL_NCAA' | 'BEACH_VOLLEYBALL_RECREATIONAL';
+
 export type CourtTypeSportSoccer =
   | 'SOCCER_FIFA'
   | 'SOCCER_NCAA'
@@ -62,6 +65,7 @@ export type CourtTypeSportFootballLegacy = 'FOOTBALL';
 export type CourtType =
   | CourtTypeSportBasketball
   | CourtTypeSportVolleyball
+  | CourtTypeSportBeachVolleyball
   | CourtTypeSportLacrosse
   | CourtTypeSportLacrosseBox
   | CourtTypeSportSoccer