Setup a service to track currently selected word and add some styling

app/components/words/greek-text.hbs

@@ -0,0 +1,5 @@
+<div class="verse-greek-text">
+  {{#each @model as |word|}}
+    <Words::GreekWord @model={{word}} />
+  {{/each}}
+</div>

app/components/words/greek-word.hbs

@@ -0,0 +1 @@
+<span class="{{this.selected}}" {{on "click" (fn this.select @model)}} data-strongs={{@model.strongs_number}} ...attributes>{{@model.greek}}</span>

app/components/words/greek-word.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class WordsGreekWordComponent extends Component {
+  @service('word-select') selectWord;
+
+  @action
+  select(word) {
+    this.selectWord.select(word);
+  }
+
+  get
+  selected() {
+    if(this.selectWord.isCurrentByOgntId(this.args.model)) {
+      return "selected";
+    } else {
+      return "";
+    }
+  }
+}

app/components/words/word-row.hbs

@@ -1,4 +1,4 @@
-<tr ...attributes>
+<tr data-strongs={{@model.strongs_number}} class="{{this.selected}}" ...attributes>
   <td>{{@model.greek}}</td>
   <td>{{@model.ulb}}</td>
   <td>{{@model.morph}}</td>

app/components/words/word-row.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class WordsWordRowComponent extends Component {
+  @service('word-select') selectedWord;
+
+  get
+  selected() {
+    if(this.selectedWord.isCurrentByOgntId(this.args.model)) {
+      return "selected";
+    } else {
+      return "";
+    }
+  }
+}

app/services/word-select.js

@@ -0,0 +1,22 @@
+import Service from '@ember/service';
+import { tracked } from "@glimmer/tracking";
+
+export default class WordSelectService extends Service {
+  @tracked currentWord = '';
+
+  select(word) {
+    this.currentWord = word;
+  }
+
+  current() {
+    return this.currentWord;
+  }
+
+  isCurrentByOgntId(word) {
+    return word.ognt_sort == this.currentWord.ognt_sort;
+  }
+
+  isCurrentByStrongsNumber(word) {
+    return word.strongs_number == this.currentWord.strongs_number
+  }
+}

app/styles/components/words.scss

@@ -8,3 +8,14 @@ table.word-details td {
   padding: 10px;
 }
 
+table.word-details tr.selected {
+  background-color: lightblue;
+}
+
+.verse-greek-text span {
+  cursor: pointer;
+}
+
+.verse-greek-text span.selected {
+  color: lightblue;
+}

app/templates/verse.hbs

@@ -3,7 +3,7 @@
     <div class="col-12">
       <h1>{{model.reference}}</h1>
       <h4>Greek</h4>
-      <p>{{model.greek_text}}</p>
+      <p><Words::GreekText @model={{model.words}} /></p>
       <h4>ULB</h4>
       <p>{{model.ulb_text}}</p>
     </div>
@@ -13,7 +13,7 @@
       <Words::WordTable @model={{model.words}} />
     </div>
     <div class="col-6">
-      <Commentary::Entry />
+      <Lexicon::Entry />
     </div>
   </div>
 </div>

tests/integration/components/words/greek-text-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | words/greek-text', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Words::GreekText />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Words::GreekText>
+        template block text
+      </Words::GreekText>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/words/greek-word-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | words/greek-word', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Words::GreekWord />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Words::GreekWord>
+        template block text
+      </Words::GreekWord>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/unit/services/word-select-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | word-select', function(hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:word-select');
+    assert.ok(service);
+  });
+});