Status of applying CSS

Handling css and xml tree comes close to end.
This piece of dubug output shows which css rule has been applied to xml tree element.

Next step is iterating over element, find image load, load it and place it. Won't be tough.

element w h @ x y with image by [(applied rule line in CSS file)]

board 341 232 @ 0 0 with uri("board.jpg") by [3]
position 241 232 @ 0 0 with uri("board.jpg") by [78]
field 108 46 @ 158 93 with uri("field.jpg") by [122, 123]
home 25 101 @ 266 131 with uri("your-home.jpg") by [117, 118]
chequer 25 101 @ 266 131 with uri("your-home.jpg") by []
bar 25 88 @ 133 5 with uri("bar-none.jpg") by [109, 110, 113]
chequer 25 88 @ 133 5 with uri("bar-none.jpg") by []
point 18 88 @ 249 139 with uri("odd-none.jpg) by [79, 80, 82, 106]

CSS like resource

I believe it gives ulitmate power to who wants to create own resource.

Before CSS

<board>
  <field player='you'>
  </field>
  <home player='you'>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar player='him'>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity='odd'>
    1
    <chequer player='him'>
      2
    </chequer>
  </point>
  <point parity='even'>
    2
  </point>
  <point parity='odd'>
    3
  </point>
  <point parity='even'>
    4
  </point>

After CSS

<board y=0 x=0 width=341 height=232>
  <field y=93 player='you' height=46 x=158 width=108>
  </field>
  <home y=131 player='you' height=101 x=266 width=25>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar y=5 player='him' image=uri("bar-none.jpg") x=133>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity='odd' y=139 width=18 color=pink x=249 image=uri("odd-none.jpg") height=88>
    1
    <chequer player='him' image=uri("odd-green-2.jpg")>
      2
    </chequer>
  </point>
  <point parity='even' y=139 width=18 color=skyblue x=230 image=uri("even-none.jpg") height=88>
    2
  </point>
  <point parity='odd' y=139 width=18 color=pink x=212 image=uri("odd-none.jpg") height=88>
    3
  </point>
  <point parity='even' y=139 width=18 color=skyblue x=194 image=uri("even-none.jpg") height=88>
    4
  </point>

CSS

position {x: 0; y: 0; width: 241; height: 232; image: uri("board.jpg")}
point        {width: 18; height:88}
point[parity='odd']    {color: pink}
point[parity='even']   {color: skyblue}
point:data("1") { x: 249 ; y: 139 }
point:data("2") { x: 230 ; y: 139 }
point:data("3") { x: 212 ; y: 139 }

point[parity='odd'] chequer[player='you']:data("1")   {image: uri("odd-white-1.j
pg")}
point[parity='odd'] chequer[player='you']:data("2")   {image: uri("odd-white-2.j
pg")}

Half way to changing format.

Psudo css is half way. Basic work is done. Gotta debug and make it work.


Before application of CSS

<board>
  <field player='you'>
  </field>
  <home player='you'>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar player='him'>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity=odd>
    1
    <chequer player='him'>
      2
    </chequer>
  </point>
  <point parity=even>
    2
  </point>
  <point parity=odd>
    3
  </point>
  <point parity=even>
    4
  </point>
  <point parity=odd>
    5
  </point>
  <point parity=even>
    6
    <chequer player='you'>
      5
    </chequer>
  </point>
  <point parity=odd>
    7
  </point>
  <point parity=even>
    8
    <chequer player='you'>
      3
    </chequer>
  </point>
  <point parity=odd>
    9
  </point>
  <point parity=even>
    10
  </point>
  <point parity=odd>
    11
  </point>
  <point parity=even>
    12
    <chequer player='him'>
      5
    </chequer>
  </point>
  <point parity=odd>
    13
    <chequer player='you'>
      5
    </chequer>
  </point>
  <point parity=even>
    14
  </point>
  <point parity=odd>
    15
  </point>
  <point parity=even>
    16
  </point>
  <point parity=odd>
    17
    <chequer player='him'>
      3
    </chequer>
  </point>
  <point parity=even>
    18
  </point>
  <point parity=odd>
    19
    <chequer player='him'>
      5
    </chequer>
  </point>
  <point parity=even>
    20
  </point>
  <point parity=odd>
    21
  </point>
  <point parity=even>
    22
  </point>
  <point parity=odd>
    23
  </point>
  <point parity=even>
    24
    <chequer player='you'>
      2
    </chequer>
  </point>
  <bar player='you'>
    <chequer player='you'>
      0
    </chequer>
  </bar>
  <home player='him'>
    <chequer player='him'>
      0
    </chequer>
  </home>
  <field player='him'>
  </field>
</board>

After CSS

<board height=101 width=25 y=0 x=266>
  <field player='you'>
  </field>
  <home player='you' width=25 y=131 x=266 height=101>
    <chequer player='you'>
      0
    </chequer>
  </home>
  <bar player='him' width=25 y=131 x=266 height=101>
    <chequer player='him'>
      0
    </chequer>
  </bar>
  <point parity=odd width=25 y=131 x=266 height=101>
    1
    <chequer player='him'>
      2
    </chequer>
  </point>
  <point parity=even>
    2
  </point>
  <point parity=odd>
    3
  </point>
  <point parity=even>
    4
  </point>
  <point parity=odd>
    5
  </point>
  <point parity=even width=25 y=131 x=266 height=101>
    6
    <chequer player='you'>
      5
    </chequer>
  </point>
  <point parity=odd>
    7
  </point>
  <point parity=even width=25 y=131 x=266 height=101>
    8
    <chequer player='you'>
      3
    </chequer>
  </point>
  <point parity=odd>
    9
  </point>
  <point parity=even>
    10
  </point>
  <point parity=odd>
    11
  </point>
  <point parity=even width=25 y=131 x=266 height=101>
    12
    <chequer player='him'>
      5
    </chequer>
  </point>
  <point parity=odd width=25 y=131 x=266 height=101>
    13
    <chequer player='you'>
      5
    </chequer>
  </point>
  <point parity=even>
    14
  </point>
  <point parity=odd>
    15
  </point>
  <point parity=even>
    16
  </point>
  <point parity=odd width=25 y=131 x=266 height=101>
    17
    <chequer player='him'>
      3
    </chequer>
  </point>
  <point parity=even>
    18
  </point>
  <point parity=odd width=25 y=131 x=266 height=101>
    19
    <chequer player='him'>
      5
    </chequer>
  </point>
  <point parity=even>
    20
  </point>
  <point parity=odd>
    21
  </point>
  <point parity=even>
    22
  </point>
  <point parity=odd>
    23
  </point>
  <point parity=even width=25 y=131 x=266 height=101>
    24
    <chequer player='you'>
      2
    </chequer>
  </point>
  <bar player='you' width=25 y=131 x=266 height=101>
    <chequer player='you'>
      0
    </chequer>
  </bar>
  <home player='him' width=25 y=0 x=266 height=101>
    <chequer player='him'>
      0
    </chequer>
  </home>
  <field player='him'>
  </field>
</board>

Changing resource format

previous format

size table 341  232
size point 18 88
size field 108 46
size bar 25  88

point  23  230   5
point  24  248   5

now implementing "CSS" like format.

board {x: 0; y: 0; width: 341; height: 232}
match {x: 241; y: 0; width: 100; height: 232}
length {x: 316; y: 93; width: 25; height: 46}
crawford {x: 291; y: 93; width: 25; height: 46}

point:value("23") {x: 230 ; y:   5 }
point:value("24") {x: 248 ; y:   5 }

To make it
- more readable.
- flexible to express resource.