@tennisvisuals/scoring-visualizations 0.2.1

package/dist/visualizations/gameTree.js

@@ -0,0 +1,837 @@
+/* eslint-disable */
+// @ts-nocheck
+/**
+ * Game Tree Visualization - Standalone Version (D3 v7)
+ * Now supports both UMO v4 and legacy Episode formats
+ */
+import { select, scaleLinear } from 'd3';
+import { buildEpisodes } from '../episodes/buildEpisodes';
+import { keyWalk } from './utils/keyWalk';
+import { generateId } from './utils/generateId';
+import { colorShade, getHexColor } from './utils/colorUtils';
+import { applyMax, applyMin } from './utils/math';
+function get_id(d) {
+    return d?.id;
+}
+export function gameTree() {
+    // change the gradient direction in lines across width
+    // which means changing line so that it is short and wide
+    // rather than long and thick
+    //
+    // bar chart showing win % for each player or primary/opponents
+    // for each point position
+    const images = { left: undefined, right: undefined };
+    // All options that should be accessible to caller
+    let data = [];
+    const options = {
+        id: generateId(),
+        width: 150,
+        height: 150,
+        minMax: 20, // scaling factor for line widths
+        // Margins for the SVG
+        margins: {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+        },
+        display: {
+            noAd: false,
+            leftImg: false,
+            rightImg: false,
+            showImages: false,
+            sizeToFit: true,
+            showEmpty: false, // display even if no data
+        },
+        lines: {
+            easing: false, // 'bounce'
+            duration: 600,
+            points: { winners: '#2ed2db', errors: '#2ed2db', unknown: '#2ed2db' },
+            colors: { underlines: '#2ed2db' },
+        },
+        nodes: {
+            colors: { 0: 'black', 1: 'red', neutral: '#ecf0f1' },
+        },
+        points: {
+            winners: [
+                'Winner',
+                'Ace',
+                'Serve Winner',
+                'Passing Shot',
+                'Return Winner',
+                'Forcing Error',
+                'Forcing Volley Error',
+                'Net Cord',
+                'In',
+            ],
+            errors: [
+                'Unforced Error',
+                'Unforced',
+                'Forced Error',
+                'Error',
+                'Out',
+                'Net',
+                'Netted Passing Shot',
+                'L',
+                'Overhead Passing Shot',
+                'Double Fault',
+            ],
+            highlight: [], // opposite of filter; filter unhighlighted...
+        },
+        selectors: {
+            enabled: true,
+            selected: { 0: false, 1: false },
+        },
+        labels: { Game: 'GAME', Player: 'Player', Opponent: 'Opponent' },
+    };
+    // functions which should be accessible via ACCESSORS
+    let update;
+    // PROGRAMMATIC
+    // ------------
+    let canvas;
+    let radius;
+    const transitionTime = 0;
+    const pointConnector = 'x';
+    let counters = { w: {}, e: {}, p: {}, n: {} };
+    let activeNodeName = null;
+    function nsId(base) {
+        return `${base}_${options.id}`;
+    }
+    // DEFINABLE EVENTS
+    // Define with ACCESSOR function chart.events()
+    const events = {
+        leftImage: { click: null },
+        rightImage: { click: null },
+        update: { begin: null, end: null },
+        point: { mousemove: null, mouseout: null, click: null },
+        node: { mousemove: null, mouseout: null, click: null },
+        score: { mousemove: null, mouseout: null, click: null },
+        label: { mousemove: null, mouseout: null, click: selectView },
+        selector: { mousemove: null, mouseout: null, click: selectView },
+    };
+    function chart(selection) {
+        const root = selection.append('div').attr('class', 'gametreeRoot');
+        canvas = root.append('svg');
+        update = function (opts) {
+            if (!data.length && !options.display.showEmpty) {
+                canvas.selectAll('*').remove();
+                return;
+            }
+            counterCalcs();
+            if (options.display.sizeToFit || opts?.sizeToFit) {
+                const dims = selection.node().getBoundingClientRect();
+                options.width = Math.min(dims.width, dims.height);
+            }
+            const treeWidth = options.width - (options.margins.left + options.margins.right);
+            const treeHeight = options.width * 0.9;
+            radius = ((treeHeight + treeWidth) / 2) * 0.03;
+            const keys = point_lines.map(function (m) {
+                return m.id;
+            });
+            const point_min = applyMin(keys.map(function (k) {
+                return isNaN(counters.p[k]) ? 0 : counters.p[k];
+            }));
+            const point_max = applyMax([
+                applyMax(keys.map(function (k) {
+                    return isNaN(counters.p[k]) ? 0 : counters.p[k];
+                })),
+                options.minMax,
+            ]);
+            const scale = scaleLinear()
+                .domain([point_min, point_max])
+                .range([0, radius * 2]);
+            canvas.transition().duration(transitionTime).attr('width', treeWidth).attr('height', treeHeight);
+            // D3 v7: Use .join() pattern and save merged selection
+            const gradientsMerged = canvas
+                .selectAll('.gradient')
+                .data(point_lines, get_id)
+                .join('linearGradient')
+                .attr('id', (d) => {
+                return 'gradient' + nsId(d.id);
+            })
+                .attr('class', 'gradient')
+                .attr('gradientUnits', 'userSpaceOnUse')
+                .attr('x1', (d) => {
+                return d.start.x * treeWidth;
+            })
+                .attr('y1', (d) => {
+                return d.start.y * treeHeight;
+            })
+                .attr('x2', (d) => {
+                return d.end.x * treeWidth;
+            })
+                .attr('y2', (d) => {
+                return d.end.y * treeHeight;
+            });
+            // D3 v7: Use .join() for stops and operate on saved merged selection
+            gradientsMerged
+                .selectAll('.points_stop')
+                .data((d) => {
+                return calcStops(d);
+            })
+                .join('stop')
+                .attr('class', 'points_stop')
+                .attr('offset', (d) => {
+                return d.offset;
+            })
+                .attr('stop-color', (d) => {
+                return d.color;
+            });
+            // D3 v7: Use .join() with enter/update transitions
+            canvas
+                .selectAll('.line')
+                .data(point_lines)
+                .join((enter) => enter
+                .append('line')
+                .attr('class', 'line')
+                .attr('id', (d) => nsId(d.id))
+                .attr('x1', (d) => d.start.x * treeWidth)
+                .attr('y1', (d) => d.start.y * treeHeight)
+                .attr('x2', (d) => d.end.x * treeWidth)
+                .attr('y2', (d) => d.end.y * treeHeight)
+                .attr('stroke-width', (d) => (d.width ? d.width : 0))
+                .attr('stroke', (d) => 'url(#gradient' + nsId(d.id) + ')')
+                .on('mousemove', function (event, d) {
+                if (events.point.mousemove)
+                    events.point.mousemove(d, event);
+            })
+                .on('mouseout', function (event, d) {
+                if (events.point.mouseout)
+                    events.point.mouseout(d, event);
+            })
+                .on('click', function (event, d) {
+                if (events.point.click)
+                    events.point.click(d, event);
+            }), (update) => update)
+                .transition()
+                .duration(options.lines.easing || (opts && opts.easing) ? options.lines.duration : 0)
+                .attr('x1', (d) => d.start.x * treeWidth)
+                .attr('y1', (d) => d.start.y * treeHeight)
+                .attr('x2', (d) => d.end.x * treeWidth)
+                .attr('y2', (d) => d.end.y * treeHeight)
+                .attr('stroke-width', (d) => (counters.p[d.id] ? scale(counters.p[d.id]) : 0));
+            canvas
+                .selectAll('.uline')
+                .data(under_lines)
+                .join((enter) => enter
+                .append('line')
+                .attr('class', 'uline')
+                .attr('stroke', function () {
+                return options.lines.colors.underlines;
+            }))
+                .transition()
+                .duration(transitionTime)
+                .attr('id', function (d) {
+                return nsId(d.id);
+            })
+                .attr('x1', function (d) {
+                return d.start.x * treeWidth;
+            })
+                .attr('y1', function (d) {
+                return d.start.y * treeHeight;
+            })
+                .attr('x2', function (d) {
+                return d.end.x * treeWidth;
+            })
+                .attr('y2', function (d) {
+                return d.end.y * treeHeight;
+            })
+                .attr('stroke-width', (d) => {
+                return d.width ? d.width : 0;
+            });
+            canvas
+                .selectAll('.node')
+                .data(point_circles)
+                .join((enter) => enter
+                .append('circle')
+                .attr('class', 'node')
+                .attr('stroke', function (d) {
+                return d.color_pct != undefined
+                    ? colorShade(getHexColor(options.nodes.colors[d.player]), d.color_pct)
+                    : options.nodes.colors.neutral;
+            })
+                .attr('fill', function (d) {
+                return d.color_pct != undefined
+                    ? colorShade(getHexColor(options.nodes.colors[d.player]), d.color_pct)
+                    : options.nodes.colors.neutral;
+            })
+                .on('mousemove', function (d, i) {
+                if (events.node.mousemove)
+                    events.node.mousemove(d, i);
+            })
+                .on('mouseout', function (d, i) {
+                if (events.node.mouseout)
+                    events.node.mouseout(d, i);
+            })
+                .on('click', function (d, i) {
+                if (events.node.click)
+                    events.node.click(d, i);
+            }))
+                .transition()
+                .duration(transitionTime)
+                .attr('cx', function (d) {
+                return d.pos.x * treeWidth;
+            })
+                .attr('cy', function (d) {
+                return d.pos.y * treeHeight;
+            })
+                .attr('r', function () {
+                return radius;
+            });
+            // Bounce animation on the active node
+            if (activeNodeName) {
+                const activePosKey = 'p' + activeNodeName;
+                canvas
+                    .selectAll('.node')
+                    .filter(function (d) {
+                    // Match by position object reference
+                    return d.pos === pos[activePosKey];
+                })
+                    .transition()
+                    .duration(200)
+                    .attr('r', radius * 1.8)
+                    .transition()
+                    .duration(300)
+                    .attr('r', radius);
+            }
+            canvas
+                .selectAll('.score')
+                .data(point_text)
+                .join((enter) => enter
+                .append('text')
+                .attr('class', 'score')
+                .attr('font-family', 'Lato, Arial, sans-serif')
+                .attr('text-anchor', 'middle')
+                .attr('alignment-baseline', 'central')
+                .attr('stroke', (d) => {
+                return d.stroke;
+            })
+                .attr('fill', (d) => {
+                return d.fill;
+            })
+                .on('mousemove', function (d, i) {
+                if (events.score.mousemove)
+                    events.score.mousemove(d, i);
+            })
+                .on('mouseout', function (d, i) {
+                if (events.score.mouseout)
+                    events.score.mouseout(d, i);
+            })
+                .on('click', function (d, i) {
+                if (events.score.click)
+                    events.score.click(d, i);
+            }))
+                .transition()
+                .duration(transitionTime)
+                .attr('x', (d) => {
+                return d.pos.x * treeWidth;
+            })
+                .attr('y', (d) => {
+                return d.pos.y * treeHeight;
+            })
+                .attr('font-size', (d) => {
+                return radius * d.fontsize + 'px';
+            })
+                .text((d) => {
+                if (radius * d.fontsize > 5)
+                    return d.text;
+            });
+            canvas
+                .selectAll('.gt_label')
+                .data(label_text)
+                .join((enter) => enter
+                .append('text')
+                .attr('class', 'gt_label')
+                .attr('alignment-baseline', (d) => {
+                return d.baseline ? d.baseline : undefined;
+            })
+                .attr('text-anchor', (d) => {
+                return d.anchor ? d.anchor : undefined;
+            })
+                .attr('font-family', 'Lato, Arial, sans-serif')
+                .attr('stroke', (d) => {
+                return d.stroke;
+            })
+                .attr('fill', (d) => {
+                return d.fill;
+            })
+                .attr('selector', (d) => {
+                return d.id;
+            })
+                .on('click', function (event, d) {
+                if (events.label.click)
+                    events.label.click(event, d, this);
+            }))
+                .transition()
+                .duration(transitionTime)
+                .attr('x', (d) => {
+                return d.pos.x * treeWidth;
+            })
+                .attr('y', (d) => {
+                return d.pos.y * treeHeight;
+            })
+                .attr('font-size', (d) => {
+                return radius * d.fontsize + 'px';
+            })
+                .text((d) => {
+                if (radius * d.fontsize > 5)
+                    return options.labels[d.id];
+            });
+            canvas
+                .selectAll('.selector')
+                .data(selectors)
+                .join((enter) => enter
+                .append('circle')
+                .attr('class', 'selector')
+                .attr('status', function (d) {
+                return d.status;
+            })
+                .attr('id', function (d) {
+                return nsId(d.id);
+            })
+                .attr('selector', function (d) {
+                return d.id;
+            })
+                .attr('stroke', function (_, i) {
+                return options.nodes.colors[i];
+            })
+                .attr('opacity', function (d) {
+                return d.opacity;
+            })
+                .on('mousemove', function (event, d) {
+                if (events.selector.mousemove)
+                    events.selector.mousemove(event, d);
+            })
+                .on('mouseout', function (event, d) {
+                if (events.selector.mouseout)
+                    events.selector.mouseout(event, d);
+            })
+                .on('click', function (event, d) {
+                if (events.selector.click)
+                    events.selector.click(event, d, this);
+            }))
+                .transition()
+                .duration(transitionTime)
+                .attr('cx', function (d) {
+                return d.pos.x * treeWidth;
+            })
+                .attr('cy', function (d) {
+                return d.pos.y * treeHeight + 4;
+            })
+                .attr('r', function (d) {
+                return radius * d.r_pct;
+            })
+                .attr('stroke-width', function () {
+                return radius * 0.25;
+            })
+                .attr('fill', function (_, i) {
+                const neitherSelected = !options.selectors.selected[0] && !options.selectors.selected[1];
+                return !options.selectors.enabled || neitherSelected || options.selectors.selected[i]
+                    ? options.nodes.colors[i]
+                    : options.nodes.colors.neutral;
+            });
+            if (options.display.rightImg) {
+                images.right = canvas
+                    .selectAll('image.rightImage')
+                    .data([0])
+                    .join((enter) => enter
+                    .append('image')
+                    .attr('class', 'rightImage')
+                    .attr('y', 5)
+                    .attr('height', '20px')
+                    .attr('width', '20px')
+                    .attr('opacity', options.display.showImages ? 1 : 0))
+                    .attr('x', options.width - (options.margins.right + 30))
+                    .attr('xlink:href', options.display.rightImg)
+                    .on('click', function () {
+                    if (events.rightImage.click)
+                        events.rightImage.click(options.id);
+                });
+            }
+            else {
+                root.selectAll('image.rightImage').remove();
+            }
+            if (options.display.leftImg) {
+                images.left = canvas
+                    .selectAll('image.leftImage')
+                    .data([0])
+                    .join((enter) => enter
+                    .append('image')
+                    .attr('class', 'leftImage')
+                    .attr('y', 5)
+                    .attr('height', '20px')
+                    .attr('width', '20px')
+                    .attr('opacity', options.display.showImages ? 1 : 0))
+                    .attr('x', 10 + options.margins.left)
+                    .attr('xlink:href', options.display.leftImg)
+                    .on('click', function () {
+                    if (events.leftImage.click)
+                        events.leftImage.click(options.id);
+                });
+            }
+            else {
+                root.selectAll('image.leftImage').remove();
+            }
+            /*
+            function showImages() {
+              if (options.display.showImages == false) return;
+              if (options.display.leftImg) images.left.attr('opacity', 1);
+              if (options.display.rightImg) images.right.attr('opacity', 1);
+            }
+      
+            function hideImages() {
+              if (options.display.showImages) return;
+              if (options.display.leftImg) images.left.attr('opacity', 0);
+              if (options.display.rightImg) images.right.attr('opacity', 0);
+            }
+            */
+        };
+    }
+    // ACCESSORS
+    chart.exports = function () {
+        return { selectView: selectView };
+    };
+    // allows updating individual options and suboptions
+    // while preserving state of other options
+    chart.options = function (values) {
+        if (!arguments.length)
+            return options;
+        keyWalk(values, options);
+        if (values.events)
+            keyWalk(values.events, events);
+        return chart;
+    };
+    chart.events = function (functions) {
+        if (!arguments.length)
+            return events;
+        keyWalk(functions, events);
+        return chart;
+    };
+    chart.reset = function () {
+        data = [];
+        clearView();
+        counters = { w: {}, e: {}, p: {}, n: {} };
+        return chart;
+    };
+    chart.width = function (value) {
+        if (!arguments.length)
+            return options.width;
+        options.width = value;
+        return chart;
+    };
+    chart.height = function (value) {
+        if (!arguments.length)
+            return options.height;
+        options.height = value;
+        return chart;
+    };
+    chart.data = function (values) {
+        if (!arguments.length)
+            return data;
+        if (values.constructor === Array) {
+            chart.reset();
+            data = values;
+        }
+        return chart;
+    };
+    chart.players = function (names) {
+        options.labels.Player = names[0];
+        options.labels.Opponent = names[1];
+        return chart;
+    };
+    chart.matchUp = function (matchUpState, names) {
+        if (names)
+            chart.players(names);
+        const episodes = buildEpisodes(matchUpState);
+        chart.data(episodes);
+        return chart;
+    };
+    chart.counters = function () {
+        counterCalcs();
+        return counters;
+    };
+    chart.update = function (opts) {
+        if (events.update.begin)
+            events.update.begin();
+        if (typeof update === 'function')
+            update(opts);
+        setTimeout(function () {
+            if (events.update.end)
+                events.update.end();
+        }, transitionTime);
+    };
+    // REUSABLE FUNCTIONS
+    // ------------------
+    function counterCalcs() {
+        let _data;
+        // w = winners, e = errors, p = points, n = nodes
+        counters = { w: {}, e: {}, p: {}, n: {} };
+        if (options.selectors.selected[0] || options.selectors.selected[1]) {
+            const selected = options.selectors.selected[0] ? 0 : 1;
+            _data = data.filter(function (f) {
+                return f.point.server == selected;
+            });
+        }
+        else {
+            _data = data;
+        }
+        _data = _data.filter(function (f) {
+            return !f.point.tiebreak;
+        });
+        for (let d = 0; d < _data.length; d++) {
+            const previous_episode = _data[d - 1];
+            const previous = d == 0 || previous_episode.game.complete ? calcPosition([0, 0]) : calcPosition(previous_episode.point.points);
+            const progression = 'L' + previous + pointConnector + calcPosition(_data[d].point.points);
+            if (options.points.highlight.length && !options.points.highlight.includes(d)) {
+                continue;
+            }
+            counters.p[progression] = counters.p[progression] ? counters.p[progression] + 1 : 1;
+            if (options.points.winners.includes(_data[d].point.result)) {
+                counters.w[progression] = counters.w[progression] ? counters.w[progression] + 1 : 1;
+            }
+            else if (options.points.errors.includes(_data[d].point.result)) {
+                counters.e[progression] = counters.e[progression] ? counters.e[progression] + 1 : 1;
+            }
+        }
+        // Determine the active node (last point's position)
+        if (_data.length > 0) {
+            const lastEp = _data[_data.length - 1];
+            if (lastEp.game.complete) {
+                activeNodeName = null; // game just completed, no active position
+            }
+            else {
+                activeNodeName = calcPosition(lastEp.point.points);
+            }
+        }
+        else {
+            activeNodeName = null;
+        }
+        // make adjustment for multiple dueces
+        function calcPosition(points) {
+            const point_min = Math.min(...points);
+            const diff = point_min >= 4 ? point_min - 3 : 0;
+            const pos = points.map((point, index) => options.display.noAd && point == 4 && points[1 - index] == 3 ? 'G' : point - diff);
+            return pos.join('-');
+        }
+    }
+    function clearView() {
+        if (canvas) {
+            canvas.select(`[id=${nsId('Player')}]`).attr('opacity', 0.4).attr('status', 'none').attr('fill', options.nodes.colors.neutral);
+            canvas.select(`[id=${nsId('Opponent')}]`).attr('opacity', 0.4).attr('status', 'none').attr('fill', options.nodes.colors.neutral);
+        }
+        options.selectors.selected[1] = false;
+        options.selectors.selected[0] = false;
+    }
+    function selectView(_event, _datum, self) {
+        if (!options.selectors.enabled)
+            return;
+        const selector = select(self).attr('selector');
+        const isOpponent = selector === 'Opponent';
+        const playerIdx = isOpponent ? 1 : 0;
+        if (canvas.select(`[id=${nsId(selector)}]`).attr('status') == 'none') {
+            if (isOpponent) {
+                canvas.select(`[id=${nsId('Player')}]`).attr('opacity', 0.4).attr('status', 'none').attr('fill', options.nodes.colors.neutral);
+                canvas.select(`[id=${nsId('Opponent')}]`).attr('opacity', 1).attr('status', 'selected').attr('fill', options.nodes.colors[playerIdx]);
+                options.selectors.selected[1] = true;
+                options.selectors.selected[0] = false;
+            }
+            else {
+                canvas.select(`[id=${nsId('Opponent')}]`).attr('opacity', 0.4).attr('status', 'none').attr('fill', options.nodes.colors.neutral);
+                canvas.select(`[id=${nsId('Player')}]`).attr('opacity', 1).attr('status', 'selected').attr('fill', options.nodes.colors[playerIdx]);
+                options.selectors.selected[0] = true;
+                options.selectors.selected[1] = false;
+            }
+        }
+        else {
+            // Clicking already-selected player removes all filters
+            options.selectors.selected[0] = false;
+            options.selectors.selected[1] = false;
+            canvas.select(`[id=${nsId('Player')}]`).attr('opacity', 1).attr('status', 'none').attr('fill', options.nodes.colors[0]);
+            canvas.select(`[id=${nsId('Opponent')}]`).attr('opacity', 1).attr('status', 'none').attr('fill', options.nodes.colors[1]);
+        }
+        update();
+    }
+    function calcStops(d) {
+        if (!counters.p[d.id])
+            return [];
+        const total_points = counters.p[d.id] == undefined ? 1 : counters.p[d.id];
+        const winners = counters.w[d.id] ? counters.w[d.id] : 0;
+        const errors = counters.e[d.id] ? counters.e[d.id] : 0;
+        const winner_pct = (winners / total_points) * 100;
+        // const error_pct = (errors / total_points) * 100;
+        const u_pct = ((total_points - (winners + errors)) / total_points) * 100;
+        return [
+            { offset: '0%', color: options.lines.points.unknown },
+            { offset: u_pct + '%', color: options.lines.points.unknown },
+            { offset: u_pct + '%', color: options.lines.points.winners },
+            { offset: u_pct + winner_pct + '%', color: options.lines.points.winners },
+            { offset: u_pct + winner_pct + '%', color: options.lines.points.errors },
+            { offset: '100%', color: options.lines.points.errors },
+        ];
+    }
+    // DATA
+    // --------------
+    const c_start = 0.07;
+    const c_dist = 0.14;
+    const r_start = 0.05;
+    const r_dist = 0.21;
+    const f = {
+        col1: c_start,
+        col2: c_start + c_dist,
+        col3: c_start + 2 * c_dist,
+        col4: c_start + 3 * c_dist,
+        col5: c_start + 4 * c_dist,
+        col6: c_start + 5 * c_dist,
+        col7: c_start + 6 * c_dist,
+        row1: r_start,
+        row2: r_start + r_dist,
+        row3: r_start + 2 * r_dist,
+        row4: r_start + 3 * r_dist,
+        row5: r_start + 4 * r_dist,
+        foot: r_start + 4.1 * r_dist,
+        adr1: r_start + 3.5 * r_dist,
+        adc1: c_start + c_dist * 2.5,
+        adc2: c_start + c_dist * 3.5,
+        selc: c_start * 0.8,
+        tslc: c_start,
+        sl1r: r_start / 2,
+        sl2r: r_start * 1.5,
+        plr1: c_start * 0.8,
+        plr2: c_start + 4 * c_dist,
+        plrs: r_start + 4.25 * r_dist,
+    };
+    const pos = {
+        'p0-0': { x: f.col4, y: f.row1 },
+        'p1-1': { x: f.col4, y: f.row2 },
+        'p2-2': { x: f.col4, y: f.row3 },
+        'p3-3': { x: f.col4, y: f.row4 },
+        'p1-0': { x: f.col3, y: f.row2 },
+        'p0-1': { x: f.col5, y: f.row2 },
+        'p2-1': { x: f.col3, y: f.row3 },
+        'p1-2': { x: f.col5, y: f.row3 },
+        'p2-0': { x: f.col2, y: f.row3 },
+        'p0-2': { x: f.col6, y: f.row3 },
+        'p3-2': { x: f.col3, y: f.row4 },
+        'p2-3': { x: f.col5, y: f.row4 },
+        'p3-1': { x: f.col2, y: f.row4 },
+        'p1-3': { x: f.col6, y: f.row4 },
+        'p3-0': { x: f.col1, y: f.row4 },
+        'p0-3': { x: f.col7, y: f.row4 },
+        'p3-4': { x: f.adc1, y: f.adr1 },
+        'p4-3': { x: f.adc2, y: f.adr1 },
+        'p5-3': { x: f.adc2, y: f.row5 },
+        'p3-5': { x: f.adc1, y: f.row5 },
+        'p4-1': { x: f.col2, y: f.row5 },
+        'p1-4': { x: f.col6, y: f.row5 },
+        'p4-2': { x: f.col3, y: f.row5 },
+        'p2-4': { x: f.col5, y: f.row5 },
+        'p4-0': { x: f.col1, y: f.row5 },
+        'p0-4': { x: f.col7, y: f.row5 },
+        // No Ad
+        'pG-3': { x: f.col4, y: f.row5 },
+        'p3-G': { x: f.col4, y: f.row5 },
+        sPlyr: { x: f.adc1, y: f.plrs },
+        tPlyr: { x: f.col2, y: f.plrs },
+        sOpp: { x: f.adc2, y: f.plrs },
+        tOpp: { x: f.col6, y: f.plrs },
+        GAME: { x: f.col4, y: f.foot },
+        L1s: { x: f.col1, y: f.foot },
+        L1e: { x: f.adc1, y: f.foot },
+        L2s: { x: f.adc2, y: f.foot },
+        L2e: { x: f.col7, y: f.foot },
+    };
+    const point_circles = [
+        { name: '0-0', pos: pos['p0-0'], player: 0 },
+        { name: '15-15', pos: pos['p1-1'], player: 0 },
+        { name: '30-30', pos: pos['p2-2'], player: 0 },
+        { name: '40-40', pos: pos['p3-3'], player: 0 },
+        { name: '0-15', pos: pos['p0-1'], color_pct: 0.4, player: 1 },
+        { name: '15-30', pos: pos['p1-2'], color_pct: 0.4, player: 1 },
+        { name: '0-30', pos: pos['p0-2'], color_pct: 0.2, player: 1 },
+        { name: '30-40', pos: pos['p2-3'], color_pct: 0.4, player: 1 },
+        { name: '15-40', pos: pos['p1-3'], color_pct: 0.2, player: 1 },
+        { name: '0-40', pos: pos['p0-3'], color_pct: 0, player: 1 },
+        { name: '40-A', pos: pos['p4-3'], color_pct: 0.5, player: 1 },
+        { name: '15-0', pos: pos['p1-0'], color_pct: 0.4, player: 0 },
+        { name: '30-15', pos: pos['p2-1'], color_pct: 0.4, player: 0 },
+        { name: '30-0', pos: pos['p2-0'], color_pct: 0.2, player: 0 },
+        { name: '40-30', pos: pos['p3-2'], color_pct: 0.4, player: 0 },
+        { name: '40-15', pos: pos['p3-1'], color_pct: 0.2, player: 0 },
+        { name: '40-0', pos: pos['p3-0'], color_pct: 0, player: 0 },
+        { name: 'A-40', pos: pos['p3-4'], color_pct: 0.5, player: 0 },
+    ];
+    const point_lines = [
+        { id: 'L0-0x0-1', start: pos['p0-0'], end: pos['p0-1'] },
+        { id: 'L0-0x1-0', start: pos['p0-0'], end: pos['p1-0'] },
+        { id: 'L0-1x0-2', start: pos['p0-1'], end: pos['p0-2'] },
+        { id: 'L0-1x1-1', start: pos['p0-1'], end: pos['p1-1'] },
+        { id: 'L1-0x2-0', start: pos['p1-0'], end: pos['p2-0'] },
+        { id: 'L1-0x1-1', start: pos['p1-0'], end: pos['p1-1'] },
+        { id: 'L1-1x1-2', start: pos['p1-1'], end: pos['p1-2'] },
+        { id: 'L1-1x2-1', start: pos['p1-1'], end: pos['p2-1'] },
+        { id: 'L2-0x2-1', start: pos['p2-0'], end: pos['p2-1'] },
+        { id: 'L2-0x3-0', start: pos['p2-0'], end: pos['p3-0'] },
+        { id: 'L2-1x2-2', start: pos['p2-1'], end: pos['p2-2'] },
+        { id: 'L2-1x3-1', start: pos['p2-1'], end: pos['p3-1'] },
+        { id: 'L2-2x2-3', start: pos['p2-2'], end: pos['p2-3'] },
+        { id: 'L2-2x3-2', start: pos['p2-2'], end: pos['p3-2'] },
+        { id: 'L0-2x0-3', start: pos['p0-2'], end: pos['p0-3'] },
+        { id: 'L0-2x1-2', start: pos['p0-2'], end: pos['p1-2'] },
+        { id: 'L0-3x0-4', start: pos['p0-3'], end: pos['p0-4'] },
+        { id: 'L0-3x1-3', start: pos['p0-3'], end: pos['p1-3'] },
+        { id: 'L1-2x2-2', start: pos['p1-2'], end: pos['p2-2'] },
+        { id: 'L1-2x1-3', start: pos['p1-2'], end: pos['p1-3'] },
+        { id: 'L1-3x2-3', start: pos['p1-3'], end: pos['p2-3'] },
+        { id: 'L1-3x1-4', start: pos['p1-3'], end: pos['p1-4'] },
+        { id: 'L2-3x3-3', start: pos['p2-3'], end: pos['p3-3'] },
+        { id: 'L2-3x2-4', start: pos['p2-3'], end: pos['p2-4'] },
+        { id: 'L3-3x3-4', start: pos['p3-3'], end: pos['p4-3'] },
+        { id: 'L3-3x4-3', start: pos['p3-3'], end: pos['p3-4'] },
+        { id: 'L3-2x3-3', start: pos['p3-2'], end: pos['p3-3'] },
+        { id: 'L3-2x4-2', start: pos['p3-2'], end: pos['p4-2'] },
+        { id: 'L3-1x3-2', start: pos['p3-1'], end: pos['p3-2'] },
+        { id: 'L3-1x4-1', start: pos['p3-1'], end: pos['p4-1'] },
+        { id: 'L3-0x3-1', start: pos['p3-0'], end: pos['p3-1'] },
+        { id: 'L3-0x4-0', start: pos['p3-0'], end: pos['p4-0'] },
+        { id: 'L3-4x3-5', start: pos['p4-3'], end: pos['p5-3'] },
+        { id: 'L4-3x5-3', start: pos['p3-4'], end: pos['p3-5'] },
+        // no Ad
+        { id: 'L3-3xG-3', start: pos['p3-3'], end: pos['pG-3'] },
+        { id: 'L3-3x3-G', start: pos['p3-3'], end: pos['p3-G'] },
+    ];
+    const under_lines = [
+        { stroke: 'blue', start: pos['L1s'], end: pos['L1e'], width: 2 },
+        { stroke: 'blue', start: pos['L2s'], end: pos['L2e'], width: 2 },
+    ];
+    const point_text = [
+        { pos: pos['p0-0'], fill: 'black', fontsize: 0.7, text: '0-0' },
+        { pos: pos['p1-1'], fill: 'black', fontsize: 0.7, text: '15-15' },
+        { pos: pos['p2-2'], fill: 'black', fontsize: 0.7, text: '30-30' },
+        { pos: pos['p3-3'], fill: 'black', fontsize: 0.7, text: '40-40' },
+        { pos: pos['p0-1'], fill: 'white', fontsize: 0.7, text: '0-15' },
+        { pos: pos['p1-2'], fill: 'white', fontsize: 0.7, text: '15-30' },
+        { pos: pos['p0-2'], fill: 'white', fontsize: 0.7, text: '0-30' },
+        { pos: pos['p2-3'], fill: 'white', fontsize: 0.7, text: '30-40' },
+        { pos: pos['p1-3'], fill: 'white', fontsize: 0.7, text: '15-40' },
+        { pos: pos['p0-3'], fill: 'white', fontsize: 0.7, text: '0-40' },
+        { pos: pos['p4-3'], fill: 'white', fontsize: 0.7, text: '40-A' },
+        { pos: pos['p1-0'], fill: 'white', fontsize: 0.7, text: '15-0' },
+        { pos: pos['p2-1'], fill: 'white', fontsize: 0.7, text: '30-15' },
+        { pos: pos['p2-0'], fill: 'white', fontsize: 0.7, text: '30-0' },
+        { pos: pos['p3-2'], fill: 'white', fontsize: 0.7, text: '40-30' },
+        { pos: pos['p3-1'], fill: 'white', fontsize: 0.7, text: '40-15' },
+        { pos: pos['p3-0'], fill: 'white', fontsize: 0.7, text: '40-0' },
+        { pos: pos['p3-4'], fill: 'white', fontsize: 0.7, text: 'A-40' },
+    ];
+    const label_text = [
+        { pos: pos['tPlyr'], fill: 'black', fontsize: 0.9, id: 'Player', anchor: 'middle', baseline: 'hanging' },
+        { pos: pos['tOpp'], fill: 'black', fontsize: 0.9, id: 'Opponent', anchor: 'middle', baseline: 'hanging' },
+        { pos: pos['GAME'], fill: '#555555', fontsize: 0.9, id: 'Game', anchor: 'middle', baseline: 'central' },
+    ];
+    const selectors = [
+        { id: 'Player', pos: pos['sPlyr'], r_pct: 0.4, opacity: 1, status: 'none' },
+        { id: 'Opponent', pos: pos['sOpp'], r_pct: 0.4, opacity: 0.4, status: 'none' },
+    ];
+    return chart;
+}
+//# sourceMappingURL=gameTree.js.map