Загрузка данных


У меня УЖЕ ЕСТЬ полностью работающая Crash-игра.

ВАЖНО:
НЕ создавай Crash заново.
НЕ меняй игровую механику.
НЕ переписывай существующую архитектуру без необходимости.

Сначала внимательно изучи существующий код Crash-игры и найди:
- компонент страницы Crash;
- текущую игровую область;
- существующий canvas/PixiJS;
- логику multiplier;
- start/crash состояния;
- обработку ставки;
- кнопку START;
- баланс Gold;
- историю коэффициентов;
- backend/API/WebSocket;
- существующие responsive стили.

После анализа измени ТОЛЬКО визуализацию игрового поля.

==================================================
ЧТО УЖЕ РАБОТАЕТ И ДОЛЖНО ОСТАТЬСЯ
==================================================

На странице уже есть:

- Header KICKXSUS;
- баланс Gold;
- "Назад к играм";
- название CRASH;
- история коэффициентов;
- поле ставки;
- быстрые ставки 10 / 50 / 100 / 500;
- кнопка START;
- существующая логика раунда;
- расчёт коэффициента;
- ставка и списание Gold;
- cashout, если он уже реализован;
- backend;
- API/WebSocket;
- мобильная адаптация.

ВСЁ ЭТО СОХРАНИТЬ.

Не менять бизнес-логику игры ради новой анимации.

Новая PixiJS-сцена должна лишь ВИЗУАЛИЗИРОВАТЬ уже существующее состояние игры.

==================================================
ГЛАВНАЯ ЗАДАЧА
==================================================

Сейчас игровое поле выглядит слишком просто:

- тёмный прямоугольник;
- обычная сетка;
- белые частицы;
- коэффициент по центру.

Нужно превратить именно эту существующую область в премиальную
анимированную Crash-сцену.

НЕ менять размеры всей страницы.

Новая сцена должна находиться ВНУТРИ существующей карточки игрового поля.

То есть структура страницы остаётся примерно:

CRASH

┌───────────────────────────────┐
│                               │
│      НОВАЯ PIXI СЦЕНА         │
│                               │
│             1.37x             │
│                               │
└───────────────────────────────┘

СТАВКА GOLD
[...........]

[10] [50] [100] [500]

[          START          ]

==================================================
НИКАКИХ КАРТИНОК
==================================================

Не использовать:

PNG
JPG
WebP
SVG
base64
готовый background
готовую rocket texture

Всю графику сделать программно через PixiJS 8:

- Graphics
- Container
- Mesh, если действительно нужен
- runtime generated Texture
- alpha
- blendMode
- простые filters

==================================================
НОВЫЙ ВИЗУАЛ ИГРОВОГО ПОЛЯ
==================================================

Стиль должен быть похож на premium futuristic Crash game.

Основные цвета:

background:
#050812
#070914
#090A15

red:
#711027
#A51230
#D91D3D
#FF344E
#FF6872

rocket:
#08090E
#11121A
#22232D
#35343E

Игровое поле остаётся очень тёмным.

Не делать обычный космос.

Никаких:
- звёздного неба;
- планет;
- галактик;
- синего космоса;
- мультяшного оформления.

==================================================
ФОН
==================================================

Существующий фон поля заменить на глубокий navy/black.

Слева и сверху почти чёрный.

Справа, особенно возле ракеты,
добавить очень слабое красно-бордовое ambient glow.

Фон должен быть минималистичным.

Карточку и существующее border-radius игрового блока сохранить.

==================================================
СЕТКА
==================================================

Текущую слишком заметную обычную сетку переделать.

Новая сетка:

- тонкая;
- тёмно-красная;
- практически незаметная;
- основная видимость справа;
- постепенно исчезает влево.

Цвет:
#7A142B

alpha:
примерно 0.08–0.16.

Вертикальные и горизонтальные линии должны создавать ощущение графика.

==================================================
РАКЕТА
==================================================

В игровом поле должна появиться процедурно нарисованная ракета.

Не делай примитив:

rectangle + triangle + circle.

Нужен качественный стилизованный 2.5D объект.

Ракета:

- компактная;
- тёмная;
- металлическая;
- ретрофутуристическая;
- летит вверх-вправо примерно под 45°.

Форма корпуса:
вытянутая капля / капсула,
плавно заострённая к носу.

Использовать bezier curves.

Корпус почти чёрный:

#08090E
#11121A
#24232D

Добавить несколько отдельных shadow/highlight shapes,
чтобы корпус воспринимался объёмным.

==================================================
ОКНО РАКЕТЫ
==================================================

На корпусе одно круглое окно.

Окно почти чёрное.

Вокруг него толстое красное металлическое кольцо:

#C51E39
#E32B46
#FF495C

Добавить небольшой red glow.

Это важная визуальная деталь.

==================================================
ПЛАВНИКИ
==================================================

Сделать 3 небольших стабилизатора.

Они:
- тёмные;
- органично соединены с корпусом;
- имеют тонкий красный rim light.

Не делать огромные треугольные крылья.

==================================================
КРАСНЫЙ RIM LIGHT
==================================================

На освещённой стороне ракеты добавить красный edge highlight.

Не обводить всю ракету.

Красный свет должен присутствовать только:
- на носу;
- части корпуса;
- краях плавников;
- около двигателя.

==================================================
ДВИГАТЕЛЬ
==================================================

За ракетой отдельный EngineEffect.

Пламя не является частью корпуса.

Структура:

hot core:
светло-оранжево-красный

#FFD0B5

middle:
#FF354C

outer:
#9D092B

Пламя сильно вытянуто назад.

Это скорее энергетический реактивный след,
а не обычный огонь.

Использовать ADD blending.

Пламя слегка пульсирует.

==================================================
ДЛИННЫЙ СЛЕД РАКЕТЫ
==================================================

За двигателем должны оставаться примерно 5–7 красных speed trails.

Цвета:

#FF4055
#DA1E3D
#A20E2C
#61071D

Полосы:
- разной толщины;
- разной длины;
- почти параллельные;
- слегка искривлённые;
- постепенно исчезают.

При росте multiplier они становятся длиннее и ярче.

==================================================
CRASH ГРАФИК
==================================================

Вместо статической пустой сетки добавить красную растущую линию.

ВАЖНО:

Использовать существующий реальный progress/multiplier игры.

Не генерировать отдельный multiplier для анимации.

Линия начинает движение снизу-слева
и постепенно изгибается вверх-вправо.

В начале почти горизонтальная.

Чем дальше раунд,
тем круче идёт вверх.

Визуальная функция примерно:

y = 0.92 - 0.82 * pow(progress, 2.8)

Но привяжи progress к уже существующему раунду.

Рисовать 3 слоя линии:

outer glow:
ширина ~18px
#D7183B
alpha 0.10

inner glow:
~9px
#F32A47
alpha 0.25

main line:
~4px
#FF6872
alpha 1

==================================================
ТОЧКА ГРАФИКА
==================================================

На текущем конце линии находится маленькая красная светящаяся точка.

Несколько circles:

large glow
medium glow
bright core.

Очень мягкий pulse около 1 секунды.

==================================================
РАКЕТА И ЛИНИЯ
==================================================

Ракета летит рядом с текущей точкой графика.

Но не приклеена непосредственно к ней.

Пример:

rocketX = graphX - offsetX
rocketY = graphY + offsetY

Добавить небольшое естественное floating движение:

X ±2px
Y ±3px

и rotation ±0.5°.

==================================================
КАМНИ
==================================================

Убрать текущие случайные белые точки.

Вместо части из них сделать процедурные тёмные low-poly fragments.

Форма:
5–8 углов.

Цвет:

#100D17
#20101A
#39101E

Некоторые освещённые грани:

#78142A
#A51A34

Камней не должно быть слишком много.

Пример:
8–15 хорошо заметных + несколько мелких.

Разные размеры.

Они медленно вращаются.

Добавить параллакс:
ближние движутся быстрее дальних.

==================================================
МИКРОЧАСТИЦЫ
==================================================

Дополнительно можно оставить мелкие частицы,
но сделать их красными и очень деликатными.

Пример:
20–40 штук на mobile.

Размер:
1–3px.

Цвет:
#D61B3A
#FF3049

Никакой снежной россыпи белых точек.

==================================================
КОЭФФИЦИЕНТ
==================================================

Существующий multiplier обязательно сохранить.

Если сейчас в центре показывается:

1.00x

то этот же компонент/данные используются дальше.

НЕ создавай второй multiplier.

Изменить можно только визуальное оформление.

Текст должен находиться поверх Pixi-сцены.

Пример:

1.00x
1.37x
2.58x

Цвет:
#FFFFFF

Font weight:
700–800.

При больших коэффициентах можно постепенно переходить в:

#FF5363

Но без rainbow.

==================================================
ЗАВИСИМОСТЬ ЭФФЕКТОВ ОТ MULTIPLIER
==================================================

Используй уже существующий multiplier.

Создай visualIntensity 0..1.

Например:

1.00x = 0.05
1.50x = 0.15
2.00x = 0.25
3.00x = 0.40
5.00x = 0.60
10x = 0.80
20x+ = 1

От visualIntensity зависят:

- длина огня;
- яркость двигателя;
- длина trails;
- скорость частиц;
- скорость debris;
- red ambient glow;
- лёгкая вибрация ракеты.

Не менять сам multiplier.

Это ТОЛЬКО визуальная функция.

==================================================
START
==================================================

Когда пользователь нажимает уже существующую кнопку START:

НЕ создавать новую обработку ставки.

Использовать существующий процесс.

Когда существующий game state сообщает,
что раунд начался:

- очистить предыдущую линию;
- показать rocket;
- включить engine;
- начать прорисовку линии;
- запустить движение.

Если game state ещё находится в ожидании:
ракета может слегка idle-анимироваться
или быть скрыта — выбери вариант,
который лучше соответствует существующей логике.

==================================================
CRASH EVENT
==================================================

Использовать уже существующий crash event игры.

Когда настоящий текущий раунд переходит в CRASH:

НЕ вычислять crash самостоятельно.

Визуально:

0ms:
яркость двигателя растёт

100ms:
trail становится длиннее

100–450ms:
ракета резко улетает за верхний правый край

пример:
X +500..700
Y -350..500

easeInCubic

Никакого взрыва.

Затем rocket исчезает.

Линия остаётся на месте
до существующего reset следующего раунда.

==================================================
СУЩЕСТВУЮЩАЯ ЛОГИКА
==================================================

Критически важно.

Сначала найди существующие значения/props/state,
которые уже определяют:

- текущий multiplier;
- статус раунда;
- старт;
- crash;
- ставка;
- cashout;
- историю.

Подключи визуал непосредственно к ним.

НЕ создавать:

MockCrashProvider
новый backend
новый WebSocket
новую игровую state machine,
если аналогичная уже существует.

Ничего не дублировать.

==================================================
UI НЕ ПЕРЕДЕЛЫВАТЬ
==================================================

На этом этапе НЕ менять:

Header
Gold balance
Back button
CRASH title
Bet card
input ставки
10/50/100/500
START button
Bottom navigation
History UI

Только если Pixi canvas перекрывает существующие элементы,
исправь z-index/layout минимально.

Основная задача —
ТОЛЬКО игровая визуальная зона.

==================================================
MOBILE
==================================================

Главная платформа сейчас mobile.

Особенно проверить экран примерно 390×844 / 393×852.

Ракета не должна:

- вылезать за игровую карточку до crash;
- перекрывать коэффициент;
- закрывать историю;
- выглядеть слишком большой.

Canvas должен точно находиться внутри существующей игровой карточки.

Использовать overflow:hidden
или Pixi mask по rounded rectangle,
если это требуется.

==================================================
ПРОИЗВОДИТЕЛЬНОСТЬ
==================================================

Цель:
60 FPS на мобильном Safari.

Не создавать Graphics каждый frame.

Создать объекты один раз.

Обновлять:
- position;
- rotation;
- alpha;
- scale;
- существующие graph geometry.

Использовать object pooling для debris/particles.

Количество BlurFilter минимальное.

==================================================
ПОРЯДОК РАБОТЫ
==================================================

1. Сначала изучи существующий Crash.
2. Напиши кратко, какие файлы отвечают за Crash.
3. Найди источник existing multiplier и round state.
4. Найди существующее Pixi/canvas поле либо место для него.
5. НЕ меняя механику, реализуй новый visual renderer.
6. Подключи renderer к existing multiplier/state.
7. Проверь START.
8. Проверь crash.
9. Проверь следующий round/reset.
10. Проверь mobile.
11. Проверь отсутствие memory leaks.
12. В конце покажи конкретно изменённые файлы.

НЕ создавай новый проект.

НЕ переписывай Crash с нуля.

НЕ меняй серверную игровую механику.

НЕ меняй формулы результата раунда.

НЕ трогай ставки.

НЕ трогай баланс.

Нам нужен REDESIGN СУЩЕСТВУЮЩЕГО GAME CANVAS.