WIP
This commit is contained in:
Acid Chicken (硫酸鶏)
parent
a483af1b08
commit
8e248680e4
8 changed files with 121 additions and 3 deletions
|
|
@ -147,6 +147,10 @@ common:
|
|||
title: "問題が発生しました"
|
||||
retry: "やり直す"
|
||||
|
||||
games:
|
||||
game: "ゲーム"
|
||||
reversi: "リバーシ"
|
||||
|
||||
reversi:
|
||||
drawn: "引き分け"
|
||||
my-turn: "あなたのターンです"
|
||||
|
|
|
|||
74
src/client/app/common/views/components/games/index.vue
Normal file
74
src/client/app/common/views/components/games/index.vue
Normal 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>
|
||||
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
20
src/client/app/desktop/views/pages/games/index.vue
Normal file
20
src/client/app/desktop/views/pages/games/index.vue
Normal 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>
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
16
src/client/app/mobile/views/pages/games/index.vue
Normal file
16
src/client/app/mobile/views/pages/games/index.vue
Normal 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>
|
||||
Loading…
Reference in a new issue