johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-08-03 00:36:29 +09:00
parent 3f29a0382b
commit 1e3cff6174
3 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/client/app/common/views/components/games/reversi/reversi.room.vue
View file

@ -1,21 +1,19 @@
<template> <template>
<div class="root"> <div class="urbixznjwwuukfsckrwzwsqzsxornqij">
<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header> <header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
<div> <div>
<p>%i18n:@settings-of-the-game%</p> <p>%i18n:@settings-of-the-game%</p>
<div class="card"> <div class="card map">
<header> <header>
<el-select :class="$style.mapSelect" v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange"> <select v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
<el-option label="%i18n:@random%" :value="null"/> <option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
<el-option-group v-for="c in mapCategories" :key="c" :label="c"> <option label="%i18n:@random%" :value="null"/>
<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name"> <optgroup v-for="c in mapCategories" :key="c" :label="c">
<span style="float: left">{{ m.name }}</span> <option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
<span style="float: right; color: #8492a6; font-size: 13px" v-if="m.author">(by <i>{{ m.author }}</i>)</span> </optgroup>
</el-option> </select>
</el-option-group>
</el-select>
</header> </header>
<div> <div>
@ -219,11 +217,11 @@ export default Vue.extend({
}); });
}, },
onMapChange(v) { onMapChange() {
if (v == null) { if (this.mapName == null) {
this.game.settings.map = null; this.game.settings.map = null;
} else { } else {
this.game.settings.map = Object.values(maps).find(x => x.name == v).data; this.game.settings.map = Object.values(maps).find(x => x.name == this.mapName).data;
} }
this.$forceUpdate(); this.$forceUpdate();
this.updateSettings(); this.updateSettings();
@ -250,7 +248,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.root .urbixznjwwuukfsckrwzwsqzsxornqij
text-align center text-align center
background #f9f9f9 background #f9f9f9
@ -264,6 +262,23 @@ export default Vue.extend({
> .card > .card
margin 0 auto 16px auto margin 0 auto 16px auto
&.map
> header
> select
width 100%
padding 12px 16px
border 1px solid #dcdfe6
border-radius 4px
color #606266
transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
&:hover
border-color #c0c4cc
&:focus
&:active
border-color $theme-color
.card .card
max-width 400px max-width 400px
border-radius 4px border-radius 4px
@ -291,9 +306,6 @@ export default Vue.extend({
</style> </style>
<style lang="stylus" module> <style lang="stylus" module>
.mapSelect
width 100%
.board .board
display grid display grid
grid-gap 4px grid-gap 4px

2
src/client/app/common/views/components/games/reversi/reversi.vue
View file

@ -6,7 +6,7 @@
<div class="matching" v-else-if="matching"> <div class="matching" v-else-if="matching">
<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1> <h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
<div class="cancel"> <div class="cancel">
<el-button round @click="cancel">%i18n:@matching.cancel%</el-button> <form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
</div> </div>
</div> </div>
<div class="index" v-else> <div class="index" v-else>

2
src/client/app/common/views/components/ui/form/button.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="nvemkhtwcnnpkdrwfcbzuwhfulejhmzg" :class="{ round, primary }"> <div class="nvemkhtwcnnpkdrwfcbzuwhfulejhmzg" :class="{ round, primary }">
<button :type="type" @click="$emit('click')"> <button @click="$emit('click')">
<slot></slot> <slot></slot>
</button> </button>
</div> </div>