making wxPyGammon

technorati

2008-06-18T19:38:00.001+09:00

dtd shows up

2008-06-17T19:05:00.002+09:00

dtd is now available.
It may changed without a notification.

More on CSS

2008-06-13T00:25:00.005+09:00

These two are just achieved only with resources. The program stays perfectry same.

Now supports
- strech fit rendering(resource will be streched to specified size),
- Score, match length, crawford
- chequer count text for point with more than 5 chequers.
- fonts in resource. you can specify font for board view in CSS.

chequer count sample

testing with minimal style resource

2008-06-11T22:13:00.002+09:00

The css below produces board image shown in the fiure. Still needs lots of work.


board {x: 0; y: 0; width: 341; height: 232; background: #596580}

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

crawford {x: 291; y: 93; width: 25; height: 46}
score {width: 50; height: 93}
score[player=you] {x: 291; y:139}
score[player=him] {x: 291; y: 0 }

action{width: 25; height: 26; x:0; y:103 ; background: #596580}
action[player=you] {color: #3cb7ff}
action[player=him] {color: #fd4993}

player {width:0; height: 0}
player[player=you]{x:0; y:0}
player[player=him]{x:0; y:0}

position {x: 0; y: 0; width: 291; height: 232; background: #827e7d}
point        {width: 18; height:88}
point[parity=odd]    {color: #cccecf}
point[parity=even]   {color: #15212e}
point:data(1) { x: 248 ; y: 139 }
point:data(2) { x: 230 ; y: 139 }
point:data(3) { x: 212 ; y: 139 }
point:data(4) { x: 194 ; y: 139 }
point:data(5) { x: 176 ; y: 139 }
point:data(6) { x: 158 ; y: 139 }
point:data(7) { x: 115 ; y: 139 }
point:data(8) { x:  97 ; y: 139 }
point:data(9) { x:  79 ; y: 139 }
point:data(10) {x:  61 ; y: 139 }
point:data(11) {x:  43 ; y: 139 }
point:data(12) {x:  25 ; y: 139 }
point:data(13) {x:  25 ; y:   5 ; flip:  top-bottom  }
point:data(14) {x:  43 ; y:   5 ; flip:  top-bottom  }
point:data(15) {x:  61 ; y:   5 ; flip:  top-bottom  }
point:data(15) {x:  61 ; y:   5 ; flip:  top-bottom  }
point:data(16) {x:  79 ; y:   5 ; flip:  top-bottom  }
point:data(17) {x:  97 ; y:   5 ; flip:  top-bottom  }
point:data(18) {x: 115 ; y:   5 ; flip:  top-bottom  }
point:data(19) {x: 158 ; y:   5 ; flip:  top-bottom  }
point:data(20) {x: 176 ; y:   5 ; flip:  top-bottom  }
point:data(21) {x: 194 ; y:   5 ; flip:  top-bottom  }
point:data(22) {x: 212 ; y:   5 ; flip:  top-bottom  }
point:data(23) {x: 230 ; y:   5 ; flip:  top-bottom  }
point:data(24) {x: 248 ; y:   5 ; flip:  top-bottom  }

bar {width: 25; height: 111}
bar[player=you] {x:133; y:116}
bar[player=him] {x:133; y: 5}

cubeholder {width: 25 ;height: 30; x: 266; y: 101 ;background: #b6bdc6}
home {width: 25 ;height: 101}
home[player=him] {x: 266; y: 0; background: #746f6d}
home[player=you] {x: 266; y: 131 ; background: #746f6d}

field {width: 108; height: 46}
field[player=you] {x: 158;y: 93}
field[player=him] {x: 25 ;y: 93}

field[player=you] die {x: 176; y: 95; x_offset: 28; y_offset: 0; color:#3cb7ff}
field[player=him] die {x: 43; y:95 ; x_offset: 28 ; y_offset: 0: color:#fd4993}
die {width: 16; height: 16}



cube {width: 25; height: 25}
cubeholder cube {x: 266 ; y: 105}
home[player=you] cube {x: 266; y: 197}
home[player=him] cube {x: 266; y: 5}
field[player=you] cube {x: 50; y: 100}
field[player=him] cube {x: 180; y: 100}

field[player=you] chip {x: 157;y: 93; x_offset: 20; y_offset: 0}
field[player=him] chip {x: 25 ;y: 93; x_offset: 20; y_offset: 0}
chip {width: 25; height: 25; color: gold}

chequer {width:16; height:16; y:210 ; x_offset: 0; y_offset: -18}
point[flip=top-bottom] chequer {y:6 ;y_offset: 18}
chequer[player=you] {color: #3cb7ff}
chequer[player=him] {color: #fd4993}

Status of applying CSS

2008-06-05T17:32:00.002+09:00

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

2008-06-05T12:38:00.004+09:00

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.

2008-06-04T21:25:00.003+09:00

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

2008-06-03T18:35:00.002+09:00

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.

Watching Game

2008-05-28T11:48:00.002+09:00

Table UI is similar to Ken's GamesGrid client(windows version). I hope people love this.

Statusbar

2008-05-25T12:25:00.009+09:00

Added status bar to show dice to use.

It works like below.

Displaying Score

2008-05-21T14:04:00.001+09:00

it shows crawford, too.

whose turn?

2008-05-20T22:21:00.001+09:00

"neat" arrow tells you...

Support for installer

2008-05-20T21:41:00.003+09:00

for windows version, I'll put it ready NSIS installer. It is very simple, but it should be enough.

I will prepare .dmg file for Mac OS X, but the application itself is not running. :(

Support for cube

2008-05-20T21:22:00.001+09:00

Bad news: encountered problem with Mac OS X development enviroment. It is not likely to able to release first version fro mac. :(
Good news: now able to display cube.

looking nice is great thing.

2008-05-10T11:23:00.001+09:00

improved design with css. http://www.wxpygammon.org/

about.html has been merged to index.html.

Features are listed

2008-05-09T20:40:00.001+09:00

at about page you will find feature list. If you have a request, please leave your comment. thank you.

Starting wxpygammon blog

2008-05-09T16:20:00.002+09:00

Welcome. this is wxpygammon blog, developer's diary.
I'd like to make it ready to use before May 26th.