xfy でリバーシゲームをつくってみないか(その2): katoy: cocolog

svg でオセロ(リバーシ)の画面材料を作ってみた。
マウスでクリックしたら、アクションを起動させたいが、どうすべきなのかが不明。

- http://www.xfy.com/jp/manual/compo/svg/
> > SVGコンポーネントヘルプ
のオンラインヘルプなどにも説明が見当たらない orz...

$ cat reversi.xvc

<?xml version="1.0"?>
<?com.xfy vocabulary-connection href="reversi.xvcd" ?>
<test:root version="0.1" xmlns:test="http://xmlns.xfy.com/community/samples/test">
</test:root>

$ cat reversi.xml

<?xml version="1.0" encoding="UTF-8"?>

<xvcd:xvcd version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:instruction="http://xmlns.xfy.com/instruction"
xmlns:function="http://xmlns.xfy.com/function"
xmlns:ctrl="http://xmlns.xfy.com/controls"
xmlns:command="http://xmlns.xfy.com/command"
xmlns:svg="http://www.w3.org/2000/svg"

xmlns:test="http://xmlns.xfy.com/community/samples/test"

>


<xvcd:vocabulary name="Reversi" match="test:root" call-template="Root" />


<xvcd:template name="Root">
      <html>
      <head>
      <title>Reversi</title>
      </head>
      <body style="background-color:gray;">

      <div style="padding:5px;">
      </div>

      <div style="padding:5px;">
         <xvcd:call-template name="svg-part"/>
      </div>

      </body>
      </html>
</xvcd:template>

<xvcd:template name="svg-part">
   <svg height="240" width="240"
      xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(40 40)">

      <rect x="0" y="0" width="160" height="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(13.333%,54.51%,13.333%);fill-rule:nonzero" />

      <line x1="20" y1="0" x2="20" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="40" y1="0" x2="40" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="60" y1="0" x2="60" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="80" y1="0" x2="80" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="100" y1="0" x2="100" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="120" y1="0" x2="120" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="140" y1="0" x2="140" y2="160"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />

      <line x1="0" y1="20" x2="160" y2="20"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="40" x2="160" y2="40"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="60" x2="160" y2="60"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="80" x2="160" y2="80"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="100" x2="160" y2="100"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="120" x2="160" y2="120"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
      <line x1="0" y1="140" x2="160" y2="140"
         style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />

      <g transform="translate(5 -3)">
         <text x="0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">a</text>
         <text x="20.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">b</text>
         <text x="40.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">c</text>
         <text x="60.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">d</text>
         <text x="80.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">e</text>
         <text x="100.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">f</text>
         <text x="120.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">g</text>
         <text x="140.0" y="0.0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">h</text>
      </g>

      <g transform="translate(-15 18)">
         <text x="0" y="0"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">1</text>
         <text x="0" y="20"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">2</text>
         <text x="0" y="40"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">3</text>
         <text x="0" y="60"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">4</text>
         <text x="0" y="80"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">5</text>
         <text x="0" y="100"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">6</text>
         <text x="0" y="120"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">7</text>
         <text x="0" y="140"
            style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
            xml:space="preserve">8</text>
      </g>

      <g transform="translate(0 160)">
         <circle cx="0" cy="20" r="8"
            style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(100%,100%,100%);fill-rule:nonzero" />
      <text x="15" y="25"
         style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
         xml:space="preserve">xx</text>
         <circle cx="50" cy="20" r="8"
            style="stroke-opacity:1;stroke:rgb(100%,100%,100%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(0%,0%,0%);fill-rule:nonzero" />
      <text x="65" y="25"
         style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
         xml:space="preserve">yy</text>
         <circle cx="100" cy="20" r="8"
            style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(50.196%,50.196%,50.196%);fill-rule:nonzero" />
      <text x="115" y="25"
         style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
         xml:space="preserve">zz</text>
      </g>
      </g>
   </svg>
</xvcd:template>

</xvcd:xvcd>