<script type="module" src="https://pyscript.net/releases/2025.8.1/core.js"></script>

<table id="board">
    <tr>
        <td><div id="cell00" data-x="0" data-y="0" class="cell"></div></td>
        <td><div id="cell01" data-x="0" data-y="1" class="cell"></div></td>
        <td><div id="cell02" data-x="0" data-y="2" class="cell"></div></td>
    <tr>
        <!-- ... 他のセル ... -->
    </tr>
</table>

<script src="./main.py" config="./pyscript.toml" type="mpy"></script>

from pyscript.web import page, when

class TicTacToe:
    def __init__(self):
        self.board, = page["table#board"]
        self.init_cells()
        self.new_game()

    def click(self, event):
        # クリック位置の属性を取得
        x_attr = event.target.getAttribute('data-x')
        y_attr = event.target.getAttribute('data-y')

        # セル以外のクリックは無視
        if x_attr is None or y_attr is None:
            print('Click outside of cell, ignoring')
            return

        i = int(x_attr)
        j = int(y_attr)
        # ... ゲームロジック ...

GAME = TicTacToe()

@when("click", "#board")
def user_click(event):
    GAME.click(event)

name = "Tic Tac Toe"
description = "A Tic-Tac-Toe game written in PyScript"