From 1e3cff6174d2c3a144aa5e82481b7cda8c23a87b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 3 Aug 2018 00:36:29 +0900
Subject: [PATCH] wip
---
.../components/games/reversi/reversi.room.vue | 48 ++++++++++++-------
.../components/games/reversi/reversi.vue | 2 +-
.../views/components/ui/form/button.vue | 2 +-
3 files changed, 32 insertions(+), 20 deletions(-)
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index f04d8d0873..ca85924c25 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -1,21 +1,19 @@
<template>
-<div class="root">
+<div class="urbixznjwwuukfsckrwzwsqzsxornqij">
<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
<div>
<p>%i18n:@settings-of-the-game%</p>
- <div class="card">
+ <div class="card map">
<header>
- <el-select :class="$style.mapSelect" v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
- <el-option label="%i18n:@random%" :value="null"/>
- <el-option-group v-for="c in mapCategories" :key="c" :label="c">
- <el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">
- <span style="float: left">{{ m.name }}</span>
- <span style="float: right; color: #8492a6; font-size: 13px" v-if="m.author">(by <i>{{ m.author }}</i>)</span>
- </el-option>
- </el-option-group>
- </el-select>
+ <select v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
+ <option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
+ <option label="%i18n:@random%" :value="null"/>
+ <optgroup v-for="c in mapCategories" :key="c" :label="c">
+ <option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
+ </optgroup>
+ </select>
</header>
<div>
@@ -219,11 +217,11 @@ export default Vue.extend({
});
},
- onMapChange(v) {
- if (v == null) {
+ onMapChange() {
+ if (this.mapName == null) {
this.game.settings.map = null;
} 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.updateSettings();
@@ -250,7 +248,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
-.root
+.urbixznjwwuukfsckrwzwsqzsxornqij
text-align center
background #f9f9f9
@@ -264,6 +262,23 @@ export default Vue.extend({
> .card
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
max-width 400px
border-radius 4px
@@ -291,9 +306,6 @@ export default Vue.extend({
</style>
<style lang="stylus" module>
-.mapSelect
- width 100%
-
.board
display grid
grid-gap 4px
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index e3a62ff627..dd3423a938 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -6,7 +6,7 @@
<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>
<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 class="index" v-else>
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index a9d9dfef27..2c3aa07830 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -1,6 +1,6 @@
<template>
<div class="nvemkhtwcnnpkdrwfcbzuwhfulejhmzg" :class="{ round, primary }">
- <button :type="type" @click="$emit('click')">
+ <button @click="$emit('click')">
<slot></slot>
</button>
</div>