8. 创建对战列表与排行榜页面

backendCloud/backend/src/main/java/com/kob/backend/config/MybatisConfig.java

@@ -0,0 +1,17 @@
+package com.kob.backend.config;
+
+import com.baomidou.mybatisplus.annotation.DbType;
+import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
+import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class MybatisConfig {
+    @Bean
+    public MybatisPlusInterceptor mybatisPlusInterceptor() {
+        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
+        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
+        return interceptor;
+    }
+}

backendCloud/backend/src/main/java/com/kob/backend/config/filter/JwtAuthenticationTokenFilter.java

@@ -4,8 +4,8 @@ package com.kob.backend.config.filter;
  * @author zfp
  */
 import com.kob.backend.mapper.UserMapper;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
 import com.kob.backend.utils.JwtUtil;
 import io.jsonwebtoken.Claims;
 import org.jetbrains.annotations.NotNull;

backendCloud/backend/src/main/java/com/kob/backend/consumer/WebSocketServer.java

@@ -3,8 +3,8 @@ package com.kob.backend.consumer;
 import com.alibaba.fastjson.JSONObject;
 import com.kob.backend.consumer.utils.Game;
 import com.kob.backend.consumer.utils.JwtAuthentication;
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.User;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.User;
 import com.kob.backend.mapper.BotMapper;
 import com.kob.backend.mapper.RecordMapper;
 import com.kob.backend.mapper.UserMapper;
@@ -14,14 +14,11 @@ import org.springframework.util.LinkedMultiValueMap;
 import org.springframework.util.MultiValueMap;
 import org.springframework.web.client.RestTemplate;
 
-import javax.swing.plaf.PanelUI;
 import javax.websocket.*;
 import javax.websocket.server.PathParam;
 import javax.websocket.server.ServerEndpoint;
 import java.io.IOException;
-import java.util.Iterator;
 import java.util.concurrent.ConcurrentHashMap;
-import java.util.concurrent.CopyOnWriteArraySet;
 
 /**
  * @author zfp
@@ -39,7 +36,7 @@ public class WebSocketServer {
     public Game game = null;
 
     // 注入userMapper(和之前的有点不一样)
-    private static UserMapper userMapper;
+    public static UserMapper userMapper;
     // 注入RecordMapper
     public static RecordMapper recordMapper;
     // 注入BotMapper

backendCloud/backend/src/main/java/com/kob/backend/consumer/utils/Game.java

@@ -2,8 +2,9 @@ package com.kob.backend.consumer.utils;
 
 import com.alibaba.fastjson.JSONObject;
 import com.kob.backend.consumer.WebSocketServer;
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.Record;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.Record;
+import com.kob.backend.pojo.User;
 import org.springframework.util.LinkedMultiValueMap;
 import org.springframework.util.MultiValueMap;
 
@@ -243,7 +244,32 @@ public class Game extends Thread {
         return res.toString();
     }
 
+    // 更新用户的积分
+    private void updateUserRating(Player player,Integer rating) {
+        User user = WebSocketServer.userMapper.selectById(player.getId());
+        user.setRating(rating);
+        WebSocketServer.userMapper.updateById(user);
+    }
+
+
+    // 将对局记录存入数据库
     private void saveRecords() {
+        Integer ratingA = WebSocketServer.userMapper.selectById(playerA.getId()).getRating();
+        Integer ratingB = WebSocketServer.userMapper.selectById(playerB.getId()).getRating();
+
+        if("A".equals(loser)) {
+            ratingA -= 2; // 输者减两分
+            ratingB += 5; // 赢者加5分
+        }else if ("B".equals(loser)) {
+            ratingA += 5;
+            ratingB -= 2;
+        }
+
+        // 更新两个用户的积分
+        updateUserRating(playerA,ratingA);
+        updateUserRating(playerB,ratingB);
+
+
         Record record = new Record(
                 null,
                 playerA.getId(),
@@ -261,6 +287,8 @@ public class Game extends Thread {
         WebSocketServer.recordMapper.insert(record);
     }
 
+
+
     private void sendResult() { // 向两个client发送结果
         JSONObject resp = new JSONObject();
         resp.put("event", "result");

backendCloud/backend/src/main/java/com/kob/backend/controller/pk/ReceiveBotController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.pk;
 
-import com.kob.backend.controller.service.pk.ReceiveBotMoveService;
+import com.kob.backend.service.pk.ReceiveBotMoveService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.util.MultiValueMap;
 import org.springframework.web.bind.annotation.PostMapping;

backendCloud/backend/src/main/java/com/kob/backend/controller/pk/StartGameController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.pk;
 
-import com.kob.backend.controller.service.pk.StartGameService;
+import com.kob.backend.service.pk.StartGameService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.util.MultiValueMap;
 import org.springframework.web.bind.annotation.PostMapping;

backendCloud/backend/src/main/java/com/kob/backend/controller/ranklist/GetRankListController.java

@@ -0,0 +1,25 @@
+package com.kob.backend.controller.ranklist;
+
+import com.alibaba.fastjson.JSONObject;
+import com.kob.backend.service.ranklist.GetRankListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.MultiValueMap;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Map;
+import java.util.Objects;
+
+@RestController
+public class GetRankListController {
+    @Autowired
+    private GetRankListService getRankListService;
+
+    @GetMapping("/ranklist/getlist/")
+    public JSONObject getList(@RequestParam Map<String,String> data) {
+        Integer page = Integer.parseInt(data.get("page"));
+        return getRankListService.getList(page);
+    }
+
+}

backendCloud/backend/src/main/java/com/kob/backend/controller/record/GetRecordListController.java

@@ -0,0 +1,24 @@
+package com.kob.backend.controller.record;
+
+import com.alibaba.fastjson.JSONObject;
+import com.kob.backend.service.record.GetRecordListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.MultiValueMap;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.Objects;
+
+@RestController
+public class GetRecordListController {
+    @Autowired
+    private GetRecordListService getRecordListService;
+
+    @GetMapping("/record/list/")
+    public JSONObject getList(@RequestParam MultiValueMap<String,String> data) {
+        Integer page = Integer.parseInt(Objects.requireNonNull(data.getFirst("page")));
+        return getRecordListService.getList(page);
+    }
+
+}

backendCloud/backend/src/main/java/com/kob/backend/controller/user/account/InfoServiceController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.user.account;
 
-import com.kob.backend.controller.service.user.account.InfoService;
+import com.kob.backend.service.user.account.InfoService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;

backendCloud/backend/src/main/java/com/kob/backend/controller/user/account/LoginController.java

@@ -1,12 +1,11 @@
 package com.kob.backend.controller.user.account;
 
-import com.kob.backend.controller.service.user.account.LoginService;
+import com.kob.backend.service.user.account.LoginService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.HashMap;
 import java.util.Map;
 
 /**

backendCloud/backend/src/main/java/com/kob/backend/controller/user/account/RegisterController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.user.account;
 
-import com.kob.backend.controller.service.user.account.RegisterService;
+import com.kob.backend.service.user.account.RegisterService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;

backendCloud/backend/src/main/java/com/kob/backend/controller/user/bot/AddController.java

@@ -1,12 +1,11 @@
 package com.kob.backend.controller.user.bot;
 
-import com.kob.backend.controller.service.user.bot.AddService;
+import com.kob.backend.service.user.bot.AddService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.HashMap;
 import java.util.Map;
 
 /**

backendCloud/backend/src/main/java/com/kob/backend/controller/user/bot/GetListController.java

@@ -1,7 +1,7 @@
 package com.kob.backend.controller.user.bot;
 
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.service.user.bot.GetListService;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.service.user.bot.GetListService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;

backendCloud/backend/src/main/java/com/kob/backend/controller/user/bot/RemoveController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.user.bot;
 
-import com.kob.backend.controller.service.user.bot.RemoveService;
+import com.kob.backend.service.user.bot.RemoveService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;

backendCloud/backend/src/main/java/com/kob/backend/controller/user/bot/UpdateController.java

@@ -1,6 +1,6 @@
 package com.kob.backend.controller.user.bot;
 
-import com.kob.backend.controller.service.user.bot.UpdateService;
+import com.kob.backend.service.user.bot.UpdateService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;

backendCloud/backend/src/main/java/com/kob/backend/mapper/BotMapper.java

@@ -1,7 +1,7 @@
 package com.kob.backend.mapper;
 
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
-import com.kob.backend.controller.pojo.Bot;
+import com.kob.backend.pojo.Bot;
 import org.apache.ibatis.annotations.Mapper;
 
 /**

backendCloud/backend/src/main/java/com/kob/backend/mapper/RecordMapper.java

@@ -1,7 +1,7 @@
 package com.kob.backend.mapper;
 
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
-import com.kob.backend.controller.pojo.Record;
+import com.kob.backend.pojo.Record;
 import org.apache.ibatis.annotations.Mapper;
 
 /**

backendCloud/backend/src/main/java/com/kob/backend/mapper/UserMapper.java

@@ -1,7 +1,7 @@
 package com.kob.backend.mapper;
 
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
-import com.kob.backend.controller.pojo.User;
+import com.kob.backend.pojo.User;
 import org.apache.ibatis.annotations.Mapper;
 
 

backendCloud/backend/src/main/java/com/kob/backend/pojo/Bot.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.pojo;
+package com.kob.backend.pojo;
 
 import com.baomidou.mybatisplus.annotation.IdType;
 import com.baomidou.mybatisplus.annotation.TableId;

backendCloud/backend/src/main/java/com/kob/backend/pojo/Record.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.pojo;
+package com.kob.backend.pojo;
 
 import com.baomidou.mybatisplus.annotation.IdType;
 import com.baomidou.mybatisplus.annotation.TableId;

backendCloud/backend/src/main/java/com/kob/backend/pojo/User.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.pojo;
+package com.kob.backend.pojo;
 
 import com.baomidou.mybatisplus.annotation.IdType;
 import com.baomidou.mybatisplus.annotation.TableId;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/UserDetailsServiceImpl.java

@@ -1,8 +1,8 @@
-package com.kob.backend.controller.service.impl;
+package com.kob.backend.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
 import com.kob.backend.mapper.UserMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.core.userdetails.UserDetails;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/pk/ReceiveBotMoveServiceImpl.java

@@ -1,8 +1,8 @@
-package com.kob.backend.controller.service.impl.pk;
+package com.kob.backend.service.impl.pk;
 
 import com.kob.backend.consumer.WebSocketServer;
 import com.kob.backend.consumer.utils.Game;
-import com.kob.backend.controller.service.pk.ReceiveBotMoveService;
+import com.kob.backend.service.pk.ReceiveBotMoveService;
 import org.springframework.stereotype.Service;
 
 @Service

backendCloud/backend/src/main/java/com/kob/backend/service/impl/pk/StartGameServiceImpl.java

@@ -1,7 +1,7 @@
-package com.kob.backend.controller.service.impl.pk;
+package com.kob.backend.service.impl.pk;
 
 import com.kob.backend.consumer.WebSocketServer;
-import com.kob.backend.controller.service.pk.StartGameService;
+import com.kob.backend.service.pk.StartGameService;
 import org.springframework.stereotype.Service;
 
 @Service

backendCloud/backend/src/main/java/com/kob/backend/service/impl/ranklist/GetRankListServiceImpl.java

@@ -0,0 +1,34 @@
+package com.kob.backend.service.impl.ranklist;
+
+import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.kob.backend.mapper.UserMapper;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.ranklist.GetRankListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+public class GetRankListServiceImpl implements GetRankListService {
+    @Autowired
+    private UserMapper userMapper;
+    @Override
+    public JSONObject getList(Integer page) {
+        JSONObject resp = new JSONObject();
+        IPage<User> userIPage = new Page<>(page,3); // 每页展示3个
+        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
+        queryWrapper.orderByDesc("rating"); // 分值从高到低排序
+        List<User> users = userMapper.selectPage(userIPage,queryWrapper).getRecords();// 返回满足条件的users
+
+        for (User user: users) user.setPassword(""); // 清空用户的密码
+
+        resp.put("users",users);
+        resp.put("users_count",userMapper.selectCount(null));
+
+        return resp;
+    }
+}

backendCloud/backend/src/main/java/com/kob/backend/service/impl/record/GetRecordListServiceImpl.java

@@ -0,0 +1,62 @@
+package com.kob.backend.service.impl.record;
+
+import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.kob.backend.mapper.RecordMapper;
+import com.kob.backend.mapper.UserMapper;
+import com.kob.backend.pojo.Record;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.record.GetRecordListService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.LinkedList;
+import java.util.List;
+
+@Service
+public class GetRecordListServiceImpl implements GetRecordListService {
+    @Autowired
+    private RecordMapper recordMapper;
+
+    @Autowired
+    private UserMapper userMapper;
+
+    @Override
+    public JSONObject getList(Integer page) {
+        IPage<Record> recordIPage = new Page<>(page,8); // page为页号，每页6条记录
+        QueryWrapper<Record> queryWrapper = new QueryWrapper<>();
+        queryWrapper.orderByDesc("id"); // 按id降序排列
+
+        // 选出当前页展现的对局记录
+        List<Record> records = recordMapper.selectPage(recordIPage,queryWrapper).getRecords();
+
+        // 以json格式返回所有对战记录
+        JSONObject resp = new JSONObject(); // 返回的response
+
+        List<JSONObject> items = new LinkedList<>();
+        for (Record r : records) {
+            User userA = userMapper.selectById(r.getAId());
+            User userB = userMapper.selectById(r.getBId());
+
+            JSONObject item = new JSONObject();
+            item.put("a_username",userA.getUsername());
+            item.put("a_photo",userA.getPhoto());
+            item.put("b_username",userB.getUsername());
+            item.put("b_photo",userB.getPhoto());
+            item.put("record",r);
+
+            String result = "平局";
+            if ("A".equals(r.getLoser())) result = userA.getUsername() + "胜";
+            else if ("B".equals(r.getLoser())) result = userB.getUsername() + "胜";
+            item.put("result",result); // 记录对战结果
+
+            items.add(item);
+        }
+
+        resp.put("records",items);
+        resp.put("records_count",recordMapper.selectCount(null));// 对战记录总数
+        return resp;
+    }
+}

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/account/InfoServiceImpl.java

@@ -1,9 +1,8 @@
-package com.kob.backend.controller.service.impl.user.account;
+package com.kob.backend.service.impl.user.account;
 
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.account.InfoService;
-import org.springframework.beans.factory.annotation.Autowired;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.account.InfoService;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.stereotype.Service;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/account/LoginServiceImpl.java

@@ -1,10 +1,10 @@
-package com.kob.backend.controller.service.impl.user.account;
+package com.kob.backend.service.impl.user.account;
 
 
 
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.account.LoginService;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.account.LoginService;
 import com.kob.backend.utils.JwtUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.AuthenticationManager;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/account/RegisterServiceImpl.java

@@ -1,8 +1,8 @@
-package com.kob.backend.controller.service.impl.user.account;
+package com.kob.backend.service.impl.user.account;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.user.account.RegisterService;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.user.account.RegisterService;
 import com.kob.backend.mapper.UserMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.crypto.password.PasswordEncoder;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/bot/AddServiceImpl.java

@@ -1,9 +1,10 @@
-package com.kob.backend.controller.service.impl.user.bot;
+package com.kob.backend.service.impl.user.bot;
 
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.bot.AddService;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.bot.AddService;
 import com.kob.backend.mapper.BotMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
@@ -68,6 +69,14 @@ public class AddServiceImpl implements AddService {
             return map;
         }
 
+        QueryWrapper<Bot> queryWrapper = new QueryWrapper<>();
+        queryWrapper.eq("user_id",user.getId());
+
+        if (botMapper.selectCount(queryWrapper) >= 10) {
+            map.put("error_msg","每名用户最多只能创建10个bot!");
+            return map;
+        }
+
         Date now = new Date();
         Bot bot = new Bot(null, user.getId(), title, description, content, now, now);
         botMapper.insert(bot);

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/bot/GetListServiceImpl.java

@@ -1,17 +1,16 @@
-package com.kob.backend.controller.service.impl.user.bot;
+package com.kob.backend.service.impl.user.bot;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.bot.GetListService;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.bot.GetListService;
 import com.kob.backend.mapper.BotMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.stereotype.Service;
 
-import java.util.ArrayList;
 import java.util.List;
 
 /**

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/bot/RemoveServiceImpl.java

@@ -1,9 +1,9 @@
-package com.kob.backend.controller.service.impl.user.bot;
+package com.kob.backend.service.impl.user.bot;
 
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.bot.RemoveService;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.bot.RemoveService;
 import com.kob.backend.mapper.BotMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/user/bot/UpdateServiceImpl.java

@@ -1,9 +1,9 @@
-package com.kob.backend.controller.service.impl.user.bot;
+package com.kob.backend.service.impl.user.bot;
 
-import com.kob.backend.controller.pojo.Bot;
-import com.kob.backend.controller.pojo.User;
-import com.kob.backend.controller.service.impl.utils.UserDetailsImpl;
-import com.kob.backend.controller.service.user.bot.UpdateService;
+import com.kob.backend.pojo.Bot;
+import com.kob.backend.pojo.User;
+import com.kob.backend.service.impl.utils.UserDetailsImpl;
+import com.kob.backend.service.user.bot.UpdateService;
 import com.kob.backend.mapper.BotMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;

backendCloud/backend/src/main/java/com/kob/backend/service/impl/utils/UserDetailsImpl.java

@@ -1,6 +1,6 @@
-package com.kob.backend.controller.service.impl.utils;
+package com.kob.backend.service.impl.utils;
 
-import com.kob.backend.controller.pojo.User;
+import com.kob.backend.pojo.User;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;

backendCloud/backend/src/main/java/com/kob/backend/service/pk/ReceiveBotMoveService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.pk;
+package com.kob.backend.service.pk;
 
 public interface ReceiveBotMoveService {
     String receiveBotMove(Integer userId,Integer direction);

backendCloud/backend/src/main/java/com/kob/backend/service/pk/StartGameService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.pk;
+package com.kob.backend.service.pk;
 
 import org.springframework.stereotype.Service;
 

backendCloud/backend/src/main/java/com/kob/backend/service/ranklist/GetRankListService.java

@@ -0,0 +1,7 @@
+package com.kob.backend.service.ranklist;
+
+import com.alibaba.fastjson.JSONObject;
+
+public interface GetRankListService {
+    JSONObject getList(Integer page);
+}

backendCloud/backend/src/main/java/com/kob/backend/service/record/GetRecordListService.java

@@ -0,0 +1,7 @@
+package com.kob.backend.service.record;
+
+import com.alibaba.fastjson.JSONObject;
+
+public interface GetRecordListService {
+    JSONObject getList(Integer page); // 传入一个页号
+}

backendCloud/backend/src/main/java/com/kob/backend/service/user/account/InfoService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.account;
+package com.kob.backend.service.user.account;
 
 import java.util.Map;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/account/LoginService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.account;
+package com.kob.backend.service.user.account;
 
 import java.util.Map;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/account/RegisterService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.account;
+package com.kob.backend.service.user.account;
 
 import java.util.Map;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/bot/AddService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.bot;
+package com.kob.backend.service.user.bot;
 
 import java.util.Map;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/bot/GetListService.java

@@ -1,6 +1,6 @@
-package com.kob.backend.controller.service.user.bot;
+package com.kob.backend.service.user.bot;
 
-import com.kob.backend.controller.pojo.Bot;
+import com.kob.backend.pojo.Bot;
 
 import java.util.List;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/bot/RemoveService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.bot;
+package com.kob.backend.service.user.bot;
 
 import java.util.Map;
 

backendCloud/backend/src/main/java/com/kob/backend/service/user/bot/UpdateService.java

@@ -1,4 +1,4 @@
-package com.kob.backend.controller.service.user.bot;
+package com.kob.backend.service.user.bot;
 
 import java.util.Map;
 

web/src/assets/scripts/GameMap.js

@@ -28,7 +28,6 @@ export class GameMap extends AcGameObject {
 
     create_walls() { // 判断是否生成有效的地图
         const g = this.store.state.pk.gamemap;
-
         for (let r = 0; r < this.rows; r++) {
             for (let c = 0; c < this.cols; c++) {
                 if (g[r][c]) {
@@ -40,20 +39,45 @@ export class GameMap extends AcGameObject {
     }
 
     add_listening_events() { // 绑定监听事件
-        this.ctx.canvas.focus(); // 聚焦
-
-        // 蓝方用wsad控制，红方用上右下左控制
-        this.ctx.canvas.addEventListener("keydown", e => {
-            let d = -1;
-            if (e.key === 'w') d = 0;
-            else if (e.key === 'd') d = 1;
-            else if (e.key === 's') d = 2;
-            else if (e.key === 'a') d = 3;
-            this.store.state.pk.socket.send(JSON.stringify({
-                event: "move",
-                direction: d,
-            }));
-        });
+        if (this.store.state.record.is_record === true) { // 播放录像
+            let k = 0;
+            const a_steps = this.store.state.record.a_steps;
+            const b_steps = this.store.state.record.b_steps;
+            const loser = this.store.state.record.record_loser;
+            const [snake0,snake1] = this.snakes;
+
+            let interval_id = setInterval(() => {
+                if (k >= a_steps.length - 1) { // 不回放最后一步，最后一步直接展示结果
+                    if (loser == "all" || loser == "A") {
+                        snake0.status = "die";
+                    }
+                    if (loser == "all" || loser == "B") {
+                        snake1.status = "die";
+                    }
+                    clearInterval(interval_id);
+                }else {
+                    snake0.set_direction(parseInt(a_steps[k]));
+                    snake1.set_direction(parseInt(b_steps[k]));
+                }
+                k++;
+
+            },300);
+        }else {
+            this.ctx.canvas.focus(); // 聚焦
+            // 用wasd控制方向
+            this.ctx.canvas.addEventListener("keydown", e => {
+                let d = -1;
+                if (e.key === 'w') d = 0;
+                else if (e.key === 'd') d = 1;
+                else if (e.key === 's') d = 2;
+                else if (e.key === 'a') d = 3;
+                this.store.state.pk.socket.send(JSON.stringify({
+                    event: "move",
+                    direction: d,
+                }));
+            });
+        }
+       
     }
 
 

web/src/components/ContentField.vue

@@ -13,6 +13,6 @@
 
 <style scoped>
 div.content-field {
-    margin-top: 40px;
+    margin-top: 20px;
 }
 </style>

web/src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import PkIndexView from '../views/pk/PkIndexView'
 import RecordIndexView from '../views/record/RecordIndexView'
+import RecordContentView from "../views/record/RecordContentView"
 import RanklistIndexView from '../views/ranklist/RanklistIndexView'
 import UserBotIndexView from '../views/user/bot/UserBotIndexView'
 import NotFound from '../views/error/NotFound'
@@ -33,6 +34,14 @@ const routes = [
       requestAuth: true,
     },
   },
+  {
+    path: "/record:recordId/",
+    name: "recordContent",
+    component: RecordContentView,
+    meta: {
+      requestAuth: true,
+    },
+  },
   {
     path: "/ranklist/",
     name: "ranklist_index",

web/src/store/index.js

@@ -1,6 +1,7 @@
 import { createStore } from 'vuex'
-import ModuleUser from "./user" // 导入user.js
+import ModuleUser from "./user" 
 import ModulePk from "./pk"
+import ModuleRecord from "./record"
 
 export default createStore({
   state: {
@@ -14,5 +15,6 @@ export default createStore({
   modules: {
     user: ModuleUser,
     pk: ModulePk,
+    record: ModuleRecord,
   }
 })

web/src/store/pk.js

@@ -1,4 +1,3 @@
-
 export default {
     state: { // 全局变量
         status: "matching",  // matching表示匹配界面,playing表示对战界面

web/src/store/record.js

@@ -0,0 +1,29 @@
+export default {
+    state: {
+        is_record: false,
+        a_steps: "",
+        b_steps: "",
+        record_loser: "",
+    },
+    getters: {
+
+    },
+    mutations: { 
+        updateIsRecord(state, is_record) {
+            state.is_record = is_record;
+        },
+        updateSteps(state, data) {
+            state.a_steps = data.a_steps;
+            state.b_steps = data.b_steps;
+        },
+        updateRecordLoser(state,record_loser) {
+            state.record_loser = record_loser;
+        }
+        
+    },
+    actions: { 
+
+    },
+    modules: {
+    }
+}

web/src/views/pk/PkIndexView.vue

@@ -27,6 +27,7 @@ export default {
         const socket_url = `ws://localhost:3000/websocket/${store.state.user.token}/`;
 
         store.commit("updateLoser","none");
+        store.commit("updateIsRecord",false);
 
         let socket = null;
         // 当前组件被加载(点击pk页面)时执行该函数

web/src/views/ranklist/RanklistIndexView.vue

@@ -1,18 +1,133 @@
 <template>
     <ContentField>
-        排行榜
+        <table class="table table-striped table-hover table-sm" style="text-align: center;">
+            <thead>
+                <tr>
+                    <th>玩家</th>
+                    <th>积分</th>
+                </tr>   
+            </thead>
+            <tbody>
+                <tr v-for="user in users" :key="user.id" class=align-middle>
+                    <td>
+                        <img :src="user.photo" alt="" class="user_photo">&nbsp;
+                        <div class="username userA">{{user.username}}</div>
+                    </td>
+                
+                    <td>
+                        {{user.rating}}
+                    </td>
+
+                </tr>
+            </tbody>
+        </table>
+
+         <nav aria-label="...">
+        <ul class="pagination" style="float: right;">
+            <li class="page-item" @click="click_page(-2)">
+                <a class="page-link" href="#">上一页</a>
+            </li>
+            <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
+                <a class="page-link" href="#">{{ page.number }}</a>
+            </li>
+            <li class="page-item" @click="click_page(-1)">
+                <a class="page-link" href="#">下一页</a>
+            </li>
+        </ul>
+        </nav>
+
     </ContentField>
 </template>
 
 <script>
-import ContentField from '../../components/ContentField.vue'
+import ContentField from '../../components/ContentField.vue';
+import { useStore } from 'vuex';
+import $ from 'jquery';
+import { ref } from 'vue';
 
 export default {
     components: {
         ContentField
+    },
+    setup() {
+        const store = useStore();
+        let currentPage = 1;
+        let total_users = 0; // 保存总对局数
+        let users = ref([]); // 保存对战记录
+        let pages = ref([]); // 展示的多个对战页面
+
+        const updatePages = () => {
+            let max_pages = parseInt(Math.ceil(total_users / 3));
+            let new_pages = [];
+            for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+                if (i >= 1 && i <= max_pages) {
+                    new_pages.push({
+                        number: i,
+                        is_active: i === currentPage ? "active" : "",
+                    })
+                }
+            }
+            pages.value = new_pages;
+        }
+
+        const click_page = page => {
+            if (page === -2) page = currentPage - 1;
+            else if (page === -1) page = currentPage + 1;
+            let max_pages = parseInt(Math.ceil(total_users / 3));
+
+            if (page >= 1 && page <= max_pages) {
+                pull_page(page);
+            }
+        }
+
+
+
+        const pull_page = page => {
+            currentPage = page;
+            $.ajax({
+                url: "http://localhost:3000/ranklist/getlist/",
+                type: "GET",
+                data: {
+                    page
+                },
+                headers:{
+                    "Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证
+                },
+                success(resp){
+                    users.value = resp.users;
+                    total_users = resp.users_count;
+                    updatePages();
+                }
+            })
+        }
+
+        pull_page(currentPage);
+
+        return {
+            click_page,
+            users,
+            pages,
+        }
     }
 }
 </script>
 
 <style scoped>
+.user_photo{
+    width: 4vh;
+    border-radius: 50%;
+}
+.username {
+    font-weight: bold;
+    font-size: 1vw;
+}
+
+.userA {
+   color: blue;
+}
+
+.userB {
+    color: red;
+}
+
 </style>

web/src/views/record/RecordContentView.vue

@@ -0,0 +1,19 @@
+<template>
+    <PlayGround />
+</template>
+
+<script>
+import PlayGround from "../../components/PlayGround.vue";
+
+export default {
+    components: {
+        PlayGround,
+    },
+    setup() {
+   
+    }
+  
+}
+</script>
+
+<style scoped></style>

web/src/views/record/RecordIndexView.vue

@@ -1,18 +1,207 @@
 <template>
     <ContentField>
-        对局列表
+        <table class="table table-striped table-hover table-sm align-middle" style="text-align: center;">
+            <thead>
+                <tr>
+                    <th>player A</th>
+                    <th>player B</th>
+                    <th>对战结果</th> 
+                    <th>对战时间</th>
+                    <th>操作</th>
+                </tr>   
+            </thead>
+            <tbody>
+                <tr v-for="record in records" :key="record.record.id" class=align-middle>
+                    <td >
+                        <img :src="record.a_photo" alt="" class="user_photo">&nbsp;
+                        <div class="username userA">{{record.a_username}}</div>
+                    </td>
+                    <td>
+                        <img :src="record.b_photo" alt="" class="user_photo">&nbsp;
+                        <div class="username userB">{{record.b_username}}</div>
+                    </td>
+                    <td>
+                        <div class="info">
+                            {{record.result}}
+                        </div>
+                        
+                    </td>
+
+                    <td>
+                        <div class="info">
+                            {{record.record.createTime}}
+                        </div>
+                    </td>
+                    <td>
+                        <button class="btn btn-info sm" @click="open_record_content(record.record.id)">查看录像</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <nav aria-label="..." style="float: right;">
+            <ul class="pagination">
+                <li class="page-item">
+                <a class="page-link" href="#" @click="click_page(-2)">上一页</a>
+                </li>
+                <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
+                    <a class="page-link" href="#">{{page.number}}</a>
+                </li>
+                <li class="page-item">
+                <a class="page-link" href="#" @click="click_page(-1)">下一页</a>
+                </li>
+            </ul>
+        </nav>
     </ContentField>
 </template>
 
 <script>
-import ContentField from '../../components/ContentField.vue'
+import ContentField from '../../components/ContentField.vue';
+import router from '../../router/index'
+import { useStore } from 'vuex';
+import $ from 'jquery';
+import { ref } from 'vue';
 
 export default {
     components: {
         ContentField
+    },
+    setup() {
+        const store = useStore();
+        let currentPage = 1;
+        let total_records = 0; // 保存总对局数
+        let records = ref([]); // 保存对战记录
+        let pages = ref([]); // 展示的多个对战页面
+
+        const updatePages = () => {
+            let max_pages = parseInt(Math.ceil(total_records / 8));
+            let new_pages = [];
+            for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+                if (i >= 1 && i <= max_pages) {
+                    new_pages.push({
+                        number: i,
+                        is_active: i === currentPage ? "active" : "",
+                    })
+                }
+            }
+            pages.value = new_pages;
+        }
+
+        const click_page = page => {
+            if (page === -2) page = currentPage - 1;
+            else if (page === -1) page = currentPage + 1;
+            let max_pages = parseInt(Math.ceil(total_records / 8));
+
+            if (page >= 1 && page <= max_pages) {
+                pull_page(page);
+            }
+        }
+
+
+
+        const pull_page = page => {
+            currentPage = page;
+            $.ajax({
+                url: "http://localhost:3000/record/list/",
+                type: "GET",
+                data: {
+                    page
+                },
+                headers:{
+                    "Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证
+                },
+                success(resp){
+                    records.value = resp.records;
+                    total_records = resp.records_count;
+                    updatePages();
+                }
+            })
+        }
+
+        pull_page(currentPage);
+
+        const stringTo2D = map => {
+            let g = [];
+            for (let i = 0, k = 0; i < 13; i++) {
+                let line = [];
+                for (let j = 0; j < 14; j++,k++) {
+                    if(map[k] === '0') {
+                        line.push(0);
+                    }else {
+                        line.push(1);
+                    }
+                }
+                g.push(line);
+            }
+            return g;
+        }
+
+
+        // 打开对应recordId保存的录像 
+        const open_record_content = (recordId) => {
+            for (const record of records.value) {
+                if (record.record.id === recordId) {
+                    store.commit("updateIsRecord",true); // 播放录像
+                    // 恢复游戏信息
+                    store.commit("updateGame",{
+                        map: stringTo2D(record.record.map),
+                        a_id: record.record.aid,
+                        a_sx: record.record.asx,
+                        a_sy: record.record.asy,
+                        b_id: record.record.bid,
+                        b_sx: record.record.bsx,
+                        b_sy: record.record.bsy,
+                    });
+
+                    // 恢复蛇的移动信息
+                    store.commit("updateSteps",{
+                        a_steps: record.record.asteps,
+                        b_steps: record.record.bsteps,
+                    })
+
+                    // 恢复对局的败者
+                    store.commit("updateRecordLoser",record.record.loser);
+
+                    router.push({
+                        name: "recordContent",
+                        params:{
+                            recordId,
+                        }
+                    });
+
+                    
+                    break;
+                }
+            }
+
+        }
+
+        return {
+            open_record_content,
+            click_page,
+            records,
+            pages,
+        }
     }
 }
 </script>
 
 <style scoped>
+.user_photo{
+    width: 4vh;
+    border-radius: 50%;
+}
+.username {
+    font-weight: bold;
+    font-size: 1vw;
+}
+
+.userA {
+   color: blue;
+}
+
+.userB {
+    color: red;
+}
+
 </style>

web/src/views/user/bot/UserBotIndexView.vue

@@ -115,8 +115,6 @@
                                 </td>
                             </tr>
                         </tbody>
-
-                        
                     </table>
                 </div>
             </div>