From 45b0aef67d5994bea35c1cbb7b4f3b5f2adf0e3e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Tue, 24 Mar 2026 20:43:53 +0100
Subject: [PATCH] feat: Add background animation to FPV

---
 source/style/modules/_game.scss | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index d9a36f1..1c24812 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,7 +1,34 @@
+@use 'sass:list';
 @use "sass:map";
 
 @use "../hippie-style/hippie";
 
+$colors: hippie.$color_palette;
+$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
+
+@function getColor($index, $colors) {
+	$color_keys: map.keys($colors);
+	$key_count: list.length($color_keys);
+	$cycled_index: ($index % $key_count) + 1;
+	$key: list.nth($color_keys, $cycled_index);
+	@return map.get($colors, $key);
+}
+
+@mixin fadeColors($steps, $colors) {
+	@keyframes fadeColor {
+		@for $i from 1 through list.length($steps) {
+			$percent: list.nth($steps, $i);
+			$color: getColor($i - 1, $colors);
+
+			#{$percent}% {
+				background-color: $color;
+			}
+		}
+	}
+
+	animation: fadeColor 16s infinite linear;
+}
+
 .body_game {
 	@extend .h_full_view;
 	background-color: hotpink;
@@ -32,9 +59,10 @@
 	@extend .h_full_view;
 
 	canvas {
+		@include fadeColors($steps, $colors);
+
 		display: block;
 		cursor: none;
-		background-color: lightblue;
 	}
 
 	.controls {