diff options
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/common/views/components/othello.game.vue | 17 | ||||
| -rw-r--r-- | src/web/app/common/views/components/othello.vue | 10 | ||||
| -rw-r--r-- | src/web/app/init.ts | 2 |
3 files changed, 18 insertions, 11 deletions
diff --git a/src/web/app/common/views/components/othello.game.vue b/src/web/app/common/views/components/othello.game.vue index 31030f614f..26612daeac 100644 --- a/src/web/app/common/views/components/othello.game.vue +++ b/src/web/app/common/views/components/othello.game.vue @@ -2,13 +2,16 @@ <div class="root"> <header><b>{{ blackUser.name }}</b>(黒) vs <b>{{ whiteUser.name }}</b>(白)</header> - <p class="turn" v-if="!iAmPlayer && !game.is_ended">{{ turnUser.name }}のターンです<mk-ellipsis/></p> - <p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p> - <p class="turn" v-if="iAmPlayer && !game.is_ended">{{ isMyTurn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!isMyTurn"/></p> - <p class="result" v-if="game.is_ended && logPos == logs.length"> - <template v-if="game.winner"><b>{{ game.winner.name }}</b>の勝ち{{ game.settings.is_llotheo ? ' (ロセオ)' : '' }}</template> - <template v-else>引き分け</template> - </p> + <div style="overflow: hidden"> + <p class="turn" v-if="!iAmPlayer && !game.is_ended">{{ turnUser.name }}のターンです<mk-ellipsis/></p> + <p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p> + <p class="turn1" v-if="iAmPlayer && !game.is_ended && !isMyTurn">相手のターンです<mk-ellipsis/></p> + <p class="turn2" v-if="iAmPlayer && !game.is_ended && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">あなたのターンです</p> + <p class="result" v-if="game.is_ended && logPos == logs.length"> + <template v-if="game.winner"><b>{{ game.winner.name }}</b>の勝ち{{ game.settings.is_llotheo ? ' (ロセオ)' : '' }}</template> + <template v-else>引き分け</template> + </p> + </div> <div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }"> <div v-for="(stone, i) in o.board" diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue index 70bb6b2ef5..81da02d1c4 100644 --- a/src/web/app/common/views/components/othello.vue +++ b/src/web/app/common/views/components/othello.vue @@ -39,21 +39,21 @@ </section> <section v-if="myGames.length > 0"> <h2>自分の対局</h2> - <div class="game" v-for="g in myGames" tabindex="-1" @click="go(g)"> + <a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`"> <img :src="`${g.user1.avatar_url}?thumbnail&size=32`" alt=""> <img :src="`${g.user2.avatar_url}?thumbnail&size=32`" alt=""> <span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span> <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> - </div> + </a> </section> <section v-if="games.length > 0"> <h2>みんなの対局</h2> - <div class="game" v-for="g in games" tabindex="-1" @click="go(g)"> + <a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/othello/${g.id}`"> <img :src="`${g.user1.avatar_url}?thumbnail&size=32`" alt=""> <img :src="`${g.user2.avatar_url}?thumbnail&size=32`" alt=""> <span><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span> <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> - </div> + </a> </section> </div> </div> @@ -265,8 +265,10 @@ export default Vue.extend({ line-height 32px .game + display block margin 8px 0 padding 8px + color #677f84 border solid 1px #e1e5e8 border-radius 6px cursor pointer diff --git a/src/web/app/init.ts b/src/web/app/init.ts index 52d2ecf99a..28adfd3b07 100644 --- a/src/web/app/init.ts +++ b/src/web/app/init.ts @@ -6,6 +6,7 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import VModal from 'vue-js-modal'; import * as TreeView from 'vue-json-tree-view'; +import VAnimateCss from 'v-animate-css'; import Element from 'element-ui'; import ElementLocaleEn from 'element-ui/lib/locale/lang/en'; import ElementLocaleJa from 'element-ui/lib/locale/lang/ja'; @@ -25,6 +26,7 @@ switch (lang) { Vue.use(VueRouter); Vue.use(VModal); Vue.use(TreeView); +Vue.use(VAnimateCss); Vue.use(Element, { locale: elementLocale }); // Register global directives |