From 2be8beb9104b8185886f36d68769bd25ce01aa08 Mon Sep 17 00:00:00 2001
From: Alexey Smirnov <petrovic228322@gmail.com>
Date: Sun, 22 Mar 2026 21:35:07 +0300
Subject: [PATCH] lioshik, cahekska, kiruxalight tic tac toe beagle

---
 .../.be                                       |   1 +
 .../CLAUDE.md                                 |  14 +
 .../Makefile                                  |  10 +
 .../README.md                                 |  56 +++
 .../index.html                                | 352 ++++++++++++++++++
 .../proxy.py                                  |  54 +++
 6 files changed, 487 insertions(+)
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/.be
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/CLAUDE.md
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/Makefile
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/README.md
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/index.html
 create mode 100644 04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/proxy.py

diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/.be b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/.be
new file mode 100644
index 00000000..2acf7117
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/.be
@@ -0,0 +1 @@
+//tictactoe/app
\ No newline at end of file
diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/CLAUDE.md b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/CLAUDE.md
new file mode 100644
index 00000000..0bf40270
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/CLAUDE.md
@@ -0,0 +1,14 @@
+Этот репозиторий создан для того чтобы написать простое веб приложение на JavaScript, которое реализует игру в крестики и нолики. Игра должна быть коллаборативной. 
+
+Само по себе задание довольно простое. Но все осложняется тем, что нужно использовать кастомную систему контроля версий Beagle. 
+Это собственная разработка нашего преподавателя на курсе по децентрализованным системам (на этом курсе нам и задали задания с крестиками и ноликами). 
+
+Тебе обязательно нужно прочитать эти две статьи чтобы понимать что это за система контроля версий
+1. https://replicated.wiki/blog/partI.html
+2. https://replicated.wiki/blog/partII.html
+
+Поскольку эта система контроля версий имеет HTTP-api, приложение должно быть как-бы "задеплоино" в эту систему контроля версий. То есть предполагается, что человек в браузере просто откроет ссылку в системе beagle на какой-то один файл (например index.html) и у него запуститься приложение.
+
+Важный нюанс: в качестве БД должен использоваться тоже beagle. То есть какие-то состояния игроков и/или игр тоже должны храниться внутри Beagle.
+
+Для того чтобы понять какими командами можно поднимать beagle сервер, и пользоваться им стоит изучить сам репозиторий с проектом https://github.com/gritzko/librdx. Вроде как в нем есть также какая-то библиотека, для того чтобы делать запросы в beagle репозиторий прямо из браузера.
\ No newline at end of file
diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/Makefile b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/Makefile
new file mode 100644
index 00000000..22276391
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/Makefile
@@ -0,0 +1,10 @@
+.PHONY: serve commit proxy
+
+serve:
+	be-srv 8080
+
+proxy:
+	python3 proxy.py 9090
+
+commit:
+	be post
diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/README.md b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/README.md
new file mode 100644
index 00000000..a8b21dde
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/README.md
@@ -0,0 +1,56 @@
+# Крестики-Нолики на Beagle
+
+Коллаборативная игра в крестики-нолики. В качестве хранилища и хостинга используется система контроля версий [Beagle](https://github.com/gritzko/librdx).
+
+## Зависимости
+
+- Собранный `be` и `be-srv` из [librdx](https://github.com/gritzko/librdx) (см. инструкцию по сборке в README репозитория)
+- Python 3
+
+## Быстрый старт
+
+### 1. Инициализация Beagle-репозитория
+
+```bash
+be post //tictactoe/app
+```
+
+### 2. Коммит файлов в Beagle
+
+```bash
+make commit
+```
+
+### 3. Запуск Beagle-сервера
+
+```bash
+make serve
+```
+
+Сервер запустится на порту 8080.
+
+### 4. Запуск прокси (в отдельном терминале)
+
+```bash
+make proxy
+```
+
+Прокси запустится на порту 9090. Он нужен потому что HTTP-парсер Beagle некорректно обрабатывает заголовки от браузера.
+
+### 5. Открыть в браузере
+
+```
+http://localhost:9090/index.html
+```
+
+Для игры вдвоём откройте эту ссылку в двух вкладках/браузерах.
+
+## Полезные команды
+
+```bash
+# Посмотреть содержимое файла в Beagle
+curl http://localhost:8080/game_index.txt
+
+# Посмотреть конкретную игру
+curl http://localhost:8080/game_<id>.txt
+```
diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/index.html b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/index.html
new file mode 100644
index 00000000..ff2a0641
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/index.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Крестики-Нолики</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: system-ui, sans-serif;
+            display: flex; justify-content: center; align-items: center;
+            min-height: 100vh; background: #1a1a2e; color: #eee;
+        }
+        .container { text-align: center; max-width: 400px; width: 100%; padding: 20px; }
+        h1 { margin-bottom: 20px; color: #e94560; }
+        .screen { display: none; }
+        .screen.active { display: block; }
+
+        input[type="text"] {
+            padding: 10px 16px; font-size: 16px; border: 2px solid #e94560;
+            border-radius: 8px; background: #16213e; color: #eee; width: 100%;
+            margin-bottom: 12px; outline: none;
+        }
+        button {
+            padding: 10px 24px; font-size: 16px; border: none; border-radius: 8px;
+            background: #e94560; color: #fff; cursor: pointer; margin: 4px;
+            transition: background 0.2s;
+        }
+        button:hover { background: #c73650; }
+        button:disabled { background: #555; cursor: not-allowed; }
+
+        .board {
+            display: grid; grid-template-columns: repeat(3, 1fr);
+            gap: 6px; margin: 20px auto; max-width: 300px;
+        }
+        .cell {
+            aspect-ratio: 1; font-size: 48px; font-weight: bold;
+            border: 2px solid #e94560; border-radius: 8px;
+            background: #16213e; color: #eee; cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+            transition: background 0.15s;
+        }
+        .cell:hover:not(.taken) { background: #1a1a3e; }
+        .cell.taken { cursor: not-allowed; }
+        .cell.x { color: #e94560; }
+        .cell.o { color: #0f3460; }
+
+        .status { font-size: 18px; margin: 12px 0; min-height: 28px; }
+        .game-list { list-style: none; margin: 12px 0; }
+        .game-list li {
+            padding: 10px; margin: 6px 0; background: #16213e;
+            border-radius: 8px; cursor: pointer; border: 1px solid #333;
+        }
+        .game-list li:hover { border-color: #e94560; }
+        .game-list .no-games { cursor: default; color: #888; }
+        .game-list .no-games:hover { border-color: #333; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>Крестики-Нолики</h1>
+
+    <!-- Login Screen -->
+    <div id="login-screen" class="screen active">
+        <input type="text" id="player-name" placeholder="Ваше имя" maxlength="20">
+        <br>
+        <button id="btn-login">Войти</button>
+    </div>
+
+    <!-- Lobby Screen -->
+    <div id="lobby-screen" class="screen">
+        <p>Привет, <span id="display-name"></span>!</p>
+        <button id="btn-create">Создать игру</button>
+        <button id="btn-refresh">Обновить</button>
+        <h3 style="margin-top:16px">Открытые игры:</h3>
+        <ul id="game-list" class="game-list"></ul>
+    </div>
+
+    <!-- Game Screen -->
+    <div id="game-screen" class="screen">
+        <div class="status" id="status"></div>
+        <div class="board" id="board"></div>
+        <button id="btn-leave">Покинуть</button>
+    </div>
+</div>
+
+<script>
+// ============================================================
+// Storage Interface
+// ============================================================
+// Beagle operates as a file-based store accessible via HTTP.
+// The interface mirrors this: read/write/list files by path.
+// When we plug in the real Beagle backend, we'll implement
+// these methods using fetch() against the Beagle HTTP API.
+// ============================================================
+
+class BeagleStorage {
+    constructor(baseUrl) {
+        this._base = baseUrl.replace(/\/$/, '');
+        this._queue = Promise.resolve();
+    }
+
+    // Serialize all requests — Beagle server is single-threaded
+    // and breaks on concurrent connections
+    _enqueue(fn) {
+        this._queue = this._queue.then(fn, fn);
+        return this._queue;
+    }
+
+    async read(path) {
+        return this._enqueue(async () => {
+            const res = await fetch(`${this._base}/${path}`);
+            if (!res.ok) return null;
+            return await res.text();
+        });
+    }
+
+    async write(path, content) {
+        return this._enqueue(async () => {
+            await fetch(`${this._base}/${path}`, {
+                method: 'POST',
+                body: content,
+            });
+        });
+    }
+}
+
+// ============================================================
+// App
+// ============================================================
+
+const storage = new BeagleStorage(window.location.origin);
+
+let playerName = '';
+let currentGameId = null;
+let myMark = null; // 'X' or 'O'
+let pollTimer = null;
+
+// DOM refs
+const loginScreen = document.getElementById('login-screen');
+const lobbyScreen = document.getElementById('lobby-screen');
+const gameScreen = document.getElementById('game-screen');
+const playerNameInput = document.getElementById('player-name');
+const displayName = document.getElementById('display-name');
+const gameListEl = document.getElementById('game-list');
+const boardEl = document.getElementById('board');
+const statusEl = document.getElementById('status');
+
+function showScreen(screen) {
+    [loginScreen, lobbyScreen, gameScreen].forEach(s => s.classList.remove('active'));
+    screen.classList.add('active');
+}
+
+// -- Login --
+document.getElementById('btn-login').onclick = () => {
+    const name = playerNameInput.value.trim();
+    if (!name) return;
+    playerName = name;
+    displayName.textContent = playerName;
+    showScreen(lobbyScreen);
+    refreshLobby();
+};
+playerNameInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter') document.getElementById('btn-login').click();
+});
+
+// -- Lobby --
+document.getElementById('btn-create').onclick = createGame;
+document.getElementById('btn-refresh').onclick = refreshLobby;
+
+const INDEX_PATH = 'game_index.txt';
+
+async function getGameIndex() {
+    const raw = await storage.read(INDEX_PATH);
+    if (!raw) return [];
+    try { return JSON.parse(raw); } catch { return []; }
+}
+
+async function saveGameIndex(index) {
+    await storage.write(INDEX_PATH, JSON.stringify(index));
+}
+
+async function createGame() {
+    const id = Math.random().toString(36).slice(2, 8);
+    const game = {
+        id,
+        board: Array(9).fill(null),
+        players: { X: playerName, O: null },
+        turn: 'X',
+        status: 'waiting',
+        winner: null,
+    };
+    await storage.write(`game_${id}.txt`, JSON.stringify(game));
+    const index = await getGameIndex();
+    index.push(id);
+    await saveGameIndex(index);
+    joinGame(id, 'X');
+}
+
+async function refreshLobby() {
+    const index = await getGameIndex();
+    gameListEl.innerHTML = '';
+
+    if (index.length === 0) {
+        gameListEl.innerHTML = '<li class="no-games">Нет открытых игр</li>';
+        return;
+    }
+
+    for (const id of index) {
+        const raw = await storage.read(`game_${id}.txt`);
+        if (!raw) continue;
+        const game = JSON.parse(raw);
+        if (game.status === 'finished') continue;
+
+        const li = document.createElement('li');
+        if (game.status === 'waiting') {
+            li.textContent = `${game.players.X} ждёт соперника`;
+            li.onclick = () => joinAsO(game.id);
+        } else {
+            li.textContent = `${game.players.X} vs ${game.players.O} (идёт игра)`;
+            li.onclick = () => spectateOrRejoin(game);
+        }
+        gameListEl.appendChild(li);
+    }
+
+    if (!gameListEl.children.length) {
+        gameListEl.innerHTML = '<li class="no-games">Нет открытых игр</li>';
+    }
+}
+
+async function joinAsO(gameId) {
+    const raw = await storage.read(`game_${gameId}.txt`);
+    if (!raw) return;
+    const game = JSON.parse(raw);
+    if (game.status !== 'waiting') return;
+    game.players.O = playerName;
+    game.status = 'playing';
+    await storage.write(`game_${gameId}.txt`, JSON.stringify(game));
+    joinGame(gameId, 'O');
+}
+
+function spectateOrRejoin(game) {
+    if (game.players.X === playerName) joinGame(game.id, 'X');
+    else if (game.players.O === playerName) joinGame(game.id, 'O');
+    // else spectate — not implemented yet
+}
+
+// -- Game --
+function joinGame(gameId, mark) {
+    currentGameId = gameId;
+    myMark = mark;
+    showScreen(gameScreen);
+    renderBoard();
+    startPolling();
+}
+
+document.getElementById('btn-leave').onclick = () => {
+    stopPolling();
+    currentGameId = null;
+    myMark = null;
+    showScreen(lobbyScreen);
+    refreshLobby();
+};
+
+function startPolling() {
+    stopPolling();
+    pollTimer = setInterval(renderBoard, 1500);
+}
+
+function stopPolling() {
+    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+}
+
+async function renderBoard() {
+    if (!currentGameId) return;
+    const raw = await storage.read(`game_${currentGameId}.txt`);
+    if (!raw) return;
+    const game = JSON.parse(raw);
+
+    // Status text
+    if (game.status === 'waiting') {
+        statusEl.textContent = 'Ожидание соперника...';
+    } else if (game.status === 'finished') {
+        statusEl.textContent = game.winner
+            ? `Победил ${game.players[game.winner]} (${game.winner})!`
+            : 'Ничья!';
+    } else {
+        const isMyTurn = game.turn === myMark;
+        statusEl.textContent = isMyTurn
+            ? `Ваш ход (${myMark})`
+            : `Ход соперника (${game.turn})`;
+    }
+
+    // Board
+    boardEl.innerHTML = '';
+    for (let i = 0; i < 9; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'cell';
+        const val = game.board[i];
+        if (val) {
+            cell.textContent = val;
+            cell.classList.add('taken', val.toLowerCase());
+        }
+        cell.onclick = () => makeMove(i);
+        boardEl.appendChild(cell);
+    }
+}
+
+async function makeMove(index) {
+    if (!currentGameId) return;
+    const raw = await storage.read(`game_${currentGameId}.txt`);
+    if (!raw) return;
+    const game = JSON.parse(raw);
+
+    if (game.status !== 'playing') return;
+    if (game.turn !== myMark) return;
+    if (game.board[index] !== null) return;
+
+    game.board[index] = myMark;
+
+    const winner = checkWinner(game.board);
+    if (winner) {
+        game.status = 'finished';
+        game.winner = winner;
+    } else if (game.board.every(c => c !== null)) {
+        game.status = 'finished';
+        game.winner = null;
+    } else {
+        game.turn = myMark === 'X' ? 'O' : 'X';
+    }
+
+    await storage.write(`game_${currentGameId}.txt`, JSON.stringify(game));
+    renderBoard();
+}
+
+const LINES = [
+    [0,1,2],[3,4,5],[6,7,8],
+    [0,3,6],[1,4,7],[2,5,8],
+    [0,4,8],[2,4,6],
+];
+
+function checkWinner(board) {
+    for (const [a,b,c] of LINES) {
+        if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+            return board[a];
+        }
+    }
+    return null;
+}
+</script>
+</body>
+</html>
diff --git a/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/proxy.py b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/proxy.py
new file mode 100644
index 00000000..5393b07a
--- /dev/null
+++ b/04-formats/tic-tac-toe-lioshik-caheska-kiruxalight/proxy.py
@@ -0,0 +1,54 @@
+#!/usr/bin/env python3
+"""Proxy server that forwards requests to Beagle.
+
+Beagle's HTTP parser has issues with browser requests (too many headers).
+This proxy strips unnecessary headers before forwarding.
+"""
+
+import http.server
+import urllib.request
+import sys
+
+BEAGLE_PORT = 8080
+PROXY_PORT = int(sys.argv[1]) if len(sys.argv) > 1 else 9090
+
+
+class BeagleProxy(http.server.BaseHTTPRequestHandler):
+    def log_message(self, fmt, *args):
+        sys.stderr.write(f"{args[0]}\n")
+
+    def do_GET(self):
+        self._forward()
+
+    def do_POST(self):
+        self._forward()
+
+    def _forward(self):
+        cl = int(self.headers.get("Content-Length", 0))
+        body = self.rfile.read(cl) if cl > 0 else None
+
+        req = urllib.request.Request(
+            f"http://localhost:{BEAGLE_PORT}{self.path}",
+            data=body,
+            method=self.command,
+        )
+
+        try:
+            resp = urllib.request.urlopen(req, timeout=120)
+            data = resp.read()
+            self.send_response(resp.status)
+            self.send_header("Content-Length", len(data))
+            self.send_header("Connection", "close")
+            self.end_headers()
+            self.wfile.write(data)
+        except urllib.error.HTTPError as e:
+            self.send_response(e.code)
+            self.end_headers()
+        except Exception:
+            self.send_response(502)
+            self.end_headers()
+
+
+if __name__ == "__main__":
+    print(f"Proxy listening on :{PROXY_PORT} -> Beagle :{BEAGLE_PORT}")
+    http.server.HTTPServer(("", PROXY_PORT), BeagleProxy).serve_forever()