fix(helpers): improve device scale ratio so tiles fit in screen

Author: remarkablemark

src/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './background'
 export * from './pipes'
+export * from './scale'
 export * from './solution'

src/helpers/scale.ts

@@ -0,0 +1,22 @@
+enum Breakpoint {
+  sm = 576,
+  md = 768,
+  lg = 992,
+  xl = 1200,
+  xxl = 1400,
+}
+
+/**
+ * Gets device scale.
+ *
+ * @returns - Scale between 0 and 1.
+ */
+export function getDeviceScale() {
+  const scale = window.innerWidth / Breakpoint.xxl
+
+  if (scale > 1) {
+    return 1
+  }
+
+  return scale
+}

src/levels/index.ts

@@ -1,4 +1,5 @@
 import { TILE_SIZE } from '../constants'
+import { getDeviceScale } from '../helpers'
 import { levels } from './levels'
 import { getTiles } from './tiles'
 
@@ -10,7 +11,7 @@ import { getTiles } from './tiles'
  */
 export function getLevel(level: number) {
   const { map, scale } = levels[level]
-  const tileScale = (scale * window.innerWidth) / 1920
+  const tileScale = scale * getDeviceScale()
 
   const tileWidth = TILE_SIZE * tileScale
   const tileHeight = TILE_SIZE * tileScale

src/levels/levels.ts

@@ -91,6 +91,6 @@ export const levels: Level[] = [
       ' ║╚═╬═╝║ ',
       ' ╚══╩══╝ ',
     ],
-    scale: 0.8,
+    scale: 0.65,
   },
 ]

src/scenes/game.ts

@@ -1,5 +1,10 @@
 import { EmptyToFilledPipe, Scene, Sound, Tag } from '../constants'
-import { checkSolution, rotatePipe, setRandomBackgroundColor } from '../helpers'
+import {
+  checkSolution,
+  getDeviceScale,
+  rotatePipe,
+  setRandomBackgroundColor,
+} from '../helpers'
 import { getLevel, hasLevel } from '../levels'
 
 scene(Scene.game, (levelNumber: number) => {
@@ -8,7 +13,10 @@ scene(Scene.game, (levelNumber: number) => {
   }
 
   add([
-    text(String(levelNumber), { align: 'center', size: 42 }),
+    text(String(levelNumber), {
+      align: 'center',
+      size: Math.max(64 * getDeviceScale(), 42),
+    }),
     pos(center().x, 24),
     color(15, 16, 53),
   ])