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

10.2 实现AcApp端（中）

Browse Source
master
barney 2 years ago
parent d4e0391f83
commit 43df2b3f8b
9 changed files with 546 additions and 227 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      acapp/src/App.vue
  2. 8
      acapp/src/components/ContentField.vue
  3. 4
      acapp/src/components/MatchGround.vue
  4. 59
      acapp/src/components/PlayGround.vue
  5. 66
      acapp/src/components/ResultBoard.vue
  6. 2
      acapp/src/views/MenuView.vue
  7. 128
      acapp/src/views/ranklist/RanklistIndexView.vue
  8. 212
      acapp/src/views/record/RecordIndexView.vue
  9. 276
      acapp/src/views/user/bot/UserBotIndexView.vue

18
acapp/src/App.vue
Unescape View File

@ -1,18 +1,12 @@
<template>
<div class="game-body">
<div class="game-body">
<MenuView v-if="$store.state.router.router_name === 'menu'" />
<PkIndexView v-else-if="$store.state.router.router_name === 'pk'" />
<RanklistIndexView
v-else-if="$store.state.router.router_name === 'ranklist'"
/>
<RecordIndexView v-else-if="$store.state.router.router_name === 'record'" />
<RecordContentView
v-else-if="$store.state.router.router_name === 'record_content'"
/>
<UserBotIndexView
v-else-if="$store.state.router.router_name === 'user_bot'"
/>
</div>
<RanklistIndexView v-else-if="$store.state.router.router_name === 'ranklist'"/>
<RecordIndexView v-else-if="$store.state.router.router_name === 'record'"/>
<RecordContentView v-else-if="$store.state.router.router_name === 'record_content'"/>
<UserBotIndexView v-else-if="$store.state.router.router_name === 'user_bot'"/>
</div>
</template>
<script>

8
acapp/src/components/ContentField.vue
Unescape View File

@ -31,10 +31,10 @@ div.content-field {
div.back {
position: absolute;
right: 5vw;
bottom: 5vh;
right: 3vw;
bottom: 3vh;
cursor: pointer;
font-size: 24px;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: white;
@ -43,7 +43,7 @@ div.back {
}
div.back:hover {
scale: 1.2;
transform: scale(1.2);
transition: 400ms;
}
</style>

4
acapp/src/components/MatchGround.vue
Unescape View File

@ -168,10 +168,10 @@ img {
}
.select-bot > select {
font-size: 18px;
font-size: 16px;
width: 20vw;
border-radius: 5px;
height: 6vh;
height: 4vh;
}
.mybtn {

59
acapp/src/components/PlayGround.vue
Unescape View File

@ -1,24 +1,67 @@
<template>
<div class="playground">
<GameMap />
<div class="content-field">
<div class="playground">
<GameMap />
</div>
<div class="back" @click="handleClickBack">
返回
</div>
</div>
</template>
<script>
import GameMap from './GameMap.vue' // 导入GameMap组件(.vue结尾)
import GameMap from './GameMap.vue'
import { useStore } from "vuex";
export default {
components: { // 使用GameMap组件
components: {
GameMap,
}
},
setup() {
const store = useStore();
const handleClickBack = () => {
store.commit("updateRouterName","menu");
}
return {
handleClickBack,
}
}
}
</script>
<style scoped>
/* div标签的样式 */
div.playground {
width: 60vw;
height: 70vh;
margin: 40px auto;
width: 40vw;
height: 50vh;
}
div.content-field {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
div.back {
position: absolute;
right: 3vw;
bottom: 3vh;
cursor: pointer;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: white;
user-select: none;
}
div.back:hover {
transform: scale(1.2);
transition: 400ms;
}
</style>

66
acapp/src/components/ResultBoard.vue
Unescape View File

@ -1,23 +1,27 @@
<template>
<div class="result-board">
<div class="result-text" v-if="$store.state.pk.loser === 'all'">
Draw
</div>
<div class="field">
<div>
<div class="result-board">
<div class="result-text" v-if="$store.state.pk.loser === 'all'">
Draw
</div>
<div class="result-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
Lose
</div>
<div class="result-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
Lose
</div>
<div class="result-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == parseInt($store.state.user.id)">
Lose
</div>
<div class="result-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == parseInt($store.state.user.id)">
Lose
</div>
<div class="result-text" v-else>
You Win
</div>
<div class="result-text" v-else>
You Win
</div>
<div class="reset-btn">
<button @click="reset" class="btn btn-warning lg">再来一次!</button>
<div class="reset-btn">
<button @click="reset">再来一次!</button>
</div>
</div>
</div>
</div>
</template>
@ -50,29 +54,47 @@ export default {
<style scoped>
.field {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.result-board {
width: 30vw;
height: 30vh;
background-color: rgba(34, 20, 77, 0.5);
position: absolute;
top: 30vh;
left: 35vw;
width:20vw;
height: 10vw;
top: 10vw;
left: 15vw;
}
.result-text {
font-size: 50px;
font-size: 40px;
color:yellowgreen;
font-weight: bold;
text-align: center;
font-style: italic;
padding-top: 4vh;
padding-bottom: 4vh;
padding-top: 2vh;
padding-bottom: 2vh;
}
.reset-btn {
width: 100%;
display: flex;
justify-content: center;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1.3vw;
margin-right: 1vw;
}
</style>

2
acapp/src/views/MenuView.vue
Unescape View File

@ -71,7 +71,7 @@ div.menu-item {
}
div.menu-item:hover {
scale: 1.2;
transform: scale(1.2);
transition: 400ms;
}

128
acapp/src/views/ranklist/RanklistIndexView.vue
Unescape View File

@ -1,20 +1,25 @@
<template>
<ContentField>
<table class="table table-striped table-hover table-sm" style="text-align: center;">
<div class="game-table">
<div>
<table style="text-align: center;">
<thead>
<tr>
<th>玩家</th>
<th style="text-align: left;">玩家</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>
<tr v-for="user in users" :key="user.id">
<td style="text-align: center;">
<div class="oneline">
<img :src="user.photo" alt="" class="user_photo" />
<span class="username userA">&nbsp;{{user.username}}</span>
</div>
</td>
<td>
<td class="rating">
{{user.rating}}
</td>
@ -22,20 +27,21 @@
</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>
<nav>
<ul style="padding: 0;">
<li class="game-page-item" @click="click_page(-2)">
<a class="game-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 :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
<a class="game-page-link" href="#">{{ page.number }}</a>
</li>
<li class="page-item" @click="click_page(-1)">
<a class="page-link" href="#">下一页</a>
<li class="game-page-item" @click="click_page(-1)">
<a class="game-page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</ContentField>
</template>
@ -114,14 +120,25 @@ export default {
<style scoped>
.user_photo{
width: 4vh;
width: 2vw;
border-radius: 50%;
}
.oneline {
display: flex;
justify-content: center;
align-items: center;
}
.username {
font-weight: bold;
font-size: 1vw;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
width: 25vw;
}
.userA {
color: blue;
}
@ -130,4 +147,79 @@ export default {
color: red;
}
div.game-table {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
td {
height: 2.5vw;
}
th {
text-align: center;
}
div.game-table table{
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
.rating {
width: 15vw;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1vw;
margin-right: 1vw;
}
nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.game-page-item {
display: inline-block;
padding: 0.5vw 0.5vw;
font-size: 0.5vw;
background-color: white;
border: 1px solid #dee2e6;
user-select: none;
}
.game-page-item.active {
background-color: #0d6efd;
}
.game-page-item.active > a {
color: white;
}
.game-page-item:hover {
background-color: #e9ecef;
cursor: pointer;
}
.game-page-link {
color: #0d6efd;
text-decoration: none;
}
</style>

212
acapp/src/views/record/RecordIndexView.vue
Unescape View File

@ -1,57 +1,64 @@
<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>
<div class="game-table">
<div>
<table>
<thead style="text-align: center;">
<tr>
<th style="text-align: left;">player A</th>
<th style="text-align: left;">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 style="text-align:left;">
<div class="oneline">
<img :src="record.a_photo" alt="" class="user_photo">&nbsp;
<span class="username userA" >&nbsp;{{record.a_username}}</span>
</div>
</td>
<td style="text-align:left;">
<div class="oneline">
<img :src="record.b_photo" alt="" class="user_photo">&nbsp;
<span class="username userB">&nbsp;{{record.b_username}}</span>
</div>
</td>
<td>
<div class="info-res">
{{record.result}}
</div>
</td>
<td>
<div class="info-time">
{{record.record.createTime}}
</div>
</td>
<td>
<button @click="open_record_content(record.record.id)">查看录像</button>
</td>
</tr>
</tbody>
</table>
<nav>
<ul style="padding: 0;">
<li class="game-page-item">
<a class="game-page-link" href="#" @click="click_page(-2)">上一页</a>
</li>
<li :class="'game-page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
<a class="game-page-link" href="#">{{page.number}}</a>
</li>
<li class="game-page-item">
<a class="game-page-link" href="#" @click="click_page(-1)">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</ContentField>
</template>
@ -159,7 +166,8 @@ export default {
})
// 恢复对局的败者
store.commit("updateRecordLoser",record.record.loser);
store.commit("updateRecordLoser",record.record.loser);
store.commit("updateRouterName","record_content");
break;
}
}
@ -178,12 +186,37 @@ export default {
<style scoped>
.user_photo{
width: 4vh;
width: 2vw;
border-radius: 50%;
}
.oneline {
display: flex;
justify-content: center;
align-items: center;
}
.username {
font-weight: bold;
font-size: 1vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 5vw;
}
.info-res {
width: 10vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info-time {
width: 14vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.userA {
@ -194,4 +227,75 @@ export default {
color: red;
}
div.game-table {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
div.game-table table{
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
button {
background-color: #0dcaf0;
border-radius: 0.2vw;
border: none;
border-color: #0dcaf0;
font-size: 1vw;
margin-right: 1vw;
}
td {
height: 2.5vw;
}
th {
text-align: center;
}
nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.game-page-item {
display: inline-block;
padding: 0.5vw 0.5vw;
font-size: 0.5vw;
background-color: white;
border: 1px solid #dee2e6;
user-select: none;
}
.game-page-item.active {
background-color: #0d6efd;
}
.game-page-item.active > a {
color: white;
}
.game-page-item:hover {
background-color: #e9ecef;
cursor: pointer;
}
.game-page-link {
color: #0d6efd;
text-decoration: none;
}
</style>

276
acapp/src/views/user/bot/UserBotIndexView.vue
Unescape View File

@ -1,127 +1,124 @@
<template>
<ContentField>
<div class="container">
<div class="row">
<div class="col-3">
<div class="card" style="margin-top: 30px">
<div class="card-body">
<img :src="$store.state.user.photo" alt="">
<div class="game-table">
<div>
<div class="card-header" style="padding-bottom: 10px" >
<span style="font-size: 20px; font-weight: bold ">我的bots</span>
<button type="button" style="float: right; font-size: 15px;" @click="handle_click_create(true)">创建bot</button>
<div class="game-modal" id="add_bot_btn" tabindex="-1" v-if="show_dialog">
<div >
<h5 class="modal-title" style="margin: 2px;font-weight: bold; color:red;" id="exampleModalLabel">创建新的bot</h5>
</div>
</div>
</div>
<div class="col-9">
<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>
<!-- 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>
<div >
<form>
<div class="center">
<label for="add_bot_title">bot名称:&nbsp;</label>
<input type="text" v-model="new_bot.title" style="width: 70%;" class="form-control" id="add_bot_title" placeholder="请输入新bot的名称">
</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的名称">
<div class="center">
<div>
<label for="add_bot_description">bot简介:&nbsp;</label>
</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>
<div>
<textarea class="form-control" style="margin-top: 2vh;width: 31.5vw;" v-model="new_bot.description" id="add_bot_description" placeholder="请输入新bot的简介"></textarea>
</div>
</div>
<div class="mb-3">
<label for="add_bot_code" class="form-label">bot的代码</label>
<div >
<label for="add_bot_code" >bot的代码:&nbsp;</label>
<VAceEditor
v-model:value="new_bot.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
:options="{fontSize: 16}"
style="height: 300px" />
:options="{fontSize: 10}"
style="height: 20vh" />
</div>
</form>
</div>
<div class="modal-footer">
<div >
<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" @click="handle_click_create(false)" style="float:right">取消</button>
<button type="button" @click="add_bot" style="float:right;margin-right: 5px">创建</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<!--表头-->
<thead>
<tr>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<!--内容-->
<tbody>
<tr v-for="bot in bots" :key="bot.id">
<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>
<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>
</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" >
</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>
</div>
<div class="mb-3">
<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" />
</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>
<div class="card-body">
<table>
<thead>
<tr>
<th>名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="bot in bots" :key="bot.id">
<td>{{bot.title}}</td>
<td>{{bot.createTime}}</td>
<td>
<button type="button" style="margin-right: 10px" @click="show_update_modal_handler(bot.id, true)">修改</button>
<button type="button" @click="remove_bot(bot)">删除</button>
<div class="game-modal" :id="'update-bot-btn-'+bot.id" tabindex="-1" v-if="bot.show_update_modal">
<div>
<div>
<h5 style="margin: 2px;font-weight: bold;color:red;">修改bot信息</h5>
</div>
<div>
<form>
<div class="center">
<label for="add_bot_title">bot名称:&nbsp;</label>
<input type="text" style="width: 70%;" v-model="bot.title" class="form-control" id="add_bot_title" >
</div>
<div class="center">
<div>
<label for="add_bot_description">bot简介:&nbsp;</label>
</div>
<div>
<textarea class="form-control" v-model="bot.description" id="add_bot_description" style="margin-top: 2vh;width: 28.5vw;"></textarea>
</div>
</div>
<div>
<label for="add_bot_code">bot的代码:&nbsp;</label>
<VAceEditor
v-model:value="bot.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
:options="{fontSize: 10}"
style="height: 20vh" />
</div>
</form>
</div>
<div>
<div class="error_msg">{{ bot.error_msg }}</div>
<button type="button" @click="show_update_modal_handler(bot.id, false)" style="float:right;margin-left: 5px">取消</button>
<button type="button" @click="update_bot(bot)" style="float:right;">保存修改</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</ContentField>
</template>
@ -129,7 +126,6 @@
import { ref,reactive } from "vue"
import $ from 'jquery'
import { useStore } from "vuex"
import {Modal} from "bootstrap/dist/js/bootstrap"
import ContentField from "@/components/ContentField.vue"
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
@ -145,6 +141,7 @@ export default {
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/");
const store = useStore();
let bots = ref([]) // 定义bot列表
let show_dialog = ref(false);
const new_bot = reactive({
title: "",
description: "",
@ -152,13 +149,11 @@ export default {
error_msg: "",
})
const cancel_update = (bot)=> {
Modal.getInstance("#update-bot-btn-"+bot.id).hide();
const cancel_update = ()=> {
refresh_bots();
}
const cancel_add = ()=> {
Modal.getInstance("#add_bot_btn").hide();
refresh_bots();
}
@ -170,6 +165,10 @@ export default {
"Authorization": "Bearer " + store.state.user.token, // 任何需要登录才能显示的都要加这个验证
},
success(resp){
for (const bot of resp) {
bot.show_update_modal = false;
}
// 将后端得到的数据传给bot
bots.value = resp;
}
@ -196,7 +195,7 @@ export default {
new_bot.title = "",
new_bot.description="",
new_bot.content="",
Modal.getInstance("#add_bot_btn").hide();
handle_click_create(false);
refresh_bots();
}
else {
@ -223,7 +222,6 @@ export default {
},
success(resp) {
if (resp.error_msg === "success") { // 更新bot成功
Modal.getInstance("#update-bot-btn-"+bot.id).hide();
refresh_bots();
}
else {
@ -252,6 +250,21 @@ export default {
}
})
}
const handle_click_create = is_show => {
show_dialog.value = is_show;
}
const show_update_modal_handler = (bot_id, is_show) => {
const new_bots = [];
for (const bot of bots.value) {
if (bot.id === bot_id) {
bot.show_update_modal = is_show;
}
new_bots.push(bot);
}
bots.value = new_bots;
}
return {
bots,
@ -261,6 +274,9 @@ export default {
update_bot,
cancel_update,
cancel_add,
show_dialog,
handle_click_create,
show_update_modal_handler,
}
}
@ -268,12 +284,60 @@ export default {
</script>
<style scoped>
img{
width: 100%
}
.error_msg{
font-size: 20px;
font-weight: bold;
color: red;
}
div.game-table {
display: flex;
justify-content: center;
width: 100%;
padding-top: 10vh;
height: calc(100%-10vh);
}
td {
width: 12vw;
height: 1vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 12vw;
}
th {
height: 1vw;
text-align: center;
}
div.game-table table{
background-color: rgba(255, 255, 255, 0.4);
text-align: center;
}
.game-modal {
background-color: white;
padding: 10px;
border-radius: 5px;
position: absolute;
width: 40vw;
height: 46vh;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: left;
}
.center {
display: flex;
align-items: center;
}
</style>
Write Preview
Loading…
Cancel
Save