feat(tiles): add an optional 3D effect to tiles

Author: ffalt

src/app/components/board/board.component.html

@@ -99,6 +99,23 @@
 			stroke: black;
 		}
 
+		g.stage.tile3d g.draw rect.shadow {
+			fill: #a89488;
+			opacity: 1;
+			stroke-width: 0;
+			stroke: none;
+		}
+
+		g.stage.tile3d g.draw rect.stone {
+			stroke: #a09085;
+		}
+
+		g.stage.tile3d g.draw rect.bevel {
+			fill: none;
+			stroke-width: 1.5;
+			stroke: rgba(255, 255, 255, 0.6);
+		}
+
 		g.hidden {
 			opacity: 0;
 		}
@@ -111,6 +128,11 @@
 			opacity: 0.7;
 		}
 
+		g.stage.tile3d.contrast g.draw rect.shadow {
+			fill: #7a6c63;
+			opacity: 1;
+		}
+
 		g.stage.dark g.draw rect.shadow {
 			opacity: 0.6;
 			stroke-width: 1;
@@ -124,6 +146,24 @@
 			stroke: #9d948c;
 		}
 
+		g.stage.dark.tile3d g.draw rect.shadow {
+			opacity: 1;
+			stroke-width: 0;
+			fill: #5a524e;
+			stroke: none;
+		}
+
+		g.stage.dark.tile3d g.draw rect.stone {
+			fill: #1a1512;
+			stroke: #6a5e58;
+		}
+
+		g.stage.dark.tile3d g.draw rect.bevel {
+			fill: none;
+			stroke-width: 1.5;
+			stroke: rgba(255, 255, 255, 0.12);
+		}
+
 		g.stage.dark g.selected g.tile rect.stone {
 			stroke: #F8EABB;
 			fill: black;
@@ -145,6 +185,11 @@
 			opacity: 0.7;
 		}
 
+		g.stage.dark.tile3d.contrast g.draw rect.shadow {
+			fill: #3e3834;
+			opacity: 1;
+		}
+
 		g.stage.dark .front {
 			display: none;
 		}
@@ -160,7 +205,7 @@
 		}
 	</style>
 	<defs app-image-set-loader [imageSet]="imageSet()" [kyodaiUrl]="kyodaiUrl()" [dark]="app.settings.dark" [prefix]="prefix"></defs>
-	<g class="stage" [attr.transform]="transformStage" [class.dark]="app.settings.dark" [class.contrast]="app.settings.contrast">
+	<g class="stage" [attr.transform]="transformStage" [class.dark]="app.settings.dark" [class.contrast]="app.settings.contrast" [class.tile3d]="app.settings.tile3d">
 		@for (draw of drawStones; track draw.source.z + ':' + draw.source.x + ':' + draw.source.y) {
 			<g class="draw"
 				 [class.selected]="draw.source.selected"
@@ -174,8 +219,14 @@
 					@if (draw.url) {
 						<title>{{ draw.url | translate }}</title>
 					}
-					<rect class="shadow" x="3" y="3" width="75" height="100" rx="10" ry="10"></rect>
-					<rect class="stone" x="0" y="0" width="75" height="100" rx="10" ry="10"></rect>
+					@if (app.settings.tile3d) {
+						<rect class="shadow" x="5" y="5" width="75" height="100" rx="10" ry="10"></rect>
+						<rect class="stone" x="0" y="0" width="75" height="100" rx="10" ry="10"></rect>
+						<rect class="bevel" x="1" y="1" width="73" height="98" rx="9" ry="9"></rect>
+					} @else {
+						<rect class="shadow" x="3" y="3" width="75" height="100" rx="10" ry="10"></rect>
+						<rect class="stone" x="0" y="0" width="75" height="100" rx="10" ry="10"></rect>
+					}
 					<use
 						[attr.xlink:href]="draw.url | prefix:urlPrefix"
 						[attr.x]="imagePos[0]"

src/app/components/settings/settings.component.html

@@ -102,6 +102,16 @@
 		<fieldset>
 			<legend id="tiles-legend">{{ 'TILES' | translate }}</legend>
 			<ul class="checks" role="group" aria-labelledby="tiles-legend">
+				<li>
+					<label class="check">
+						<input type="checkbox"
+									 [checked]="app.settings.tile3d"
+									 (change)="app.settings.tile3d = !app.settings.tile3d;app.settings.save();"
+									 aria-label="{{ 'TILES_3D' | translate }}"
+						>
+						<span>{{ 'TILES_3D' | translate }}</span>
+					</label>
+				</li>
 				<li>
 					<label class="check">
 						<input type="checkbox"

src/app/components/settings/settings.component.spec.ts

@@ -164,9 +164,9 @@ describe('SettingsComponent', () => {
 			expect(radioButtons).toHaveLength(expectedCount);
 		});
 
-		it('should render contrast and dark mode checkboxes', () => {
+		it('should render contrast, dark mode and 3D checkboxes', () => {
 			const checkboxes = fixture.debugElement.queryAll(By.css('input[type="checkbox"]'));
-			expect(checkboxes).toHaveLength(2);
+			expect(checkboxes).toHaveLength(3);
 		});
 
 		it('should render clear best times button', () => {

src/app/model/draw.spec.ts

@@ -17,7 +17,7 @@ describe('Draw', () => {
 			expect(pos.translate).toBe(`translate(${pos.x},${pos.y})`);
 
 			// Check z calculation specifically
-			expect(pos.sort).toBe(3 + CONSTS.mY * (2 + CONSTS.mX));
+			expect(pos.sort).toBe(3 + 2 + CONSTS.mY * (2 + CONSTS.mX));
 		});
 	});
 

src/app/model/draw.ts

@@ -29,7 +29,7 @@ export function calcDrawPos(z: number, x: number, y: number): DrawPos {
 		y: ((CONSTS.tileHeight + 2) * y - (z * CONSTS.levelOffset)) / 2,
 		w: (CONSTS.tileWidth + 2) + (z * CONSTS.levelOffset),
 		h: (CONSTS.tileHeight + 2) + (z * CONSTS.levelOffset),
-		sort: y + CONSTS.mY * (x + CONSTS.mX) * z,
+		sort: y + x + CONSTS.mY * (x + CONSTS.mX) * z,
 		translate: ''
 	};
 	pos.translate = `translate(${pos.x},${pos.y})`;

src/app/model/indicator.ts

@@ -19,10 +19,10 @@ export class Indicator {
 			return;
 		}
 
-		// Find the full indicator object in the array
-		const fullIndicator = this.gestureIndicators.find(
-			gi => gi.x === indicator.x && gi.y === indicator.y
-		);
+		// Find by reference first, then fall back to coordinate match
+		const fullIndicator =
+			this.gestureIndicators.find(gi => gi === indicator) ??
+			this.gestureIndicators.find(gi => gi.x === indicator.x && gi.y === indicator.y);
 
 		if (!fullIndicator) {
 			return;

src/app/model/settings.spec.ts

@@ -33,6 +33,7 @@ describe('Settings', () => {
 			expect(settings.music).toBe(false);
 			expect(settings.contrast).toBe(false);
 			expect(settings.dark).toBe(false);
+			expect(settings.tile3d).toBe(false);
 			expect(settings.background).toBe('');
 			expect(settings.theme).toBe(ThemeDefault);
 			expect(settings.stats).toEqual({
@@ -50,6 +51,7 @@ describe('Settings', () => {
 				music: true,
 				contrast: true,
 				dark: true,
+				tile3d: true,
 				background: 'test-background',
 				theme: 'test-theme',
 				tileset: 'test-tileset',
@@ -66,6 +68,7 @@ describe('Settings', () => {
 			expect(settings.music).toBe(true);
 			expect(settings.contrast).toBe(true);
 			expect(settings.dark).toBe(true);
+			expect(settings.tile3d).toBe(true);
 			expect(settings.background).toBe('test-background');
 			expect(settings.theme).toBe('test-theme');
 			expect(settings.tileset).toBe('test-tileset');
@@ -107,6 +110,7 @@ describe('Settings', () => {
 			settings.music = true;
 			settings.contrast = true;
 			settings.dark = true;
+			settings.tile3d = true;
 			settings.background = 'test-background';
 			settings.theme = 'test-theme';
 			settings.tileset = 'test-tileset';
@@ -121,6 +125,7 @@ describe('Settings', () => {
 				music: true,
 				contrast: true,
 				dark: true,
+				tile3d: true,
 				background: 'test-background',
 				pattern: undefined,
 				theme: 'test-theme',

src/app/model/settings.ts

@@ -8,6 +8,7 @@ export class Settings {
 	music = false;
 	contrast = false;
 	dark = false;
+	tile3d = false;
 	background = '';
 	pattern?: string;
 	kyodaiUrl?: string;
@@ -32,6 +33,7 @@ export class Settings {
 				this.theme = store.theme ?? ThemeDefault;
 				this.contrast = store.contrast ?? false;
 				this.dark = store.dark ?? false;
+				this.tile3d = store.tile3d ?? false;
 				this.sounds = store.sounds ?? this.sounds;
 				this.music = store.music ?? this.music;
 				this.kyodaiUrl = store.kyodaiUrl;
@@ -52,6 +54,7 @@ export class Settings {
 				music: this.music,
 				contrast: this.contrast,
 				dark: this.dark,
+				tile3d: this.tile3d,
 				background: this.background,
 				pattern: this.pattern,
 				theme: this.theme,

src/app/model/types.ts

@@ -89,5 +89,6 @@ export class SettingsStore {
 	theme: string;
 	background: string;
 	pattern?: string;
+	tile3d?: boolean;
 	tutorialCompleted?: boolean;
 }

src/assets/i18n/ar.json

@@ -139,6 +139,7 @@
 	"TILES_JOKERS_RANK": "الرموز البدلاء المقيدة بالرتبة",
 	"TILES_EXTRA": "إضافي",
 	"TILES_DARK": "مظلم",
+	"TILES_3D": "ثلاثي الأبعاد",
 	"THEME": "المظهر",
 	"THEME_SAGE": "أخضر المريمية",
 	"THEME_FOREST": "أخضر الغابة",
@@ -283,4 +284,3 @@
 	"TUTORIAL_WELCOME_BENEFIT_3": "تخطي في أي وقت والقفز إلى لعبة",
 	"TUTORIAL_WELCOME_START": "ابدأ البرنامج التعليمي"
 }
-