🛡️ CyberShield: Incident Response

Текстовый квест-симулятор специалиста по информационной безопасности (SOC-аналитика).

Обнаружена аномалия в сетевом трафике. Ваше время на реагирование ограничено. Удачи, инженер.

📖 О проекте

CyberShield: Incident Response — это интерактивное веб-приложение, погружающее пользователя в атмосферу работы Центра мониторинга и реагирования на инциденты (SOC). Вы берете на себя роль дежурного инженера по безопасности.

Проект построен на архитектуре конечного автомата (Finite State Machine), где каждая сцена — это объект с текстом, техническими данными и вариантами выбора. Игрок проходит через цепочку решений, чтобы локализовать и нейтрализовать угрозу.

🎯 Особенности

Атмосфера терминала: Стилизация под консоль с зеленым текстом на черном фоне, эффект печати текста.
Ветвящийся сценарий: 5 уникальных сцен с разными исходами (победа, частичный успех, провал).
Эффект печати: Текст появляется постепенно, как в реальном терминале.
Чистая архитектура: Логика отделена от представления (engine.js управляет data.js).

🎮 Сценарий и логика

Игрок начинает с получения алерта об аномалии в сети. От его решений зависит финал.

Сценарий	Описание	Исход
start	Обнаружена аномалия. Войти в систему или игнорировать?	Вход → `monitor` Игнор → `fail_shutdown`
monitor	Сервер под DDoS-атакой. Фильтровать трафик или отключить сервер?	Фильтр → `analysis` Отключить → `neutral_end`
analysis	Найден скрытый скрипт в БД. Удалить или исследовать?	Удалить → `victory` Исследовать → `fail_virus`
victory	Угроза нейтрализована. Победа!	Рестарт → `start`
neutral_end	Атака остановлена, но компания понесла убытки.	Рестарт → `start`
fail_shutdown	Игнорирование привело к уничтожению системы.	Рестарт → `start`
fail_virus	Вирус перехватил управление. Данные зашифрованы.	Рестарт → `start`

🛠️ Стек технологий

HTML5 — семантическая разметка.
CSS3 — Flexbox/Grid, анимации, кастомные шрифты, стилизация терминала.
JavaScript (ES6+) — чистая логика без фреймворков.

📁 Структура проекта

cybershield/
├── index.html              # Главная страница
├── assets/
│   ├── css/
│   │   └── style.css       # Все стили (терминал, кнопки, анимации)
│   └── js/
│       ├── data.js         # Сценарий (объект scenario)
│       └── engine.js       # Движок (отрисовка, эффект печати, переходы)
└── README.md

🚀 Установка и запуск

Так как проект использует только статические файлы (HTML/CSS/JS), для запуска достаточно открыть index.html в браузере.

Способ 1: Локально

git clone https://github.com/yourusername/cybershield.git
cd cybershield
# Открыть index.html в браузере

Или просто дважды кликнуть по index.html.

Способ 2: С помощью Live Server (рекомендуется)

# Установить Live Server (если используешь VS Code)
# ПКМ по index.html -> Open with Live Server

🧠 Как это работает

1. Данные (`data.js`)

Все сцены описаны в объекте scenario. Каждая сцена содержит:

{
    stage: "1/5",           // Текущий этап
    message: "текст...",    // Сообщение с переносами \n
    options: [              // Варианты выбора
        { text: "КНОПКА", next: "следующая_сцена" }
    ]
}

2. Движок (`engine.js`)

updateGame(sceneKey) — загружает сцену по ключу, обновляет прогресс и запускает эффект печати.
typeEffect() — посимвольно выводит текст с задержкой 20 мс.
drawButtons(options) — создает кнопки выбора после завершения печати.

3. Стили (`style.css`)

Терминальный вид: черный фон, зеленый шрифт, моноширинный шрифт.
Свечение: тень на рамке (box-shadow).
Кнопки: прозрачный фон, зеленый бордер, ховер с инверсией цветов.

🧪 Расширение сценария

Чтобы добавить новую сцену, просто добавь объект в scenario:

const scenario = {
    // ... существующие сцены
    new_scene: {
        stage: "3/5",
        message: "> НОВОЕ СОБЫТИЕ...",
        options: [
            { text: "ДЕЙСТВИЕ А", next: "next_scene" },
            { text: "ДЕЙСТВИЕ Б", next: "another_scene" }
        ]
    }
};

Затем укажи next в одной из существующих сцен, чтобы вести на "new_scene".