@luceosports/play-rendering 2.5.5 → 2.5.6

package/dist/types/models/AnimationModel.d.ts

@@ -10,6 +10,7 @@ export class AnimationModel {
         max: number;
     }>;
     get lastLineAnimationMax(): number;
+    setOptions(nextOptions: PlayModel['options']): this;
     start(finishCallback: () => void, progressCallback: (progress: number) => void): void;
     pause(): void;
     setProgress(progress: number): this;

package/dist/types/models/LineModel.d.ts

@@ -7,6 +7,7 @@ export class LineModel {
     get color(): Color;
     set color(value: Color);
     get type(): LineType;
+    get isBallTransferLine(): boolean;
     get phase(): number;
     get playerPositionOrigin(): Position;
     get playerPositionTerminus(): Position;

package/dist/types/models/PlayModel.d.ts

@@ -33,6 +33,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 type TeamPlayer = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {

package/src/assets/balls/baseball.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="#000000" width="800px" height="800px" viewBox="-8 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M368.5 363.9l28.8-13.9c11.1 22.9 26 43.2 44.1 60.9 34-42.5 54.5-96.3 54.5-154.9 0-58.5-20.4-112.2-54.2-154.6-17.8 17.3-32.6 37.1-43.6 59.5l-28.7-14.1c12.8-26 30-49 50.8-69C375.6 34.7 315 8 248 8 181.1 8 120.5 34.6 75.9 77.7c20.7 19.9 37.9 42.9 50.7 68.8l-28.7 14.1c-11-22.3-25.7-42.1-43.5-59.4C20.4 143.7 0 197.4 0 256c0 58.6 20.4 112.3 54.4 154.7 18.2-17.7 33.2-38 44.3-61l28.8 13.9c-12.9 26.7-30.3 50.3-51.5 70.7 44.5 43.1 105.1 69.7 172 69.7 66.8 0 127.3-26.5 171.9-69.5-21.1-20.4-38.5-43.9-51.4-70.6zm-228.3-32l-30.5-9.8c14.9-46.4 12.7-93.8-.6-134l30.4-10c15 45.6 18 99.9.7 153.8zm216.3-153.4l30.4 10c-13.2 40.1-15.5 87.5-.6 134l-30.5 9.8c-17.3-54-14.3-108.3.7-153.8z"/></svg>

package/src/assets/balls/basketball.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M248.37 41.094c-49.643 1.754-98.788 20.64-137.89 56.656L210.53 197.8c31.283-35.635 45.59-88.686 37.84-156.706zm18.126.107c7.646 71.205-7.793 129.56-43.223 169.345L256 243.27 401.52 97.75c-38.35-35.324-86.358-54.18-135.024-56.55zM97.75 110.48c-36.017 39.102-54.902 88.247-56.656 137.89 68.02 7.75 121.07-6.557 156.707-37.84L97.75 110.48zm316.5 0L268.73 256l32.71 32.71c33.815-30.112 81.05-45.78 138.183-45.11 10.088.118 20.49.753 31.176 1.9-2.37-48.665-21.227-96.672-56.55-135.02zM210.545 223.272c-39.785 35.43-98.14 50.87-169.344 43.223 2.37 48.666 21.226 96.675 56.55 135.025L243.27 256l-32.725-32.727zm225.002 38.27c-51.25.042-92.143 14.29-121.348 39.928l100.05 100.05c36.017-39.102 54.902-88.247 56.656-137.89-12.275-1.4-24.074-2.096-35.36-2.087zM256 268.73L110.48 414.25c38.35 35.324 86.358 54.18 135.024 56.55-7.646-71.205 7.793-129.56 43.223-169.345L256 268.73zm45.47 45.47c-31.283 35.635-45.59 88.686-37.84 156.706 49.643-1.754 98.788-20.64 137.89-56.656L301.47 314.2z"/></svg>

package/src/assets/balls/football.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="#000000" width="800px" height="800px" viewBox="-8 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M481.5 60.3c-4.8-18.2-19.1-32.5-37.3-37.4C420.3 16.5 383 8.9 339.4 8L496 164.8c-.8-43.5-8.2-80.6-14.5-104.5zm-467 391.4c4.8 18.2 19.1 32.5 37.3 37.4 23.9 6.4 61.2 14 104.8 14.9L0 347.2c.8 43.5 8.2 80.6 14.5 104.5zM4.2 283.4L220.4 500c132.5-19.4 248.8-118.7 271.5-271.4L275.6 12C143.1 31.4 26.8 130.7 4.2 283.4zm317.3-123.6c3.1-3.1 8.2-3.1 11.3 0l11.3 11.3c3.1 3.1 3.1 8.2 0 11.3l-28.3 28.3 28.3 28.3c3.1 3.1 3.1 8.2 0 11.3l-11.3 11.3c-3.1 3.1-8.2 3.1-11.3 0l-28.3-28.3-22.6 22.7 28.3 28.3c3.1 3.1 3.1 8.2 0 11.3l-11.3 11.3c-3.1 3.1-8.2 3.1-11.3 0L248 278.6l-22.6 22.6 28.3 28.3c3.1 3.1 3.1 8.2 0 11.3l-11.3 11.3c-3.1 3.1-8.2 3.1-11.3 0l-28.3-28.3-28.3 28.3c-3.1 3.1-8.2 3.1-11.3 0l-11.3-11.3c-3.1-3.1-3.1-8.2 0-11.3l28.3-28.3-28.3-28.2c-3.1-3.1-3.1-8.2 0-11.3l11.3-11.3c3.1-3.1 8.2-3.1 11.3 0l28.3 28.3 22.6-22.6-28.3-28.3c-3.1-3.1-3.1-8.2 0-11.3l11.3-11.3c3.1-3.1 8.2-3.1 11.3 0l28.3 28.3 22.6-22.6-28.3-28.3c-3.1-3.1-3.1-8.2 0-11.3l11.3-11.3c3.1-3.1 8.2-3.1 11.3 0l28.3 28.3 28.3-28.5z"/></svg>

package/src/assets/balls/hockey.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 32.96 32.96" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path style="fill:#010002;" d="M16.48,18.084c-9.101,0-16.479-2.964-16.479-6.622v10.742h0.05c0,3.916,7.357,7.093,16.429,7.093
+				c9.077,0,16.432-3.177,16.432-7.093h0.048V11.462C32.961,15.12,25.582,18.084,16.48,18.084z"/>
+            <ellipse style="fill:#010002;" cx="16.48" cy="10.285" rx="16.48" ry="6.622"/>
+		</g>
+	</g>
+</g>
+</svg>

package/src/assets/balls/lacrosse.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#A0A0A0;" d="M512,256c0,141.384-114.616,256-256,256S0,397.384,0,256S114.616,0,256,0S512,114.616,512,256z"/>
+    <path style="fill:#868686;" d="M512,256c0,141.384-114.615,256-256,256C132.098,512,28.761,423.976,5.098,307.054
+	c39.175,56.575,104.53,93.641,178.554,93.641c119.87,0,217.043-97.174,217.043-217.043c0-74.024-37.067-139.38-93.641-178.554
+	C423.976,28.761,512,132.098,512,256z"/>
+    <path style="fill:#FFFFFF;" d="M464.696,256v0.493c-0.017,4.6-3.751,8.319-8.348,8.319c-0.01,0-0.02,0-0.03,0
+	c-4.61-0.017-8.334-3.767-8.319-8.377V256c0-4.61,3.738-8.348,8.348-8.348S464.696,251.39,464.696,256z M454.922,281.456
+	c-4.548-0.767-8.854,2.292-9.623,6.837C429.629,380.833,350.019,448,256,448c-4.61,0-8.348,3.738-8.348,8.348
+	s3.738,8.348,8.348,8.348c49.603,0,97.675-17.703,135.363-49.849c37.264-31.784,62.264-75.739,70.396-123.767
+	C462.529,286.534,459.468,282.226,454.922,281.456z"/>
+    <path style="fill:#AAAAAA;" d="M244.87,161.391c0,52.251-42.358,94.609-94.609,94.609s-94.609-42.358-94.609-94.609
+	s42.358-94.609,94.609-94.609S244.87,109.141,244.87,161.391z"/>
+    <path style="fill:#757575;" d="M166.957,244.862c0-10.725,7.637-19.959,18.187-21.889c20.537-3.757,44.826-5.929,70.856-5.929
+	s50.32,2.173,70.856,5.93c10.551,1.93,18.187,11.163,18.187,21.889v22.275c0,10.725-7.637,19.959-18.187,21.889
+	c-20.537,3.757-44.826,5.929-70.856,5.929s-50.32-2.173-70.856-5.93c-10.551-1.93-18.187-11.163-18.187-21.889V244.862z"/>
+    <path style="fill:#939393;" d="M309.258,239.617c7.236,1.509,12.632,8.234,13.525,16.383c-0.893,8.149-6.29,14.874-13.525,16.383
+	c-15.436,3.22-33.692,5.083-53.258,5.083s-37.821-1.862-53.258-5.083c-7.236-1.509-12.632-8.234-13.525-16.383
+	c0.893-8.149,6.29-14.874,13.525-16.383c15.436-3.22,33.692-5.083,53.258-5.083S293.821,236.397,309.258,239.617z"/>
+</svg>

package/src/assets/balls/soccer.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="800px" height="800px" viewBox="0 0 72.371 72.372"
+     xml:space="preserve">
+<g>
+	<path d="M22.57,2.648c-4.489,1.82-8.517,4.496-11.971,7.949C7.144,14.051,4.471,18.08,2.65,22.568C0.892,26.904,0,31.486,0,36.186
+		c0,4.699,0.892,9.281,2.65,13.615c1.821,4.489,4.495,8.518,7.949,11.971c3.454,3.455,7.481,6.129,11.971,7.949
+		c4.336,1.76,8.917,2.649,13.617,2.649c4.7,0,9.28-0.892,13.616-2.649c4.488-1.82,8.518-4.494,11.971-7.949
+		c3.455-3.453,6.129-7.48,7.949-11.971c1.758-4.334,2.648-8.916,2.648-13.615c0-4.7-0.891-9.282-2.648-13.618
+		c-1.82-4.488-4.496-8.518-7.949-11.971s-7.479-6.129-11.971-7.949C45.467,0.891,40.887,0,36.187,0
+		C31.487,0,26.906,0.891,22.57,2.648z M9.044,51.419c-1.743-1.094-3.349-2.354-4.771-3.838c-2.172-6.112-2.54-12.729-1.101-19.01
+		c0.677-1.335,1.447-2.617,2.318-3.845c0.269-0.379,0.518-0.774,0.806-1.142l8.166,4.832c0,0.064,0,0.134,0,0.205
+		c-0.021,4.392,0.425,8.752,1.313,13.049c0.003,0.02,0.006,0.031,0.01,0.049l-6.333,9.93C9.314,51.579,9.177,51.503,9.044,51.419z
+		 M33.324,68.206c1.409,0.719,2.858,1.326,4.347,1.82c-6.325,0.275-12.713-1.207-18.36-4.447L33,68.018
+		C33.105,68.085,33.212,68.149,33.324,68.206z M33.274,65.735L17.12,62.856c-1.89-2.295-3.59-4.723-5.051-7.318
+		c-0.372-0.66-0.787-1.301-1.102-1.99l6.327-9.92c0.14,0.035,0.296,0.072,0.473,0.119c3.958,1.059,7.986,1.812,12.042,2.402
+		c0.237,0.033,0.435,0.062,0.604,0.08l7.584,13.113c-1.316,1.85-2.647,3.69-4.007,5.51C33.764,65.155,33.524,65.446,33.274,65.735z
+		 M60.15,60.149c-1.286,1.287-2.651,2.447-4.08,3.481c-0.237-1.894-0.646-3.75-1.223-5.563l8.092-15.096
+		c2.229-1.015,4.379-2.166,6.375-3.593c0.261-0.185,0.478-0.392,0.646-0.618C69.374,46.561,66.104,54.196,60.15,60.149z
+		 M59.791,40.571c0.301,0.574,0.598,1.154,0.896,1.742l-7.816,14.58c-0.045,0.01-0.088,0.02-0.133,0.026
+		c-4.225,0.789-8.484,1.209-12.779,1.229l-7.8-13.487c1.214-2.254,2.417-4.517,3.61-6.781c0.81-1.536,1.606-3.082,2.401-4.627
+		l16.143-1.658C56.29,34.495,58.163,37.457,59.791,40.571z M56.516,23.277c-0.766,2.023-1.586,4.025-2.401,6.031l-15.726,1.615
+		c-0.188-0.248-0.383-0.492-0.588-0.725c-1.857-2.103-3.726-4.193-5.592-6.289c0.017-0.021,0.034-0.037,0.051-0.056
+		c-0.753-0.752-1.508-1.504-2.261-2.258l4.378-13.181c0.302-0.08,0.606-0.147,0.913-0.18c2.38-0.242,4.763-0.516,7.149-0.654
+		c1.461-0.082,2.93-0.129,4.416-0.024l10.832,12.209C57.314,20.943,56.95,22.124,56.516,23.277z M60.15,12.221
+		c2.988,2.99,5.302,6.402,6.938,10.047c-2.024-1.393-4.188-2.539-6.463-3.473c-0.354-0.146-0.717-0.275-1.086-0.402L48.877,6.376
+		c0.074-0.519,0.113-1.039,0.129-1.563C53.062,6.464,56.864,8.936,60.15,12.221z M25.334,4.182c0.042,0.031,0.062,0.057,0.086,0.064
+		c2.437,0.842,4.654,2.082,6.744,3.553l-4.09,12.317c-0.021,0.006-0.041,0.012-0.061,0.021c-0.837,0.346-1.69,0.656-2.514,1.031
+		c-3.395,1.543-6.705,3.252-9.823,5.301l-8.071-4.775c0.012-0.252,0.055-0.508,0.141-0.736c0.542-1.444,1.075-2.896,1.688-4.311
+		c0.472-1.09,1.01-2.143,1.597-3.172c0.384-0.424,0.782-0.844,1.192-1.254c3.833-3.832,8.363-6.553,13.186-8.162
+		C25.384,4.098,25.358,4.139,25.334,4.182z"/>
+</g>
+</svg>

package/src/assets/balls/volleyball.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 512 512"  xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+    <g>
+	<path class="st0" d="M383.301,168.546c-6.107,8.825-12.711,17.27-19.676,25.413c-25.851,30.156-57.049,55.51-92.144,74.679
+		c-0.058,2.22-0.058,4.442-0.058,6.604c0,34.227,5.98,68.202,17.455,100.219c5.98-2.591,11.834-5.367,17.698-8.27
+		c76.344-38.046,139.189-97.131,181.939-171.012c3.75-6.535,7.335-13.139,10.724-19.86c-5.367-16.461-12.584-32.688-21.585-48.292
+		c-13.081-22.626-29.046-42.487-47.172-59.328c-8.64,31.082-21.722,60.322-38.552,86.961
+		C389.155,160.043,386.32,164.358,383.301,168.546z"/>
+        <path class="st0" d="M358.19,148.385h0.068c2.289-3.273,4.442-6.536,6.536-9.867c17.63-27.877,30.78-58.9,38.231-92.076
+		c-6.78-4.752-13.744-9.194-20.893-13.198C343.638,11.532,299.983,0,255.762,0.059c-43.422,0-87.332,10.986-127.725,34.286
+		c-11.532,6.662-22.266,14.064-32.318,22.15c86.221,2.834,169.413,29.356,241.443,77.085
+		C344.32,138.332,351.353,143.261,358.19,148.385z"/>
+        <path class="st0" d="M110.952,193.404c10.676,0.926,21.283,2.465,31.822,4.5c39.283,7.587,77.095,22.325,111.323,43.666
+		c32.191-17.269,60.867-40.334,84.488-67.714c-6.224-4.686-12.643-9.185-19.179-13.51c-71.056-47.124-153.692-72.04-239.037-72.04
+		c-6.048,0-12.155,0.137-18.195,0.439c-11.045,12.828-20.718,26.581-28.929,41.133c-12.458,22.14-21.585,45.955-27.069,70.618
+		c24.546-5.796,49.452-8.572,74.192-8.572C90.605,191.924,100.773,192.42,110.952,193.404z"/>
+        <path class="st0" d="M104.601,246.625c0.429-7.149,1.052-14.309,1.782-21.458c-8.63-0.809-17.328-1.179-26.016-1.179
+		c-26.523,0-53.29,3.585-79.433,10.92C0.311,242.009,0,249.089,0,256.249c0.059,43.422,11.045,87.332,34.354,127.725
+		c23.748,41.074,57.05,73.013,95.534,94.783c8.873,5.065,18.068,9.506,27.496,13.383c-35.328-66.974-53.708-141.04-53.708-216.528
+		C103.676,265.931,103.988,256.249,104.601,246.625z"/>
+        <path class="st0" d="M271.482,416.964c-4.685-9.682-8.814-19.549-12.399-29.601c-13.003-35.835-19.724-73.764-19.724-112.121
+		c0-1.666,0-3.331,0.059-4.997c-31.024-19.801-65.435-33.487-101.202-40.51c-0.681,6.224-1.237,12.506-1.607,18.867
+		c-0.556,9-0.867,18.01-0.867,27.01c0,75.799,19.861,149.924,57.975,216.041c2.834,4.928,5.795,9.799,8.873,14.61h0.069
+		c17.58,3.769,35.523,5.678,53.601,5.678c24.477,0,49.022-3.516,73.071-10.733c-18.555-19.549-34.412-41.075-47.416-64.082
+		C278.203,430.532,274.686,423.811,271.482,416.964z"/>
+        <path class="st0" d="M509.848,222.878c-45.576,74.387-110.7,134.086-188.962,172.989c-6.477,3.214-12.956,6.292-19.549,9.136
+		c2.649,5.542,5.484,10.978,8.503,16.335c13.939,24.672,31.452,47.425,52.423,67.53c7.344-3.39,14.62-7.082,21.712-11.212
+		c41.133-23.756,73.013-57.049,94.793-95.533C500.477,343.639,512,299.973,512,255.752
+		C511.941,244.774,511.27,233.807,509.848,222.878z"/>
+</g>
+</svg>

package/src/ballConfig.ts

@@ -0,0 +1,44 @@
+import { loadImage } from './helpers/common';
+
+import basketballImageData from './assets/balls/basketball.svg';
+import baseballImageData from './assets/balls/baseball.svg';
+import footballImageData from './assets/balls/football.svg';
+import soccerImageData from './assets/balls/soccer.svg';
+import hockeyImageData from './assets/balls/hockey.svg';
+import volleyballImageData from './assets/balls/volleyball.svg';
+import lacrosseImageData from './assets/balls/lacrosse.svg';
+
+import { ImageConfigItem } from './models/PlayModel';
+import {
+  SPORT_TYPE_BASEBALL,
+  SPORT_TYPE_SOFTBALL,
+  SPORT_TYPE_BASKETBALL,
+  SPORT_TYPE_FOOTBALL,
+  SPORT_TYPE_HOCKEY,
+  SPORT_TYPE_LACROSSE,
+  SPORT_TYPE_LACROSSE_BOX,
+  SPORT_TYPE_SOCCER,
+  SPORT_TYPE_VOLLEYBALL
+} from './constants';
+
+export default async function (): Promise<readonly ImageConfigItem[]> {
+  const basketballShape = await loadImage(basketballImageData);
+  const baseballShape = await loadImage(baseballImageData);
+  const footballShape = await loadImage(footballImageData);
+  const soccerShape = await loadImage(soccerImageData);
+  const hockeyShape = await loadImage(hockeyImageData);
+  const volleyballShape = await loadImage(volleyballImageData);
+  const lacrosseShape = await loadImage(lacrosseImageData);
+
+  return Object.freeze([
+    { key: SPORT_TYPE_BASKETBALL, image: basketballShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_BASEBALL, image: baseballShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_SOFTBALL, image: baseballShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_FOOTBALL, image: footballShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_SOCCER, image: soccerShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_HOCKEY, image: hockeyShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_VOLLEYBALL, image: volleyballShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_LACROSSE, image: lacrosseShape, dX: 0, dY: 0 },
+    { key: SPORT_TYPE_LACROSSE_BOX, image: lacrosseShape, dX: 0, dY: 0 }
+  ]);
+}

package/src/helpers/draw.ts

@@ -0,0 +1,47 @@
+import { SPORT_TYPE_BASKETBALL } from '../constants';
+import { SportType } from '../types';
+
+type StaticDataWithBalls = {
+  balls?: ReadonlyArray<{ key: string; image: CanvasImageSource }>;
+};
+
+export type DrawBallObjectPlacement = 'center' | 'overlapBottomRight';
+
+export type DrawBallObjectParams = {
+  sport: SportType;
+  ctx: CanvasRenderingContext2D;
+  staticData: StaticDataWithBalls | undefined;
+  center: { x: number; y: number };
+  puckRadius: number;
+  placement: DrawBallObjectPlacement;
+};
+
+/**
+ * Draw a "ball object" (currently basketball) using shared sizing rules.
+ * Future: swap selection logic based on sport type / config without changing call sites.
+ */
+export function drawBallObject(params: DrawBallObjectParams): boolean {
+  const { sport, ctx, staticData, center, puckRadius, placement } = params;
+
+  const ball = staticData?.balls?.find(b => b.key === sport);
+  if (!ball) return false;
+
+  // Same sizing rule used elsewhere: ball is 25% of puck diameter => puckRadius * 0.5
+  const ballSize = puckRadius * 0.5;
+
+  let x = center.x - ballSize / 2;
+  let y = center.y - ballSize / 2;
+
+  if (placement === 'overlapBottomRight') {
+    // Overlap inside the puck near bottom-right
+    const offset = puckRadius * 0.65;
+    x = center.x + offset - ballSize / 2;
+    y = center.y + offset - ballSize / 2;
+  }
+
+  ctx.save();
+  ctx.drawImage(ball.image, x, y, ballSize, ballSize);
+  ctx.restore();
+
+  return true;
+}

package/src/layers/LineLayer.ts

@@ -16,6 +16,7 @@ export default class LineLayer extends BaseLayer {
     this.ctx.lineWidth = this.lineWidth;
     this.playData.lines.forEach(line => {
       if (this.options.linesHiddenIds.indexOf(line.id) >= 0) return;
+
       const layerKey = `${_.capitalize(line.type)}LineLayer`;
       if (lineLayers[layerKey as keyof typeof lineLayers]) {
         new lineLayers[layerKey as keyof typeof lineLayers](this, line).apply();

package/src/layers/PlayerLayer.ts

@@ -1,5 +1,7 @@
 import BaseLayer from './base/BaseLayer';
 import PlayerModel from '../models/PlayerModel';
+import { SPORT_TYPE_BASKETBALL } from '../constants';
+import { drawBallObject } from '../helpers/draw';
 
 export default class PlayerLayer extends BaseLayer {
   get staticData() {
@@ -57,6 +59,25 @@ export default class PlayerLayer extends BaseLayer {
           }
         }
       }
+
+      if (player.possession && this.options.showBallMode) {
+        const playerBall = this.staticData.balls.find(ball => {
+          return ball.key === SPORT_TYPE_BASKETBALL;
+        });
+        if (playerBall) {
+          const radiusMultiplier = this.options.legacyPrintStyle ? 1.2 : 1;
+          const puckRadius = radiusMultiplier * this.radius;
+
+          drawBallObject({
+            sport: this.playData.sport,
+            ctx: this.ctx,
+            staticData: this.staticData,
+            center: { x, y },
+            puckRadius,
+            placement: 'overlapBottomRight'
+          });
+        }
+      }
     });
 
     this.ctx.restore();
@@ -77,7 +98,12 @@ export default class PlayerLayer extends BaseLayer {
     if (player.isDefender && !payerInPosition && isDefaultInputColor) {
       color = '#bb271b';
     }
-    if (player.possession) color = '#ff8000';
+
+    const shouldHighlightPossession = !this.options.showBallMode || this.options.highlightPlayerPuck;
+
+    if (player.possession && shouldHighlightPossession) {
+      color = `rgba(255, 128, 0, ${alpha})`;
+    }
 
     if (this.options.legacyPrintStyle) {
       this.ctx.lineWidth = this.courtTypeConstants.LINE_WIDTH;

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,6 +1,7 @@
 import _ from 'lodash';
 import playerHatsConfig from '../playerHatsConfig';
 import shapesConfig from '../shapesConfig';
+import ballConfig from '../ballConfig';
 import { useDefaults } from './Play/Options';
 
 import {
@@ -44,6 +45,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 +90,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 +104,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,6 +120,7 @@ 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);
@@ -190,6 +198,7 @@ export default class PlayModel {
       watermark: PlayModel.watermark,
       playerHats: PlayModel.playerHats,
       shapes: PlayModel.shapes,
+      balls: PlayModel.balls,
       playerHeadshots: PlayModel.playerHeadshots,
       teamPlayers: PlayModel.teamPlayers
     };