+
initialState?.heroLevels[i] ?? 0);
this.finished = false;
- this.cameras.main.setBackgroundColor(COLORS.bg);
+ this.add
+ .graphics()
+ .fillGradientStyle(0x23264a, 0x23264a, COLORS.bg, COLORS.bg, 1)
+ .fillRect(0, 0, 960, 720)
+ .setDepth(-10);
this.levelText = this.add.text(20, 15, "", { fontFamily: "sans-serif", fontSize: "20px", color: "#a3a8c6" });
this.goldText = this.add
@@ -117,11 +121,11 @@ export class ClickerScene extends Phaser.Scene {
this.definition.heroes.forEach((_, index) => {
const y = HEROES_START_Y + index * HERO_ROW_GAP;
- const bg = this.add.rectangle(480, y, 780, 26, COLORS.heroRow).setStrokeStyle(1, 0x4f46e5).setInteractive({
+ const bg = this.add.rectangle(480, y, 780, 34, COLORS.heroRow).setStrokeStyle(1, 0x4f46e5).setInteractive({
useHandCursor: true,
});
const label = this.add
- .text(480, y, "", { fontFamily: "sans-serif", fontSize: "17px", color: "#eef0fb" })
+ .text(480, y, "", { fontFamily: "sans-serif", fontSize: "20px", color: "#eef0fb" })
.setOrigin(0.5);
bg.on("pointerdown", () => this.buyHero(index));
this.heroRows.push({ bg, label });
diff --git a/src/lib/games/scenes/maze-scene.ts b/src/lib/games/scenes/maze-scene.ts
index f666438..02337f0 100644
--- a/src/lib/games/scenes/maze-scene.ts
+++ b/src/lib/games/scenes/maze-scene.ts
@@ -102,7 +102,11 @@ export class MazeScene extends Phaser.Scene {
this.finished = false;
this.desiredDir = null;
this.currentDir = null;
- this.cameras.main.setBackgroundColor(COLORS.bg);
+ this.add
+ .graphics()
+ .fillGradientStyle(0x14162a, 0x14162a, COLORS.bg, COLORS.bg, 1)
+ .fillRect(0, 0, 960, 720)
+ .setDepth(-10);
const initialState = this.registry.get("initialState") as MazeProgress | undefined;
this.collectedKeys = new Set(initialState?.collectedKeys ?? []);
@@ -112,7 +116,7 @@ export class MazeScene extends Phaser.Scene {
this.grid = this.definition.grid;
this.rows = this.grid.length;
this.cols = this.grid[0].length;
- this.cellSize = Math.max(10, Math.min(34, Math.floor(900 / this.cols), Math.floor(420 / this.rows)));
+ this.cellSize = Math.max(10, Math.min(40, Math.floor(900 / this.cols), Math.floor(550 / this.rows)));
this.offsetX = 480 - (this.cols * this.cellSize) / 2;
this.offsetY = 130;
diff --git a/src/lib/games/scenes/quiz-scene.ts b/src/lib/games/scenes/quiz-scene.ts
index be7a48f..194def7 100644
--- a/src/lib/games/scenes/quiz-scene.ts
+++ b/src/lib/games/scenes/quiz-scene.ts
@@ -84,7 +84,11 @@ export class QuizScene extends Phaser.Scene {
this.usedQuestionKeys = new Set();
this.finished = false;
- this.cameras.main.setBackgroundColor(COLORS.bg);
+ this.add
+ .graphics()
+ .fillGradientStyle(0x23264a, 0x23264a, COLORS.bg, COLORS.bg, 1)
+ .fillRect(0, 0, 960, 720)
+ .setDepth(-10);
this.levelText = this.add.text(30, 18, "", { fontFamily: "sans-serif", fontSize: "22px", color: "#a3a8c6" });
this.prizeText = this.add
@@ -113,16 +117,16 @@ export class QuizScene extends Phaser.Scene {
this.walkAwayButton.on("pointerdown", () => this.walkAway());
const lifelineDefs: { kind: LifelineKind; x: number; label: string }[] = [
- { kind: "fiftyFifty", x: 330, label: "50:50" },
+ { kind: "fiftyFifty", x: 300, label: "50:50" },
{ kind: "audience", x: 480, label: "Зал" },
- { kind: "phone", x: 630, label: "Звонок" },
+ { kind: "phone", x: 660, label: "Звонок" },
];
lifelineDefs.forEach(({ kind, x, label }) => {
const bg = this.add
- .rectangle(x, 425, 130, 36, COLORS.lifeline)
+ .rectangle(x, 520, 150, 46, COLORS.lifeline)
.setStrokeStyle(1, 0x4f46e5)
.setInteractive({ useHandCursor: true });
- this.add.text(x, 425, label, { fontFamily: "sans-serif", fontSize: "19px", color: "#eef0fb" }).setOrigin(0.5);
+ this.add.text(x, 520, label, { fontFamily: "sans-serif", fontSize: "21px", color: "#eef0fb" }).setOrigin(0.5);
bg.on("pointerdown", () => this.useLifeline(kind));
this.lifelineButtons.set(kind, bg);
});
@@ -170,20 +174,20 @@ export class QuizScene extends Phaser.Scene {
private renderOptions() {
this.clearOptions();
- const startY = 175;
- const gap = 58;
+ const startY = 200;
+ const gap = 76;
this.shuffledOptions.forEach((option, i) => {
const y = startY + i * gap;
const hidden = this.hiddenIndices.has(i);
- const bg = this.add.rectangle(480, y, 780, 48, hidden ? COLORS.optionHidden : COLORS.option).setStrokeStyle(
+ const bg = this.add.rectangle(480, y, 780, 64, hidden ? COLORS.optionHidden : COLORS.option).setStrokeStyle(
1,
hidden ? 0x292d4a : 0x4f46e5,
);
const label = this.add
.text(140, y, hidden ? "" : `${OPTION_LETTERS[i]}: ${option}`, {
fontFamily: "sans-serif",
- fontSize: "22px",
+ fontSize: "24px",
color: "#eef0fb",
})
.setOrigin(0, 0.5);
@@ -283,10 +287,10 @@ export class QuizScene extends Phaser.Scene {
private showAudienceOverlay(shares: Map) {
this.clearOverlay();
- const bg = this.add.rectangle(480, 505, 780, 70, COLORS.overlayBg).setStrokeStyle(1, 0x292d4a);
+ const bg = this.add.rectangle(480, 615, 780, 90, COLORS.overlayBg).setStrokeStyle(1, 0x292d4a);
this.overlayObjects.push(bg);
const title = this.add
- .text(480, 478, "Помощь зала", { fontFamily: "sans-serif", fontSize: "17px", color: "#a3a8c6" })
+ .text(480, 585, "Помощь зала", { fontFamily: "sans-serif", fontSize: "17px", color: "#a3a8c6" })
.setOrigin(0.5);
this.overlayObjects.push(title);
@@ -296,7 +300,7 @@ export class QuizScene extends Phaser.Scene {
entries.forEach(([optIndex, pct], i) => {
const x = 480 - barAreaWidth / 2 + i * (barAreaWidth / entries.length) + barWidth / 2 + 8;
const label = this.add
- .text(x, 495, `${OPTION_LETTERS[optIndex]}: ${Math.round(pct * 100)}%`, {
+ .text(x, 605, `${OPTION_LETTERS[optIndex]}: ${Math.round(pct * 100)}%`, {
fontFamily: "sans-serif",
fontSize: "18px",
color: "#eef0fb",
@@ -304,7 +308,7 @@ export class QuizScene extends Phaser.Scene {
.setOrigin(0.5);
this.overlayObjects.push(label);
const bar = this.add
- .rectangle(x, 522, Math.max(6, barWidth * pct), 10, 0x818cf8)
+ .rectangle(x, 635, Math.max(6, barWidth * pct), 10, 0x818cf8)
.setOrigin(0.5);
this.overlayObjects.push(bar);
});
@@ -312,10 +316,10 @@ export class QuizScene extends Phaser.Scene {
private showPhoneOverlay(suggestedIndex: number) {
this.clearOverlay();
- const bg = this.add.rectangle(480, 500, 780, 60, COLORS.overlayBg).setStrokeStyle(1, 0x292d4a);
+ const bg = this.add.rectangle(480, 615, 780, 70, COLORS.overlayBg).setStrokeStyle(1, 0x292d4a);
this.overlayObjects.push(bg);
const text = this.add
- .text(480, 500, `Друг на телефоне: «Я почти уверен, это ${OPTION_LETTERS[suggestedIndex]}»`, {
+ .text(480, 615, `Друг на телефоне: «Я почти уверен, это ${OPTION_LETTERS[suggestedIndex]}»`, {
fontFamily: "sans-serif",
fontSize: "19px",
color: "#eef0fb",
diff --git a/src/lib/games/scenes/snake-scene.ts b/src/lib/games/scenes/snake-scene.ts
index ecfd1b0..ffee537 100644
--- a/src/lib/games/scenes/snake-scene.ts
+++ b/src/lib/games/scenes/snake-scene.ts
@@ -54,11 +54,15 @@ export class SnakeScene extends Phaser.Scene {
this.onProgress = this.registry.get("onProgress");
this.finished = false;
- this.cameras.main.setBackgroundColor(COLORS.bg);
+ this.add
+ .graphics()
+ .fillGradientStyle(0x14162a, 0x14162a, COLORS.bg, COLORS.bg, 1)
+ .fillRect(0, 0, 960, 720)
+ .setDepth(-10);
this.width = this.definition.width;
this.height = this.definition.height;
- this.cellSize = Math.max(8, Math.min(30, Math.floor(920 / this.width), Math.floor(460 / this.height)));
+ this.cellSize = Math.max(8, Math.min(36, Math.floor(920 / this.width), Math.floor(580 / this.height)));
this.offsetX = 480 - (this.width * this.cellSize) / 2;
this.offsetY = 110;