feat(client): add StarMapObject component

client/app/components/star-map-object.hbs

@@ -0,0 +1,17 @@
+<circle
+  cx={{this.objectPosition.x}}
+  cy={{this.objectPosition.y}}
+  r="1"
+  fill="green"
+  aria-label={{@label}}
+/>
+<text
+  x={{this.labelPosition.x}}
+  y={{this.labelPosition.y}}
+  font-size="2"
+  fill="white"
+  text-anchor="middle"
+  aria-hidden="true"
+>
+  {{@label}}
+</text>

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

@@ -0,0 +1,35 @@
+// noinspection JSUnusedGlobalSymbols
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import type { Position } from 'sokown-client/types';
+import type Location from 'sokown-client/models/location';
+
+interface ComponentSignature {
+  Args: {
+    location: Location;
+    position: Position;
+  };
+}
+
+export default class StarMapObjectComponent extends Component<ComponentSignature> {
+  @tracked objectPosition: Position;
+  @tracked labelPosition: Position;
+
+  constructor(owner: unknown, args: ComponentSignature['Args']) {
+    super(owner, args);
+
+    const starMapSizeInSokownUnits = 3000;
+
+    this.objectPosition = {
+      x: (args.position.x / starMapSizeInSokownUnits) * 100,
+      y: (-args.position.y / starMapSizeInSokownUnits) * 100,
+    };
+
+    this.labelPosition = {
+      x: this.objectPosition.x,
+      y: this.objectPosition.y + 3.5,
+    };
+  }
+}

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

@@ -0,0 +1,24 @@
+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';
+
+module('Integration | Component | star-map-object', function (hooks) {
+  setupRenderingTest(hooks, {});
+
+  test('it renders', async function (assert) {
+    // given
+    this.set('label', 'Twinkle');
+    this.set('position', { x: 690, y: 480 });
+
+    const screen = await render(
+      hbs`<StarMapObject @label={{this.label}} @position={{this.position}} />`,
+    );
+
+    assert.dom('text').hasText('Twinkle');
+    assert.dom('text').hasAttribute('x', '23');
+    assert.dom('text').hasAttribute('Y', '-12.5');
+    assert.dom(screen.getByLabelText('Twinkle')).hasAttribute('cx', '23');
+    assert.dom(screen.getByLabelText('Twinkle')).hasAttribute('cy', '-16');
+  });
+});

client/types/ember-testing-library.d.ts

@@ -1,8 +1,9 @@
 declare module '@1024pix/ember-testing-library' {
+  import type { TemplateFactory } from 'ember-cli-htmlbars';
   export * from '@testing-library/dom/types';
 
   import { BoundFunctions } from '@testing-library/dom/types';
 
   export function visit(url: string): Promise<BoundFunctions>;
-  export function render(template: string): Promise<BoundFunctions>;
+  export function render(template: TemplateFactory): Promise<BoundFunctions>;
 }