feat(levels): set background color

Author: remarkablemark

index.html

@@ -48,7 +48,9 @@
     <noscript>You need to enable JavaScript to play this game.</noscript>
     <script type="module">
       import kaboom from 'kaboom'
-      kaboom()
+      kaboom({
+        background: [255, 255, 255],
+      })
     </script>
     <script type="module" src="src/index.ts"></script>
 

src/levels/index.ts

@@ -41,3 +41,13 @@ export function getLevel(level: number) {
 export function hasLevel(level: number): boolean {
   return Boolean(levels[level])
 }
+
+/**
+ * Gets level background color.
+ *
+ * @param level - Level number.
+ * @returns - RGB color.
+ */
+export function getLevelBackground(level: number) {
+  return levels[level].background
+}

src/levels/levels.ts

@@ -1,10 +1,15 @@
-// https://wikipedia.org/wiki/Box-drawing_characters
-// ▲ ▼ ► ◄ ↑ ↓ → ← ⇦ ⇧ ⇨ ⇩
-// △ ▷ ▽ ◁ ⬤ ◉ ◎
-// ┓ ┗ ┏ ┛ ┣ ┫ ┳ ┻ ╋ ━ ┃
-// ╔ ╗ ╚ ╝ ╠ ╣ ╦ ╩ ╬ ═ ║
+// △ ▷ ▽ ◁
+// ━ ┃ ┏ ┓ ┗ ┛ ┣ ┫ ┳ ┻ ╋
+// ═ ║ ╔ ╗ ╚ ╝ ╠ ╣ ╦ ╩ ╬
+// https://colorhunt.co/palettes/sea
 
-export const levels = [
+interface Level {
+  map: string[]
+  scale: number
+  background: [number, number, number]
+}
+
+export const levels: Level[] = [
   // 0
   {
     // prettier-ignore
@@ -14,6 +19,7 @@ export const levels = [
       '  ╚═◁',
     ],
     scale: 1,
+    background: [238, 247, 255],
   },
 
   // 1
@@ -25,6 +31,7 @@ export const levels = [
       '▷═╩═╝',
     ],
     scale: 1,
+    background: [205, 232, 229],
   },
 
   // 2
@@ -38,5 +45,6 @@ export const levels = [
       ' ╚══╩══╝ ',
     ],
     scale: 0.8,
+    background: [224, 251, 226],
   },
 ]

src/scenes/game.ts

@@ -1,12 +1,13 @@
 import { EmptyToFilledPipe, Scene, Sound, Tag } from '../constants'
 import { checkSolution, rotatePipe } from '../helpers'
-import { getLevel, hasLevel } from '../levels'
+import { getLevel, getLevelBackground, hasLevel } from '../levels'
 
 scene(Scene.game, (levelNumber: number) => {
   if (!hasLevel(levelNumber)) {
     levelNumber = 0
   }
 
+  setBackground(...getLevelBackground(levelNumber))
   const level = addLevel(...getLevel(levelNumber))
 
   level.get(Tag.pipe).forEach((pipe) => {