feat(client): display location with fill color

clemlatz · May 9, 2024 · 85e8a48 · 85e8a48
1 parent c9c03f0
commit 85e8a48
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/client/app/components/star-map-object.hbs b/client/app/components/star-map-object.hbs
@@ -15,7 +15,7 @@
     cx={{this.objectPosition.x}}
     cy={{this.objectPosition.y}}
     r="1"
-    fill="grey"
+    fill="{{@color}}"
     aria-label={{@label}}
   />
   <text

diff --git a/client/app/components/star-map-object.ts b/client/app/components/star-map-object.ts
@@ -8,6 +8,7 @@ import type Location from 'sokown-client/models/location';
 interface ComponentSignature {
   Args: {
     label: string;
+    color: string;
     location: Location;
     position: Position;
     primaryBodyPosition: Position | null;

diff --git a/client/app/components/star-map.hbs b/client/app/components/star-map.hbs
@@ -24,6 +24,7 @@
       <StarMapObject
         @scale={{this.scale}}
         @label={{location.name}}
+        @color={{location.color}}
         @position={{location.position}}
         @primaryBodyPosition={{location.primaryBodyPosition}}
         @distanceFromPrimaryBody={{location.distanceFromPrimaryBody}}

diff --git a/client/app/models/location.ts b/client/app/models/location.ts
@@ -4,6 +4,7 @@ import type { Position } from 'sokown-client/types';
 
 export default class Location extends Model {
   @attr declare name: string;
+  @attr declare color: string;
   @attr declare position: Position;
   @attr declare primaryBodyPosition: Position | null;
   @attr declare distanceFromPrimaryBody: number;

diff --git a/client/tests/integration/components/star-map-object-test.ts b/client/tests/integration/components/star-map-object-test.ts
@@ -10,6 +10,7 @@ module('Integration | Component | star-map-object', function (hooks) {
     // given
     this.set('scale', 300);
     this.set('label', 'Twinkle');
+    this.set('color', 'darkpink');
     this.set('position', { x: 690, y: 480 });
     this.set('primaryBodyPosition', { x: 0, y: 0 });
     this.set('distanceFromPrimaryBody', 525);
@@ -18,17 +19,20 @@ module('Integration | Component | star-map-object', function (hooks) {
       hbs`<StarMapObject
         @scale={{this.scale}}
         @label={{this.label}}
+        @color={{this.color}}
         @position={{this.position}}
         @primaryBodyPosition={{this.primaryBodyPosition}}
         @distanceFromPrimaryBody={{this.distanceFromPrimaryBody}}
       />`,
     );
 
+    const starMapObject = screen.getByLabelText('Twinkle');
     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');
+    assert.dom(starMapObject).hasAttribute('cx', '23');
+    assert.dom(starMapObject).hasAttribute('cy', '-16');
+    assert.dom(starMapObject).hasAttribute('fill', 'darkpink');
     assert
       .dom(screen.getByLabelText("Twinkle's orbit"))
       .hasAttribute('r', '17.5');