Use decorator annotations for better readability

src/stores/AppStore.ts

@@ -18,13 +18,12 @@ export class AppStore {
 
     this.reset = this.reset.bind(this);
 
-    makeObservable(this, {
-      reset: action,
-    });
+    makeObservable(this);
 
     this.reset();
   }
 
+  @action
   public reset(): void {
     this._playbackStore.pause();
     this._world.randomize(this._configStore.fieldSize);

src/stores/ConfigStore.ts

@@ -6,22 +6,15 @@ export class ConfigStore {
   private _config: Config;
   private _playback: Playback;
 
-  public frameRate = 30;
-  public fieldSize = 50;
-  public rule = Rule.life;
+  @observable public accessor frameRate = 30;
+  @observable public accessor fieldSize = 50;
+  @observable public accessor rule = Rule.life;
 
   constructor(config: Config, playback: Playback) {
     this._config = config;
     this._playback = playback;
 
-    makeObservable(this, {
-      frameRate: observable,
-      fieldSize: observable,
-      rule: observable,
-      setFrameRate: action,
-      setFieldSize: action,
-      setRule: action,
-    });
+    makeObservable(this);
 
     const frameRate = localStorage.getItem("frameRate");
     if (frameRate) this.setFrameRate(parseInt(frameRate, 10));
@@ -33,6 +26,7 @@ export class ConfigStore {
     if (rule) this.setRule(rule as Rule);
   }
 
+  @action
   public setFrameRate(frameRate: number): void {
     localStorage.setItem("frameRate", frameRate.toString());
 
@@ -41,6 +35,7 @@ export class ConfigStore {
     this.frameRate = frameRate;
   }
 
+  @action
   public setFieldSize(fieldSize: number): void {
     localStorage.setItem("fieldSize", fieldSize.toString());
 
@@ -58,6 +53,7 @@ export class ConfigStore {
     });
   }
 
+  @action
   public setRule(rule: Rule): void {
     localStorage.setItem("rule", rule);
 

src/stores/DrawerStore.ts

@@ -6,34 +6,32 @@ export enum DrawerMode {
 }
 
 export class DrawerStore {
-  public drawerMode: DrawerMode | undefined = undefined;
+  @observable public accessor drawerMode: DrawerMode | undefined = undefined;
 
   constructor() {
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
     this.toggleDrawer = this.toggleDrawer.bind(this);
 
-    makeObservable(this, {
-      drawerMode: observable,
-      drawerOpen: computed,
-      openDrawer: action,
-      closeDrawer: action,
-      toggleDrawer: action,
-    });
+    makeObservable(this);
   }
 
+  @computed
   public get drawerOpen(): boolean {
     return this.drawerMode !== undefined;
   }
 
+  @action
   public openDrawer(drawerMode: DrawerMode): void {
     this.drawerMode = drawerMode;
   }
 
+  @action
   public closeDrawer(): void {
     this.drawerMode = undefined;
   }
 
+  @action
   public toggleDrawer(drawerMode: DrawerMode): void {
     if (this.drawerMode === drawerMode) {
       this.closeDrawer();

src/stores/LayoutStore.ts

@@ -10,7 +10,7 @@ export class LayoutStore {
   private _world: World;
   private _renderer: Renderer;
 
-  public zoomScale = 1;
+  @observable public accessor zoomScale = 1;
 
   constructor(canvas: HTMLCanvasElement, world: World, layout: Layout, renderer: Renderer) {
     this._canvas = canvas;
@@ -23,9 +23,7 @@ export class LayoutStore {
     this.zoomAt = this.zoomAt.bind(this);
     this.zoomToFit = this.zoomToFit.bind(this);
 
-    makeObservable(this, {
-      zoomScale: observable,
-    });
+    makeObservable(this);
 
     this.fitCanvasToWindow();
   }

src/stores/PlaybackStore.ts

@@ -4,7 +4,7 @@ import { Playback } from "../core/Playback";
 export class PlaybackStore {
   private _playback: Playback;
 
-  public playing = false;
+  @observable public accessor playing = false;
 
   constructor(playback: Playback) {
     this._playback = playback;
@@ -13,18 +13,16 @@ export class PlaybackStore {
     this.togglePlaying = this.togglePlaying.bind(this);
     this.tickLazy = this.tickLazy.bind(this);
 
-    makeObservable(this, {
-      playing: observable,
-      pause: action,
-      togglePlaying: action,
-    });
+    makeObservable(this);
   }
 
+  @action
   public pause(): void {
     this._playback.pause();
     this.playing = false;
   }
 
+  @action
   public togglePlaying(): void {
     this._playback.playing ? this._playback.pause() : this._playback.play();
     this.playing = !this.playing;