✨ Music modes gate screen

- Music modes screens
- Added Background image and Icon to Music mode model

assets/js/gate/musicModes.ts

@@ -0,0 +1,75 @@
+import DefaultScreen from './defaultScreen';
+
+export default class MusicModes extends DefaultScreen {
+
+	private interval: NodeJS.Timeout;
+
+	animateIn() {
+		super.animateIn();
+
+		const timer = this.content.parentElement.querySelector<HTMLDivElement>('.timer');
+		if (timer) {
+			timer.classList.add('timer-music-modes');
+		}
+
+		const wrapper = this.content.querySelector<HTMLElement>('.music-modes-wrapper');
+		if (!wrapper) {
+			return;
+		}
+
+		const height = wrapper.getBoundingClientRect().height;
+		if (height >= wrapper.scrollHeight) {
+			return;
+		}
+
+		let bottom = false;
+		this.interval = setInterval(() => {
+			this.scroll(wrapper, bottom ? 0 : wrapper.scrollHeight - height, 10000);
+			bottom = !bottom;
+		}, 15000);
+	}
+
+	animateOut() {
+		super.animateOut();
+		if (this.interval) {
+			clearInterval(this.interval);
+		}
+
+		const timer = this.content.parentElement.querySelector<HTMLDivElement>('.timer');
+		if (timer) {
+			timer.classList.remove('timer-music-modes');
+		}
+	}
+
+	showTimer(): boolean {
+		return true;
+	}
+
+	private scroll(wrapper: HTMLElement, scrollTo: number, duration: number, callback: null | (() => void) = null) {
+		let start: number, previousTimeStamp: number;
+
+		const startScroll = wrapper.scrollTop;
+		const scrollBy = scrollTo - startScroll;
+
+		function scroll(timeStamp: number) {
+			if (start === undefined) {
+				start = timeStamp;
+			}
+			const elapsed = timeStamp - start;
+
+			if (previousTimeStamp !== timeStamp) {
+				wrapper.scrollTop = startScroll + (scrollBy * (elapsed / duration));
+			}
+
+			if (elapsed > duration) {
+				callback && callback();
+				return; // Stop animation after duration
+			}
+			previousTimeStamp = timeStamp;
+			window.requestAnimationFrame(scroll);
+		}
+
+		window.requestAnimationFrame(scroll);
+	}
+
+}

assets/scss/gate/musicModes.scss

@@ -0,0 +1,84 @@
+#gate main {
+	.timer.timer-music-modes {
+		bottom: initial;
+		left: 2rem;
+		top: calc(26% - 3rem);
+		width: calc(20% - 1.2rem);
+	}
+
+	.content.music-modes-screen {
+		grid-template-areas: 'logo logo music music music music music music music .'
+			                   '. . music music music music music music music .'
+			                   '. . music music music music music music music .'
+			                   '. . music music music music music music music .';
+
+		.music-modes-wrapper {
+			display: grid;
+			grid-area: music;
+			grid-auto-rows: min-content;
+			grid-gap: 1rem;
+			grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+			height: 100%;
+			overflow-y: auto;
+			scrollbar-width: none;
+			width: 100%;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			.music-mode {
+				backdrop-filter: blur(10px);
+				background-color: rgba(255, 255, 255, 0.4);
+				border-radius: 1rem;
+				overflow: hidden;
+				padding: 1rem;
+				position: relative;
+
+				* {
+					z-index: 2;
+				}
+
+				.background {
+					filter: blur(5px) brightness(.6);
+					height: 100%;
+					left: 0;
+					object-fit: cover;
+					position: absolute;
+					top: 0;
+					width: 100%;
+					z-index: -1;
+				}
+
+				.name {
+					color: #fff;
+					font-size: 1.75rem;
+					font-weight: bold;
+				}
+
+				.icon {
+					margin-bottom: .5rem;
+
+					> * {
+						height: 2.5rem;
+						width: auto;
+					}
+
+					svg {
+						path {
+							fill: #fff;
+						}
+					}
+
+					img {
+
+					}
+				}
+
+				.children {
+					color: #fff;
+				}
+			}
+		}
+	}
+}

config/migrations.neon

@@ -57,6 +57,8 @@ tables:
     			`name` varchar(80) NOT NULL,
     			`group` VARCHAR(80)  CHARACTER SET utf8mb4  COLLATE utf8mb4_general_ci DEFAULT NULL,
     			`file_name` varchar(100) NOT NULL DEFAULT '',
+  				`background_image` varchar(255) DEFAULT NULL,
+  				`icon` varchar(255) DEFAULT NULL,
     			`order` int(10) unsigned NOT NULL DEFAULT 0,
     			`preview_start` int(10) unsigned NOT NULL DEFAULT 0,
     			`public` tinyint(1) NOT NULL DEFAULT 1,
@@ -73,6 +75,9 @@ tables:
 			0.3:
 				- 'ADD `group` VARCHAR(80)  CHARACTER SET utf8mb4  COLLATE utf8mb4_general_ci DEFAULT NULL AFTER `name`;'
 				- 'ADD INDEX `group` (`group`);'
+			0.4:
+				- 'ADD `background_image` VARCHAR(255) DEFAULT NULL;'
+				- 'ADD `icon` VARCHAR(255) DEFAULT NULL;'
 	App\GameModels\Game\GameModes\AbstractMode:
 		definition: '''
 		(

config/services-common.neon

@@ -108,6 +108,7 @@ services:
 	gate.screens.timer: App\Gate\Screens\TimerScreen
 	gate.screens.image: App\Gate\Screens\ImageScreen
 	gate.screens.youtube: App\Gate\Screens\YoutubeScreen
+	gate.screens.music: App\Gate\Screens\MusicModesScreen
 
 	gate.screens.idle.stats: App\Gate\Screens\DayStats\GeneralStatsScreen
 	gate.screens.idle.highlights: App\Gate\Screens\DayStats\HighlightsScreen