/**
     * Invoked after a player changes their color,
     * so we have a chance to recolor this Unit's sprites.
     */
    public recolor(): void {
        super.recolor();

        // <<-- Creer-Merge: recolor -->>
        const color = this.game.getPlayersColor(this.ownerID).rgbNumber();
        this.jobSprite.tint = color;
        this.healthBar.recolor(color);
        // <<-- /Creer-Merge: recolor -->>
    }

    /**
     * Invoked after a player changes their color,
     * so we have a chance to recolor this Beaver's sprites.
     */
    public recolor(): void {
        super.recolor();

        // <<-- Creer-Merge: recolor -->>
        const color = this.game.getPlayersColor(this.ownerID);
        this.tailSprite.tint = color.lighten(0.15).rgbNumber();
        this.healthBar.recolor(color.lighten(0.5));
        // <<-- /Creer-Merge: recolor -->>
    }

    /**
     * Called approx 60 times a second to update and render Machine instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IMachineState>,
        next: Immutable<IMachineState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        this.workBar.update(ease(current.worked, next.worked, dt));
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Unit instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IUnitState>,
        next: Immutable<IUnitState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        // render where the Unit is

        // No longer on the map.
        if (!next.tile) {
            this.container.visible = false;

            return;
        }
        this.container.visible = true;
        this.container.position.set(
            ease(current.tile.x, next.tile.x, dt),
            ease(current.tile.y, next.tile.y, dt),
        );

        this.healthBar.update(ease(current.health, next.health, dt));
        pixiFade(this.container, dt, current.health, next.health);

        if (this.attackingTile) {
            const d = updown(dt);
            const dx = (this.attackingTile.x - current.tile.x) / 2;
            const dy = (this.attackingTile.y - current.tile.y) / 2;

            this.container.x += dx * d;
            this.container.y += dy * d;
        }
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Furnishing instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IFurnishingState>,
        next: Immutable<IFurnishingState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>

        if (current.isDestroyed) {
            this.container.visible = false;

            if (this.musicSprite) {
                this.musicSprite.visible = false;
            }

            // we are destroyed an invisible, so let's get out of here
            return;
        }

        // else we are visible!
        this.container.visible = true;

        this.healthBar.update(ease(current.health, next.health, dt, "cubicInOut"));

        // display the hit if took damage
        const randomRotation = (current.tile.x + current.tile.y); // random-ish
        if (current.health === next.health) {
            this.hitSprite.visible = false;
        }
        else { // we got hit!
            this.hitSprite.visible = true;
            this.hitSprite.alpha = ease(1 - dt, "cubicInOut"); // fade it out
            this.hitSprite.rotation = randomRotation;
        }

        // fade out if destroyed next turn
        this.container.alpha = next.isDestroyed
            ? ease(1 - dt, "cubicInOut")
            : 1;

        if (this.musicSprite) {
            if (current.isPlaying || next.isPlaying) {
                this.musicSprite.visible = true;

                let alpha = 1;
                let y = this.y;
                if (!current.isPlaying && next.isPlaying) { // music notes need to move up
                    alpha = ease(dt, "cubicInOut");
                    y -= alpha / 2;
                }
                else if (current.isPlaying && !next.isPlaying) { // music notes need to move down
                    alpha = ease(1 - dt, "cubicInOut");
                    y -= alpha / 2;
                }
                else { // current and next isPlaying
                    y -= 0.5;
                }

                this.musicSprite.alpha = alpha;
                this.musicSprite.y = y;
            }
            else {
                this.musicSprite.visible = false;
            }
        }

        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Beaver instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IBeaverState>,
        next: Immutable<IBeaverState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>

        if (current.health === 0) {  // Then beaver is dead.
            this.container.visible = false;

            return; // No need to render a dead beaver.
        }

        // otherwise, we have a (maybe) happy living beaver
        this.container.visible = true;

        const currentTile = current.tile;
        let nextTile = next.tile;

        if (current.health > 0 && next.health <= 0) {
            // The Beaver died between current and next.

            // Dead beavers have no tile in their next state,
            // so use the one they had before.
            nextTile = currentTile;
            this.container.alpha = ease(1 - dt, "cubicInOut"); // fade the beaver sprite
        }
        else {
            this.container.alpha = 1; // ITS ALIVE
        }

        // update their health bar, if they want it to be displayed
        this.healthBar.update(
            ease(current.health, next.health, dt, "cubicInOut"),
        );

        // render the beaver easing the transition from their current tile to their next tile
        this.container.x = ease(currentTile.x, nextTile.x, dt, "cubicInOut");
        this.container.y = ease(currentTile.y, nextTile.y, dt, "cubicInOut");

        // update its status bubbles
        this.attackingSprite.visible = false;
        this.gettingBranchSprite.visible = false;
        this.gettingFoodSprite.visible = false;
        this.distractedSprite.visible = current.turnsDistracted > 0;

        let bumpInto: undefined | ITileState; // Find something to bump into

        if (this.attacking) {
            this.attackingSprite.visible = true;
            bumpInto = this.attacking.getCurrentMostState().tile;
        }
        else if (this.harvesting) {
            const harvesting = this.harvesting.getCurrentMostState();
            if (harvesting.type === "food") {
                this.gettingFoodSprite.visible = true;
            }
            else { // tree branches
                this.gettingBranchSprite.visible = true;
            }

            bumpInto = harvesting.tile;
        }

        // if we found something to bump into, animate it bumping into it half way
        if (bumpInto) {
            const d = updown(dt);
            const dx = (bumpInto.x - current.tile.x) / 2;
            const dy = (bumpInto.y - current.tile.y) / 2;

            this.container.x += dx * d;
            this.container.y += dy * d;
        }

        // <<-- /Creer-Merge: render -->>
    }