FX

package whiteout;

import javafx.scene.Group;
import javafx.scene.CustomNode;
import javafx.scene.layout.Tile;
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 blue.
    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.smallFont
    };

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

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

    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();
        }
    };

    // 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;
    }

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

        // this is all the game buttons
        model,

        // This is the controls.  They run down the right side of the screen in landscape mode
        // and across the bottom in portrait mode.
        Tile {
	    autoSizeTiles: false
            translateX:  if (env.isPortrait) 0 else env.gameSize
            translateY:  if (env.isPortrait) env.gameSize + 5  else  env.gameButtonGap
            columns: if (env.isPortrait) 3 else 1
            rows:  if (env.isPortrait) 1 else 3

            // In portrait mode, we allocate 1/3 the width for each button and the
            // "move <count>".
            tileWidth: if (env.isPortrait) env.gameSize / 3 else env.screenWidth - env.gameSize
            tileHeight: if (env.isPortrait) env.blueButtonHeight else env.gameSize / 3
            content: [
                BlueButton {
                    env: env
                    text: "Reset"
                    onMouseReleased: function(e:MouseEvent) {
                        model.reset();
                    }
                }
                // A nested Tile is used for 'Moves <count>' so that they can be
                // laid out as a group of two items.
                Tile {
		    autoSizeTiles: false
                    columns: if (env.isPortrait) 2 else 1
                    rows:    if (env.isPortrait) 1 else 2
                    vgap: 2
                    translateX: if (env.isPortrait) 3 else 0
                    translateY: if (env.isPortrait) 0 else 13
                    tileWidth: if (env.isPortrait) env.gameSize / 6 else env.screenWidth - env.gameSize
                    tileHeight: env.blueButtonHeight
                    content: [
                        Text {
                            content: "Moves"
                            fill: Color.WHITE
                            font: env.smallFont
                        }
                        Text {
                            content: bind model.moveCount.intValue().toString()
                            fill: Color.WHITE
                            font: env.smallFont
                       }
                    ]
                }
                BlueButton {
                        env: env
                        text: "Quit"
                        onMouseReleased: function(e: MouseEvent) {
                            Main.shutdown()
                        }
                }
            ]
        }

        // 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};
    }
}