Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✌️

Browse Source
This commit is contained in:
syuilo 2018-03-10 13:22:20 +09:00
parent a8d086596f
commit 9010e73d12
4 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -182,6 +182,7 @@
"uglifyjs-webpack-plugin": "1.2.0", "uglifyjs-webpack-plugin": "1.2.0",
"url-loader": "^0.6.2", "url-loader": "^0.6.2",
"uuid": "3.2.1", "uuid": "3.2.1",
"v-animate-css": "0.0.2",
"vhost": "3.0.2", "vhost": "3.0.2",
"vue": "2.5.13", "vue": "2.5.13",
"vue-cropperjs": "2.2.0", "vue-cropperjs": "2.2.0",

17
src/web/app/common/views/components/othello.game.vue
View File

@ -2,13 +2,16 @@
<div class="root"> <div class="root">
<header><b>{{ blackUser.name }}</b>(黒) vs <b>{{ whiteUser.name }}</b>(白)</header> <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> <div style="overflow: hidden">
<p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p> <p class="turn" v-if="!iAmPlayer && !game.is_ended">{{ turnUser.name }}のターンです<mk-ellipsis/></p>
<p class="turn" v-if="iAmPlayer && !game.is_ended">{{ isMyTurn ? 'あなたのターンです' : '相手のターンです' }}<mk-ellipsis v-if="!isMyTurn"/></p> <p class="turn" v-if="logPos != logs.length">{{ turnUser.name }}のターン</p>
<p class="result" v-if="game.is_ended && logPos == logs.length"> <p class="turn1" v-if="iAmPlayer && !game.is_ended && !isMyTurn">相手のターンです<mk-ellipsis/></p>
<template v-if="game.winner"><b>{{ game.winner.name }}</b>の勝ち{{ game.settings.is_llotheo ? ' (ロセオ)' : '' }}</template> <p class="turn2" v-if="iAmPlayer && !game.is_ended && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">あなたのターンです</p>
<template v-else>引き分け</template> <p class="result" v-if="game.is_ended && logPos == logs.length">
</p> <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 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" <div v-for="(stone, i) in o.board"

10
src/web/app/common/views/components/othello.vue
View File

@ -39,21 +39,21 @@
</section> </section>
<section v-if="myGames.length > 0"> <section v-if="myGames.length > 0">
<h2>自分の対局</h2> <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.user1.avatar_url}?thumbnail&size=32`" alt="">
<img :src="`${g.user2.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><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
<span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span>
</div> </a>
</section> </section>
<section v-if="games.length > 0"> <section v-if="games.length > 0">
<h2>みんなの対局</h2> <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.user1.avatar_url}?thumbnail&size=32`" alt="">
<img :src="`${g.user2.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><b>{{ g.user1.name }}</b> vs <b>{{ g.user2.name }}</b></span>
<span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span> <span class="state">{{ g.is_ended ? '終了' : '進行中' }}</span>
</div> </a>
</section> </section>
</div> </div>
</div> </div>
@ -265,8 +265,10 @@ export default Vue.extend({
line-height 32px line-height 32px
.game .game
display block
margin 8px 0 margin 8px 0
padding 8px padding 8px
color #677f84
border solid 1px #e1e5e8 border solid 1px #e1e5e8
border-radius 6px border-radius 6px
cursor pointer cursor pointer

2
src/web/app/init.ts
View File

@ -6,6 +6,7 @@ import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import VModal from 'vue-js-modal'; import VModal from 'vue-js-modal';
import * as TreeView from 'vue-json-tree-view'; import * as TreeView from 'vue-json-tree-view';
import VAnimateCss from 'v-animate-css';
import Element from 'element-ui'; import Element from 'element-ui';
import ElementLocaleEn from 'element-ui/lib/locale/lang/en'; import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
import ElementLocaleJa from 'element-ui/lib/locale/lang/ja'; import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
@ -25,6 +26,7 @@ switch (lang) {
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(VModal); Vue.use(VModal);
Vue.use(TreeView); Vue.use(TreeView);
Vue.use(VAnimateCss);
Vue.use(Element, { locale: elementLocale }); Vue.use(Element, { locale: elementLocale });
// Register global directives // Register global directives