const VIEWPORT_HEIGHT = 400;
const VIEWPORT_WIDTH = 400;
const MAX_BALLS_PER_GROUP = 5;
const PLAYER_SPEED = 5;
const PLAYER_RADIUS = 15;
const BALL_RADIUS = 10;
const BALL_COLOR_ID = ['red', 'blue', 'yellow'];
const MIN_VELOCITY = 15;
const MAX_VELOCITY = 200;
const GAME = new Phaser.Game({
    backgroundColor: '#efefef',
    height: VIEWPORT_HEIGHT,
    parent: 'game',
    state: {
        preload: preload,
        create: create,
        update: update,
    },
    type: Phaser.AUTO,
    width: VIEWPORT_WIDTH,
});

let player;
let balls;
let groups = {};
let counter = 0;

function preload() {
    GAME.load.crossOrigin = 'anonymous';
    GAME.load.spritesheet('ball', 'https://practical-bose-75356e.netlify.com/balls.png', 10, 10, 3);
    GAME.load.spritesheet('player', 'https://practical-bose-75356e.netlify.com/player.png', 15, 15, 3);
}

function create() {
    // New Code
    // Create logical groupings
    groups = {
        red: GAME.add.group(),
        blue: GAME.add.group(),
        yellow: GAME.add.group(),
        wild: GAME.add.group(),
    };
      
    // Enable physics for all objects in each group  
    groups.red.enableBody = true;
    groups.blue.enableBody = true;
    groups.yellow.enableBody = true;
    groups.wild.enableBody = true;
}

function update() {}