Use strong typing for localStorage sava data

src/scripts/constants.ts

@@ -1,2 +1,3 @@
 export const GAME_SIZE = 20;
 export const DOUBLE_TAP_PAUSE_TIME_LIMIT = 200;
+export const SAVE_DATA_STORAGE_KEY = 'snake';

src/scripts/entities/apple.ts

@@ -3,13 +3,14 @@ import { Point } from '../primitives/point.ts';
 import { Rectangle } from '../primitives/rectangle.ts';
 import * as constants from '../constants.ts';
 import { Game } from '../game.ts';
+import { PointData } from '../interfaces/point-data.ts';
 
 export class Apple implements Drawable {
     public position: Point;
     private readonly game: Game;
     private readonly body: Rectangle[];
 
-    constructor(game: Game, position?: Point) {
+    constructor(game: Game, position?: PointData) {
         this.game = game;
         this.position = position ? Point.fromJSON(position) : new Point(14, 9);
         this.body = [

src/scripts/entities/snake.ts

@@ -6,6 +6,7 @@ import { Point } from '../primitives/point.ts';
 import { Difficulty } from '../enums/difficulty.ts';
 import { GameState } from '../enums/game-state.ts';
 import { Game } from '../game.ts';
+import { PointData } from '../interfaces/point-data.ts';
 
 export class Snake implements Drawable {
     public readonly body: SnakeBodyPart[];
@@ -15,7 +16,7 @@ export class Snake implements Drawable {
     private newVelocityQueue: Point[];
     private dying = false;
 
-    constructor(game: Game, bodyPoints?: { x: number, y: number }[]) {
+    constructor(game: Game, bodyPoints?: PointData[]) {
         this.game = game;
 
         this.nextUpdateTime = 0;

src/scripts/game.ts

@@ -11,6 +11,8 @@ import { StartMenu } from './menus/start-menu.ts';
 import { PauseMenu } from './menus/pause-menu.ts';
 import { GameOverMenu } from './menus/game-over-menu.ts';
 import { DefaultDifficulty, Difficulty } from './enums/difficulty.ts';
+import { SaveData } from './interfaces/save-data.ts';
+import { SAVE_DATA_STORAGE_KEY } from './constants.ts';
 
 export class Game implements Drawable {
     public readonly canvas: HTMLCanvasElement;
@@ -58,7 +60,7 @@ export class Game implements Drawable {
             return;
         }
 
-        const data = JSON.stringify({
+        const saveData: SaveData = {
             score: this.score,
             difficulty: this.difficulty,
             apple: {
@@ -67,21 +69,21 @@ export class Game implements Drawable {
             snake: {
                 body: this.snake.body.map(x => x.position)
             }
-        });
+        };
 
-        this.storage.setItem('snake', data);
+        this.storage.setItem(SAVE_DATA_STORAGE_KEY, JSON.stringify(saveData));
     }
 
     removeSave() {
-        this.storage?.removeItem('snake');
+        this.storage?.removeItem(SAVE_DATA_STORAGE_KEY);
     }
 
     load() {
         if (!this.storage) {
             return false;
         }
 
-        const data = this.storage.getItem('snake');
+        const data = this.storage.getItem(SAVE_DATA_STORAGE_KEY);
 
         if (!data) {
             return false;
@@ -92,12 +94,12 @@ export class Game implements Drawable {
         return true;
     }
 
-    reset(data?: any) {
+    reset(data?: SaveData) {
         this.score = (data?.score) || 0;
         this.difficulty = (data?.difficulty) || this.difficulty;
         this.lastTouchTime = 0;
-        this.apple = new Apple(this, data && data.apple && data.apple.position);
-        this.snake = new Snake(this, data && data.snake && data.snake.body);
+        this.apple = new Apple(this, data?.apple.position);
+        this.snake = new Snake(this, data?.snake.body);
     }
 
     onresize() {

src/scripts/interfaces/point-data.ts

@@ -0,0 +1,4 @@
+export interface PointData {
+    x: number;
+    y: number;
+}

src/scripts/interfaces/save-data.ts

@@ -0,0 +1,13 @@
+import { Difficulty } from '../enums/difficulty.ts';
+import { PointData } from './point-data.ts';
+
+export interface SaveData {
+    score: number;
+    difficulty: Difficulty;
+    apple: {
+        position: PointData;
+    };
+    snake: {
+        body: PointData[];
+    };
+}

src/scripts/primitives/point.ts

@@ -1,4 +1,5 @@
 import { getValueAsFunction } from '../utils.ts';
+import { PointData } from '../interfaces/point-data.ts';
 
 export class Point {
     private _x!: () => number;
@@ -51,14 +52,14 @@ export class Point {
         return Math.sqrt((x - this.x) ** 2 + (y - this.y) ** 2);
     }
 
-    toJSON(): { x: number, y: number } {
+    toJSON(): PointData {
         return {
             x: this.x,
             y: this.y
         };
     }
 
-    static fromJSON(obj: { x: number, y: number }): Point {
+    static fromJSON(obj: PointData): Point {
         return new Point(obj.x, obj.y);
     }
 }