sgs-ui: beta version menu building code

//
// STYLES
//
function MenuButton_Render()
{
    if( this.rx0 == this.rx1 || this.ry0 == this.ry1 )
        return;

    theme = this.frame.theme;
    button_render_contents = theme.button_render_contents;

    alpha = if( this.clicked, 0.4, if( this.mouseOn, 0.2, 0.1 ) );
    SS_DrawColorRect( this.rx0, this.ry0, this.rx1, this.ry1-1, 0, 0, 0, alpha );
    SS_DrawColorRect( this.rx0, this.ry1-1, this.rx1, this.ry1, 0, 0, 0, alpha+0.1 );

    this!button_render_contents();
}

FRAME.addStyleSheet(UI_BuildStyleSheet({
    "*button" = { renderfunc = MenuButton_Render },
    "**" = { font = "fonts/armata-regular.ttf", fontSize = 16 },
    "*scrollingautolayout button static" = { font = "fonts/lato-regular.ttf", fontSize = 12, paddingLeft = 72 },
    // main menu
    ".main-menu-frame" = { anchorMode = UI_Anchor_All, renderfunc = function MAIN_MENU_Renderfunc(){ SS_DrawColor2VRect( this.rx0, this.ry0, this.rx1, this.ry1, 0.5, 0.5, 0.5, 1, 0.2, 0.2, 0.2, 1 ); } },
    ".main-menu-frame .title" = { backgroundColor = UIColor( 0 ), anchorMode = UI_Anchor_Hor, font = "fonts/gauge-oblique.ttf", fontSize = 48, textColor = UIColor(0.3,0.7,0.9,1), q0y = 0, q1y = 0.5 },
    ".main-menu" = { q0x = 0.4, q0y = 0.5, q1x = 0.6, q1y = 1.0, overflow = true },
    ".main-menu button" = { height = 36, anchorMode = UI_Anchor_Hor },
    ".main-menu button image" = { width = 36, anchorMode = UI_Anchor_Vert },
    // question window
    ".qwindowbgr" = { backgroundColor = UIColor(0.5,0.5), anchorMode = UI_Anchor_All },
    ".qwindow" = { backgroundColor = UIColor(0,0.5), q0x = 0.3, q0y = 0.3, q1x = 0.7, q1y = 0.7 },
    ".qwindow .title" = { backgroundColor = UIColor(0.3,0.02,0.01,0.5), textColor = UIColor(0.9,1), q0x = 0, q0y = 0, q1x = 1, q1y = 0.3 },
    ".qwindow .btn-yes" = { q0x = 0.1, q0y = 0.6, q1x = 0.4, q1y = 0.9 },
    ".qwindow .btn-no" = { q0x = 0.6, q0y = 0.6, q1x = 0.9, q1y = 0.9 },
    // screen
    ".screen-panel" = { backgroundColor = UIColor( 0, 0.2 ), q0x = 1.22, q0y = 0.22, q1x = 1.98, q1y = 0.98 },
    ".screen-panel .title" = { q0x = 0, q0y = 0, q1x = 1, q1y = 0.1, backgroundColor = UIColor( 0.3, 0.02, 0.01, 0.5 ), textColor = UIColor( 0.9, 1 ) },
    ".screen-panel .btn-back" = { q0x = 0.05, q0y = 0.85, q1x = 0.2, q1y = 0.95 },
}));
UI_EasingFunctions.smooth_fast_start = function( a, b, t ){ return UI_EasingFunctions.smooth( a, b, sqrt( t ) ); };

//
// COMMON CONTROLS
//
function CreateYesNoQuestionWindow( question, callback )
{
    bgr = UI_CreateStatic( FRAME.root, 0, 0, 0, 0, "" );
    bgr.addClass( "qwindowbgr" );

    window = UI_CreateStatic( bgr, 0, 0, 0, 0, "" );
    window.addClass( "qwindow" );

    title = UI_CreateStatic( window, 0, 0, 0, 0, question );
    title.addClass( "title" );

    btn_yes = UI_CreateButton( window, 0, 0, 0, 0, "Yes" );
    btn_yes.addClass( "btn-yes" );
    btn_yes.bindEvent( "click", function() use( callback, bgr ){ callback( 1 ); bgr.parent.removeChild( bgr ); } );

    btn_no = UI_CreateButton( window, 0, 0, 0, 0, "No" );
    btn_no.addClass( "btn-no" );
    btn_no.bindEvent( "click", function() use( callback, bgr ){ callback( 0 ); bgr.parent.removeChild( bgr ); } );

    // background fade in
    tgtbgcol = bgr.backgroundColor;
    bgr.backgroundColor = UIColor(0);
    bgr.animate( { backgroundColor = tgtbgcol }, 0.4 );
    // window: zoom in --> title: slide in from top
    tgtq0x = window.q0x; tgtq0y = window.q0y; tgtq1x = window.q1x; tgtq1y = window.q1y;
    window[]{ q0x = 0.5, q1x = 0.5, q0y = 0.5, q1y = 0.5 };
    titleq0y = title.q0y;
    titleq1y = title.q1y;
    diff = titleq1y - titleq0y;
    title[]{ q0y = titleq0y - diff, q1y = titleq1y - diff };
    window.animate( { q0x = tgtq0x, q0y = tgtq0y, q1x = tgtq1x, q1y = tgtq1y }, 0.2, null, function() use( title, titleq0y, titleq1y )
    {
        title.animate( { q0y = titleq0y, q1y = titleq1y }, 0.2 );
    });
}

//
// MAIN MENU
//
UI_BuildControls
( FRAME.root,
[
    { type = "static", class = "main-menu-frame", children =
    [
        { type = "static", class = "title", caption = "Example Menu" },
        { type = "autolayout", class = "main-menu", children =
        [
            { type = "imagebutton", name = "start", caption = "Start", image = "icons/control_play.png", class = "act-close-info act-close-options act-open-start act-menu-shrink" },
            { type = "imagebutton", name = "info", caption = "Info", image = "icons/information.png", class = "act-close-start act-close-options act-open-info act-menu-shrink" },
            { type = "imagebutton", name = "options", caption = "Options", image = "icons/cog.png", class = "act-close-start act-close-info act-open-options act-menu-shrink" },
            { type = "imagebutton", name = "quit", caption = "Quit", image = "icons/stop.png", class = "act-ask-quit" },
        ]},
    ]},
]);
function main_menu_shrink()
{
    FRAME.find(".main-menu-frame .title").animate({ q1y = 0.2, textColor = UIColor( 0.3, 0.7, 0.9, 0.5 ) }, 0.5 );
    FRAME.find(".main-menu-frame .main-menu").animate({ q0x = 0.05, q1x = 0.2 }, 0.5 );
}
function main_menu_grow()
{
    FRAME.find(".main-menu-frame .title").animate({ q1y = 0.5, textColor = UIColor( 0.3, 0.7, 0.9, 1 ) }, 0.5 );
    FRAME.find(".main-menu-frame .main-menu").animate({ q0x = 0.4, q1x = 0.6 }, 0.5 );
}
FRAME.find( ".act-menu-shrink" ).bindEvent( "click", main_menu_shrink );
FRAME.find( ".act-menu-grow" ).bindEvent( "click", main_menu_grow );
FRAME.find( ".act-ask-quit" ).bindEvent( "click", function() use( CreateYesNoQuestionWindow ){
    CreateYesNoQuestionWindow( "Do you really want to quit?",
        function( result )
        {
            if( result )
                global sys_exit = true;
        }
    );
} );