mozz100/fa-cup.js

## fa-cup.js
'use strict';

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 500,
    height: 500,
    scene: {
        preload: preload,
        create: create
    },
    backgroundColor: new Phaser.Display.Color(255, 255, 255)
};

var game = new Phaser.Game(config);
var mainGraphics;
var highlightGraphics;
var house;
const pointSize = 10;
const origin = new Phaser.Geom.Point(0, 0);
var fixtures = [];
const numFixtures = 32;

function preload() {
}


function draggable(game, color, x, y, size) {
    size = (size === undefined) ? pointSize : size;
    var graphics = game.add.graphics({ fillStyle: { color: color } });
    graphics.fillPointShape(origin, size);
    var container = game.add.container(x, y, [graphics]);
    container.setSize(pointSize, pointSize);
    container.setAlpha(1);
    container.setInteractive();
    game.input.setDraggable(container)
    return container;
}

function create() {
    mainGraphics = this.add.graphics({
        lineStyle: { width: 2, color: 0x999999 }
    });
    highlightGraphics = this.add.graphics({
        lineStyle: { width: 5, color: 0x134611 },
    });

    house = draggable(this, 0xe8871e, config.width / 2, config.height/2, 30);
    house.setAlpha(1);

    for (var i = 0; i < numFixtures; i++) {
        var homeTeam = draggable(this, 0x73a347, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height));
        var awayTeam = draggable(this, 0x2274a5, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height), 0);
        fixtures.push({
            home: homeTeam,
            away: awayTeam
        });
    }

    function updateGraphics(i) {
        var fixture = fixtures[i];
        mainGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
        var midPoint = Phaser.Geom.Point.Interpolate(fixture.home, fixture.away, 0.5);
        var homeDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.home.x, fixture.home.y);
        var awayDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.away.x, fixture.away.y);
        var otherDistance = 0
        for (var k = 0; k < fixtures.length; k++) {
            if (k !== i) {
                otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].home.x, fixtures[k].home.y);
                otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].away.x, fixtures[k].away.y);
            }
        }
        var totScore = parseInt(1520 * homeDistance + 496 * awayDistance + 4128 * otherDistance / (2 * (fixtures.length - 1)));
        fixture.score = totScore;
    }

    for (var j = 0; j < numFixtures; j++) {
        updateGraphics(j);
    }

    var showBestGame = function(pointer, gameObject, dragX, dragY) {
        if (gameObject !==undefined) {
            gameObject.x = dragX;
            gameObject.y = dragY;

        }
        mainGraphics.clear();
        for (var j = 0; j < numFixtures; j++) {
            updateGraphics(j);
        }
        var scores = fixtures.map(({ score }) => score);
        var minScore = Math.min(...scores);
        highlightGraphics.clear();
        for (var k = 0; k < numFixtures; k++) {
            var fixture = fixtures[k];
            if (fixture.score == minScore) {
                fixture.home.setAlpha(1);
                fixture.away.setAlpha(1);
                highlightGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
            } else {
                fixture.home.setAlpha(0.7);
                fixture.away.setAlpha(0.7);
            }
        }
    }

    this.input.on('drag', showBestGame);
    showBestGame();
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
    <style>
        html, body {
            background-color: white;
        }
    </style>
</head>

<body>

    <script src="fa-cup.js">

    </script>

</body>

</html>
	'use strict';

	var config = {
	type: Phaser.WEBGL,
	parent: 'phaser-example',
	width: 500,
	height: 500,
	scene: {
	preload: preload,
	create: create
	},
	backgroundColor: new Phaser.Display.Color(255, 255, 255)
	};

	var game = new Phaser.Game(config);
	var mainGraphics;
	var highlightGraphics;
	var house;
	const pointSize = 10;
	const origin = new Phaser.Geom.Point(0, 0);
	var fixtures = [];
	const numFixtures = 32;

	function preload() {
	}


	function draggable(game, color, x, y, size) {
	size = (size === undefined) ? pointSize : size;
	var graphics = game.add.graphics({ fillStyle: { color: color } });
	graphics.fillPointShape(origin, size);
	var container = game.add.container(x, y, [graphics]);
	container.setSize(pointSize, pointSize);
	container.setAlpha(1);
	container.setInteractive();
	game.input.setDraggable(container)
	return container;
	}

	function create() {
	mainGraphics = this.add.graphics({
	lineStyle: { width: 2, color: 0x999999 }
	});
	highlightGraphics = this.add.graphics({
	lineStyle: { width: 5, color: 0x134611 },
	});

	house = draggable(this, 0xe8871e, config.width / 2, config.height/2, 30);
	house.setAlpha(1);

	for (var i = 0; i < numFixtures; i++) {
	var homeTeam = draggable(this, 0x73a347, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height));
	var awayTeam = draggable(this, 0x2274a5, Math.floor(Math.random() * config.width), Math.floor(Math.random() * config.height), 0);
	fixtures.push({
	home: homeTeam,
	away: awayTeam
	});
	}

	function updateGraphics(i) {
	var fixture = fixtures[i];
	mainGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
	var midPoint = Phaser.Geom.Point.Interpolate(fixture.home, fixture.away, 0.5);
	var homeDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.home.x, fixture.home.y);
	var awayDistance = Phaser.Math.Distance.Between(house.x, house.y, fixture.away.x, fixture.away.y);
	var otherDistance = 0
	for (var k = 0; k < fixtures.length; k++) {
	if (k !== i) {
	otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].home.x, fixtures[k].home.y);
	otherDistance += Phaser.Math.Distance.Between(house.x, house.y, fixtures[k].away.x, fixtures[k].away.y);
	}
	}
	var totScore = parseInt(1520 * homeDistance + 496 * awayDistance + 4128 * otherDistance / (2 * (fixtures.length - 1)));
	fixture.score = totScore;
	}

	for (var j = 0; j < numFixtures; j++) {
	updateGraphics(j);
	}

	var showBestGame = function(pointer, gameObject, dragX, dragY) {
	if (gameObject !==undefined) {
	gameObject.x = dragX;
	gameObject.y = dragY;

	}
	mainGraphics.clear();
	for (var j = 0; j < numFixtures; j++) {
	updateGraphics(j);
	}
	var scores = fixtures.map(({ score }) => score);
	var minScore = Math.min(...scores);
	highlightGraphics.clear();
	for (var k = 0; k < numFixtures; k++) {
	var fixture = fixtures[k];
	if (fixture.score == minScore) {
	fixture.home.setAlpha(1);
	fixture.away.setAlpha(1);
	highlightGraphics.lineBetween(fixture.home.x, fixture.home.y, fixture.away.x, fixture.away.y);
	} else {
	fixture.home.setAlpha(0.7);
	fixture.away.setAlpha(0.7);
	}
	}
	}

	this.input.on('drag', showBestGame);
	showBestGame();
	}
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
	<style>
	html, body {
	background-color: white;
	}
	</style>
	</head>

	<body>

	<script src="fa-cup.js">

	</script>

	</body>

	</html>