feat(client): allow to zoom in and out star map

client/app/components/star-map-location.ts

@@ -21,7 +21,7 @@ export default class StarMapLocationComponent extends Component<ComponentSignatu
   get shouldBeDisplayed(): boolean {
     return (
       this.primaryBodyPosition === null ||
-      this.orbitRadius > (this.args.scale / 10) * 5
+      this.orbitRadius > (this.args.scale / 10) * 3
     );
   }
 

client/app/components/star-map.hbs

@@ -22,5 +22,10 @@
       <StarMapShip @scale={{this.scale}} @ship={{@ship}} />
     {{/if}}
   </svg>
+
+  <div class="StarMap__scale-controls">
+    <button class="btn btn-sm btn-light" aria-label="Zoom in" type="button" {{on "click" this.zoomIn}}>+</button>
+    <button class="btn btn-sm btn-light" aria-label="Zoom out" type="button" {{on "click" this.zoomOut}}>-</button>
+  </div>
   <div class="StarMap__scale" aria-label="Scale">{{this.scale}} S.U.</div>
 </div>

client/app/components/star-map.ts

@@ -1,6 +1,8 @@
 // noinspection JSUnusedGlobalSymbols
 
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 import type Location from 'sokown-client/models/location';
 import type ShipModel from 'sokown-client/models/ship';
@@ -15,8 +17,10 @@ interface ComponentSignature {
 }
 
 export default class StarMapComponent extends Component<ComponentSignature> {
+  @tracked private _scale: number | null = null;
+
   public get scale(): number {
-    return this.args.scale || 300;
+    return this._scale || this.args.scale || 300;
   }
 
   private get mapSize(): number {
@@ -48,4 +52,16 @@ export default class StarMapComponent extends Component<ComponentSignature> {
   public get fontSize(): number {
     return this.scale / 5;
   }
+
+  @action
+  public zoomIn(): void {
+    const newScale = this.scale / 2;
+    this._scale = newScale >= 1 ? newScale : 1;
+  }
+
+  @action
+  public zoomOut(): void {
+    const newScale = this.scale * 2;
+    this._scale = newScale <= 1024 ? newScale : 1024;
+  }
 }

client/app/styles/app.css

@@ -68,9 +68,20 @@ dl dt {
 
 .StarMap__scale {
   border-bottom: 5px solid white;
-  bottom: 2%;
+  bottom: 10px;
   position: absolute;
-  right: 2%;
+  right: 10px;
   text-align: center;
-  width: 10%;
+  width: 100px;
+}
+
+.StarMap__scale-controls {
+  bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  position: absolute;
+  right: 44px;
+  width: 32px;
 }

client/tests/integration/components/star-map-test.ts

@@ -1,7 +1,9 @@
 import { module, test } from 'qunit';
-import { setupRenderingTest } from 'sokown-client/tests/helpers';
 import { render } from '@1024pix/ember-testing-library';
 import { hbs } from 'ember-cli-htmlbars';
+import { click } from '@ember/test-helpers';
+
+import { setupRenderingTest } from 'sokown-client/tests/helpers';
 
 module('Integration | Component | star-map', function (hooks) {
   setupRenderingTest(hooks, {});
@@ -69,4 +71,40 @@ module('Integration | Component | star-map', function (hooks) {
       assert.dom(starMap).hasAttribute('viewBox', '-160 -160 320 320');
     });
   });
+
+  module('when zooming in', function () {
+    test('it reduces map scale', async function (assert) {
+      // given
+      this.set('locations', []);
+      const screen = await render(
+        hbs`<StarMap @locations={{this.locations}} @scale={{32}} />`,
+      );
+
+      // when
+      await click(screen.getByRole('button', { name: 'Zoom in' }));
+
+      // then
+      const starMap = screen.getByLabelText('A star map of the solar system');
+      assert.dom(starMap).hasAttribute('viewBox', '-80 -80 160 160');
+      assert.dom(screen.getByLabelText('Scale')).hasText('16 S.U.');
+    });
+  });
+
+  module('when zooming out', function () {
+    test('it increases map scale', async function (assert) {
+      // given
+      this.set('locations', []);
+      const screen = await render(
+        hbs`<StarMap @locations={{this.locations}} @scale={{32}} />`,
+      );
+
+      // when
+      await click(screen.getByRole('button', { name: 'Zoom out' }));
+
+      // then
+      const starMap = screen.getByLabelText('A star map of the solar system');
+      assert.dom(starMap).hasAttribute('viewBox', '-320 -320 640 640');
+      assert.dom(screen.getByLabelText('Scale')).hasText('64 S.U.');
+    });
+  });
 });