zfp
/
kob
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改前端(1)

Browse Source
master
barney 2 years ago
parent e03a71776a
commit e362c88737
9 changed files with 451 additions and 261 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      web/src/components/MatchGround.vue
  2. 1
      web/src/components/ResultBoard.vue
  3. 6
      web/src/store/pk.js
  4. 6
      web/src/views/pk/PkIndexView.vue
  5. 8
      web/src/views/ranklist/RanklistIndexView.vue
  6. 14
      web/src/views/record/RecordIndexView.vue
  7. 2
      web/src/views/user/account/UserAcWingCodeIndex.vue
  8. 328
      web/src/views/user/bot/UserBotIndexView.vue

37
web/src/components/MatchGround.vue
Unescape View File

@ -28,7 +28,17 @@
{{ $store.state.pk.opponent_username }} {{ $store.state.pk.opponent_username }}
</div> </div>
</div> </div>
<div class="col-12" style="text-align: center; padding-top: 10vh;">
<div style="text-align:center" class="load" v-if="$store.state.pk.status === 'matching' && $store.state.pk.loading && !is_matched" >
<span style="font-size:1.5rem">正在匹配中&nbsp;</span>
<span class="spinner-border spinner-border-md" role="status" aria-hidden="true"></span>
</div>
<!-- <div style="text-align:center;" v-if="!$store.state.pk.loading">
<span style="font-size:1.5rem;color:red;">匹配成功,即将开始游戏!!!</span>
</div> -->
<div class="col-12" style="text-align:center">
<button type="button" v-if="is_matched" class="btn btn-success btn-lg" @click="click_match_btn">{{match_btn_info}}</button> <button type="button" v-if="is_matched" class="btn btn-success btn-lg" @click="click_match_btn">{{match_btn_info}}</button>
<button type="button" v-else class="btn btn-danger btn-lg" @click="click_match_btn">{{match_btn_info}}</button> <button type="button" v-else class="btn btn-danger btn-lg" @click="click_match_btn">{{match_btn_info}}</button>
</div> </div>
@ -62,7 +72,6 @@ export default {
})); }));
}else { }else {
match_btn_info.value = "开始匹配"; match_btn_info.value = "开始匹配";
is_matched.value = true; is_matched.value = true;
store.state.pk.socket.send(JSON.stringify({ store.state.pk.socket.send(JSON.stringify({
@ -100,8 +109,8 @@ export default {
<style scoped> <style scoped>
.matchground { .matchground {
width: 60vw; width: 60vw;
height: 70vh; height: min(60vh,60vw);
margin: 40px auto; margin: 10vh auto;
background-color: rgba(123, 197, 212, 0.5); background-color: rgba(123, 197, 212, 0.5);
} }
@ -109,7 +118,7 @@ export default {
img { img {
margin-top: 10vh; margin-top: 10vh;
border-radius: 50%; border-radius: 50%;
width: 20vh; width: min(20vh,15vw);
} }
.user_photo { .user_photo {
@ -117,8 +126,8 @@ img {
} }
.username { .username {
margin-top: 30px; margin-top: 3vh;
font-size: 24px; font-size: 3vh;
font-weight: bold; font-weight: bold;
color:black; color:black;
text-align: center; text-align: center;
@ -129,8 +138,20 @@ img {
} }
.select-bot > select { .select-bot > select {
widows: 60%; font-size: 2.5vh;
margin: 0 auto; margin: 0 auto;
}
button {
margin-top: 4vh;
text-align: center;
}
.load {
position: absolute;
top: 24vh;
left: 1.3vh;
} }
</style> </style>

1
web/src/components/ResultBoard.vue
Unescape View File

@ -31,6 +31,7 @@ export default {
const store = useStore(); const store = useStore();
const reset = () => { const reset = () => {
store.commit("updateLoading",true);
store.commit("updateStatus","matching"); store.commit("updateStatus","matching");
store.commit("updateLoser","none"); store.commit("updateLoser","none");
store.commit("updateOpponent", { store.commit("updateOpponent", {

6
web/src/store/pk.js
Unescape View File

@ -12,7 +12,8 @@ export default {
b_sx: 0, b_sx: 0,
b_sy: 0, b_sy: 0,
gameObject: null, gameObject: null,
loser: "none" //"none","all","A","B" none表示还没有结果 loser: "none", //"none","all","A","B" none表示还没有结果
loading: true, // 显示正在加载中
}, },
getters: { getters: {
}, },
@ -27,6 +28,9 @@ export default {
updateStatus(state, status) { updateStatus(state, status) {
state.status = status; state.status = status;
}, },
updateLoading(state, loading) {
state.loading = loading;
},
updateGame(state, game) { updateGame(state, game) {
state.gamemap = game.map; state.gamemap = game.map;
state.a_id = game.a_id; state.a_id = game.a_id;

6
web/src/views/pk/PkIndexView.vue
Unescape View File

@ -57,9 +57,12 @@ export default {
photo: data.opponent_photo, photo: data.opponent_photo,
}); });
// 更新loading，显示匹配成功
store.commit("updateLoading",false);
setTimeout(() => { setTimeout(() => {
store.commit("updateStatus", "playing"); store.commit("updateStatus", "playing");
}, 200); // 0.2秒后更新地图(修复穿墙bug) },0.2); // 0.2秒后更新地图
// 更新游戏信息(包括地图、玩家坐标和id) // 更新游戏信息(包括地图、玩家坐标和id)
store.commit("updateGame", data.game); store.commit("updateGame", data.game);
@ -89,6 +92,7 @@ export default {
}); });
// 切换其他页面或者关闭pk页面时调用 // 切换其他页面或者关闭pk页面时调用
onUnmounted(() => { onUnmounted(() => {
store.commit("updateLoading",true);
socket.close(); socket.close();
}); });
}, },

8
web/src/views/ranklist/RanklistIndexView.vue
Unescape View File

@ -25,13 +25,13 @@
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination" style="float: right;"> <ul class="pagination" style="float: right;">
<li class="page-item" @click="click_page(-2)"> <li class="page-item" @click="click_page(-2)">
<a class="page-link" href="#">上一页</a> <a class="page-link" href="#">&laquo;</a>
</li> </li>
<li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"> <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> <a class="page-link" href="#">{{ page.number }}</a>
</li> </li>
<li class="page-item" @click="click_page(-1)"> <li class="page-item" @click="click_page(-1)">
<a class="page-link" href="#">下一页</a> <a class="page-link" href="#">&raquo;</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -71,13 +71,13 @@ export default {
} }
const click_page = page => { const click_page = page => {
let max_pages = parseInt(Math.ceil(total_users / 8));
if (page === -2) page = currentPage - 1; if (page === -2) page = currentPage - 1;
else if (page === -1) page = currentPage + 1; else if (page === -1) page = currentPage + 1;
let max_pages = parseInt(Math.ceil(total_users / 8));
if (page >= 1 && page <= max_pages) { if (page >= 1 && page <= max_pages) {
pull_page(page); pull_page(page);
} }
console.log(currentPage);
} }

14
web/src/views/record/RecordIndexView.vue
Unescape View File

@ -42,13 +42,13 @@
<nav aria-label="..." style="float: right;"> <nav aria-label="..." style="float: right;">
<ul class="pagination"> <ul class="pagination">
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" @click="click_page(-2)">上一页</a> <a class="page-link" href="#" @click="click_page(-2)">&laquo;</a>
</li> </li>
<li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"> <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> <a class="page-link" href="#">{{page.number}}</a>
</li> </li>
<li class="page-item"> <li class="page-item">
<a class="page-link" href="#" @click="click_page(-1)">下一页</a> <a class="page-link" href="#" @click="click_page(-1)">&raquo;</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -203,4 +203,14 @@ export default {
color: red; color: red;
} }
button {
cursor: pointer;
}
button:hover {
background-color: coral;
border: none;
border-color: coral;
}
</style> </style>

2
web/src/views/user/account/UserAcWingCodeIndex.vue
Unescape View File

@ -23,7 +23,7 @@ export default {
if (resp.result === "success") { if (resp.result === "success") {
console.log(resp); console.log(resp);
// 保存jwt_token // 保存jwt_token
localStorage.setItem("jwt_token",resp.jwt_token); // localStorage.setItem("jwt_token",resp.jwt_token);
store.commit("updateToken",resp.jwt_token); store.commit("updateToken",resp.jwt_token);
router.push({ name:"home" }); // 验证成功跳转到首页 router.push({ name:"home" }); // 验证成功跳转到首页
store.commit("updatePullingInfo",false); store.commit("updatePullingInfo",false);

328
web/src/views/user/bot/UserBotIndexView.vue
Unescape View File

@ -1,54 +1,102 @@
<template> <template>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
<div class="card" style="margin-top: 30px"> <div class="card" style="margin-top: 30px">
<div class="card-body"> <div class="card-body">
<img :src="$store.state.user.photo" alt=""> <img :src="$store.state.user.photo" alt="" />
</div> </div>
</div> </div>
</div> </div>
<div class="col-9"> <div class="col-9">
<div class="card" style="margin-top: 30px"> <div class="card" style="margin-top: 30px">
<div class="card-header" > <div class="card-header">
<span style="font-size: 20px; font-weight: bold ">我的bots</span> <span style="font-size: 20px; font-weight: bold">我的bots</span>
<button type="button" class="btn btn-primary float-end" btn-sm data-bs-toggle="modal" data-bs-target="#add_bot_btn">创建bot</button> <button
type="button"
class="btn btn-primary float-end"
btn-sm
data-bs-toggle="modal"
data-bs-target="#add_bot_btn"
>
创建bot
</button>
<!-- Modal --> <!-- Modal -->
<div class="modal fade" id="add_bot_btn" tabindex="-1"> <div class="modal fade" id="add_bot_btn" tabindex="-1">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">创建新的bot</h5> <h5 class="modal-title" id="exampleModalLabel">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 创建新的bot
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_title" class="form-label">bot名称</label> <label for="add_bot_title" class="form-label"
<input type="text" v-model="new_bot.title" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称"> >bot名称</label
>
<input
type="text"
v-model="new_bot.title"
class="form-control"
id="add_bot_title"
placeholder="请输入新bot的名称"
/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_description" class="form-label">bot简介</label> <label for="add_bot_description" class="form-label"
<textarea class="form-control" v-model="new_bot.description" id="add_bot_description" rows= "3" placeholder="请输入新bot的简介"></textarea> >bot简介</label
>
<textarea
class="form-control"
v-model="new_bot.description"
id="add_bot_description"
rows="3"
placeholder="请输入新bot的简介"
></textarea>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_code" class="form-label">bot的代码</label> <label for="add_bot_code" class="form-label"
>bot的代码</label
>
<VAceEditor <VAceEditor
v-model:value="new_bot.content" v-model:value="new_bot.content"
@init="editorInit" @init="editorInit"
lang="c_cpp" lang="c_cpp"
theme="textmate" theme="textmate"
:options="{fontSize: 16}" :options="{ fontSize: 16 }"
style="height: 300px" /> style="height: 200px"
/>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="error_msg">{{ new_bot.error_msg }}</div> <div class="error_msg">{{ new_bot.error_msg }}</div>
<button type="button" class="btn btn-success" @click="add_bot" btn-sm>创建</button> <button
<button type="button" class="btn btn-danger" btn-sm @click="cancel_add">取消</button> type="button"
class="btn btn-success"
@click="add_bot"
btn-sm
>
创建
</button>
<button
type="button"
class="btn btn-danger"
btn-sm
@click="cancel_add"
>
取消
</button>
</div> </div>
</div> </div>
</div> </div>
@ -68,46 +116,144 @@
<!--内容--> <!--内容-->
<tbody> <tbody>
<tr v-for="bot in bots" :key="bot.id"> <tr v-for="bot in bots" :key="bot.id">
<td>{{bot.title}}</td> <td>{{ bot.title }}</td>
<td>{{bot.createTime}}</td> <td>{{ bot.createTime }}</td>
<td> <td>
<button type="button" class="btn btn-success" btn-sm style="margin-right: 10px" data-bs-toggle="modal" :data-bs-target="'#update-bot-btn-'+bot.id" >修改</button> <button
<button type="button" class="btn btn-danger" btn-sm @click="remove_bot(bot)">删除</button> type="button"
class="btn btn-success"
btn-sm
style="margin-right: 10px"
data-bs-toggle="modal"
:data-bs-target="'#update-bot-btn-' + bot.id"
>
修改
</button>
<button
type="button"
class="btn btn-danger"
btn-sm
data-bs-toggle="modal"
:data-bs-target="'#remove-bot-btn-' + bot.id"
>
删除
</button>
<div class="modal fade" :id="'update-bot-btn-'+bot.id" tabindex="-1"> <div
class="modal fade"
:id="'remove-bot-btn-' + bot.id"
tabindex="-1"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">删除提示框</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>是否确定要删除该bot</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-info"
data-bs-dismiss="modal"
>
我再想想
</button>
<button
type="button"
class="btn btn-danger"
@click="remove_bot(bot)"
>
确认删除
</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
:id="'update-bot-btn-' + bot.id"
tabindex="-1"
>
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">修改bot信息</h5> <h5 class="modal-title">修改bot信息</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_title" class="form-label">bot名称</label> <label for="add_bot_title" class="form-label"
<input type="text" v-model="bot.title" class="form-control" id="add_bot_title" > >bot名称</label
>
<input
type="text"
v-model="bot.title"
class="form-control"
id="add_bot_title"
/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_description" class="form-label">bot简介</label> <label
<textarea class="form-control" v-model="bot.description" id="add_bot_description" rows= "3" ></textarea> for="add_bot_description"
class="form-label"
>bot简介</label
>
<textarea
class="form-control"
v-model="bot.description"
id="add_bot_description"
rows="3"
></textarea>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="add_bot_code" class="form-label">bot的代码</label> <label for="add_bot_code" class="form-label"
>bot的代码</label
>
<VAceEditor <VAceEditor
v-model:value="bot.content" v-model:value="bot.content"
@init="editorInit" @init="editorInit"
lang="c_cpp" lang="c_cpp"
theme="textmate" theme="textmate"
:options="{fontSize: 16}" :options="{ fontSize: 16 }"
style="height: 300px" /> style="height: 200px"
/>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="error_msg">{{ bot.error_msg }}</div> <div class="error_msg">{{ bot.error_msg }}</div>
<button type="button" class="btn btn-success" @click="update_bot(bot)" btn-sm>保存修改</button> <button
<button type="button" class="btn btn-danger" btn-sm @click="cancel_update(bot)">取消</button> type="button"
class="btn btn-success"
@click="update_bot(bot)"
btn-sm
>
保存修改
</button>
<button
type="button"
class="btn btn-danger"
btn-sm
@click="cancel_update(bot)"
>
取消
</button>
</div> </div>
</div> </div>
</div> </div>
@ -120,58 +266,61 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { ref,reactive } from "vue" import { ref, reactive } from "vue";
import $ from 'jquery' import $ from "jquery";
import { useStore } from "vuex" import { useStore } from "vuex";
import {Modal} from "bootstrap/dist/js/bootstrap" import { Modal } from "bootstrap/dist/js/bootstrap";
import { VAceEditor } from 'vue3-ace-editor'; import { VAceEditor } from "vue3-ace-editor";
import ace from 'ace-builds'; import ace from "ace-builds";
export default { export default {
components:{ components: {
VAceEditor, VAceEditor,
}, },
setup() { setup() {
ace.config.set( ace.config.set(
"basePath", "basePath",
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/"); "https://cdn.jsdelivr.net/npm/ace-builds@" +
require("ace-builds").version +
"/src-noconflict/"
);
const store = useStore(); const store = useStore();
let bots = ref([]) // 定义bot列表 let bots = ref([]); // 定义bot列表
const new_bot = reactive({ const new_bot = reactive({
title: "", title: "",
description: "", description: "",
content: "", content: "",
error_msg: "", error_msg: "",
}) });
const cancel_update = (bot)=> { const cancel_update = (bot) => {
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); Modal.getInstance("#update-bot-btn-" + bot.id).hide();
refresh_bots(); refresh_bots();
} };
const cancel_add = ()=> { const cancel_add = () => {
Modal.getInstance("#add_bot_btn").hide(); Modal.getInstance("#add_bot_btn").hide();
refresh_bots(); refresh_bots();
} };
const refresh_bots = () => { const refresh_bots = () => {
$.ajax({ $.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/getlist/", url: "https://kob.bnblogs.cc/api/user/bot/getlist/",
type: "GET", type: "GET",
headers:{ headers: {
"Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证 Authorization: "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证
}, },
success(resp){ success(resp) {
// 将后端得到的数据传给bot // 将后端得到的数据传给bot
bots.value = resp; bots.value = resp;
} },
}) });
} };
refresh_bots(); refresh_bots();
// 点击创建bot按钮触发的事件 // 点击创建bot按钮触发的事件
@ -185,24 +334,23 @@ export default {
description: new_bot.description, description: new_bot.description,
content: new_bot.content, content: new_bot.content,
}, },
headers:{ headers: {
"Authorization": "Bearer " + store.state.user.token, Authorization: "Bearer " + store.state.user.token,
}, },
success(resp) { success(resp) {
if (resp.error_msg === "success") { // 添加bot成功 if (resp.error_msg === "success") {
new_bot.title = "", // 添加bot成功
new_bot.description="", (new_bot.title = ""),
new_bot.content="", (new_bot.description = ""),
(new_bot.content = ""),
Modal.getInstance("#add_bot_btn").hide(); Modal.getInstance("#add_bot_btn").hide();
refresh_bots(); refresh_bots();
} } else {
else {
new_bot.error_msg = resp.error_msg; // 返回错误信息 new_bot.error_msg = resp.error_msg; // 返回错误信息
} }
} },
}) });
} };
// 点击更新bot按钮触发的事件 // 点击更新bot按钮触发的事件
const update_bot = (bot) => { const update_bot = (bot) => {
@ -215,40 +363,43 @@ export default {
description: bot.description, description: bot.description,
content: bot.content, content: bot.content,
}, },
headers:{ headers: {
"Authorization": "Bearer " + store.state.user.token, Authorization: "Bearer " + store.state.user.token,
}, },
success(resp) { success(resp) {
if (resp.error_msg === "success") { // 更新bot成功 if (resp.error_msg === "success") {
Modal.getInstance("#update-bot-btn-"+bot.id).hide(); // 更新bot成功
Modal.getInstance("#update-bot-btn-" + bot.id).hide();
refresh_bots(); refresh_bots();
} } else {
else {
new_bot.error_msg = resp.error_msg; // 返回错误信息 new_bot.error_msg = resp.error_msg; // 返回错误信息
} }
} },
}) });
} };
// 点击删除bot按钮触发的事件 // 点击删除bot按钮触发的事件
const remove_bot = (bot) => { const remove_bot = (bot) => {
console.log(bot);
$.ajax({ $.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/remove/", url: "https://kob.bnblogs.cc/api/user/bot/remove/",
type: "POST", type: "POST",
data: { data: {
bot_id: bot.id bot_id: bot.id,
}, },
headers:{ headers: {
"Authorization": "Bearer " + store.state.user.token, Authorization: "Bearer " + store.state.user.token,
}, },
success(resp) { success(resp) {
console.log(resp) console.log(resp);
if (resp.error_msg === "success") { // 添加bot成功 if (resp.error_msg === "success") {
Modal.getInstance("#remove-bot-btn-" + bot.id).hide();
// 删除bot成功
refresh_bots(); refresh_bots();
} }
} },
}) });
} };
return { return {
bots, bots,
@ -258,17 +409,16 @@ export default {
update_bot, update_bot,
cancel_update, cancel_update,
cancel_add, cancel_add,
} };
} },
};
}
</script> </script>
<style scoped> <style scoped>
img{ img {
width: 100% width: 100%;
} }
.error_msg{ .error_msg {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: red; color: red;

Write Preview
Loading…
Cancel
Save