Merge pull request #3 from tari-project/update/dm_sound_changes

Update: DM + block sound updates

dist/index.d.ts

@@ -10,6 +10,8 @@ declare enum AnimationStatus {
 
 export declare let animationStatus: AnimationStatus;
 
+export declare function initAudio(notificationSoundCB: () => void, blockWinSoundCB: (tier: number) => void): void;
+
 export declare function loadTowerAnimation({ canvasId, offset }: {
     canvasId: string;
     offset?: number;

lib/main.ts

@@ -5,14 +5,26 @@ import { stateManager, status as animationStatus } from './scripts/logic/stateMa
 export function setAnimationState(id: string, isReplay?: boolean) {
 	stateManager.set(id, isReplay);
 }
+
+function initAudio(notificationSoundCB: () => void, blockWinSoundCB: (tier: number) => void) {
+	stateManager.initAudio(notificationSoundCB, blockWinSoundCB);
+}
 interface Property {
 	property: string;
 	value: unknown;
 }
 export function setAnimationProperties(newProps: Property[]) {
 	for (const item of newProps) {
 		properties[item.property] = item.value;
+
+		if (item.property === 'bgColor1' && properties.sharedUniforms) {
+			properties.sharedUniforms.u_bgColor1.value.set(item.value).convertSRGBToLinear();
+		}
+
+		if (item.property === 'bgColor2' && properties.sharedUniforms) {
+			properties.sharedUniforms.u_bgColor2.value.set(item.value).convertSRGBToLinear();
+		}
 	}
 }
 
-export { loadTowerAnimation, removeTowerAnimation, animationStatus };
+export { loadTowerAnimation, removeTowerAnimation, animationStatus, initAudio };

lib/scripts/core/properties.ts

@@ -6,14 +6,7 @@ import { PropertiesType } from '../../types/properties';
 
 const resolution = new THREE.Vector2();
 const viewportResolution = new THREE.Vector2();
-const sharedUniforms: PropertiesType['sharedUniforms'] = {
-	u_time: { value: 0 },
-	u_deltaTime: { value: 1 },
-	u_resolution: { value: resolution },
-	u_viewportResolution: { value: viewportResolution },
-	u_bgColor1: { value: new THREE.Color() },
-	u_bgColor2: { value: new THREE.Color() },
-};
+
 const maxFreeBlocksCount = TOTAL_TILES - 5;
 
 const baseStyleProperties = {
@@ -45,11 +38,18 @@ export const propertiesInitialState: PropertiesType = {
 	viewportResolution,
 	canvas: null,
 	orbitTarget: null,
-	sharedUniforms,
+	sharedUniforms: {
+		u_time: { value: 0 },
+		u_deltaTime: { value: 1 },
+		u_resolution: { value: resolution },
+		u_viewportResolution: { value: viewportResolution },
+		u_bgColor1: { value: new THREE.Color() },
+		u_bgColor2: { value: new THREE.Color() },
+	},
 	isPaused: false,
 	showVisual: settings.SHOW_BLOCK,
 	loadList: [],
-	animationSpeed: 1.1,
+	animationSpeed: 1,
 	activeBlocksCount: 0,
 	maxFreeBlocksCount,
 	lightPositionX: -2,

lib/scripts/logic/stateManager.ts

@@ -1,3 +1,5 @@
+let successNotificationTimeout: NodeJS.Timeout | undefined;
+let notificationSoundTimeout: NodeJS.Timeout | undefined;
 import { properties } from '../core/properties';
 import settings from '../core/settings';
 import { gameEndedSignal, restartSignal, stateSignal } from './signals';
@@ -30,6 +32,8 @@ const StateManager = () => {
 	const statusOrder = Object.values(AnimationStatus);
 	let statusIndex = 0;
 	let removeCanvas = false;
+	let notificationSoundCB: (() => void) | undefined = undefined;
+	let blockWinSoundCB: ((tier: number) => void) | undefined = undefined;
 
 	const statusUpdateQueue: StatusManagerState['statusUpdateQueue'] = [];
 	function updateAfterCycle() {
@@ -127,7 +131,40 @@ const StateManager = () => {
 	}
 
 	function _queueStatusUpdate({ status, result = null, animationStyle = null }: QueueArgs) {
-		statusUpdateQueue.push(() => (result ? _updateStatusAndResult({ status, result, animationStyle }) : _canUpdateStatus(status)));
+		const shouldDelay = result && result === AnimationResult.COMPLETED;
+
+		if (!shouldDelay) {
+			statusUpdateQueue.push(() => (result ? _updateStatusAndResult({ status, result, animationStyle }) : _canUpdateStatus(status)));
+		} else {
+			const notificationSoundDelay = 2; // seconds
+			const soundDelayDiffs = {
+				[SuccessLevel.ONE]: 0,
+				[SuccessLevel.TWO]: 4,
+				[SuccessLevel.THREE]: 3,
+			};
+
+			const delay = (notificationSoundDelay + soundDelayDiffs[animationStyle ?? 0]) * 1000;
+			if (successNotificationTimeout) {
+				clearTimeout(successNotificationTimeout);
+			}
+
+			if (notificationSoundTimeout) {
+				clearTimeout(notificationSoundTimeout);
+			}
+
+			notificationSoundTimeout = setTimeout(() => playBlockWinSound(animationStyle), notificationSoundDelay * 1000);
+			successNotificationTimeout = setTimeout(() => {
+				statusUpdateQueue.push(() => (result ? _updateStatusAndResult({ status, result, animationStyle }) : _canUpdateStatus(status)));
+			}, delay);
+		}
+	}
+
+	function playNotificationSound() {
+		notificationSoundCB?.();
+	}
+
+	function playBlockWinSound(tier) {
+		blockWinSoundCB?.(tier);
 	}
 
 	function reset() {
@@ -158,16 +195,19 @@ const StateManager = () => {
 
 	function setComplete(isReplay = false) {
 		const result = isReplay && hasNotStarted ? AnimationResult.REPLAY : AnimationResult.COMPLETED;
+		if (!isReplay) playNotificationSound();
 		_queueStatusUpdate({ status: AnimationStatus.RESULT, result, animationStyle: SuccessLevel.ONE });
 	}
 
 	function setComplete2(isReplay = false) {
 		const result = isReplay && hasNotStarted ? AnimationResult.REPLAY : AnimationResult.COMPLETED;
+		if (!isReplay) playNotificationSound();
 		_queueStatusUpdate({ status: AnimationStatus.RESULT, result, animationStyle: SuccessLevel.TWO });
 	}
 
 	function setComplete3(isReplay = false) {
 		const result = isReplay && hasNotStarted ? AnimationResult.REPLAY : AnimationResult.COMPLETED;
+		if (!isReplay) playNotificationSound();
 		_queueStatusUpdate({ status: AnimationStatus.RESULT, result, animationStyle: SuccessLevel.THREE });
 	}
 
@@ -205,8 +245,14 @@ const StateManager = () => {
 			setStart();
 		}
 	}
+
+	function initAudio(_notificationSoundCB: () => void, _blockWinSoundCB: (tier: number) => void) {
+		notificationSoundCB = _notificationSoundCB;
+		blockWinSoundCB = _blockWinSoundCB;
+	}
 	return {
 		init,
+		initAudio,
 		updateAfterCycle,
 		set,
 		showVisual,

lib/scripts/tower.ts

@@ -45,7 +45,6 @@ const TariTower = () => {
 				bgColor1.set(properties.bgColor1).convertSRGBToLinear();
 				bgColor2.set(properties.bgColor2).convertSRGBToLinear();
 			}
-
 			renderer.setClearColor(properties.bgColor1, 1);
 		}
 	}

lib/scripts/visuals/bg/bg.ts

@@ -11,22 +11,19 @@ import particlesFrag from './particles.frag?raw';
 const container = new THREE.Object3D();
 const Background = () => {
 	const particles: Mesh & { material: ShaderMaterial } = new THREE.Mesh();
-
+	const mesh: Mesh & { material: ShaderMaterial } = new THREE.Mesh(new THREE.PlaneGeometry(2, 2));
 	function init() {
-		const material = new THREE.ShaderMaterial({
-			uniforms: Object.assign(
-				{
-					u_resolution: properties.sharedUniforms?.u_resolution,
-					u_bgColor1: properties.sharedUniforms?.u_bgColor1,
-					u_bgColor2: properties.sharedUniforms?.u_bgColor2,
-				},
-				bn_sharedUniforms,
-			),
+		const uniforms = {
+			u_resolution: properties.sharedUniforms?.u_resolution,
+			u_bgColor1: properties.sharedUniforms?.u_bgColor1,
+			u_bgColor2: properties.sharedUniforms?.u_bgColor2,
+			...bn_sharedUniforms,
+		} as unknown as ShaderMaterial['uniforms'];
+		mesh.material = new THREE.ShaderMaterial({
+			uniforms,
 			vertexShader: vert,
-
 			fragmentShader: frag,
 		});
-		const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
 		mesh.renderOrder = 1;
 		container.add(mesh);
 		initParticles();

lib/scripts/visuals/hero/hero.ts

@@ -282,7 +282,7 @@ const Hero = () => {
 		MAIN_COLOR.set(properties.mainColor);
 		SUCCESS_COLOR.set(properties.successColor);
 		ERROR_COLOR.set(properties.failColor);
-		DEFAULT_COLOR.set(properties.neutralColor);
+		DEFAULT_COLOR.set(properties.neutralColor).convertSRGBToLinear();
 
 		_c.copy(MAIN_COLOR);
 
@@ -331,7 +331,7 @@ const Hero = () => {
 			heroState._baseMesh.material.uniforms.u_blocksColor.value.copy(_c);
 			heroState._baseMesh.material.uniforms.u_successColor.value.copy(SUCCESS_COLOR);
 
-			heroState._baseMesh.material.uniforms.u_prevSuccessColor.value.set(DEFAULT_COLOR);
+			heroState._baseMesh.material.uniforms.u_prevSuccessColor.value.set(DEFAULT_COLOR).convertSRGBToLinear();
 
 			heroState._baseMesh.material.uniforms.u_prevSuccessColor.value.lerp(_c.set(properties.successColor), previousSuccessBlocksAnimationRatio);
 			heroState._baseMesh.material.uniforms.u_prevSuccessColor.value.convertSRGBToLinear();

lib/types/properties.ts

@@ -24,6 +24,7 @@ export interface PropertiesType {
 	sharedUniforms: SharedUniforms;
 	loadList?: unknown;
 	animationSpeed: number;
+	bgColor?: ColorRepresentation;
 	bgColor1: ColorRepresentation;
 	bgColor2: ColorRepresentation;
 	neutralColor: ColorRepresentation;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tari-project/tari-tower",
-	"version": "0.0.15",
+	"version": "0.0.16",
 	"private": false,
 	"description": "the tower animation used in Tari Universe",
 	"homepage": "https://github.com/tari-project/tari-tower#readme",

src/index.ts

@@ -1,6 +1,7 @@
 import GUI from 'lil-gui';
 
-import { loadTowerAnimation, removeTowerAnimation, setAnimationState } from '@tari-project/tari-tower';
+import { loadTowerAnimation, removeTowerAnimation, setAnimationProperties, setAnimationState } from '@tari-project/tari-tower';
+
 // import { loadTowerAnimation, removeTowerAnimation, setAnimationState } from '../lib';
 
 if (import.meta.env.MODE === 'development') {
@@ -17,6 +18,14 @@ if (import.meta.env.MODE === 'development') {
 		success2: () => setAnimationState('success2'),
 		success3: () => setAnimationState('success3', true),
 		fail: () => setAnimationState('fail'),
+		darkMode: () => {
+			setAnimationProperties(animationDarkBg);
+			document.getElementById('root')!.style.backgroundColor = '#000';
+		},
+		lightMode: () => {
+			setAnimationProperties(animationLightBg);
+			document.getElementById('root')!.style.backgroundColor = '#fff';
+		},
 	};
 
 	gui.add(actions, 'showVisual');
@@ -27,16 +36,43 @@ if (import.meta.env.MODE === 'development') {
 	gui.add(actions, 'success3');
 	gui.add(actions, 'fail');
 	gui.add(actions, 'removeCanvas');
+	gui.add(actions, 'darkMode');
+	gui.add(actions, 'lightMode');
 	gui.add(actions, 'initCanvas');
 
-	// function handleLoad() {
-	// 	loadTowerAnimation({ canvasId: 'canvas-id', offset: 0 });
-	// }
-	//
-	// document.addEventListener('DOMContentLoaded', handleLoad);
-	//
-	// const timeOutId = setTimeout(() => {
-	// 	document.removeEventListener('DOMContentLoaded', handleLoad);
-	// 	clearTimeout(timeOutId);
-	// }, 500);
+	function handleLoad() {
+		loadTowerAnimation({ canvasId: 'canvas-id', offset: 0 });
+	}
+
+	document.addEventListener('DOMContentLoaded', handleLoad);
+
+	const timeOutId = setTimeout(() => {
+		document.removeEventListener('DOMContentLoaded', handleLoad);
+		clearTimeout(timeOutId);
+	}, 500);
+
+	const animationLightBg = [
+		{ property: 'bgColor1', value: '#ffffff' },
+		{ property: 'bgColor2', value: '#d0d0d0' },
+		{ property: 'neutralColor', value: '#ffffff' },
+		{ property: 'mainColor', value: '#0096ff' },
+		{ property: 'successColor', value: '#00c881' },
+		{ property: 'failColor', value: '#ca0101' },
+		{ property: 'particlesColor', value: '#505050' },
+		{ property: 'goboIntensity', value: 0.45 },
+		{ property: 'particlesOpacity', value: 0.75 },
+		{ property: 'particlesSize', value: 0.01 },
+	];
+	const animationDarkBg = [
+		{ property: 'bgColor1', value: '#212121' },
+		{ property: 'bgColor2', value: '#212121' },
+		{ property: 'neutralColor', value: '#040723' },
+		{ property: 'successColor', value: '#c9eb00' },
+		{ property: 'mainColor', value: '#813bf5' },
+		{ property: 'failColor', value: '#ff5610' },
+		{ property: 'particlesColor', value: '#813bf5' },
+		{ property: 'goboIntensity', value: 0.75 },
+		{ property: 'particlesOpacity', value: 0.95 },
+		{ property: 'particlesSize', value: 0.015 },
+	];
 }

tsconfig.app.json

@@ -21,7 +21,7 @@
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitAny": false,
 		"baseUrl": ".",
-		"types": ["vite/client"]
+		"types": ["vite/client", "node"]
 	},
 	"include": ["src"],
 	"references": [{ "path": "./tsconfig.node.json" }]