修改前端(1)

master
barney 2 years ago
parent e03a71776a
commit e362c88737
  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. 288
      web/src/views/user/bot/UserBotIndexView.vue

@ -28,7 +28,17 @@
{{ $store.state.pk.opponent_username }}
</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-else class="btn btn-danger btn-lg" @click="click_match_btn">{{match_btn_info}}</button>
</div>
@ -62,7 +72,6 @@ export default {
}));
}else {
match_btn_info.value = "开始匹配";
is_matched.value = true;
store.state.pk.socket.send(JSON.stringify({
@ -100,8 +109,8 @@ export default {
<style scoped>
.matchground {
width: 60vw;
height: 70vh;
margin: 40px auto;
height: min(60vh,60vw);
margin: 10vh auto;
background-color: rgba(123, 197, 212, 0.5);
}
@ -109,7 +118,7 @@ export default {
img {
margin-top: 10vh;
border-radius: 50%;
width: 20vh;
width: min(20vh,15vw);
}
.user_photo {
@ -117,8 +126,8 @@ img {
}
.username {
margin-top: 30px;
font-size: 24px;
margin-top: 3vh;
font-size: 3vh;
font-weight: bold;
color:black;
text-align: center;
@ -129,8 +138,20 @@ img {
}
.select-bot > select {
widows: 60%;
font-size: 2.5vh;
margin: 0 auto;
}
button {
margin-top: 4vh;
text-align: center;
}
.load {
position: absolute;
top: 24vh;
left: 1.3vh;
}
</style>

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

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

@ -57,9 +57,12 @@ export default {
photo: data.opponent_photo,
});
// loading
store.commit("updateLoading",false);
setTimeout(() => {
store.commit("updateStatus", "playing");
}, 200); // 0.2(穿bug)
},0.2); // 0.2
// (id)
store.commit("updateGame", data.game);
@ -89,6 +92,7 @@ export default {
});
// pk
onUnmounted(() => {
store.commit("updateLoading",true);
socket.close();
});
},

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

@ -42,13 +42,13 @@
<nav aria-label="..." style="float: right;">
<ul class="pagination">
<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 :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>
<a class="page-link" href="#" @click="click_page(-1)">&raquo;</a>
</li>
</ul>
</nav>
@ -203,4 +203,14 @@ export default {
color: red;
}
button {
cursor: pointer;
}
button:hover {
background-color: coral;
border: none;
border-color: coral;
}
</style>

@ -23,7 +23,7 @@ export default {
if (resp.result === "success") {
console.log(resp);
// jwt_token
localStorage.setItem("jwt_token",resp.jwt_token);
// localStorage.setItem("jwt_token",resp.jwt_token);
store.commit("updateToken",resp.jwt_token);
router.push({ name:"home" }); //
store.commit("updatePullingInfo",false);

@ -4,7 +4,7 @@
<div class="col-3">
<div class="card" style="margin-top: 30px">
<div class="card-body">
<img :src="$store.state.user.photo" alt="">
<img :src="$store.state.user.photo" alt="" />
</div>
</div>
</div>
@ -13,42 +13,90 @@
<div class="card" style="margin-top: 30px">
<div class="card-header">
<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 -->
<div class="modal fade" id="add_bot_btn" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">创建新的bot</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="modal-title" id="exampleModalLabel">
创建新的bot
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="add_bot_title" class="form-label">bot名称</label>
<input type="text" v-model="new_bot.title" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称">
<label for="add_bot_title" class="form-label"
>bot名称</label
>
<input
type="text"
v-model="new_bot.title"
class="form-control"
id="add_bot_title"
placeholder="请输入新bot的名称"
/>
</div>
<div class="mb-3">
<label for="add_bot_description" class="form-label">bot简介</label>
<textarea class="form-control" v-model="new_bot.description" id="add_bot_description" rows= "3" placeholder="请输入新bot的简介"></textarea>
<label for="add_bot_description" class="form-label"
>bot简介</label
>
<textarea
class="form-control"
v-model="new_bot.description"
id="add_bot_description"
rows="3"
placeholder="请输入新bot的简介"
></textarea>
</div>
<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
v-model:value="new_bot.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
:options="{ fontSize: 16 }"
style="height: 300px" />
style="height: 200px"
/>
</div>
</form>
</div>
<div class="modal-footer">
<div class="error_msg">{{ new_bot.error_msg }}</div>
<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>
<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>
@ -71,43 +119,141 @@
<td>{{ bot.title }}</td>
<td>{{ bot.createTime }}</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 type="button" class="btn btn-danger" btn-sm @click="remove_bot(bot)">删除</button>
<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-content">
<div class="modal-header">
<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 class="modal-body">
<form>
<div class="mb-3">
<label for="add_bot_title" class="form-label">bot名称</label>
<input type="text" v-model="bot.title" class="form-control" id="add_bot_title" >
<label for="add_bot_title" class="form-label"
>bot名称</label
>
<input
type="text"
v-model="bot.title"
class="form-control"
id="add_bot_title"
/>
</div>
<div class="mb-3">
<label for="add_bot_description" class="form-label">bot简介</label>
<textarea class="form-control" v-model="bot.description" id="add_bot_description" rows= "3" ></textarea>
<label
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 class="mb-3">
<label for="add_bot_code" class="form-label">bot的代码</label>
<label for="add_bot_code" class="form-label"
>bot的代码</label
>
<VAceEditor
v-model:value="bot.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
:options="{ fontSize: 16 }"
style="height: 300px" />
style="height: 200px"
/>
</div>
</form>
</div>
<div class="modal-footer">
<div class="error_msg">{{ bot.error_msg }}</div>
<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>
<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>
@ -124,13 +270,13 @@
</template>
<script>
import { ref,reactive } from "vue"
import $ from 'jquery'
import { useStore } from "vuex"
import {Modal} from "bootstrap/dist/js/bootstrap"
import { ref, reactive } from "vue";
import $ from "jquery";
import { useStore } from "vuex";
import { Modal } from "bootstrap/dist/js/bootstrap";
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds";
export default {
components: {
@ -139,39 +285,42 @@ export default {
setup() {
ace.config.set(
"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();
let bots = ref([]) // bot
let bots = ref([]); // bot
const new_bot = reactive({
title: "",
description: "",
content: "",
error_msg: "",
})
});
const cancel_update = (bot) => {
Modal.getInstance("#update-bot-btn-" + bot.id).hide();
refresh_bots();
}
};
const cancel_add = () => {
Modal.getInstance("#add_bot_btn").hide();
refresh_bots();
}
};
const refresh_bots = () => {
$.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/getlist/",
type: "GET",
headers: {
"Authorization": "Bearer " + store.state.user.token, //
Authorization: "Bearer " + store.state.user.token, //
},
success(resp) {
// bot
bots.value = resp;
}
})
}
},
});
};
refresh_bots();
// bot
@ -186,23 +335,22 @@ export default {
content: new_bot.content,
},
headers: {
"Authorization": "Bearer " + store.state.user.token,
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_msg === "success") { // bot
new_bot.title = "",
new_bot.description="",
new_bot.content="",
if (resp.error_msg === "success") {
// bot
(new_bot.title = ""),
(new_bot.description = ""),
(new_bot.content = ""),
Modal.getInstance("#add_bot_btn").hide();
refresh_bots();
}
else {
} else {
new_bot.error_msg = resp.error_msg; //
}
}
})
}
},
});
};
// bot
const update_bot = (bot) => {
@ -216,39 +364,42 @@ export default {
content: bot.content,
},
headers: {
"Authorization": "Bearer " + store.state.user.token,
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_msg === "success") { // bot
if (resp.error_msg === "success") {
// bot
Modal.getInstance("#update-bot-btn-" + bot.id).hide();
refresh_bots();
}
else {
} else {
new_bot.error_msg = resp.error_msg; //
}
}
})
}
},
});
};
// bot
const remove_bot = (bot) => {
console.log(bot);
$.ajax({
url: "https://kob.bnblogs.cc/api/user/bot/remove/",
type: "POST",
data: {
bot_id: bot.id
bot_id: bot.id,
},
headers: {
"Authorization": "Bearer " + store.state.user.token,
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
console.log(resp)
if (resp.error_msg === "success") { // bot
console.log(resp);
if (resp.error_msg === "success") {
Modal.getInstance("#remove-bot-btn-" + bot.id).hide();
// bot
refresh_bots();
}
}
})
}
},
});
};
return {
bots,
@ -258,15 +409,14 @@ export default {
update_bot,
cancel_update,
cancel_add,
}
}
}
};
},
};
</script>
<style scoped>
img {
width: 100%
width: 100%;
}
.error_msg {
font-size: 20px;

Loading…
Cancel
Save