Модуль: Flask для школьников

regex_territory/
├── app.py
├── puzzles.db          (появится автоматически)
└── templates/
    └── game.html

from flask import Flask, render_template, request, jsonify
import re
import sqlite3
import json

app = Flask(__name__)
DB_PATH = 'puzzles.db'

if __name__ == '__main__':
    init_db()   # определим в задании 4
    app.run(debug=True, host='0.0.0.0', port=5050)

Почему host='0.0.0.0': обычно Flask слушает только 127.0.0.1 (свой компьютер). Чтобы все желающие могли зайти с других устройств, нужен 0.0.0.0 — «слушать всех в сети». Если сейчас попробуешь запустить — будет ошибка, что init_db не найдена. Это нормально, добавим в задании 4.

TEAMS = {
    "red":    {"name": "Красные", "color": "#e74c3c"},
    "blue":   {"name": "Синие",   "color": "#3498db"},
    "green":  {"name": "Зелёные", "color": "#2ecc71"},
    "yellow": {"name": "Жёлтые",  "color": "#f1c40f"},
}

Почему команды в коде, а вопросы — в базе? Простое правило: что часто меняется или растёт — в базу. Что фиксировано и небольшое — можно в коде. Команд всегда четыре, цвета подобраны заранее. Вопросов хочется добавлять без перезапуска и без правки кода.

def init_db():
    conn = sqlite3.connect(DB_PATH)
    cur = conn.cursor()
    cur.execute('''
        CREATE TABLE IF NOT EXISTS puzzles (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            position INTEGER UNIQUE NOT NULL,
            name TEXT NOT NULL,
            description TEXT NOT NULL,
            yes_strings TEXT NOT NULL,
            no_strings TEXT NOT NULL,
            points INTEGER NOT NULL DEFAULT 1
        )
    ''')

    cur.execute('SELECT COUNT(*) FROM puzzles')
    if cur.fetchone()[0] == 0:
        # Таблица пустая — засеваем стартовыми задачами
        seeds = [
            (0, "Буквы a и b", "Только буквы a и b",
                ["aab", "bba"], ["abc", "a1"], 1),
            (1, "Одни нули", "Строка из нулей",
                ["0", "000"], ["01", ""], 1),
            (2, "4 цифры", "Ровно 4 цифры",
                ["1234", "0000"], ["123", "abcd"], 2),
            (3, "Email", "user@domain",
                ["a@b.ru"], ["@mail"], 3),
        ]
        for pos, name, desc, yes, no, pts in seeds:
            cur.execute(
                '''INSERT INTO puzzles
                   (position, name, description, yes_strings, no_strings, points)
                   VALUES (?, ?, ?, ?, ?, ?)''',
                (pos, name, desc, json.dumps(yes), json.dumps(no), pts)
            )

    conn.commit()
    conn.close()

Что такое json.dumps: функция превращает список Python вроде ["aab", "bba"] в строку '["aab", "bba"]'. Эту строку можно сохранить в текстовую колонку SQLite. Обратно превращаем в список через json.loads(s) в задании 5.

Зачем проверка COUNT(*): если таблица уже есть и в ней лежат задачи учителя — не надо заново засевать. Засеваем только пустую таблицу.

Можно добавить задачи руками, например через DB Browser for SQLite: открываешь файл puzzles.db, добавляешь строку в таблицу puzzles — задача появится в игре после следующего polling, без перезапуска сервера.

game = {
    "cells": {},  # "r,c" -> {"team": "red", "player": "Вася"}
    "log": [],
}

def get_puzzle(r, c):
    position = r * 6 + c       # (r, c) -> линейный индекс 0..35
    conn = sqlite3.connect(DB_PATH)
    cur = conn.cursor()
    cur.execute(
        '''SELECT name, description, yes_strings, no_strings, points
           FROM puzzles WHERE position = ?''',
        (position,)
    )
    row = cur.fetchone()
    conn.close()

    if row is None:
        return None

    name, desc, yes_str, no_str, pts = row
    return {
        "name": name,
        "desc": desc,
        "yes": json.loads(yes_str),
        "no": json.loads(no_str),
        "pts": pts,
    }

Заметь: функция возвращает словарь с теми же полями, что и раньше, когда задачи лежали в коде. Поэтому остальные части программы (api_state, api_capture, api_puzzle) менять не нужно — они продолжат работать. Это называется «стабильный интерфейс»: внутри функции мы поменяли источник данных, снаружи всё то же самое.

Минус подхода: на каждый вызов get_puzzle открываем-закрываем соединение с БД. В api_state get_puzzle зовётся 36 раз — это 36 коротких запросов на каждый polling. SQLite справляется, но в большой системе так делать нельзя — там используют пулы соединений или Flask.g. Нам пока хватит.

@app.route('/')
def index():
    return render_template('game.html', teams=TEAMS)

@app.route('/api/state')
def api_state():
    scores = {t: 0 for t in TEAMS}
    for key, cell in game["cells"].items():
        r, c = map(int, key.split(","))
        puzzle = get_puzzle(r, c)
        if puzzle:
            scores[cell["team"]] += puzzle["pts"]

    grid = []
    for r in range(6):
        row = []
        for c in range(6):
            puzzle = get_puzzle(r, c)
            if puzzle is None:
                row.append(None)
                continue
            key = f"{r},{c}"
            data = {"name": puzzle["name"], "pts": puzzle["pts"]}
            if key in game["cells"]:
                data["team"] = game["cells"][key]["team"]
                data["player"] = game["cells"][key]["player"]
            row.append(data)
        grid.append(row)

    return jsonify({"grid": grid, "scores": scores, "teams": TEAMS})

Про None и «дырки» в сетке: если в задании 4 ты засеял базу только 4 задачами, для остальных 32 клеток get_puzzle вернёт None, и в grid попадёт None. На странице эти места просто не отрисуются (см. задание 12). Это фича: учитель может постепенно пополнять базу, и новые задачи появляются на сетке без перезапуска сервера.

@app.route('/api/capture', methods=['POST'])
def api_capture():
    data = request.json
    r, c = data.get("r"), data.get("c")
    regex_str = data.get("regex", "")
    team = data.get("team", "")
    player = data.get("player", "Аноним")

    puzzle = get_puzzle(r, c)
    if puzzle is None:
        return jsonify({"ok": False, "msg": "Нет клетки"})
    key = f"{r},{c}"
    if key in game["cells"]:
        return jsonify({"ok": False, "msg": "Уже захвачена"})

    try:
        pattern = re.compile(regex_str)
    except re.error as e:
        return jsonify({"ok": False, "msg": f"Ошибка regex: {e}"})

    for s in puzzle["yes"]:
        if not pattern.fullmatch(s):
            return jsonify({"ok": False, "msg": f'{s} должна пройти'})
    for s in puzzle["no"]:
        if pattern.fullmatch(s):
            return jsonify({"ok": False, "msg": f'{s} НЕ должна пройти'})

    game["cells"][key] = {"team": team, "player": player}
    return jsonify({"ok": True, "msg": "Захвачено!"})

Про fullmatch vs search: fullmatch требует совпадения всей строки. search ищет подстроку. Нам нужно именно полное — иначе regex a пройдёт строку "abc", что неправильно.

<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Regex Territory</title>
  <style> /* CSS */ </style>
</head><body>
  <h1>Regex Territory</h1>
  <input id="player" placeholder="Имя">
  <select id="team">
    <option value="red">Красные</option>
    <option value="blue">Синие</option>
    <option value="green">Зелёные</option>
    <option value="yellow">Жёлтые</option>
  </select>
  <div id="scores"></div>
  <div id="grid"></div>
  <div id="modal" style="display:none"></div>
  <script> /* JavaScript */ </script>
</body></html>

Заметь meta viewport: без неё страница на телефоне будет показана как уменьшенная копия десктопа. С ней браузер использует реальную ширину экрана, и медиа-запросы из CSS (увидишь в задании 10) сработают.

#grid {
  display: grid;
  grid-template-columns: repeat(6, 80px);
  gap: 4px;
}
.cell {
  width: 80px; height: 80px;
  border: 2px solid #999;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-align: center; font-size: 12px;
  background: #fff;
}
.cell.red    { background: #ffcdd2; border-color: #e74c3c; }
.cell.blue   { background: #bbdefb; border-color: #3498db; }
.cell.green  { background: #c8e6c9; border-color: #2ecc71; }
.cell.yellow { background: #fff9c4; border-color: #f1c40f; }

/* Адаптация под телефоны: сетка тянется по ширине экрана */
@media (max-width: 600px) {
  #grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 100%;
    gap: 2px;
  }
  .cell {
    width: auto;
    height: 14vw;     /* высота через ширину окна, чтобы клетка была квадратной */
    font-size: 9px;
    border-width: 1px;
  }
}

Как это работает на телефоне: 6 колонок по 1fr делят ширину поровну. Если экран 360px, а отступы по бокам 20px — на сетку остаётся 320px, на одну клетку выходит ~53px. Высота 14vw = 14% ширины экрана, чтобы клетки оставались примерно квадратными при любом размере.

Почему 600px: это типичная граница «телефон vs планшет». Можно поставить 768px — тогда адаптив включится и на маленьких планшетах.

function loadState() {
  fetch('/api/state')
    .then(r => r.json())
    .then(data => {
      renderScores(data.scores, data.teams);
      renderGrid(data.grid);
    })
    .catch(err => console.error('polling failed:', err));
}

loadState();
setInterval(loadState, 1500);

Эти 2 строки в конце — сердце сетевой части. Все игроки у всех браузеров видят одну карту с задержкой 1.5 сек.

Про .catch(): если сеть пропала или сервер упал, без catch ошибка просто «улетает» в консоль молча и следующие polling ничего не сделают. С catch мы хотя бы увидим, что что-то не так. Для пользовательского интерфейса позже можно показывать индикатор «нет связи».

function renderGrid(grid) {
  const container = document.getElementById('grid');
  container.innerHTML = '';
  for (let r = 0; r < 6; r++) {
    for (let c = 0; c < 6; c++) {
      const cell = grid[r][c];
      if (!cell) continue;     // пустая клетка - задачи нет в БД
      const div = document.createElement('div');
      div.className = 'cell';
      if (cell.team) div.classList.add(cell.team);
      div.innerHTML = `<b>${cell.name}</b><br>${cell.pts} pts`;
      div.addEventListener('click', () => openPuzzle(r, c));
      container.appendChild(div);
    }
  }
}

function renderScores(scores, teams) {
  let html = '';
  for (const t in teams) {
    html += `<span style="color:${teams[t].color}">${teams[t].name}: ${scores[t]||0}</span> `;
  }
  document.getElementById('scores').innerHTML = html;
}

Про if (!cell) continue;: если в БД задача только для 4 клеток — остальные 32 не появятся на странице. Сетка будет с «дырками». Это нормально и удобно: учитель добавляет задачи постепенно. Хочешь видеть пустые клетки как заглушки — вместо continue создавай <div class="cell empty"> с серым фоном и без обработчика клика.

Сначала добавь в app.py маршрут для деталей задачи:

@app.route('/api/puzzle/<int:r>/<int:c>')
def api_puzzle(r, c):
    p = get_puzzle(r, c)
    if p is None: return jsonify({}), 404
    return jsonify(p)

Теперь JavaScript:

let currentCell = null;

function openPuzzle(r, c) {
  currentCell = {r, c};
  fetch(`/api/puzzle/${r}/${c}`)
    .then(res => res.json())
    .then(p => {
      const m = document.getElementById('modal');
      m.innerHTML = `
        <h3>${p.name}</h3><p>${p.desc}</p>
        <p>Да: ${p.yes.join(', ')}</p>
        <p>Нет: ${p.no.join(', ')}</p>
        <input id="regex-input" placeholder="^[a-z]+$">
        <button onclick="captureCell()">Захватить</button>
        <button onclick="document.getElementById('modal').style.display='none'">Отмена</button>
        <div id="result"></div>`;
      m.style.display = 'block';
    })
    .catch(err => alert('Не удалось загрузить задачу'));
}

function captureCell() {
  const result = document.getElementById('result');
  fetch('/api/capture', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      r: currentCell.r, c: currentCell.c,
      regex: document.getElementById('regex-input').value,
      team: document.getElementById('team').value,
      player: document.getElementById('player').value || 'Аноним',
    })
  })
  .then(r => r.json())
  .then(d => {
    result.innerHTML = d.msg;
    if (d.ok) {
      document.getElementById('modal').style.display = 'none';
      loadState();
    }
  })
  .catch(err => {
    result.innerHTML = '⚠ Ошибка соединения с сервером';
    console.error(err);
  });
}

Про .catch() в captureCell: без него, если интернет пропадёт прямо в момент захвата, игрок нажмёт «Захватить» и просто увидит... ничего. Никакой обратной связи, никакой ошибки. С catch мы покажем сообщение, и игрок поймёт, что надо повторить попытку. Маленькая деталь — огромная разница в ощущениях.

# macOS/Linux
ifconfig | grep inet

# Windows
ipconfig

# Запуск Flask (puzzles.db создастся автоматически)
python app.py

# Доступ для одноклассников
http://192.168.1.42:5050   # подставь свой IP

# Если нужен публичный URL
ngrok http 5050

# Чтобы посмотреть/добавить задачи в базу:
# качаешь DB Browser for SQLite, открываешь puzzles.db

Правила игры: 3–4 команды по 5–8 человек, раунд 10 минут, побеждает команда с большим числом очков.