Игра запускается и играется: три рантайм-бага и адаптивная вёрстка
Проверено вживую в Chrome: лобби -> матч -> бот ходит -> результат -> статистика в лобби. Полный матч отыгран, оба исхода видел. Баги, которые собирались и типизировались, но падали только в рантайме: 1. Canvas не менял размер под экран. Своего cc.Widget у него не было, а alignCanvasWithScreen правит только камеру. Canvas оставался 1280x720, и все растянутые по нему дети — тоже. 2. [...map.values()] превращается сборкой в [].concat(map.values()), а concat не разворачивает итератор, а кладёт его одним элементом. Отсюда "view.cancelAnimations is not a function" на первой же уборке карт. Теперь Array.from. 3. Рубашка козыря рисовалась поверх колоды, а не под ней. Вёрстка переделана под требование UI.md (4:3 .. 21:9): - fitWidth даёт постоянную ширину, но не высоту: на 4:3 видно только ±720 юнитов. Кнопка "Leave" на y=840 и низ руки на -860 были за экраном именно там, где это важнее всего - рука и панель действий считаются от нижней границы экрана, "Leave" прибит виджетом к левому верхнему углу - стол — один ряд до шести карт вместо двух рядов по три: экономит ~215 юнитов высоты, которых на 4:3 нет. Ряд центрируется по тем картам, что реально на столе - затемнение под окном результата рисуется непрозрачным спрайтом: тонировать и без того полупрозрачный спрайт почти ничего не даёт Инструменты: - npm run serve — отдаёт сборку и роут /_aspects: игра в трёх фиксированных iframe-ах 4:3 / 16:9 / 21:9. Движок подгоняет себя под окно, поэтому iframe — единственный простой способ увидеть вёрстку в форме, которой окно не имеет - npm run check:spreads — ловит спред неитерируемого в массив - npm run check — чистота core, спреды, сцены, типы, тесты Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -96,6 +96,17 @@ function tableBackground() {
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* A plain opaque square, used as a full-screen dimmer behind dialogs. It has to
|
||||
* be fully opaque so that tinting it decides the darkness — tinting an already
|
||||
* translucent sprite multiplies the two and barely darkens anything.
|
||||
*/
|
||||
function fill() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
||||
<rect width="8" height="8" fill="#ffffff"/>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
/** Outline of a place where a card can go. Drawn under the table slots. */
|
||||
function cardSlot() {
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="${CARD_W}" height="${CARD_H}" viewBox="0 0 ${CARD_W} ${CARD_H}">
|
||||
@@ -144,6 +155,7 @@ const DRAWINGS = {
|
||||
[`${CARDS_OUT}/card_back.png`]: cardBack(),
|
||||
[`${UI_OUT}/table_bg.png`]: tableBackground(),
|
||||
[`${UI_OUT}/card_slot.png`]: cardSlot(),
|
||||
[`${UI_OUT}/fill.png`]: fill(),
|
||||
[`${UI_OUT}/panel.png`]: nineSlice({
|
||||
fill: '#062718', fillOpacity: 0.88, stroke: '#2f7a52', strokeWidth: 4, radius: 34,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user