feat(jsbattle-webpage): add description to each challenge

Author: jamro

packages/jsbattle-docs/docs/manual/algorithms_aiming.md

@@ -14,6 +14,8 @@ The same rule applies to the radar. Its rotation is also relative to the body (*
   let radarAngle = Math.deg.normalize(90 - state.angle);
 ```
 
+Notice that results are normalized. Learn more about it [here](./algorithms_geometry.md).
+
 ## Aim at the target angle
 
 Once you know the angle where the tank should point its gun, we need to write a proper algorithm in `tank.loop(...)` to start to move it in the proper direction and stop when it is on the target. Two examples are shown here. In both cases, we will be pointing the gun at the north (`targetAngle = -90`).

packages/jsbattle-webpage/features/challenge.feature

@@ -4,28 +4,44 @@ Feature: Challenge
   Scenario: List all challenges
     Given JsBattle open in the browser
     And "Challenges" section open
-    Then list of challenges contains 11 items
+    Then list of challenges contains 10 items
     And challenge [1] are unlocked
-    And challenge [2, 3, 4, 5, 6, 7, 8, 9, 10, 11] are locked
-    And challenge [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] are incomplete
+    And challenge [2, 3, 4, 5, 6, 7, 8, 9, 10] are locked
+    And challenge [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] are incomplete
 
-  Scenario: Lose a challenge
+  Scenario Outline: Lose challenge #<index>
     Given JsBattle open in the browser
     And "Challenges" section open
+    And all challenges unlocked
     And battle quality set to "0"
     And battle speed set to "50"
-    When open challenge 1
+    When open challenge <index>
+    And close challenge info
     And start current challenge
     And battle view is displayed
     And battle is completed
     Then the challenge is lost
 
+    Examples:
+    | index |
+    |     1 |
+    |     2 |
+    |     3 |
+    |     4 |
+    |     5 |
+    |     6 |
+    |     7 |
+    |     8 |
+    |     9 |
+    |    10 |
+
   Scenario: Win a challenge
     Given JsBattle open in the browser
     And "Challenges" section open
     And battle quality set to "0"
     And battle speed set to "50"
     When open challenge 1
+    And close challenge info
     And type "<<jamro code>>" in AI Script editor
     And start current challenge
     And battle view is displayed
@@ -38,14 +54,72 @@ Feature: Challenge
     And battle quality set to "0"
     And battle speed set to "50"
     When open challenge 1
+    And close challenge info
     And type "<<jamro code>>" in AI Script editor
     And start current challenge
     And battle view is displayed
     And battle is completed
     And the challenge is won
     And click next challenge
-    Then list of challenges contains 11 items
+    Then list of challenges contains 10 items
     And challenge [1, 2] are unlocked
-    And challenge [3, 4, 5, 6, 7, 8, 9, 10, 11] are locked
+    And challenge [3, 4, 5, 6, 7, 8, 9, 10] are locked
     And challenge [1] are complete
-    And challenge [2, 3, 4, 5, 6, 7, 8, 9, 10, 11] are incomplete
+    And challenge [2, 3, 4, 5, 6, 7, 8, 9, 10] are incomplete
+
+  Scenario: Open challenge info modal
+    Given JsBattle open in the browser
+    And all challenges unlocked
+    And "Challenges" section open
+    When open challenge 1
+    And close challenge info
+    And open challenge info
+    Then challenge info is shown
+    And challenge info description is not empty
+
+  Scenario: Close challenge info modal
+    Given JsBattle open in the browser
+    And all challenges unlocked
+    And "Challenges" section open
+    When open challenge 1
+    And close challenge info
+    Then challenge info is not shown
+
+
+  Scenario: Show challenge info only at the beginning
+    Given JsBattle open in the browser
+    And "Challenges" section open
+    And all challenges unlocked
+    And battle quality set to "0"
+    And battle speed set to "50"
+    When open challenge 1
+    And challenge info is shown
+    And close challenge info
+    And start current challenge
+    And battle view is displayed
+    And battle is completed
+    And the challenge is lost
+    And retry challenge
+    Then challenge info is not shown
+
+  Scenario Outline: Show challenge #<index> info
+    Given JsBattle open in the browser
+    And all challenges unlocked
+    And "Challenges" section open
+    When open challenge <index>
+    Then challenge info is shown
+    And challenge info description is not empty
+    And all links in challenge info work
+
+    Examples:
+    | index |
+    |     1 |
+    |     2 |
+    |     3 |
+    |     4 |
+    |     5 |
+    |     6 |
+    |     7 |
+    |     8 |
+    |     9 |
+    |    10 |

packages/jsbattle-webpage/features/google_analytics.feature

@@ -13,19 +13,29 @@ Feature: Statistics
     When open challenge 1
     Then GA event "challenges/challenge_1/open" is sent
 
-  Scenario: Notify about starting a challenge battle
+  Scenario Outline: Notify about starting challenge #<index> battle
     Given JsBattle open in the browser
+    And all challenges unlocked
     And "Challenges" section open
-    When open challenge 1
+    When open challenge <index>
+    And close challenge info
     And start current challenge
-    Then GA event "challenges/challenge_1/battle" is sent
+    Then GA event "challenges/challenge_<index>/battle" is sent
+
+    Examples:
+      | index |
+      |     1 |
+      |     2 |
+      |     5 |
+      |     8 |
 
   Scenario: Notify about winning a challenge
     Given JsBattle open in the browser
     And "Challenges" section open
     And battle quality set to "0"
     And battle speed set to "50"
     When open challenge 1
+    And close challenge info
     And type "<<jamro code>>" in AI Script editor
     And start current challenge
     And battle view is displayed
@@ -39,6 +49,7 @@ Feature: Statistics
     And battle quality set to "0"
     And battle speed set to "50"
     When open challenge 1
+    And close challenge info
     And start current challenge
     And battle view is displayed
     And battle is completed

packages/jsbattle-webpage/features/step_definitions/challenge_steps.js

@@ -23,6 +23,11 @@ var challengeHelper = {
   }
 };
 // GIVEN -----------------------------------------------------------------------
+Given('all challenges unlocked', async function () {
+  await this.client.page.evaluate(() => {
+    appController.unlockAllChallenges();
+  });
+});
 
 // WHEN ------------------------------------------------------------------------
 When('open challenge {int}', async function (index) {
@@ -31,6 +36,12 @@ When('open challenge {int}', async function (index) {
   await this.client.page.click(css);
 });
 
+When('retry challenge', async function () {
+  let css = ".retry-challenge";
+  await this.client.page.waitFor(css);
+  await this.client.page.click(css);
+});
+
 When('start current challenge', async function () {
   let css = ".editor-fight";
   await this.client.page.waitFor(css);
@@ -43,6 +54,31 @@ When('click next challenge', async function () {
   await this.client.page.click(css);
 });
 
+When('close challenge info', async function () {
+  function delay(time) {
+    return new Promise(function(resolve) {
+       setTimeout(resolve, time)
+    });
+  }
+  let css = ".close-challenge-info";
+  await this.client.page.waitForSelector(css, {visible:true});
+  await delay(300)
+  await this.client.page.click(css);
+  await delay(300)
+});
+
+When('open challenge info', async function () {
+  function delay(time) {
+    return new Promise(function(resolve) {
+       setTimeout(resolve, time)
+    });
+  }
+  let css = ".open-challenge-info";
+  await this.client.page.waitForSelector(css, {visible:true});
+  await this.client.page.click(css);
+  await delay(300)
+});
+
 // THEN ------------------------------------------------------------------------
 Then('list of challenges contains {int} items', async function (count) {
   let data = await challengeHelper.getChallengeList(this.client.page);
@@ -102,3 +138,55 @@ Then('the challenge is won', async function () {
   });
   expect(result).to.be.ok;
 });
+
+Then('challenge info is shown', async function () {
+  await this.client.page.waitFor('.modal', {visible: true});
+  let result = await this.client.page.evaluate(() => {
+    const element = document.querySelector('.modal');
+    return (element != null);
+  });
+  expect(result).to.be.ok;
+});
+
+Then('challenge info is not shown', async function () {
+  function delay(time) {
+    return new Promise(function(resolve) {
+       setTimeout(resolve, time)
+    });
+  }
+  await delay(500);
+  await this.client.page.waitFor('.modal', {visible: false});
+  let result = await this.client.page.evaluate(() => {
+    const element = document.querySelector('.modal');
+    return (element != null);
+  });
+  expect(result).to.be.ok;
+});
+
+Then('challenge info description is not empty', async function () {
+  await this.client.page.waitFor('.modal-body', {visible: true});
+  let result = await this.client.page.evaluate(() => {
+    const html = document.querySelector('.modal-body').innerHTML;;
+    return html;
+  });
+  expect(result).to.be.not.empty;
+});
+
+Then('all links in challenge info work', async function () {
+  await this.client.page.waitFor('.modal-body', {visible: true});
+  let result = await this.client.page.evaluate(() => {
+    const links = document.querySelectorAll('.modal-body a');
+    return Object.values(links).map(el => el.href);
+  });
+
+  let testPage = await this.client.browser.newPage();
+  testPage.on('response', (response) => {
+    expect(response.ok(), "Status " + response.status() + " during opening " + response.url()).to.be.ok;
+  })
+  for(let url of result) {
+    await testPage.goto(url);
+    await testPage.waitFor('body');
+  }
+  await testPage.close();
+
+});

packages/jsbattle-webpage/src/components/App.js

@@ -109,7 +109,7 @@ export default class App extends React.Component {
       case 'CHALLENGE_LIST':
         return <ChallengesListScreen
           {...this.state.challenges}
-          onChallengeOpen={(id) => this.controller.openChallengeEditor(id)}
+          onChallengeOpen={(id) => this.controller.openChallengeEditor(id, true)}
         />;
       case 'CHALLENGE_EDITOR':
         return <ChallengeEditorScreen

packages/jsbattle-webpage/src/components/screen/challenges/ChallengeEditorScreen.js

@@ -7,18 +7,63 @@ export default class ChallengeEditorScreen extends React.Component {
     super(props);
   }
 
+  componentDidMount() {
+    if(this.props.showInfo) {
+      $('#challengeInfo').modal('show');
+    }
+
+  }
+
+  parseDescription(txt) {
+    txt = txt.replace(/(\[.*\]\(.*\))/g, '<break-line>$1<break-line>');
+    txt = txt.replace(/\n/g, '<break-line><br/><break-line>');
+    txt = txt.split('<break-line>');
+    txt = txt.map((line) => {
+      let result;
+      result = (/^\[(.*)\]\((.*)\)$/).exec(line);
+      if(result) {
+        return <a href={result[2]} target="_blank" rel="noopener noreferrer">{result[1]}</a>;
+      }
+      if(line == '<br/>') {
+        return <br/>;
+      }
+      return line;
+    });
+
+    return txt;
+  }
+
   render() {
     return <div>
       <FullRow>
         <button type="button" className="btn btn-secondary float-right close-challenge" onClick={() => this.props.onClose()}>
           <i className="fas fa-times" aria-hidden="true"></i> Close
         </button>
-        <a className="btn btn-secondary float-right help" style={{marginRight: '5px'}} href="./docs/#/docs/getting_started" target="_blank">
-          <i className="fas fa-question-circle"></i> Help
-        </a>
+        <button className="btn btn-secondary float-right open-challenge-info" style={{marginRight: '5px'}}  data-toggle="modal" data-target="#challengeInfo">
+          <i className="fas fa-info-circle"></i> Info
+        </button>
         <button type="button" className="btn btn-primary float-right editor-fight" style={{marginRight: '5px'}} onClick={() => this.props.onStart()}>
           <i className="fas fa-play" aria-hidden="true"></i> Start the Battle
         </button>
+        <div className="modal fade" id="challengeInfo" tabIndex="-1" role="dialog" aria-labelledby="challengeInfoLabel" aria-hidden="true">
+          <div className="modal-dialog" role="document" style={{minWidth: '80%'}}>
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title" id="challengeInfoLabel"><i className="fas fa-info-circle"></i> Level {this.props.level}: {this.props.name}</h5>
+                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div className="modal-body">
+                {this.parseDescription(this.props.description)}
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-primary close-challenge-info" data-dismiss="modal">Close</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </FullRow>
       <FullRow>
         <CodeEditorWidget

packages/jsbattle-webpage/src/controller/Controller.js

@@ -24,6 +24,7 @@ import assignTanksToBattle from './action/battle/assignTanksToBattle.js';
 import shareBattle from './action/battle/shareBattle.js';
 
 import saveCurrentChallengeScript from './action/challenge/saveCurrentChallengeScript.js';
+import unlockAllChallenges from './action/challenge/unlockAllChallenges.js';
 
 import loadSettings from './action/loadSettings.js';
 import setSimulationSpeed from './action/setSimulationSpeed.js';
@@ -61,6 +62,7 @@ export default class Controller  {
     this.addActon('shareBattle',             shareBattle(this.stateHolder));
 
     this.addActon('saveCurrentChallengeScript', saveCurrentChallengeScript(this.stateHolder, challengeLibrary));
+    this.addActon('unlockAllChallenges',     unlockAllChallenges(this.stateHolder, challengeLibrary));
 
     this.addActon('loadSettings',            loadSettings(this.stateHolder, aiRepository, challengeLibrary));
     this.addActon('setSimulationSpeed',      setSimulationSpeed(this.stateHolder));