fix(jsbattle-webpage): fix fights against sandbox opponnents for registered players

jamro · jamro · commit e369fc53ea56 · 2020-06-02T19:44:48.000+02:00
diff --git a/packages/jsbattle-server/app/services/UserStore.service.js b/packages/jsbattle-server/app/services/UserStore.service.js
@@ -85,6 +85,8 @@ class UserStoreService extends Service {
     }
     const reservedNames = [
       'jsbattle',
+      'sandbox',
+      'user',
       'admin'
     ];
     const isNameReserved = reservedNames.indexOf(username.toLowerCase()) != -1;
diff --git a/packages/jsbattle-webpage/src/actions/actionTypes.js b/packages/jsbattle-webpage/src/actions/actionTypes.js
@@ -29,6 +29,8 @@ export const AI_SCRIPT_FAILURE = 'AI_SCRIPT_FAILURE';
 export const AI_SCRIPT_SUCCESS = 'AI_SCRIPT_SUCCESS';
 export const AI_SCRIPT_CHANGED_REQUEST = 'AI_SCRIPT_CHANGED_REQUEST';
 export const AI_SCRIPT_CHANGED_SUCCESS = 'AI_SCRIPT_CHANGED_SUCCESS';
+export const SANDBOX_OPPONENT_LIST = 'SANDBOX_OPPONENT_LIST';
+export const SANDBOX_OPPONENT_LIST_FAILURE = 'SANDBOX_OPPONENT_LIST_FAILURE';
 export const SANDBOX_OPPONENT_CHANGE = 'SANDBOX_OPPONENT_CHANGE';
 export const SANDBOX_OPPONENT_TEAM_MODE = 'SANDBOX_OPPONENT_TEAM_MODE';
 export const SANDBOX_OPPONENT_DUEL_MODE = 'SANDBOX_OPPONENT_DUEL_MODE';
diff --git a/packages/jsbattle-webpage/src/actions/coreAction.js b/packages/jsbattle-webpage/src/actions/coreAction.js
@@ -57,10 +57,6 @@ export const getSettings = () => {
 
     let settings = await profileService.getSettings();
 
-    let result = await fetch("tanks/index.json");
-    let bundledTanks = await result.json();
-    settings.bundledTanks = bundledTanks;
-
     dispatch({type: SETTINGS_SUCCESS, payload: settings});
   };
 };
diff --git a/packages/jsbattle-webpage/src/actions/sandboxAction.js b/packages/jsbattle-webpage/src/actions/sandboxAction.js
@@ -2,6 +2,8 @@ import aiRepoService from "../services/aiRepoService.js";
 import statsService from '../services/statsService.js';
 import {
   SANDBOX_OPPONENT_CHANGE,
+  SANDBOX_OPPONENT_LIST,
+  SANDBOX_OPPONENT_LIST_FAILURE,
   SANDBOX_OPPONENT_TEAM_MODE,
   SANDBOX_OPPONENT_DUEL_MODE,
   SANDBOX_RNG_LOCK,
@@ -115,19 +117,96 @@ export const renameAiScript = (newName, id, useRemoteService) => {
   );
 };
 
-export const setSandboxOpponent = (type, name) => {
+export const getSandboxOpponentList = (useRemoteService) => {
   return async (dispatch) => {
-    let code = '';
-    if(type == 'user') {
-      code = await aiRepoService.getScript(name, 'scriptMap');
-      code = code.code;
+    let result;
+    let userTankList = [];
+    if(useRemoteService) {
+      try {
+        result = await fetch("/api/user/scripts", {});
+        if(!result.ok) {
+          throw new Error(`Error ${result.status}: ${result.statusText} (url: ${result.url})`);
+        }
+        userTankList = await result.json();
+        userTankList = userTankList.map((script) => ({
+          id: script.id,
+          label: "sandbox/" + script.scriptName,
+          source: 'remote_user'
+        }));
+      } catch(err) {
+        console.log(err);
+        return dispatch({
+          type: SANDBOX_OPPONENT_LIST_FAILURE,
+          payload: err
+        });
+      }
+    } else {
+      userTankList = await aiRepoService.getScriptNameList();
+      userTankList = userTankList.map((script) => ({
+        id: script.id,
+        label: 'sandbox/' + script.scriptName,
+        source: 'local_user'
+      }));
+    }
+
+    result = await fetch("tanks/index.json");
+    let bundledTanks = await result.json();
+
+    bundledTanks = bundledTanks.map((name) => ({
+      id: name,
+      label: "jsbattle/" + name,
+      source: "bundled"
+    }));
+
+    dispatch({
+      type: SANDBOX_OPPONENT_LIST,
+      payload: Array.concat(bundledTanks, userTankList)
+    });
+  };
+};
+
+export const setSandboxOpponent = (source, id) => {
+  return async (dispatch) => {
+    let scriptName;
+    let scriptCode;
+    let script;
+    switch(source) {
+      case 'local_user':
+        script = await aiRepoService.getScript(id, 'scriptMap');
+        scriptName = script.scriptName;
+        scriptCode = script.code;
+        break;
+      case 'bundled':
+        scriptName = id;
+        scriptCode = '';
+        break;
+      case 'remote_user':
+        try {
+          script = await fetch("/api/user/scripts/" + id);
+          if(!script.ok) {
+            throw new Error(`Error ${script.status}: ${script.statusText} (url: ${script.url})`);
+          }
+          script = await script.json();
+          scriptName = script.scriptName;
+          scriptCode = script.code;
+        } catch(err) {
+          console.log(err);
+          return dispatch({
+            type: SANDBOX_OPPONENT_LIST_FAILURE,
+            payload: err
+          });
+        }
+        break;
+      default:
+        throw new Error(`Not supported source ${source}`);
     }
     dispatch({
       type: SANDBOX_OPPONENT_CHANGE,
       payload: {
-        type,
-        name,
-        code
+        id,
+        source,
+        name: scriptName,
+        code: scriptCode
       }
     });
   };
diff --git a/packages/jsbattle-webpage/src/components/LiveCodeSandboxSettingsTab.js b/packages/jsbattle-webpage/src/components/LiveCodeSandboxSettingsTab.js
@@ -6,7 +6,9 @@ import Row from './Row.js';
 class LiveCodeSandboxSettingsTab extends React.Component {
 
   render() {
-    let opponents = this.props.opponents.map((opponent) => <option key={opponent.id} value={opponent.id}>{opponent.scriptName}</option>);
+    let opponents = this.props.opponents.map((opponent, index) => <option key={opponent.id} value={index}>{opponent.label}</option>);
+
+    let selectedIndex = this.props.opponents.findIndex((opponent) => (opponent.id == this.props.selectedOpponent.id && opponent.source == this.props.selectedOpponent.source));
 
     return <Row>
         <Col sm={12}>
@@ -15,7 +17,7 @@ class LiveCodeSandboxSettingsTab extends React.Component {
               <form>
                 <div className="form-group">
                   <label htmlFor="opponent"><i className="fas fa-crosshairs"></i> Opponent</label>
-                  <select className="form-control" id="opponent" value={this.props.selectedOpponent} onChange={(e) => this.props.onOpponentChange(e.target.value)}>
+                  <select className="form-control" id="opponent" value={selectedIndex} onChange={(e) => this.props.onOpponentChange(this.props.opponents[e.target.value])}>
                     {opponents}
                   </select>
                 </div>
@@ -45,7 +47,7 @@ class LiveCodeSandboxSettingsTab extends React.Component {
 }
 
 LiveCodeSandboxSettingsTab.defaultProps = {
-  selectedOpponent: '',
+  selectedOpponent: {},
   opponents: [],
   mode: 'duel',
   rngSeed: 0,
@@ -57,7 +59,7 @@ LiveCodeSandboxSettingsTab.defaultProps = {
 
 LiveCodeSandboxSettingsTab.propTypes = {
   opponents: PropTypes.array,
-  selectedOpponent: PropTypes.string,
+  selectedOpponent: PropTypes.object,
   rngSeed: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   isRngLocked: PropTypes.bool,
   mode: PropTypes.oneOf(['duel', 'team']),
diff --git a/packages/jsbattle-webpage/src/components/test/LiveCodeSandboxSettingsTab.spec.js b/packages/jsbattle-webpage/src/components/test/LiveCodeSandboxSettingsTab.spec.js
@@ -10,32 +10,32 @@ test('LiveCodeSandboxSettingsTab renders properly', () => {
 
 test('list opponents', () => {
   const opponents = [
-    { id: 'op1',  scriptName: 'alpha753' },
-    { id: 'op2',  scriptName: 'beta78732' }
+    { id: 'op1',  label: 'alpha753' },
+    { id: 'op2',  label: 'beta78732' }
   ]
   const wrapper = shallow(<LiveCodeSandboxSettingsTab
-      selectedOpponent="op2"
+      selectedOpponent={{ id: 'op2',  label: 'beta78732' }}
       opponents={opponents}
     />);
   expect(wrapper.find('#opponent').text()).toMatch(/alpha753/)
   expect(wrapper.find('#opponent').text()).toMatch(/beta78732/)
-  expect(wrapper.find('#opponent').props().value).toBe('op2');
+  expect(wrapper.find('#opponent').props().value).toBe(1);
 });
 
 test('change opponent', () => {
   const opponents = [
-    { id: 'op532234',  scriptName: 'alpha98324' },
-    { id: 'op632243',  scriptName: 'beta77532' }
+    { id: 'op532234',  label: 'alpha98324' },
+    { id: 'op632243',  label: 'beta77532' }
   ];
   const onOpponentChange = jest.fn();
   const wrapper = shallow(<LiveCodeSandboxSettingsTab
-      selectedOpponent="op532234"
+      selectedOpponent={{ id: 'op532234',  label: 'alpha98324' }}
       opponents={opponents}
       onOpponentChange={onOpponentChange}
     />);
-  wrapper.find('#opponent').simulate('change', {target: { value : 'op632243'}});
+  wrapper.find('#opponent').simulate('change', {target: { value : 1}});
   expect(onOpponentChange.mock.calls).toHaveLength(1);
-  expect(onOpponentChange.mock.calls[0][0]).toBe('op632243');
+  expect(onOpponentChange.mock.calls[0][0]).toHaveProperty('id', 'op632243');
 });
 
 test('change mode', () => {
@@ -64,8 +64,8 @@ test('lock rng', () => {
   expect(onRngLock.mock.calls[0][0]).toBe(true);
 
   onRngLock.mockReset();
-wrapper.find('#lock').simulate('change', {target: { checked : false}});
-expect(onRngLock.mock.calls).toHaveLength(1);
-expect(onRngLock.mock.calls[0][0]).toBe(false);
+  wrapper.find('#lock').simulate('change', {target: { checked : false}});
+  expect(onRngLock.mock.calls).toHaveLength(1);
+  expect(onRngLock.mock.calls[0][0]).toBe(false);
 
 });
diff --git a/packages/jsbattle-webpage/src/containers/SandboxScreen.js b/packages/jsbattle-webpage/src/containers/SandboxScreen.js
@@ -11,7 +11,7 @@ import {
 } from '../actions/statsAction.js';
 import {
   getAiScript,
-  getSandboxAiScriptList,
+  getSandboxOpponentList,
   updateAiScript,
   renameAiScript,
   setSandboxOpponent,
@@ -47,16 +47,17 @@ export class SandboxScreen extends React.Component {
   componentDidMount() {
     let id = this.props.match.params.name;
     this.props.getAiScript(id, this.props.useRemoteService);
-    this.props.getSandboxAiScriptList(this.props.useRemoteService);
+    this.props.getSandboxOpponentList(this.props.useRemoteService);
     this.props.notifySandboxEdit();
     this.log('SandboxScreen mounted');
   }
 
   shouldComponentUpdate(nextProps) {
     if(!this.state.isRunning) return true;
+
     if(
       this.props.mode != nextProps.mode ||
-      this.props.opponent.type != nextProps.opponent.type ||
+      this.props.opponent.source != nextProps.opponent.source ||
       this.props.opponent.name != nextProps.opponent.name
     ) {
       this.updateAiDefList(nextProps.mode, nextProps.opponent);
@@ -71,13 +72,16 @@ export class SandboxScreen extends React.Component {
 
     for(let i=0; i < count; i++) {
       let aiDef = JsBattle.createAiDefinition();
-      switch(opponent.type) {
+      switch(opponent.source) {
         case 'bundled':
           aiDef.fromFile(opponent.name);
           break;
-        case 'user':
+        case 'local_user':
+        case 'remote_user':
           aiDef.fromCode(opponent.name, opponent.code);
           break;
+        default:
+          throw new Error(`Unsupported source: ${opponent.source}`);
       }
       aiDefList.push(aiDef);
     }
@@ -99,9 +103,8 @@ export class SandboxScreen extends React.Component {
     this.props.updateAiScript(this.props.script.id, code, this.props.useRemoteService);
   }
 
-  onOpponentChange(value) {
-    value = value.split('/');
-    this.props.setSandboxOpponent(value[0], value[1]);
+  onOpponentChange(opponent) {
+    this.props.setSandboxOpponent(opponent.source, opponent.id);
   }
 
   onBattleFinish(result) {
@@ -133,35 +136,20 @@ export class SandboxScreen extends React.Component {
 
   renderSettingsTab() {
     let selectedOpponent;
-    if(this.props.opponent.type == 'user' && this.props.opponent.name == this.props.script.scriptName) {
-      selectedOpponent = 'bundled/dummy';
+    if((this.props.opponent.source == 'local_user' || this.props.opponent.source == 'remote_user') && this.props.opponent.name == this.props.script.scriptName) {
+      selectedOpponent = {source: 'bundled', id: 'dummy'};
     } else {
-      selectedOpponent = this.props.opponent.type + "/" + this.props.opponent.name;
+      selectedOpponent = {source: this.props.opponent.source, id: this.props.opponent.id};
     }
 
-    let userTankList = this.props.userTankList
-      .filter((script) => script.scriptName != this.props.script.scriptName)
-      .map((row) => ({
-        id: 'user/' + row.scriptName,
-        scriptName: row.scriptName,
-        bundled: false
-      }));
-    let bundledTankList = this.props.bundledTankList
-      .map((name) => ({
-        id: 'bundled/' + name,
-        scriptName: 'Bundled: ' + name,
-        bundled: true
-      }));
-    let opponents = bundledTankList.concat(userTankList);
-
     return <LiveCodeSandboxSettingsTab
       rngSeed={this.state.rngSeed}
       isRngLocked={this.props.lockRng}
       mode={this.props.mode}
-      opponents={opponents}
+      opponents={this.props.opponentList}
       selectedOpponent={selectedOpponent}
       onBattleModeChange={(isTeam) => this.props.setSandboxBattleMode(isTeam)}
-      onOpponentChange={(id) => this.onOpponentChange(id)}
+      onOpponentChange={(opponent) => this.onOpponentChange(opponent)}
       onRngLock={(locked) => this.props.lockSandboxRng(locked)}
     />;
   }
@@ -246,10 +234,9 @@ SandboxScreen.defaultProps = {
   logging: true,
   simQuality: 'auto',
   simSpeed: 1,
-  userTankList: [],
-  bundledTankList: [],
+  opponentList: [],
   opponent: {
-    type: 'user',
+    source: 'local_user',
     name: "dummy",
     code: "importScripts('lib/tank.js'); tank.init(function(settings, info) { }); tank.loop(function(state, control) { });",
   },
@@ -266,7 +253,7 @@ SandboxScreen.defaultProps = {
   setSandboxBattleMode: () => {},
   lockSandboxRng: () => {},
   notifySandboxEdit: () => {},
-  getSandboxAiScriptList: () => {},
+  getSandboxOpponentList: () => {},
 };
 
 SandboxScreen.propTypes = {
@@ -276,8 +263,7 @@ SandboxScreen.propTypes = {
   useRemoteService: PropTypes.bool,
   logging: PropTypes.bool,
   simSpeed: PropTypes.number,
-  userTankList: PropTypes.array,
-  bundledTankList: PropTypes.array,
+  opponentList: PropTypes.array,
   opponent: PropTypes.object,
   script: PropTypes.object,
   mode: PropTypes.oneOf(['duel', 'team']),
@@ -288,16 +274,15 @@ SandboxScreen.propTypes = {
   setSandboxBattleMode: PropTypes.func,
   lockSandboxRng: PropTypes.func,
   notifySandboxEdit: PropTypes.func,
-  getSandboxAiScriptList: PropTypes.func,
+  getSandboxOpponentList: PropTypes.func,
 };
 
 const mapStateToProps = (state) => ({
   isLoading: state.loading.AI_SCRIPT || state.loading.SANDBOX_AI_SCRIPT_LIST,
   isRenameLoading: state.loading.AI_SCRIPT_RENAME,
   simQuality: state.settings.simQuality,
   simSpeed: state.settings.simSpeed,
-  userTankList: state.aiRepo.tankList,
-  bundledTankList: state.sandbox.tankList,
+  opponentList: state.sandbox.opponentList,
   opponent: state.sandbox.opponent,
   mode: state.sandbox.mode,
   lockRng: state.sandbox.lockRng,
@@ -309,8 +294,8 @@ const mapDispatchToProps = (dispatch) => ({
   getAiScript: (name, useRemoteService) => {
     dispatch(getAiScript(name, useRemoteService));
   },
-  getSandboxAiScriptList: (useRemoteService) => {
-    dispatch(getSandboxAiScriptList(useRemoteService));
+  getSandboxOpponentList: (useRemoteService) => {
+    dispatch(getSandboxOpponentList(useRemoteService));
   },
   updateAiScript: (id, code, useRemoteService) => {
     dispatch(updateAiScript(id, code, useRemoteService));
diff --git a/packages/jsbattle-webpage/src/containers/test/SandboxScreen.spec.js b/packages/jsbattle-webpage/src/containers/test/SandboxScreen.spec.js
diff --git a/packages/jsbattle-webpage/src/reducers/sandboxReducer.js b/packages/jsbattle-webpage/src/reducers/sandboxReducer.js
diff --git a/packages/jsbattle-webpage/src/reducers/test/sandboxReducer.spec.js b/packages/jsbattle-webpage/src/reducers/test/sandboxReducer.spec.js

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,8 @@ class UserStoreService extends Service {`
`85`	`85`	`}`
`86`	`86`	`const reservedNames = [`
`87`	`87`	`'jsbattle',`
	`88`	`+ 'sandbox',`
	`89`	`+ 'user',`
`88`	`90`	`'admin'`
`89`	`91`	`];`
`90`	`92`	`const isNameReserved = reservedNames.indexOf(username.toLowerCase()) != -1;`