'... FILENAME:           Kiwi.BRO
'... DESCRIPTION:    a text file containing BROWZIC language instructions
'... CREATED:     May-June 2013, SteveOW
'...
'*** NEED TO SORT OUT ' REPLACEMENT IN COMMENTS 
'*** Useful link for debugging =  http://addons.mozilla.org/firefox/addon/firebug
'*** My standard quote for strings in JS will be the double quote, here is 2 of them <" ">
    
'...* * * NOTES FOR DEVELOPERS * * * 
'... * In Browzic for DIM statements Kraka currently requires that there must be a space before the brackets ()
'... * In Browzic coder must use == (is equal to) in equivalence tests in place of = (becomes)  
'... * In Browzic coder must use double quotes because single quote is the comment character in BASIC/BROWZIC
'... * In Browzic coder must use Spaces not Tabs in front of any keywords like FOR, IF, ELSE, END
'...* In  Browzic (like javascript) a Function can only return a value thru (a) a return FunctionResult inside the function or (b) resetting a Global variable within the function, NOT (c) through a supplied input parameter

' = = = = = = = = Section 1 = = = = = APPIC = = = = = = = = = = = = = = = = = = = = 
'...
'... NAME: Example_Kraka_APPIC_File.txt
'...
'... DESCRIPTION: Example of an "APPIC" text file containing BROWSIC and JAVASCRIPT CODE
'...
'...
'... Contains  BROWSIC instruction code written by App developer  (or emitted by a GUI form, filled in by the user) 

'...
'... This is a commented section of text in Browsic

' = = = = = = = = Section 1 = = = =   HTML BOILERPLATE (Mainly) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 

'...will be gotten from external template file by Kraka


' = = = = = = = = Section 2a = = = = = BROWSIC KEYVALS to be applied in HTML and Javascript = = = = = = = = = = = = = = = = = = = = 

'...Note if using JQuery this double fork value insertion can become unnecessary


KEYVAL(PAGE_TITLE,str,Pong Gone Wrong)
KEYVAL(CANVAS01_ID,str,My_Kanvas_A) 
KEYVAL(CANVAS01_WIDTH,int,700)  
KEYVAL(CANVAS01_HEIGHT,int,500) 


' = = = = = = = = Section 2b = = = = = BROWZIC SOURCE CODE (FOR CONVERSION INTO JAVASCRIPT)  = = = = = = = = = = = = = = = = = = = = 

'-------------------------------------------
'... BROWZIC DIM statements

 '...Note that for DIM statements Kraka currently requires *** there must be a space before the brackets () ***

DIM myBalls_PosX () 
DIM myBalls_PosY ()
DIM myBalls_velX ()
DIM myBalls_velY ()
DIM myBalls_Radius ()
DIM myBalls_FillColor ()
DIM myBalls_Mood ()

DIM moiRects_PosCenX ()
DIM moiRects_PosCenY ()
DIM moiRects_PosXmin ()
DIM moiRects_PosXmax ()
DIM moiRects_PosYmin ()
DIM moiRects_PosYmax ()
DIM moiRects_VelX ()
DIM moiRects_VelY ()
          
'-------------------------------------------
'...BROWZIC VAR statements

DEF VAR iii
DEF VAR jjj
DEF VAR pos_x = 400
DEF VAR pos_y = 300
DEF VAR vel_X = 2
DEF VAR vel_Y = 4

DEF VAR i_posX = 20
DEF VAR i_posY = 20
DEF VAR i_velX = 0.5
DEF VAR i_velY = 0.5
DEF VAR numBalls = 128
DEF VAR numRects = 12
DEF VAR rad = 10.0
DEF VAR ball_fillStyle = "#444444"

DEF VAR VelMag = 1.0
DEF VAR Increase_VelMag = false
DEF VAR Decrease_VelMag = false

DEF VAR usr_string = ""
DEF VAR Pos_x = 0 
DEF VAR Pos_y = 0

DEF VAR Mov_Rect_Pos_X=0
DEF VAR Mov_Rect_Pos_Y=0
DEF VAR MR_dX
DEF VAR MR_dY

DEF VAR User_Click_Mode=""
DEF VAR Tcolor = ""
DEF VAR Tfont = ""
DEF VAR Purge_Zapped_balls = false

DEF VAR brocol_Yellow    = "#FFFF00"
DEF VAR brocol_Cyan      = "#00FFFF" 
DEF VAR brocol_Magenta   = "#FF00FF" 
DEF VAR brocol_Red       = "#FF0000"
DEF VAR brocol_Green     = "#00FF00" 
DEF VAR brocol_Blue      = "#0000FF" 
DEF VAR brocol_White     = "#FFFFFF" 
DEF VAR brocol_Black     = "#000000" 

'-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
'-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
'...BROWZIC FUNCTIONS 

DEF FUNCTION APPF_Init_Play_Objects()     

   '...here the APP developer can write code which initializes game objects

    '...define start positions of the balls
    '...using arrays in Browzic and Javascript
    '...Note First element of a java array is element zero.
    '...In my Browzic I tend to ignore element(0) in any array

    '--------------------------------------
    '...initialize  Balls

    FOR iii = 1 TO numBalls STEP 1    


        myBalls_PosX[iii] = i_posX   
        myBalls_PosY[iii] = i_posY  
        myBalls_velX[iii] = i_velX   
        myBalls_velY[iii] = i_velY   
        myBalls_Radius[iii] =  12 + (iii/4)
        myBalls_Mood[iii] = 1
        '...increment the initial values for the next ball
        i_posX += 2
        i_posY += 2
        i_velX += .05
        i_velY += .05

    NEXT iii           

    '-------------------------------------------------------------------------
    '...initialize Rectangles

    DEF VAR Rect_Centre_i_posX = 200
    DEF VAR Rect_Centre_i_posY = 200
    DEF VAR Rect_X_width = 32
    DEF VAR Rect_Y_height = 16
    DEF VAR mX = 16
    DEF VAR mY = 12

    FOR jjj =  1 TO numRects STEP 1
        
        
        '...adjust Centre Position
        Rect_Centre_i_posX +=  mX
        Rect_Centre_i_posY +=  mY

        '...define XY limits
        moiRects_PosXmin[jjj] = Rect_Centre_i_posX - Rect_X_width/2
        moiRects_PosXmax[jjj] = Rect_Centre_i_posX + Rect_X_width/2
        moiRects_PosYmin[jjj] = Rect_Centre_i_posY - Rect_Y_height/2
        moiRects_PosYmax[jjj] = Rect_Centre_i_posY + Rect_Y_height/2        
        
        moiRects_PosCenX[jjj] = Rect_Centre_i_posX
        moiRects_PosCenY[jjj] = Rect_Centre_i_posY
        
        '...define Velocity
        moiRects_VelX[jjj] =  Rect_Centre_i_posX/100 '...or whatever
        moiRects_VelY[jjj] =  Rect_Centre_i_posY/100
            

    NEXT jjj

    '...-------------------------------------------------
    '...Initialize LABELS
    Mov_Rect_Pos_X=0
    Mov_Rect_Pos_Y=0
    MR_dX=0.0
    MR_dY=0.2



END FUNCTION   '...APPF_Init_Play_Objects() 


'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

DEF FUNCTION APPF_MoveAndDraw()

 
    '-----------------------------------------------------------------
    '...Repaint the Canvas
    
    jslibf_CLEAR_CANVAS()
    '...set canvas background color for next draw command e.g. rect or circle.
    canvas01_2Dctx.fillStyle = "#FAF7F8" 
    canvas01_2Dctx.fillStyle = "#080808" '...near black
    jslibf_DRAW_RECT(0,0,canvas01_WIDTH,canvas01_HEIGHT)
    
    '----------------------------------------------------------------
    '...Apply User adjustments
    IF (Increase_VelMag == true) THEN
         VelMag = VelMag*1.1
         Increase_VelMag = false
         '...alert("VelMag = " + VelMag)
         usr_string = "VelMag = " + VelMag
         Pos_x = 200
         Pos_y = 200
         jslibf_DRAW_TEXT (usr_string, Pos_x, Pos_y,"","")
    ELSEIF  (Decrease_VelMag == true) THEN
         VelMag = VelMag/1.1
         Decrease_VelMag = false         
		 '...alert("VelMag = " + VelMag)
         usr_string = "VelMag = " + VelMag
        Pos_x = 200
        Pos_y = 200
         jslibf_DRAW_TEXT (usr_string, Pos_x, Pos_y,"","")
    ELSE
		
		VelMag=1
		
     ENDIF
    
    
    '-----------------------------------------------------------------
    '...MOVE THE BALLS
    
    '...rad = rad + 0.2 '...0.001
    '...if (rad > 100 ) rad = 1

    '......Loop thru all the Balls

    FOR iii = 1 TO numBalls STEP 1      '......NB we ignore item 0 in the array
    
        var Ball_Mood = myBalls_Mood[iii] 
        
        IF (Purge_Zapped_balls == true AND Ball_Mood == 0) THEN
        
            myBalls_Mood[iii] =-1 '...means do not display this ball again
        ENDIF
    
        IF ( Ball_Mood >= 0) THEN
            
            pos_x = myBalls_PosX[iii]
            pos_y = myBalls_PosY[iii]
            vel_X = myBalls_velX[iii]
            vel_Y = myBalls_velY[iii]
            rad = myBalls_Radius[iii]
          
            '......update Velocities

            IF (pos_x + vel_X > canvas01_WIDTH OR pos_x + vel_X < 0) THEN   '...THEN not required in JS  ...JS uses || in place of OR
              vel_X = -vel_X
            
            ENDIF '...ENDIF is not required by JS 

            IF (pos_y + vel_Y > canvas01_HEIGHT OR pos_y + vel_Y < 0) THEN
              vel_Y = -vel_Y
             
            ENDIF

            '......update Positions

            pos_x +=  vel_X
            pos_y +=  vel_Y

            '......update array values

            myBalls_PosX[iii] = pos_x
            myBalls_PosY[iii] = pos_y
            myBalls_velX[iii] = vel_X * VelMag
            myBalls_velY[iii] = vel_Y * VelMag
            

            '...draw filled colored circle

            canvas01_2Dctx.fillStyle = myBalls_FillColor[iii]
            
            jslibf_DRAW_CIRCLE(pos_x, pos_y, rad)
        
        ENDIF
        
    NEXT iii  '......end of For loop
    
    Purge_Zapped_balls = false
    
   '------------------------------------------------------------------------------------------
   '...Move & Plot RECTANGLES

   
    FOR jjj =  1 TO numRects STEP 1
       
        pos_x = moiRects_PosCenX[jjj]
        pos_y = moiRects_PosCenY[jjj]
        
        vel_X = moiRects_VelX[jjj]
        vel_Y = moiRects_VelY[jjj]

        '......Update Velocities

        IF (pos_x + vel_X > canvas01_WIDTH OR pos_x + vel_X < 0) THEN   '...THEN not required in JS  ...JS uses || in place of OR
          vel_X = -vel_X
        
        ENDIF '...ENDIF is not required by JS 

        IF (pos_y + vel_Y > canvas01_HEIGHT OR pos_y + vel_Y < 0) THEN
          vel_Y = -vel_Y
         
        ENDIF

        '......update to New Positions

        dPosX = vel_X
        dPosY = vel_Y

        pos_x +=  dPosX
        pos_y +=  dPosY

        '......update array values

        moiRects_PosCenX[jjj] = pos_x
        moiRects_PosCenY[jjj] = pos_y
        
        moiRects_PosXmin[jjj]   +=      dPosX
        moiRects_PosXmax[jjj]   +=      dPosX
        
        moiRects_PosYmin[jjj]   +=      dPosY
        moiRects_PosYmax[jjj]   +=      dPosY
        
        moiRects_VelX[jjj] =  vel_X
        moiRects_VelY[jjj] =  vel_Y    
'...CANARY

       '...Plot small Yellow  Rectangle
       canvas01_2Dctx.fillStyle = "#555500" '...lemon yellow
       R_Width   =  moiRects_PosXmax[jjj] - moiRects_PosXmin[jjj]
       R_Height  =  moiRects_PosYmax[jjj] - moiRects_PosYmin[jjj]
       
       jslibf_DRAW_RECT( moiRects_PosXmin[jjj], moiRects_PosYmin[jjj], R_Width, R_Height)
       
       
       '...Plot  Red Triangle
       canvas01_2Dctx.beginPath();
       canvas01_2Dctx.lineTo (moiRects_PosXmin[jjj], moiRects_PosYmin[jjj]);
       canvas01_2Dctx.lineTo (moiRects_PosXmax[jjj], moiRects_PosYmin[jjj]);
       canvas01_2Dctx.lineTo (moiRects_PosXmax[jjj], moiRects_PosYmax[jjj]);
       canvas01_2Dctx.stroke ();
       canvas01_2Dctx.closePath ();
       
       canvas01_2Dctx.fillStyle = "red";
       canvas01_2Dctx.fill(); 

    NEXT jjj
   
   '--------------------------------------------------------------------------------------------------------------------------------------
    '... Plot a  BROWZIC Title Banner on the Canvas
    '... as a SINGLE STATIC CYAN RECTANGLE with TEXT 
    
    '...NB as this plotted last of al the plot objects, it should lie in front of all other objects
    '...set canvas background color for the next draw to canvas command e.g. rect or circle.
    
    ''canvas01_2Dctx.fillStyle = "#FAF7F8" '...off white
    ''canvas01_2Dctx.fillStyle = "#080808" '...Midnight grey
    canvas01_2Dctx.fillStyle = brocol_Cyan 

    jslibf_DRAW_RECT(20,20,200,50)'...l,t,w,h
    
    '...Write some Text over the rectangle
    
    canvas01_2Dctx.fillStyle = brocol_Yellow 
    usr_string = "BROWZIC Demo 2" 
    Pos_x = 30
    Pos_y = 30
    Tfont = "italic 18px sans-serif"
    Tcolor = "#FFFF00"
    jslibf_DRAW_TEXT (usr_string, Pos_x, Pos_y,Tcolor,Tfont)
    
   '---------------------------------------------------------------------------------------
    '...Plot a  SINGLE MOVING RECTANGLE in the Canvas
       
    
    IF (Right_Arrow_Flag == true) THEN
        Mov_Rect_Pos_X += 10
        Right_Arrow_Flag = false
    ENDIF
    
    IF (Left_Arrow_Flag == true) THEN
        Mov_Rect_Pos_X += -10
        Left_Arrow_Flag = false
    ENDIF
    
    Mov_Rect_Pos_X += MR_dX
    IF (Mov_Rect_Pos_X > canvas01_WIDTH) THEN
        Mov_Rect_Pos_X=0
        
    ENDIF
    
    Mov_Rect_Pos_Y += MR_dY
    IF (Mov_Rect_Pos_Y > canvas01_HEIGHT) THEN
        Mov_Rect_Pos_Y=0
        UserIPtext=""
    ENDIF
    
    
    '...Paint the Moving Rectangle
    canvas01_2Dctx.fillStyle = "#FFFF00" '...YELLOW    
    jslibf_DRAW_RECT(Mov_Rect_Pos_X,Mov_Rect_Pos_Y,180,50)'...l,t,w,h
    
    '...Write some Text over the rectangle
    var Tx = Math.floor(Mov_Rect_Pos_X)
    var Ty = Math.floor(Mov_Rect_Pos_Y)
    
    usr_string = "Yellow Box X:" + Tx + ", Y: " + Ty + "  " + UserIPtext
    '...alert(usr_string)
    Tcolor = "#FF00FF" '...MAGENTA
    Tfont = "italic 14px sans-serif" 
    jslibf_DRAW_TEXT (usr_string, Math.floor(Mov_Rect_Pos_X), Math.floor(Mov_Rect_Pos_Y), Tcolor, Tfont)                
    

END FUNCTION '...end of APPF_MoveAndDraw function definition

'--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
'...BUTTON CLICK HANDLERS

DEF FUNCTION APPF_ButtonONE_clicked()
    alert("You clicked BUTTON ONE!!!  You are a WINNER !!!!!")
END FUNCTION

'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DEF FUNCTION APPF_ButtonTWO_clicked()
                   
    '...NEW Just set mode to SPAWN
    User_Click_Mode="SPAWN"
    '...alert("You clicked BUTTON 2!!! New User Click MODE = " + User_Click_Mode)
    
    '...Set the Cursor Style ELLIE
    var cursorStyle="pointer"
    // no ... canvas01_2Dctx.style.cursor=cursorStyle;
    elem= document.getElementById("My_Kanvas_A")
    elem.style.cursor=cursorStyle;

END FUNCTION '...APPF_ButtonTWO_clicked()

'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DEF FUNCTION APPF_ButtonTHREE_clicked()

    User_Click_Mode="ZAP"
    '...alert("You clicked BUTTON 3!!! New User Click MODE = " + User_Click_Mode)
    '...Set the Cursor Style ELLIE
    var cursorStyle="crosshair"
    elem= document.getElementById("My_Kanvas_A")
    elem.style.cursor=cursorStyle;

END FUNCTION '...APPF_ButtonTHREE_clicked

'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DEF FUNCTION APPF_Button3B_clicked()

    Purge_Zapped_balls = true

END FUNCTION
'
'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DEF FUNCTION APPF_User_Canvas_Click_Handler (Cxxx, Cyyy) 

    '...actually just handles mouse clickUP at present
    '...in future need to handle Click Down and Drag user behaviour e.g. for "Spray painting"
                
                '...alert("Current Click Mode = " + User_Click_Mode)
                var Any_Spawns = false
                var Any_Zaps = false
                
                IF (User_Click_Mode == "SPAWN" ) THEN
                    
                    
                    numBalls +=1
                    myBalls_PosX[numBalls]=Cxxx  
                    myBalls_PosY[numBalls]=Cyyy
                    myBalls_velX[numBalls]=myBalls_velX[numBalls-1]+0.05  
                    myBalls_velY[numBalls]=myBalls_velY[numBalls-1]+0.05   
                    myBalls_Radius[numBalls]= 6 + (numBalls/4)
                    
                    '...old   myBalls_FillColor [numBalls]= "rgb(240,40,40)" //...Blue
                    '...alert("I got this far at least!!!")
                    
                    '...give a color to the new ball acc to birth position
                    
                    var bRed   = Math.floor(255*Cxxx/canvas01_WIDTH)
                    var bGreen = Math.floor(255*Cyyy/canvas01_HEIGHT)
                    var bBlue  = Math.floor(0.5*(bRed+bGreen))
                    var BallColor = "rgb(" + bRed +"," + bGreen + "," + bBlue + ")" 
                    
                    myBalls_FillColor[numBalls]= BallColor
                    myBalls_Mood[iii] = 1
                    
                    Any_Spawns = true
                    
                ENDIF
                    
                //...see if we need to ZAP any balls
                IF (User_Click_Mode == "ZAP")  THEN
                    
                    '//...Go thru all balls and see if any contain this click point in their disc area
                    '//...if so set their color to black
                    '...Javascript code should turn out like this..........for (iii=1;iii<=numBalls;iii++)
                      FOR fff = 1 TO numBalls STEP 1
                          iii = numBalls - fff + 1 '...start with the youngest balls
                          IF (Any_Zaps == false) THEN '...proceed to see if this click has zapped a ball
                                  

                                Ball_Rad  = myBalls_Radius[iii]

                                BallPos_X = myBalls_PosX[iii]
                                BallXmin = BallPos_X - Ball_Rad
                                BallXmax = BallPos_X + Ball_Rad
                                    
                                BallPos_Y = myBalls_PosY[iii]
                                BallYmin = BallPos_Y - Ball_Rad
                                BallYmax = BallPos_Y + Ball_Rad
                                        
                                var Point_Inside_BallBox = false
                                Point_Inside_BallBox = APPF_Check_if_2Dpoint_Inside_2Dbox (Cxxx,Cyyy,BallXmin,BallXmax,BallYmin,BallYmax)
                                  

                                 IF (Point_Inside_BallBox == true AND myBalls_Mood[iii]>0) THEN '....ZAP IT!!!
                                    myBalls_FillColor[iii]="#000000" 
                                    myBalls_Mood[iii]=0
                                    Any_Zaps = true
                                 ENDIF

                                        
                                   
                           ENDIF '...(Any_Zaps = false) 
                           
                        NEXT '...fff
                ENDIF '...(User_Click_Mode == "ZAP")    
                    
                    
                        '....Emit AUDIO Indications
                IF (Any_Zaps == true) THEN
                    var snd = new Audio("pop.ogg")
                    snd.play()
                ELSEIF (Any_Spawns == true) THEN
                    var snd = new Audio("beep.ogg")
                    snd.play()
                ENDIF
                        
                

END FUNCTION '...APPF_User_Canvas_Click_Handler

'-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DEF FUNCTION APPF_Check_if_2Dpoint_Inside_2Dbox (Px,Py,BXmin,BXmax,BYmin,BYmax )
    
    Point_Inside_Box=false
    IF (Px >BXmin AND Px < BXmax) THEN   '...Point Xpos is within Box Xpos limits 
        IF (Py >BYmin AND Py < BYmax) THEN '...Point Ypos is within Box Ypos limits 
             Point_Inside_Box = true
        ENDIF
    ENDIF
    return Point_Inside_Box

END FUNCTION '...APPF_Check_if_2Dpoint_Inside_2Dbox 

