Merge pull request #545 from chesslablab/issue/541-Add-a-new-option-t…

…o-the-Study-dropdown-menu

Explain a Good Move

assets/js/pages/AnalysisPanel.js

@@ -17,6 +17,14 @@ export class ExplainPositionModal extends BaseComponent {
   }
 }
 
+export class ExplainGoodPgnModal extends BaseComponent {
+  mount() {
+    const p = this.el.querySelector('p');
+    p.replaceChildren();
+    p.appendChild(document.createTextNode(`${this.props.pgn} is a good move now. ${this.props.explanation}`));
+  }
+}
+
 export class AnalysisPanel extends BaseComponent {
   plot(event, data) {
     return {
@@ -96,6 +104,18 @@ export class AnalysisPanel extends BaseComponent {
     });
 
     this.props.gameStudyDropdown.props.ul.children.item(1).addEventListener('click', async (event) => {
+      event.preventDefault();
+      analysisWebSocket
+        .send('/tutor_good_pgn')
+        .onChange('/tutor_good_pgn', data => {
+          this.props.explainGoodPgnModal.props.pgn = data.pgn;
+          this.props.explainGoodPgnModal.props.explanation = data.paragraph;
+          this.props.explainGoodPgnModal.mount();
+          this.props.explainGoodPgnModal.props.modal.show();
+        });
+    });
+
+    this.props.gameStudyDropdown.props.ul.children.item(2).addEventListener('click', async (event) => {
       event.preventDefault();
       analysisWebSocket
         .send('/eval_names')
@@ -118,7 +138,7 @@ export class AnalysisPanel extends BaseComponent {
         });
     });
 
-    this.props.gameStudyDropdown.props.ul.children.item(2).addEventListener('click', async (event) => {
+    this.props.gameStudyDropdown.props.ul.children.item(3).addEventListener('click', async (event) => {
       event.preventDefault();
       this.progressModal.props.modal.show();
       const back = (this.props.movesBrowser.props.fen.length - this.props.movesBrowser.current - 1) * -1;
@@ -196,6 +216,16 @@ export const analysisPanel = new AnalysisPanel({
           });
         }
       }),
+      explainGoodPgnModal: new ExplainGoodPgnModal({
+        el: document.querySelector('#explainGoodPgnModal'),
+        props() {
+          return({
+            modal: new Modal(this.el),
+            pgn: '',
+            explanation: ''
+          });
+        }
+      }),
       heuristicsModal: new BaseComponent({
         el: document.querySelector('#heuristicsModal'),
         props() {

templates/layouts/iframe.html.twig

@@ -35,6 +35,7 @@
     {% include 'partial/info_modal.html.twig' %}
     {% include 'partial/progress_modal.html.twig' %}
     {% include 'partial/panel/explain_position_modal.html.twig' %}
+    {% include 'partial/panel/explain_good_pgn_modal.html.twig' %}
     {% include 'partial/panel/heuristics_modal.html.twig' %}
     {% include 'partial/panel/steinitz_modal.html.twig' %}
   </body>

templates/pages/games/index.html.twig

@@ -27,6 +27,7 @@
     </div>
   </div>
   {% include 'partial/panel/explain_position_modal.html.twig' %}
+  {% include 'partial/panel/explain_good_pgn_modal.html.twig' %}
   {% include 'partial/panel/heuristics_modal.html.twig' %}
   {% include 'partial/panel/steinitz_modal.html.twig' %}
 {% endblock %}

templates/pages/home/index.html.twig

@@ -43,6 +43,7 @@
     </div>
   </div>
   {% include 'partial/panel/explain_position_modal.html.twig' %}
+  {% include 'partial/panel/explain_good_pgn_modal.html.twig' %}
   {% include 'partial/panel/heuristics_modal.html.twig' %}
   {% include 'partial/panel/steinitz_modal.html.twig' %}
 {% endblock %}

templates/partial/panel/explain_good_pgn_modal.html.twig

@@ -0,0 +1,13 @@
+<div class="modal" id="explainGoodPgnModal" tabindex="-1" aria-labelledby="explainGoodPgnModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="explainGoodPgnModalLabel">{{ 'Explain a Good Move'|trans }}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p></p>
+      </div>
+    </div>
+  </div>
+</div>

templates/partial/panel/game_study_dropdown.html.twig

@@ -8,6 +8,11 @@
         <i class="bi bi-chat-right-text-fill"></i> {{ 'Explain Position'|trans }}
       </a>
     </li>
+    <li>
+      <a class="dropdown-item" href="#">
+        <i class="bi bi-chat-right-dots-fill"></i> {{ 'Explain a Good Move'|trans }}
+      </a>
+    </li>
     <li>
       <a class="dropdown-item" href="#">
         <i class="bi bi-graph-up"></i> {{ 'Heuristic Charts'|trans }}