Xpell-UI Example

Tik-Tak-Toe

Quick overview of the Tic-Tac-Toe sample built with Xpell-UI and XData. Explore the source, view the UI, and jump into the live demo.

← Back
Tic-Tac-Toe screenshot
Code excerpt
// main entry
import "animate.css";
import { Xpell as _x, _xlog, XUI, XData as _xd, XUIAnimate as _xa } from "xpell-ui";

_x.verbose = true;
_x.start();
_x.loadModule(XUI);

const createCell = (row, col) => ({
  _type: "button",
  class: "ttt-board-button",
  _text: "?",
  _on_click: (xobj) => {
    const turn = _xd._o["ttt-turn"];
    xobj._text = turn;
    _xd._o["ttt-turn"] = turn === "X" ? "O" : "X";
    // ...update board + winner check...
  },
});