WIP

locales/ja-JP.yml

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

src/client/app/common/views/components/games/index.vue

@@ -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>
+

src/client/app/desktop/script.ts

@@ -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 },

src/client/app/desktop/views/components/game-window.vue

@@ -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 {

src/client/app/desktop/views/pages/games/index.vue

@@ -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>

src/client/app/mobile/script.ts

@@ -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 },

src/client/app/mobile/views/components/ui.nav.vue

@@ -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>

src/client/app/mobile/views/pages/games/index.vue

@@ -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>