feat(jsbattle-webpage): show recent league battles of player

packages/jsbattle-server/.eslintrc.js

@@ -100,7 +100,7 @@ module.exports = {
         "max-depth": "error",
         "max-len": "off",
         "max-lines": ["error", {
-          "max": 300,
+          "max": 350,
           "skipBlankLines": true,
           "skipComments": true
         }],

packages/jsbattle-server/app/services/League.service.js

@@ -223,7 +223,30 @@ class LeagueService extends Service {
     if(response.length === 0) {
       return {}
     }
-    return response[0]
+    response = response[0];
+    let items = await ctx.call('battleStore.find', {
+      query: {
+        owner: {$in: [response.id]}
+      },
+      sort: '-createdAt',
+      limit: 10,
+      fields: [
+        "id",
+        "meta",
+        "createdAt"
+      ]
+    });
+    items = items.map((item) => ({
+      id: item.id,
+      createdAt: item.createdAt,
+      players: item.meta.map((player) => ({
+        id: player.id,
+        name: player.name,
+        winner: player.winner
+      }))
+    }));
+    response.history = items;
+    return response;
   }
 
   async joinLeague(ctx) {
@@ -306,7 +329,8 @@ class LeagueService extends Service {
       "fights_win",
       "fights_lose",
       "fights_error",
-      "score"
+      "score",
+      "history"
     ];
 
     let submission = await this.getUserSubmission(ctx)

packages/jsbattle-server/test/unit/services/League.spec.js

@@ -153,7 +153,6 @@ describe("Test 'League' service", () => {
 		).rejects.toThrow(/Not Authorized/i)
 	});
 
-
 	it('should throw error when call getLeagueSummary without login',  async () => {
 		const user = {
 			username: 'john',
@@ -192,6 +191,12 @@ describe("Test 'League' service", () => {
 
 		expect(result).toHaveProperty('submission');
 		expect(result.submission).toHaveProperty('ownerId', '123456');
+		expect(result.submission).toHaveProperty('history');
+		expect(result.submission.history).toHaveLength(3);
+		expect(result.submission.history[0]).toHaveProperty('id', leagueHistory[0].id);
+		expect(result.submission.history[1]).toHaveProperty('id', leagueHistory[1].id);
+		expect(result.submission.history[2]).toHaveProperty('id', leagueHistory[2].id);
+
 		expect(result).toHaveProperty('ranktable');
 		expect(result.ranktable).toHaveLength(2);
 		expect(result).toHaveProperty('history');

packages/jsbattle-webpage/features/db_snapshot/snapshot_league.json

@@ -46,7 +46,8 @@
     "fights_total": 343,
     "fights_win": 128,
     "fights_lose": 43,
-    "score": 1092
+    "score": 1092,
+    "history": []
   },
   "user,league,replay": [
   {"_id":"5ed108bfdf088a19fb84fa77","id":"5ed108bfdf088a19fb84fa77","createdAt":"2020-05-29T13:06:07.890Z","expiresAt":"2020-05-29T14:06:07.890Z","ubd":"{\"version\":3,\"rngSeed\":0.6492123242742991,\"teamMode\":true,\"timeLimit\":20000,\"aiList\":[{\"name\":\"crawler\",\"team\":\"jsbattle/crawler\",\"code\":\"importScripts('lib/tank.js');\\n\\nvar turnDirection, turnTimer;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n  // the direction where tank will turning.\\n  // 1 is clockwise, -1 is couter clockwise\\n  turnDirection = Math.random() < 0.5 ? 1 : -1;\\n  turnTimer = Math.round(Math.randomRange(0, 30));\\n});\\n\\ntank.loop(function(state, control) {\\n\\n  // when hit an obstacle, start turning until\\n  // time of turnTimer doesn't run out\\n  if(state.collisions.wall || state.collisions.enemy || state.collisions.ally) {\\n    turnTimer = Math.round(Math.randomRange(20, 50));\\n  }\\n  if(turnTimer > 0) {\\n    turnTimer--;\\n    // when turnTimer is on, do not move forward because there is\\n    // probably an obstacle in front of you. Turn instead.\\n    control.THROTTLE = 0;\\n    control.TURN = turnDirection;\\n  } else {\\n    // keep going forward at full speed\\n    control.THROTTLE = 1;\\n    control.TURN = 0;\\n  }\\n  // Shoot whenever you see an enemy\\n  if(state.radar.enemy) {\\n    control.SHOOT = 0.5;\\n  }\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100},{\"name\":\"chicken\",\"team\":\"jsbattle/chicken\",\"code\":\"importScripts('lib/tank.js');\\n\\n/* moves tank in defined direction\\n* @param targetAngle - direction of movement\\n* @param state - state object of the tank\\n* @param control - control object of the tank\\n* @param done - callback executed when tank is close to the wall and the movement is over\\n*/\\nfunction goToDirection(targetAngle, state, control, done) {\\n  var angleDelta = Math.deg.normalize(targetAngle - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  // use boost to hide in corner ASAP\\n  control.BOOST = 1;\\n\\n  // if any enemy on the radar - shoot!\\n  if(state.radar.enemy) {\\n    control.SHOOT = 1;\\n  } else {\\n    control.SHOOT = 0;\\n  }\\n\\n  if(Math.abs(angleDelta) < 5) {\\n    // do not move forward if a tank is on your way\\n    if(state.collisions.enemy || state.collisions.ally) {\\n      control.THROTTLE = 0;\\n    } else {\\n      control.THROTTLE = 1;\\n    }\\n    // finish movement when close to a wall\\n    if(state.radar.wallDistance && state.radar.wallDistance < 50) {\\n      control.THROTTLE = 0;\\n      control.TURN = 0;\\n      control.BOOST = 0;\\n      done();\\n    }\\n  }\\n}\\n\\n// strategy of moving north/south\\n// used at the beginning to go close to a wall\\nfunction goVerticalStrategy(state, control) {\\n  goToDirection(verticalAngle, state, control, function() {\\n    // when done - go to a corner\\n    strategy = goHorizontalStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goVerticalStrategy:\\\" + verticalAngle;\\n}\\n\\n// strategy of moving east/west\\n// used when you are close to the wall so you can find a corner\\nfunction goHorizontalStrategy(state, control) {\\n  goToDirection(horizontalAngle, state, control, function() {\\n    // when done - start shooting\\n    strategy = shootStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goHorizontalStrategy:\\\" + horizontalAngle;\\n}\\n\\n// shoot wave of bullets\\nfunction shootStrategy(state, control) {\\n  // 20*Math.sin(timer*0.1) cause rotation +-20 degrees over the time\\n  var angleDelta = Math.deg.normalize(shootAngle + 20*Math.sin(timer*0.1) - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  control.SHOOT = 0.1;\\n  control.DEBUG.strategy = \\\"shootStrategy:\\\" + shootAngle;\\n}\\n\\n\\n// strategy function that is currently used\\nvar strategy;\\n\\n// random direction of the tank that results in vertical movement (north or south)\\nvar verticalAngle;\\n// random direction of the tank that results in horizontal movement (east or west)\\nvar horizontalAngle;\\n// best direction to shoot when the tank is hidden i battlefield's corner\\nvar shootAngle;\\n// timer used to change shooting angle over the time\\nvar timer = 0;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n\\n  // randomize direction of tank movement\\n  verticalAngle = Math.random() < 0.5 ? -90 : +90;\\n  horizontalAngle = Math.random() < 0.5 ? 0 : -180;\\n  // find direction that is opposite to the corner where the tank is\\n  shootAngle = Math.deg.normalize(verticalAngle + horizontalAngle)/2;\\n  if(horizontalAngle == 0) {\\n    shootAngle += 180;\\n  }\\n\\n  // start from moving north/south\\n  strategy = goVerticalStrategy;\\n});\\n\\ntank.loop(function(state, control) {\\n  // execute current strategy\\n  strategy(state, control);\\n  timer++;\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100},{\"name\":\"crawler\",\"team\":\"jsbattle/crawler\",\"code\":\"importScripts('lib/tank.js');\\n\\nvar turnDirection, turnTimer;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n  // the direction where tank will turning.\\n  // 1 is clockwise, -1 is couter clockwise\\n  turnDirection = Math.random() < 0.5 ? 1 : -1;\\n  turnTimer = Math.round(Math.randomRange(0, 30));\\n});\\n\\ntank.loop(function(state, control) {\\n\\n  // when hit an obstacle, start turning until\\n  // time of turnTimer doesn't run out\\n  if(state.collisions.wall || state.collisions.enemy || state.collisions.ally) {\\n    turnTimer = Math.round(Math.randomRange(20, 50));\\n  }\\n  if(turnTimer > 0) {\\n    turnTimer--;\\n    // when turnTimer is on, do not move forward because there is\\n    // probably an obstacle in front of you. Turn instead.\\n    control.THROTTLE = 0;\\n    control.TURN = turnDirection;\\n  } else {\\n    // keep going forward at full speed\\n    control.THROTTLE = 1;\\n    control.TURN = 0;\\n  }\\n  // Shoot whenever you see an enemy\\n  if(state.radar.enemy) {\\n    control.SHOOT = 0.5;\\n  }\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100},{\"name\":\"chicken\",\"team\":\"jsbattle/chicken\",\"code\":\"importScripts('lib/tank.js');\\n\\n/* moves tank in defined direction\\n* @param targetAngle - direction of movement\\n* @param state - state object of the tank\\n* @param control - control object of the tank\\n* @param done - callback executed when tank is close to the wall and the movement is over\\n*/\\nfunction goToDirection(targetAngle, state, control, done) {\\n  var angleDelta = Math.deg.normalize(targetAngle - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  // use boost to hide in corner ASAP\\n  control.BOOST = 1;\\n\\n  // if any enemy on the radar - shoot!\\n  if(state.radar.enemy) {\\n    control.SHOOT = 1;\\n  } else {\\n    control.SHOOT = 0;\\n  }\\n\\n  if(Math.abs(angleDelta) < 5) {\\n    // do not move forward if a tank is on your way\\n    if(state.collisions.enemy || state.collisions.ally) {\\n      control.THROTTLE = 0;\\n    } else {\\n      control.THROTTLE = 1;\\n    }\\n    // finish movement when close to a wall\\n    if(state.radar.wallDistance && state.radar.wallDistance < 50) {\\n      control.THROTTLE = 0;\\n      control.TURN = 0;\\n      control.BOOST = 0;\\n      done();\\n    }\\n  }\\n}\\n\\n// strategy of moving north/south\\n// used at the beginning to go close to a wall\\nfunction goVerticalStrategy(state, control) {\\n  goToDirection(verticalAngle, state, control, function() {\\n    // when done - go to a corner\\n    strategy = goHorizontalStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goVerticalStrategy:\\\" + verticalAngle;\\n}\\n\\n// strategy of moving east/west\\n// used when you are close to the wall so you can find a corner\\nfunction goHorizontalStrategy(state, control) {\\n  goToDirection(horizontalAngle, state, control, function() {\\n    // when done - start shooting\\n    strategy = shootStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goHorizontalStrategy:\\\" + horizontalAngle;\\n}\\n\\n// shoot wave of bullets\\nfunction shootStrategy(state, control) {\\n  // 20*Math.sin(timer*0.1) cause rotation +-20 degrees over the time\\n  var angleDelta = Math.deg.normalize(shootAngle + 20*Math.sin(timer*0.1) - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  control.SHOOT = 0.1;\\n  control.DEBUG.strategy = \\\"shootStrategy:\\\" + shootAngle;\\n}\\n\\n\\n// strategy function that is currently used\\nvar strategy;\\n\\n// random direction of the tank that results in vertical movement (north or south)\\nvar verticalAngle;\\n// random direction of the tank that results in horizontal movement (east or west)\\nvar horizontalAngle;\\n// best direction to shoot when the tank is hidden i battlefield's corner\\nvar shootAngle;\\n// timer used to change shooting angle over the time\\nvar timer = 0;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n\\n  // randomize direction of tank movement\\n  verticalAngle = Math.random() < 0.5 ? -90 : +90;\\n  horizontalAngle = Math.random() < 0.5 ? 0 : -180;\\n  // find direction that is opposite to the corner where the tank is\\n  shootAngle = Math.deg.normalize(verticalAngle + horizontalAngle)/2;\\n  if(horizontalAngle == 0) {\\n    shootAngle += 180;\\n  }\\n\\n  // start from moving north/south\\n  strategy = goVerticalStrategy;\\n});\\n\\ntank.loop(function(state, control) {\\n  // execute current strategy\\n  strategy(state, control);\\n  timer++;\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100},{\"name\":\"crawler\",\"team\":\"jsbattle/crawler\",\"code\":\"importScripts('lib/tank.js');\\n\\nvar turnDirection, turnTimer;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n  // the direction where tank will turning.\\n  // 1 is clockwise, -1 is couter clockwise\\n  turnDirection = Math.random() < 0.5 ? 1 : -1;\\n  turnTimer = Math.round(Math.randomRange(0, 30));\\n});\\n\\ntank.loop(function(state, control) {\\n\\n  // when hit an obstacle, start turning until\\n  // time of turnTimer doesn't run out\\n  if(state.collisions.wall || state.collisions.enemy || state.collisions.ally) {\\n    turnTimer = Math.round(Math.randomRange(20, 50));\\n  }\\n  if(turnTimer > 0) {\\n    turnTimer--;\\n    // when turnTimer is on, do not move forward because there is\\n    // probably an obstacle in front of you. Turn instead.\\n    control.THROTTLE = 0;\\n    control.TURN = turnDirection;\\n  } else {\\n    // keep going forward at full speed\\n    control.THROTTLE = 1;\\n    control.TURN = 0;\\n  }\\n  // Shoot whenever you see an enemy\\n  if(state.radar.enemy) {\\n    control.SHOOT = 0.5;\\n  }\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100},{\"name\":\"chicken\",\"team\":\"jsbattle/chicken\",\"code\":\"importScripts('lib/tank.js');\\n\\n/* moves tank in defined direction\\n* @param targetAngle - direction of movement\\n* @param state - state object of the tank\\n* @param control - control object of the tank\\n* @param done - callback executed when tank is close to the wall and the movement is over\\n*/\\nfunction goToDirection(targetAngle, state, control, done) {\\n  var angleDelta = Math.deg.normalize(targetAngle - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  // use boost to hide in corner ASAP\\n  control.BOOST = 1;\\n\\n  // if any enemy on the radar - shoot!\\n  if(state.radar.enemy) {\\n    control.SHOOT = 1;\\n  } else {\\n    control.SHOOT = 0;\\n  }\\n\\n  if(Math.abs(angleDelta) < 5) {\\n    // do not move forward if a tank is on your way\\n    if(state.collisions.enemy || state.collisions.ally) {\\n      control.THROTTLE = 0;\\n    } else {\\n      control.THROTTLE = 1;\\n    }\\n    // finish movement when close to a wall\\n    if(state.radar.wallDistance && state.radar.wallDistance < 50) {\\n      control.THROTTLE = 0;\\n      control.TURN = 0;\\n      control.BOOST = 0;\\n      done();\\n    }\\n  }\\n}\\n\\n// strategy of moving north/south\\n// used at the beginning to go close to a wall\\nfunction goVerticalStrategy(state, control) {\\n  goToDirection(verticalAngle, state, control, function() {\\n    // when done - go to a corner\\n    strategy = goHorizontalStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goVerticalStrategy:\\\" + verticalAngle;\\n}\\n\\n// strategy of moving east/west\\n// used when you are close to the wall so you can find a corner\\nfunction goHorizontalStrategy(state, control) {\\n  goToDirection(horizontalAngle, state, control, function() {\\n    // when done - start shooting\\n    strategy = shootStrategy;\\n  });\\n  control.DEBUG.strategy = \\\"goHorizontalStrategy:\\\" + horizontalAngle;\\n}\\n\\n// shoot wave of bullets\\nfunction shootStrategy(state, control) {\\n  // 20*Math.sin(timer*0.1) cause rotation +-20 degrees over the time\\n  var angleDelta = Math.deg.normalize(shootAngle + 20*Math.sin(timer*0.1) - state.angle);\\n  control.TURN = angleDelta * 0.2;\\n  control.SHOOT = 0.1;\\n  control.DEBUG.strategy = \\\"shootStrategy:\\\" + shootAngle;\\n}\\n\\n\\n// strategy function that is currently used\\nvar strategy;\\n\\n// random direction of the tank that results in vertical movement (north or south)\\nvar verticalAngle;\\n// random direction of the tank that results in horizontal movement (east or west)\\nvar horizontalAngle;\\n// best direction to shoot when the tank is hidden i battlefield's corner\\nvar shootAngle;\\n// timer used to change shooting angle over the time\\nvar timer = 0;\\n\\ntank.init(function(settings, info) {\\n  settings.SKIN = 'forest';\\n\\n  // randomize direction of tank movement\\n  verticalAngle = Math.random() < 0.5 ? -90 : +90;\\n  horizontalAngle = Math.random() < 0.5 ? 0 : -180;\\n  // find direction that is opposite to the corner where the tank is\\n  shootAngle = Math.deg.normalize(verticalAngle + horizontalAngle)/2;\\n  if(horizontalAngle == 0) {\\n    shootAngle += 180;\\n  }\\n\\n  // start from moving north/south\\n  strategy = goVerticalStrategy;\\n});\\n\\ntank.loop(function(state, control) {\\n  // execute current strategy\\n  strategy(state, control);\\n  timer++;\\n});\\n\",\"initData\":null,\"useSandbox\":true,\"executionLimit\":100}]}","description":"jsbattle/crawler vs jsbattle/chicken","meta":[{"id":"5ecd06d60b7fda5799e71069","name":"jsbattle/crawler","battleScore":92.55,"winner":false},{"id":"5ecd06d60b7fda5799e71068","name":"jsbattle/chicken","battleScore":306.8099999999994,"winner":true}]}
@@ -63,7 +64,8 @@
       "fights_total": 343,
       "fights_win": 128,
       "fights_lose": 43,
-      "score": 1092
+      "score": 1092,
+      "history": []
     },
     "ranktable": [
       {

packages/jsbattle-webpage/jest.setup.js

@@ -20,7 +20,7 @@ global.document.body.createTextRange = () => ({
   })
 });
 
-var localStorageMock = (function() {
+const localStorageMock = (function() {
   var store = {};
   return {
     getItem: jest.fn(),
@@ -29,4 +29,10 @@ var localStorageMock = (function() {
     removeItem: jest.fn()
   };
 })();
+
+const $ = jest.fn(() => ({
+  tooltip: jest.fn()
+}))
+
 Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+Object.defineProperty(window, '$', { value: $ });