Example: Tic Tac Toe

This repository demonstrates some essential concept of the UIX framework such as pointers and Web components using the example of a Tic Tac Toe game.

The repository implements front-end rendering.

Installation

1. Install the UIX command line tool following the Getting Started guide in our documentation.

2. Clone this repository to your local machine:

   $ git clone https://github.com/unyt-org/example-tic-tac-toe.git

3. Run the project local

   $ uix --port 8000

4. Navigate to your favourite web browser and open http://localhost:8000 to see everything in action.

Structure

This diagram outlines the UIX default project structure. We split our code base in back-end, front-end, and commons folder.

.
└── example-tic-tac-toe/
    ├── backend/
    │   ├── .dx                 // Config file for deployment
    │   ├── Map.ts              // Map for games
    │   └── entrypoint.tsx      // Back-end entrypoint
    ├── common/
    │   ├── components/
    │   │   ├── GamePage.scss   // Game style declaration
    │   │   └── GamePage.tsx    // Game component
    │   └── theme.ts            // Global style theme
    ├── frontend/
    │   ├── entrypoint.css      // Front-end style declaration
    │   └── entrypoint.tsx      // Front-end entrypoint
    ├── app.dx                  // Endpoint config file
    └── deno.json               // Deno config file

Features

• Support for multiple games
• Reset option
• Player turn handling

Preview

Explanation

Concept of Pointers

In UIX, Pointers are a fundamental concept for managing shared data across different parts of your application. Pointers allow different components or endpoints to access and modify the same data. In the context of our game, a Pointer could represent a single value of a tile (either empty, X or O).

Pointers are synchronized over the Supranet, based on our powerful DATEX networking protocol that ensures real-time updates and consistency across endpoints. When one user checks a tile, the changes are propagated to the other player through the Supranet, keeping the data in sync.

---

_{© unyt 2024 • unyt.org}