Compare commits

...

1 Commits

Author SHA1 Message Date
Acid Chicken (硫酸鶏) 8e248680e4
WIP 2019-01-21 17:36:24 +09:00
8 changed files with 121 additions and 3 deletions

View File

@ -147,6 +147,10 @@ common:
title: "問題が発生しました"
retry: "やり直す"
games:
game: "ゲーム"
reversi: "リバーシ"
reversi:
drawn: "引き分け"
my-turn: "あなたのターンです"

View File

@ -0,0 +1,74 @@
<template>
<div class="libshizuoka83ohishiizumi55suki82">
<router-link to="reversi" append tag="figure">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><circle cx="104" cy="104" r="18" fill="var(--bg)"/><defs><circle id="a" cx="104" cy="104" r="15"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><g clip-path="url(#b)"><path fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M126.9 78.4l-48 48m50.8-45.2l-48 48M132.5 84l-48 48m33.9-62.1l-48 48m50.8-45.2l-48 48M124 75.5l-48 48m11.3 11.3l48-48m2.9 2.9l-48 48"/></g><circle cx="104" cy="104" r="17" fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="152" cy="152" r="18" fill="var(--bg)"/><defs><circle id="c" cx="152" cy="152" r="15"/></defs><clipPath id="d"><use overflow="visible" xlink:href="#c"/></clipPath><g clip-path="url(#d)"><path fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M174.9 126.4l-48 48m50.8-45.2l-48 48m50.8-45.2l-48 48m33.9-62.1l-48 48m50.8-45.2l-48 48m50.8-45.2l-48 48m11.3 11.3l48-48m2.9 2.9l-48 48"/></g><circle cx="152" cy="152" r="17" fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="152" cy="104" r="18" fill="var(--bg)"/><circle cx="152" cy="104" r="17" fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="104" cy="152" r="18" fill="var(--bg)"/><circle cx="104" cy="152" r="17" fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/><circle cx="56" cy="56" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><circle cx="56" cy="104" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><g><circle cx="56" cy="152" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="56" cy="200" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="104" cy="56" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="152" cy="56" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="200" cy="56" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="200" cy="104" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="200" cy="152" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="104" cy="200" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="152" cy="200" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g><g><circle cx="200" cy="200" r="17" fill="none" stroke="var(--primary)" stroke-dasharray="0 5.933" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><circle cx="128" cy="128" r="72" fill="var(--bg)"/><defs><circle id="e" cx="128" cy="128" r="60"/></defs><clipPath id="f"><use overflow="visible" xlink:href="#e"/></clipPath><g clip-path="url(#f)"><path fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8" d="M219.4 25.4l-192 192M230.7 36.8l-192 192M242 48.1l-192 192M185.5-8.5l-192 192M196.8 2.8l-192 192M208.1 14.1l-192 192m45.3 45.3l192-192m11.3 11.3l-192 192"/></g><circle cx="128" cy="128" r="68" fill="none" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="8"/></svg>
</div>
<figcaption>{{ $t('@.games.reversi') }}</figcaption>
</router-link>
</div>
</template>
<style lang="stylus" scoped>
.libshizuoka83ohishiizumi55suki82
align-items center
background var(--secondary)
bottom 0
display flex
justify-content center
left 0
position fixed
right 0
top 0
figure
flex 0 1 256px
transform translateY(0)
transition transform .1s ease
div
background var(--bg)
border-radius 25%
box-shadow 0 4px 8px rgba(#000, .2)
height 256px
transition box-shadow .1s ease
svg
opacity 1
transition opacity .1s ease
&:last-child
height 100%
left 0
opacity 0
position absolute
transform rotateX(45deg) rotateY(-15deg) rotateZ(30deg) translateZ(-24px)
transition opacity .1s ease, transform .1s ease
width 100%
figcaption
color var(--primary)
font-size 24pt
margin 16px 0 0
text-align center
text-shadow 0 4px 8px rgba(#000, .2)
transition text-shadow .1s ease
&:hover
transform translateY(-4px)
div
box-shadow 0 8px 8px rgba(#000, .2)
svg
opacity 0
&:last-child
opacity 1
transform rotateX(45deg) rotateY(-15deg) rotateZ(30deg)
figcaption
text-shadow 0 8px 8px rgba(#000, .2)
</style>

View File

@ -25,6 +25,7 @@ import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue';
import MkSearch from './views/pages/search.vue';
import MkTag from './views/pages/tag.vue';
import MkGames from './views/pages/games/index.vue';
import MkReversi from './views/pages/games/reversi.vue';
import MkShare from './views/pages/share.vue';
import MkFollow from '../common/views/pages/follow.vue';
@ -147,6 +148,7 @@ init(async (launch) => {
{ path: '/search', component: MkSearch },
{ path: '/tags/:tag', name: 'tag', component: MkTag },
{ path: '/share', component: MkShare },
{ path: '/games', component: MkGames },
{ path: '/games/reversi/:game?', component: MkReversi },
{ path: '/@:user', name: 'user', component: MkUser },
{ path: '/@:user/following', name: 'userFollowing', component: MkUserFollowingOrFollowers },

View File

@ -1,7 +1,7 @@
<template>
<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
<span slot="header" :class="$style.header"><fa icon="gamepad"/>{{ $t('game') }}</span>
<x-reversi :class="$style.content" @gamed="g => game = g"/>
<x-game :class="$style.content" />
</mk-window>
</template>
@ -13,7 +13,7 @@ import { url } from '../../../config';
export default Vue.extend({
i18n: i18n('desktop/views/components/game-window.vue'),
components: {
XReversi: () => import('../../../common/views/components/games/reversi/reversi.vue').then(m => m.default)
XGame: () => import('../../../common/views/components/games/index.vue').then(m => m.default)
},
data() {
return {

View File

@ -0,0 +1,20 @@
<template>
<component :is="ui ? 'mk-ui' : 'div'">
<x-games />
</component>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components: {
XGames: () => import('../../../../common/views/components/games/index.vue').then(m => m.default)
},
props: {
ui: {
default: false
}
}
});
</script>

View File

@ -27,6 +27,7 @@ import MkFollowing from './views/pages/following.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkUserLists from './views/pages/user-lists.vue';
import MkUserList from './views/pages/user-list.vue';
import MkGames from './views/pages/games/index.vue';
import MkReversi from './views/pages/games/reversi.vue';
import MkTag from './views/pages/tag.vue';
import MkShare from './views/pages/share.vue';
@ -135,6 +136,7 @@ init((launch) => {
{ path: '/search', component: MkSearch },
{ path: '/tags/:tag', component: MkTag },
{ path: '/share', component: MkShare },
{ path: '/games', component: MkGames },
{ path: '/games/reversi/:game?', name: 'reversi', component: MkReversi },
{ path: '/@:user', component: () => import('./views/pages/user.vue').then(m => m.default) },
{ path: '/@:user/followers', component: MkFollowers },

View File

@ -19,7 +19,7 @@
<li><router-link to="/i/notifications" :data-active="$route.name == 'notifications'"><i><fa :icon="['far', 'bell']" fixed-width/></i>{{ $t('notifications') }}<i v-if="hasUnreadNotification" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']" fixed-width/></i>{{ $t('@.messaging') }}<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'"><i><fa :icon="['far', 'envelope']" fixed-width/></i>{{ $t('follow-requests') }}<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/games/reversi" :data-active="$route.name == 'reversi'"><i><fa icon="gamepad" fixed-width/></i>{{ $t('game') }}<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
<li><router-link to="/games" :data-active="$route.name == 'game'"><i><fa icon="gamepad" fixed-width/></i>{{ $t('@.games.game') }}<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
</ul>
<ul>
<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'"><i><fa :icon="['far', 'calendar-alt']" fixed-width/></i>{{ $t('widgets') }}<i><fa icon="angle-right"/></i></router-link></li>

View File

@ -0,0 +1,16 @@
<template>
<mk-ui>
<span slot="header"><span style="margin-right:4px;"><fa icon="gamepad"/></span>{{ $t('@.games.game') }}</span>
<x-games />
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components: {
XGames: () => import('../../../../common/views/components/games/index.vue').then(m => m.default)
}
});
</script>