<?xml version="1.0" encoding="utf-8"?>
<Application>
  <AppTitle>Banker Player Grid</AppTitle>
  <AppShortName>BankerGrid</AppShortName>
  <Version>1.2</Version>
  <PageWidth>1024</PageWidth>
  <PageHeight>600</PageHeight>
  <PublishPlatform>WebApp</PublishPlatform>

  <Components>
    <FunctionList name="Subroutines">
      <Components>

        <!-- Initialize grid -->
        <Function name="InitGrid">
          <Code>
SetVar [cols] 12
SetVar [rows] 5
SetVar [boxWidth] 60
SetVar [boxHeight] 60
SetVar [startX] 50
SetVar [startY] 100
SetVar [count] 1

Loop 1 [cols] [c]
  If [c] &gt; 1
    Math "([c]-1)*([boxWidth]+5)" [offsetX] 0
  Else
    SetVar [offsetX] 0
  EndIf

  Loop 1 [rows] [r]
    Math "[startX] + [offsetX]" [x] 0
    Math "[startY] + (([r]-1)*([boxHeight]+5))" [y] 0

    <!-- Every 2 columns (10 boxes) add extra spacing -->
    Math "floor(([count]-1)/10)" [spacer] 0
    Math "[y] + ([spacer]*15)" [y] 0

    CreateObject Rectangle "Box[count]" [x] [y] [boxWidth] [boxHeight]
    ObjectStyle "Box[count]" "fill:#fff;border:1px solid #555;text-align:center;line-height:60px;font-size:20pt;"
    SetObjectHTML "Box[count]" "&amp;nbsp;"
    Math "[count] + 1" [count] 0
  EndLoop
EndLoop

SetVar [nextBox] 1
          </Code>
        </Function>

        <!-- Place mark -->
        <Function name="PlaceMark">
          <Code>
If [nextBox] == ""
  SetVar [nextBox] 1
EndIf

If [mark] == "B"
  SetObjectHTML "Box[nextBox]" "&lt;b style='color:red'&gt;B&lt;/b&gt;"
Else
  SetObjectHTML "Box[nextBox]" "&lt;b style='color:blue'&gt;P&lt;/b&gt;"
EndIf

Math "[nextBox] + 1" [nextBox] 0
          </Code>
        </Function>

        <!-- Reset grid -->
        <Function name="ResetGrid">
          <Code>
Loop 1 60 [i]
  SetObjectHTML "Box[i]" "&amp;nbsp;"
EndLoop
SetVar [nextBox] 1
          </Code>
        </Function>

      </Components>
    </FunctionList>

    <PageList name="Main">
      <Components>
        <Page id="MainPage">
          <enter>InitGrid</enter>
          <style>background-color:#f0f0f0;</style>
          <Components>

            <PushButton id="BankerButton">
              <left>50px</left>
              <top>30px</top>
              <width>100px</width>
              <height>40px</height>
              <caption>Banker</caption>
              <style>background-color:#ff3333;color:white;font-weight:bold;</style>
              <click>SetVar [mark] "B"
PlaceMark</click>
            </PushButton>

            <PushButton id="PlayerButton">
              <left>170px</left>
              <top>30px</top>
              <width>100px</width>
              <height>40px</height>
              <caption>Player</caption>
              <style>background-color:#3366ff;color:white;font-weight:bold;</style>
              <click>SetVar [mark] "P"
PlaceMark</click>
            </PushButton>

            <PushButton id="ResetButton">
              <left>290px</left>
              <top>30px</top>
              <width>100px</width>
              <height>40px</height>
              <caption>Reset</caption>
              <style>background-color:#777;color:white;</style>
              <click>ResetGrid</click>
            </PushButton>

          </Components>
        </Page>
      </Components>
    </PageList>
  </Components>
</Application>
