update wxcode

public/react/src/modules/wxcode/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-15 09:56:34
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-17 15:34:40
+ * @LastEditTime : 2020-01-17 21:03:15
  */
 import './index.scss';
 import React, {useState, useEffect, useRef} from 'react';
@@ -22,6 +22,10 @@ const App = (props) => {
     wxCode,
     path,
     showLoading,
+    showDialog,
+    gold,
+    experience,
+    next_game,
     // userCode,
     testCase = [],
     getWXCode,
@@ -34,7 +38,8 @@ const App = (props) => {
     updateWXCodeForInterval,
     evaluateWxCode,
     showWXCodeTextCase,
-    changeWXCodeEvaluateLoading
+    changeWXCodeEvaluateLoading,
+    changeWXCodeEvaluateDialog
   } = props; 
 
   const {identifier} = props.match.params;
@@ -63,18 +68,22 @@ const App = (props) => {
   // const [isVisible, setIsVisible] = useState(false);
   const editorRef = useRef(null);
   let timer = null;
+
+  const loadResult = (identifier) => {
+    // 加载代码块内容
+    getWXCode(identifier);
+    // 加载测试集
+    const params = {
+      path,
+      status: 0,
+      retry: 1
+    };
+    getWXCodeTestCase(identifier, params);
+  }
   useEffect(() => {
     setTimeout(() => {
       setCookier();
-      // 加载代码块内容
-      getWXCode(identifier, );
-      // 加载测试集
-      const params = {
-        path,
-        status: 0,
-        retry: 1
-      };
-      getWXCodeTestCase(identifier, params);
+      loadResult(identifier);
     }, 0);
   }, []);
   // 关闭
@@ -109,7 +118,7 @@ const App = (props) => {
         timer = null;
         // 调用更新代码
         updateWXCodeForInterval(identifier, path);
-      }, 10000);
+      }, 5000);
     }
   } 
 
@@ -130,12 +139,30 @@ const App = (props) => {
     changeWXCodeEvaluateLoading(true);
     evaluateWxCode(identifier, path);
   }
+
+  // 关闭弹框
+  const handleCloseDialog = () => {
+    changeWXCodeEvaluateDialog(false);
+  }
+
+  // 查看测试集
+  const handleClickShowResult = () => {
+    showWXCodeTextCase(true);
+    changeWXCodeEvaluateDialog(false);
+  }
+
+  // 下一关
+  const handleClickNext = () => {
+    changeWXCodeEvaluateDialog(false);
+    loadResult(next_game);
+  }
   
   const tcclasses = isShow ? `wx-code-test-case active` : 'wx-code-test-case';
   const loading = showLoading ? 'code-evaluate-loading active' : 'code-evaluate-loading';
-  const _val = sets_error_count === 0;
+  const dialog = showDialog ? 'pass-dialog active' : 'pass-dialog';
+  const _val = +sets_error_count === 0;
   let resultTxt = (_val) ? '全部通过' : `${sets_error_count}组测试结果不匹配`;
-  const iclasses = _val ? 'iconfont icon-tishi1 icon success' : 'iconfont icon-tishi1 icon fail';
+  const iclasses = _val ? 'iconfont icon-wancheng icon success' : 'iconfont icon-tishi1 icon fail';
   const tclasses = _val ? 'result-txt success' : 'result-txt fail';
   const ulClasses = last_compile_output ? 'case-list hasResult' : 'case-list';
   return (
@@ -150,7 +177,7 @@ const App = (props) => {
             options={{
               selectOnLineNumbers: true,
               automaticLayout: true,
-              fontSize: `32px`
+              fontSize: `36px`
             }}
             theme='dark'
             editorDidMount={handleEditorChange}
@@ -199,7 +226,7 @@ const App = (props) => {
                         测试集{i + 1}
                       </h2>
                       {
-                        is_public
+                        is_public && last_compile_output
                           ? (result 
                               ? <span className="iconfont icon-wancheng case_item_success"></span>
                               : <span className="iconfont icon-jinggao1 case_item_fail"></span>)
@@ -249,6 +276,34 @@ const App = (props) => {
           <span className="loading-txt">测评中...</span>
         </span>
       </div>
+      {/* 通过弹框 */}
+      <div className={dialog}>
+        <div className="pass-box">
+          <div className="pass-img"></div>
+          <div className="pass-ctx">
+          <div className="pass-title">{next_game ? '评测通过' : '恭喜通关'}</div>
+            <p className="pass-value">
+              金币 <span className="value_color">{gold > 0 ? `+${gold}` : 0}</span>,
+              经验值 <span className="value_color">{experience > 0 ? `+${experience}` : 0}</span>
+            </p>
+            {
+              next_game 
+                ? (
+                  <div className="pass-btn">
+                    <button className="btn btn-first" onClick={handleClickShowResult}>评测结果</button>
+                    <button className="btn btn-second" onClick={handleClickNext}>下一关</button>
+                  </div>
+                )
+                : (
+                  <div className="pass-btn-all">
+                    <button className="btn btn-second" onClick={handleClickShowResult}>评测结果</button>
+                  </div>
+                )
+            }
+          </div>
+        </div>
+        <i className="iconfont icon-roundclose icon_close" onClick={handleCloseDialog}></i>
+      </div>
     </div>
   );
 }
@@ -259,8 +314,12 @@ const mapStateToProps = (state) => {
     isShow,
     wxCode,
     userCode,
+    gold,
+    experience,
+    next_game,
     testCase,
     showLoading,
+    showDialog,
     last_compile_output,
     test_sets_count,
     sets_error_count
@@ -271,8 +330,12 @@ const mapStateToProps = (state) => {
     isShow,
     wxCode,
     userCode,
+    gold,
+    experience,
+    next_game,
     testCase,
     showLoading,
+    showDialog,
     last_compile_output,
     test_sets_count,
     sets_error_count
@@ -287,7 +350,8 @@ const mapDispatchToProps = (dispatch) => ({
   updateWXCodeForInterval: (identifier, path) => dispatch(actions.updateWXCodeForInterval(identifier, path)),
   evaluateWxCode: (identifier, path) => dispatch(actions.evaluateWxCode(identifier, path)),
   showWXCodeTextCase: (flag) => dispatch(actions.showWXCodeTextCase(flag)),
-  changeWXCodeEvaluateLoading: (flag) => dispatch(actions.changeWXCodeEvaluateLoading(flag))
+  changeWXCodeEvaluateLoading: (flag) => dispatch(actions.changeWXCodeEvaluateLoading(flag)),
+  changeWXCodeEvaluateDialog: (flag) => dispatch(actions.changeWXCodeEvaluateDialog(flag))
 });
 
 export default connect(

public/react/src/modules/wxcode/index.scss

@@ -28,12 +28,16 @@
       align-items: center;
       .icon{
         // font-size: 24px !important;
+        // transform: scale(2.4);
+        // line-height: 2;
+        font-size: 32px !important;
         transform: scale(2);
-        line-height: 2;
-      }
-      .icon-reset{
-        transform: scale(2.4);
+        position: relative;
+        top: 10px;
       }
+      // .icon-reset{
+      //   transform: scale(2.4);
+      // }
       // .icon:first-child{
       //   transform: scale((3));
       // }
@@ -42,7 +46,7 @@
         margin-left: 50px;
       }
       .icon-txt{
-        font-size: 24px;
+        font-size: 32px;
       }
     }
   }
@@ -53,7 +57,7 @@
     border-radius: 9999px;
     padding: 0 40px;
     line-height: 72px;
-    font-size: 32px;
+    font-size: 36px;
     color: #fff;
     background:#2EA4FF;
   }
@@ -99,10 +103,12 @@
       border-bottom: 2px solid #213857;
       .header-title{
         color:#637DA6;
-        font-size: 24px; 
+        // font-size: 24px; 
+        font-size: 36px;
       }
       .header-close{
-        font-size: 28px;
+        // font-size: 28px;
+        font-size: 36px;
         color: #2EA4FF;
       }
     }
@@ -126,7 +132,8 @@
         margin-right: 10px;
       }
       .result-txt{
-        font-size: 34px;
+        // font-size: 34px;
+        font-size: 36px;
       }
       .result-txt-desc{
         max-width: 500px;
@@ -162,7 +169,7 @@
           margin-top: 0;
         }
       }
-      
+
       .case-item-header{
         display: flex;
         justify-content: space-between;
@@ -185,14 +192,14 @@
       }
 
       .item-header-desc{
-        font-size: 32px;
+        font-size: 36px;
         color: #405D8C;
         line-height: 1.5;
         // background: gold;
         .icon{
           position: relative;
           top: -4px;
-          font-size: 32px !important;
+          font-size: 36px !important;
           margin-right: 10px;
         }
         &.active{
@@ -234,7 +241,8 @@
       // }
     }
   }
-  .code-evaluate-loading{
+  .code-evaluate-loading,
+  .pass-dialog{
     display: none;
     position: fixed;
     left: 0;
@@ -250,7 +258,12 @@
       content: '';
       background: rgba(0,0,0,.5);
     }
-
+    &.active{
+      display: flex;
+    }
+  }
+  .code-evaluate-loading{
+    // display: none;
     .loading-flex{
       display: flex;
       position: absolute;
@@ -264,12 +277,84 @@
         font-size: 100px !important;
       }
       .loading-txt{
-        font-size: 32px;
+        font-size: 36px;
       }
     }
-
-    &.active{
+  }
+  .pass-dialog{
+    flex-direction: column;
+    .pass-box{
+      position: relative;
+      z-index: 10;
+      background: #fff;
+      border-radius: 15px;
+      width: 490px;
+      height: 490px;
+      overflow: hidden;
+    }
+    .pass-img{
+      height: 200px;
+      background: url(../../images/wx-head.png) center center no-repeat;
+      // background: url(../../../public/images/wx-head.png) center center no-repeat;
+    }
+    .pass-ctx{
       display: flex;
+      flex-direction: column;
+      // justify-content: center;
+      justify-content: space-between;
+      align-items: center;
+      height: 290px;
+      padding: 40px 0;
+      .pass-title,
+      .pass-value,
+      .pass-btn .btn,
+      .pass-btn-all .btn{
+        font-size: 36px;
+        line-height: 1.5;
+      }
+      .pass-value{
+        color: #888888;
+        .value_color{
+          color: rgb(234, 185, 35);
+        }
+      } 
+      .pass-btn,
+      .pass-btn-all{
+        display: flex;
+        justify-content: space-between;
+        // background: gold;
+        padding: 0 40px;
+        width: 100%;
+        margin-top: 10px;
+      }
+      .pass-btn-all{
+        justify-content: center;
+      }
+      .btn{
+        outline: none;
+        border-radius: 999px;
+        padding: 0 30px;
+        height: 70px;
+        &.btn-first{
+          border: 1px solid #2EA4FF;
+          color: #2EA4FF;
+        }
+        &.btn-second{
+          background-color: #2EA4FF;
+          color: #fff;
+        }
+      }
+
+      .pass-title{
+        color: #2EA4FF;
+      }
     }
   }
+  .icon_close{
+    display: block;
+    position: relative;
+    z-index: 10;
+    color: #555;
+    font-size: 100px!important;
+  }
 }

public/react/src/redux/actions/actionTypes.js

@@ -99,7 +99,9 @@ const types = {
   UPDATE_WXCODE_BY_IDENTIFIER: 'UPDATE_WXCODE_BY_IDENTIFIER',
   UPDATE_WXCODE_FOR_EDITOR: 'UPDATE_WXCODE_FOR_EDITOR',
   IS_SHOW_WXCODE_TEST_CASES: 'IS_SHOW_WXCODE_TEST_CASES',
-  SHOW_WX_CODE_LOADING: 'SHOW_WX_CODE_LOADING'
+  SHOW_WX_CODE_LOADING: 'SHOW_WX_CODE_LOADING',
+  SHOW_WX_CODE_DIALOG: 'SHOW_WX_CODE_DIALOG',
+  SET_GOLD_AND_EXPERIENCE: 'SET_GOLD_AND_EXPERIENCE'
 }
 
 export default types;

public/react/src/redux/actions/index.js

@@ -118,7 +118,8 @@ import {
   updateWXCodeForInterval,
   evaluateWxCode,
   showWXCodeTextCase,
-  changeWXCodeEvaluateLoading
+  changeWXCodeEvaluateLoading,
+  changeWXCodeEvaluateDialog
 } from './wxCode';
 export default {
   toggleTodo,
@@ -211,5 +212,6 @@ export default {
   updateWXCodeForInterval,
   evaluateWxCode,
   showWXCodeTextCase,
-  changeWXCodeEvaluateLoading
+  changeWXCodeEvaluateLoading,
+  changeWXCodeEvaluateDialog
 }

public/react/src/redux/actions/wxCode.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-15 15:41:10
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-16 15:25:25
+ * @LastEditTime : 2020-01-17 21:06:46
  */
 import types from './actionTypes.js';
 import {
@@ -38,6 +38,7 @@ export const getWXCodeTestCase = (identifier, params) => {
       try{
         const {data = {}} = res;
         console.log(data.test_sets);
+        const _path = data.challenge.path;
         dispatch({
           type: types.GET_WXCODE_TEST_CASE,
           payload: {
@@ -45,7 +46,7 @@ export const getWXCodeTestCase = (identifier, params) => {
             game_id: data.game && data.game.id,
             myIdentifier: data.myshixun.identifier,
             exec_time: data.challenge.exec_time,
-            path: data.challenge.path,
+            path: _path.split('；')[0] || _path.split(';')[0],
             last_compile_output: data.last_compile_output,
             test_sets_count: data.test_sets_count,
             sets_error_count: data.sets_error_count
@@ -103,6 +104,7 @@ export const evaluateWxCode = (identifier, path) => {
   return (dispatch, getState) => {
     const {
       userCode,
+      wxCode,
       game_id,
       myIdentifier,
       exec_time,
@@ -115,61 +117,90 @@ export const evaluateWxCode = (identifier, path) => {
       // build 
       // const {} = res;
       console.log(res);
+      const _resubmit = res.data.resubmit;
       const params = {
-        content_modified: 1,
-        sec_key: res.data.sec_key
+        first: 1,
+        content_modified: userCode !== wxCode ? 1 : 0,
+        sec_key: res.data.sec_key,
+        resubmit: _resubmit
       }
-      console.log(params);
-      fetchWxCodeGameBuild(identifier, params).then(res => {
-        if (res.data.status === 1) {
-          // 定时调用 game_status fetchWxCodeGameStatus
-          let count = 1;
-          const intervalTime = 500;
-          function wxCodeGameStatus (intervalTime, finalTime, count, timer) {
-            const excuteTime = (count++) * intervalTime; // 当前执行时间
-            console.log(finalTime, count, excuteTime);
-            fetchWxCodeGameStatus(identifier).then(r => {
-              const { status, test_sets = [] } = r.data;
-              if (+status > -1 || ((excuteTime / 1000) > (finalTime + 1))) {
-                clearInterval(timer);
-                timer = null;
+
+      setTimeout(() => {
+        // console.log(params);
+        fetchWxCodeGameBuild(identifier, params).then(res => {
+          const {status} = res.data;
+          if (status === 1) {
+            // 定时调用 game_status fetchWxCodeGameStatus
+            let count = 1;
+            const intervalTime = 500;
+            function wxCodeGameStatus (intervalTime, finalTime, count, timer) {
+              const excuteTime = (count++) * intervalTime; // 当前执行时间
+              console.log(finalTime, count, excuteTime);
+              fetchWxCodeGameStatus(identifier, {resubmit: _resubmit}).then(r => {
+                const { status, test_sets = [], gold, experience, next_game, sets_error_count } = r.data;
+                if (+status > -1 || ((excuteTime / 1000) > (finalTime + 1))) {
+                  clearInterval(timer);
+                  timer = null;
+                  dispatch({
+                    type: types.SHOW_WX_CODE_LOADING,
+                    payload: false
+                  });
+                  setTimeout(() => {
+                    // 显示测试集弹框
+                    // dispatch({
+                    //   type: types.IS_SHOW_WXCODE_TEST_CASES,
+                    //   payload: true
+                    // });
+                    // 评测是否通过， 通过 弹通过，否则 弹测试集
+                    if (status === 2 && sets_error_count === 0) {
+                      dispatch({
+                        type: types.SET_GOLD_AND_EXPERIENCE,
+                        payload: {
+                          gold,
+                          experience,
+                          next_game
+                        }
+                      });
+                      dispatch({
+                        type: types.SHOW_WX_CODE_DIALOG,
+                        payload: true
+                      });
+                      
+                    } else {
+                      dispatch({
+                        type: types.IS_SHOW_WXCODE_TEST_CASES,
+                        payload: true
+                      });
+                    }
+                    dispatch({
+                      type: types.GET_WXCODE_TEST_CASE,
+                      payload: {
+                        test_sets,
+                        game_id,
+                        myIdentifier,
+                        exec_time,
+                        path,
+                        last_compile_output,
+                        test_sets_count,
+                        sets_error_count
+                      }
+                    });
+                  }, 50);
+                }
+              }).catch(err => {
                 dispatch({
                   type: types.SHOW_WX_CODE_LOADING,
                   payload: false
                 });
-                setTimeout(() => {
-                  // 显示测试集弹框
-                  dispatch({
-                    type: types.IS_SHOW_WXCODE_TEST_CASES,
-                    payload: true
-                  });
-                  dispatch({
-                    type: types.GET_WXCODE_TEST_CASE,
-                    payload: {
-                      test_sets,
-                      game_id,
-                      myIdentifier,
-                      exec_time,
-                      path,
-                      last_compile_output,
-                      test_sets_count,
-                      sets_error_count
-                    }
-                  });
-                }, 50);
-              }
-            }).catch(err => {
-              dispatch({
-                type: types.SHOW_WX_CODE_LOADING,
-                payload: false
               });
-            });
+            }
+            let timer = setInterval(() => {
+              wxCodeGameStatus(intervalTime, exec_time, count++, timer);
+            }, intervalTime);
           }
-          let timer = setInterval(() => {
-            wxCodeGameStatus(intervalTime, exec_time, count++, timer);
-          }, intervalTime);
-        }
-      })
+        })
+      }, 50);
+      
     }).catch(err => {
       dispatch({
         type: types.SHOW_WX_CODE_LOADING,
@@ -193,4 +224,12 @@ export const changeWXCodeEvaluateLoading = (flag) => {
     type: types.SHOW_WX_CODE_LOADING,
     payload: flag
   }
-}
+}
+
+// 关闭对话框
+export const changeWXCodeEvaluateDialog = (flag) => {
+  return {
+    type: types.SHOW_WX_CODE_DIALOG,
+    payload: flag
+  }
+}

public/react/src/redux/reducers/wxcodeReducer.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-15 15:37:44
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-16 15:22:37
+ * @LastEditTime : 2020-01-17 19:50:00
  */
 import types from "../actions/actionTypes";
 const initialState = {
@@ -19,7 +19,11 @@ const initialState = {
   sets_error_count: 0,
   path: '',
   isShow: false,
-  showLoading: false
+  showLoading: false,
+  showDialog: false,
+  gold: 0,
+  experience: 0,
+  next_game: ''
 };
 
 const wxcodeReducer = (state = initialState, action) => {
@@ -58,6 +62,18 @@ const wxcodeReducer = (state = initialState, action) => {
         ...state,
         showLoading: payload
       }
+    case types.SHOW_WX_CODE_DIALOG:
+      return {
+        ...state,
+        showDialog: payload
+      }
+    case types.SET_GOLD_AND_EXPERIENCE:
+      return {
+        ...state,
+        gold: payload.gold,
+        experience: payload.experience,
+        next_game: payload.next_game
+      }
     default:
       return {
         ...state

public/react/src/services/wxcodeService.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2020-01-15 15:44:36
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-17 16:40:03
+ * @LastEditTime : 2020-01-17 20:39:13
  */
 import axios from 'axios';
 import cookie from 'react-cookies'
@@ -69,9 +69,9 @@ export async function fetchWxCodeGameBuild (identifier, params) {
   return axios.get(url, {params});
 }
 
-export async function fetchWxCodeGameStatus (identifier) {
+export async function fetchWxCodeGameStatus (identifier, params) {
   setCookier();
   const url = `/tasks/${identifier}/game_status.json`;
-  const params = Object.assign({}, {withCredentials: true});
+  params = Object.assign({}, params, {withCredentials: true});
   return axios.get(url, {params});
 }