FX

package whiteout;

import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.scene.text.TextOrigin;

// This is the main content screen for the game.
public class Canvas extends CustomNode {
    public-init var env: Env;
    public def model = Model{env: env};

    // These items appear when all the squares become white.
    def shadedRect = Rectangle {
         width: (env.gameButtonSize + env.gameButtonGap) * (env.nButtons - 1) 
         height:(env.gameButtonSize + env.gameButtonGap) * (env.nButtons - 2) 
         fill: Color.rgb(0,0,0,.8) 
         arcWidth: 30
         arcHeight: 30
    };

    def finishedText: Text = Text {
        content: "Finished" 
        fill: Color.WHITE 
        textOrigin: TextOrigin.TOP
        font: env.mediumFont
    };

    def levelText: Text = Text {
        content: "Level" 
        fill: Color.WHITE 
        textOrigin: TextOrigin.TOP
        font: env.mediumFont
    };

    def levelNumber = Text {
        content: bind model.level.intValue().toString() 
        fill: Color.WHITE 
        textOrigin: TextOrigin.TOP  //BASELINE
        font: env.mediumFont
     };

    def junk = Text {
        content: "Next Level"
        font: env.smallFont
    };

    def nextButton: BlueButton = BlueButton {
        env: env
        text: "Next Level"
        width: junk.layoutBounds.width.intValue() + 12
        onMouseReleased: function(e:MouseEvent) {
            model.level++;
            model.reset();
        }
    };

    // The following four items go down the right side of the screen at 'buttonX'

    def resetButton = BlueButton {
        env: env
        translateX: env.buttonX
        text: "Reset"
        onMouseReleased: function(e:MouseEvent) {
            model.reset();
        }
    };

    def moves = Text {
        content: "Moves"
        translateX: env.buttonX
        textOrigin: TextOrigin.TOP
        fill: Color.WHITE
        font: env.smallFont
    };

    def moveCount: Text =  Text {
        content: bind model.moveCount.intValue().toString()
        translateX: bind env.buttonX + (moves.layoutBounds.width  - moveCount.layoutBounds.width) / 2,
        textOrigin: TextOrigin.TOP
        textAlignment: TextAlignment.CENTER
        fill: Color.WHITE
        font: env.mediumFont
    };

    def quitButton: BlueButton = BlueButton {
        env: env
        translateX: env.buttonX
        text: "Quit"
        onMouseReleased: function(e: MouseEvent) {
            Main.shutdown()
        }
    };

    // Set the X and Y positions of the above items
    init {
        // the Next Level items in the shaded rectangle.
        finishedText.translateX = (shadedRect.width - finishedText.layoutBounds.width) / 2;
        finishedText.translateY = shadedRect.translateY + shadedRect.layoutBounds.minY + 
                                   .3 * nextButton.height;

        levelText.translateX = finishedText.translateX + finishedText.layoutBounds.minX + 5;
        levelText.translateY = finishedText.translateY + finishedText.layoutBounds.maxY + 5;

        levelNumber.translateX = levelText.translateX + levelText.layoutBounds.maxX + 7;
        levelNumber.translateY = finishedText.translateY + finishedText.layoutBounds.maxY + 5;

        nextButton.translateX = (shadedRect.width - nextButton.width) / 2;
        nextButton.translateY = shadedRect.translateY + shadedRect.layoutBounds.maxY - 
                                1.3 * nextButton.height;


       // the Reset button, Moves, count and Quit button
       resetButton.translateY = model.translateY + model.layoutBounds.minY + 8;

       // The +2 here is for the two pixel drop shadow.
       quitButton.translateY = model.translateY + model.layoutBounds.maxY - 
                               8 + 2 - env.blueButtonHeight;

       moves.translateY = resetButton.translateY + resetButton.layoutBounds.maxY + 
                 ((quitButton.translateY + quitButton.layoutBounds.minY) -
                  (resetButton.translateY + resetButton.layoutBounds.maxY) - 
                  (moves.layoutBounds.height + moveCount.layoutBounds.height + 7)) / 2;

       moveCount.translateY = moves.translateY + moves.layoutBounds.maxY + 7
    }

    def myContent = [
        //background and grid
        Rectangle {width: env.screenWidth, height: env.screenHeight, fill: env.slateGrad}

        // this is all the game buttons
        model

        resetButton
        moves
        moveCount
        quitButton

        // Text shown when you finish a level. Hidden by default
        Group {
            content: [
                shadedRect
                finishedText
                levelText
                levelNumber
                nextButton
            ]
            translateX: env.gameButtonGap + (env.gameButtonSize + env.gameButtonGap) / 2
            translateY: env.topMargin +  env.gameButtonSize + env.gameButtonGap

            // Automatically becomes visible when finished is set to true.
            visible: bind model.finished
        }
    ];

    override public function create(): Node {
        return Group {content: myContent};
    }
}