This commit is contained in:
syuilo 2018-03-10 01:48:16 +09:00
parent 17b41eced9
commit f5fec3d008
7 changed files with 119 additions and 6 deletions

View file

@ -67,6 +67,7 @@ export default Vue.extend({
components: { components: {
XGameroom XGameroom
}, },
props: ['initGame'],
data() { data() {
return { return {
game: null, game: null,
@ -80,6 +81,16 @@ export default Vue.extend({
connectionId: null connectionId: null
}; };
}, },
watch: {
game(g) {
this.$emit('gamed', g);
}
},
created() {
if (this.initGame) {
this.game = this.initGame;
}
},
mounted() { mounted() {
this.connection = (this as any).os.streams.othelloStream.getConnection(); this.connection = (this as any).os.streams.othelloStream.getConnection();
this.connectionId = (this as any).os.streams.othelloStream.use(); this.connectionId = (this as any).os.streams.othelloStream.use();
@ -162,6 +173,7 @@ export default Vue.extend({
.mk-othello .mk-othello
color #677f84 color #677f84
background #fff
> .matching > .matching
> h1 > h1

View file

@ -28,6 +28,7 @@ import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue'; import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkPost from './views/pages/post.vue'; import MkPost from './views/pages/post.vue';
import MkSearch from './views/pages/search.vue'; import MkSearch from './views/pages/search.vue';
import MkOthello from './views/pages/othello.vue';
/** /**
* init * init
@ -80,6 +81,8 @@ init(async (launch) => {
{ path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/selectdrive', component: MkSelectDrive }, { path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch }, { path: '/search', component: MkSearch },
{ path: '/othello', component: MkOthello },
{ path: '/othello/:game', component: MkOthello },
{ path: '/:user', component: MkUser }, { path: '/:user', component: MkUser },
{ path: '/:user/:post', component: MkPost } { path: '/:user/:post', component: MkPost }
]); ]);

View file

@ -1,14 +1,27 @@
<template> <template>
<mk-window ref="window" width="500px" height="560px" @closed="$destroy"> <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
<span slot="header" :class="$style.header">%fa:gamepad%オセロ</span> <span slot="header" :class="$style.header">%fa:gamepad%オセロ</span>
<mk-othello :class="$style.content"/> <mk-othello :class="$style.content" @gamed="g => game = g"/>
</mk-window> </mk-window>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ import { url } from '../../../config';
export default Vue.extend({
data() {
return {
game: null
};
},
computed: {
popout(): string {
return this.game
? `${url}/othello/${this.game.id}`
: `${url}/othello`;
}
}
}); });
</script> </script>

View file

@ -0,0 +1,50 @@
<template>
<component :is="ui ? 'mk-ui' : 'div'">
<mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
</component>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
export default Vue.extend({
props: {
ui: {
default: false
}
},
data() {
return {
fetching: false,
game: null
};
},
watch: {
$route: 'fetch'
},
created() {
this.fetch();
},
methods: {
fetch() {
if (this.$route.params.game == null) return;
Progress.start();
this.fetching = true;
(this as any).api('othello/games/show', {
game_id: this.$route.params.game
}).then(game => {
this.game = game;
this.fetching = false;
Progress.done();
});
},
onGamed(game) {
history.pushState(null, null, '/othello/' + game.id);
}
}
});
</script>

View file

@ -69,7 +69,8 @@ init((launch) => {
{ path: '/i/drive/file/:file', component: MkDrive }, { path: '/i/drive/file/:file', component: MkDrive },
{ path: '/selectdrive', component: MkSelectDrive }, { path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch }, { path: '/search', component: MkSearch },
{ path: '/game/othello', component: MkOthello }, { path: '/othello', component: MkOthello },
{ path: '/othello/:game', component: MkOthello },
{ path: '/:user', component: MkUser }, { path: '/:user', component: MkUser },
{ path: '/:user/followers', component: MkFollowers }, { path: '/:user/followers', component: MkFollowers },
{ path: '/:user/following', component: MkFollowing }, { path: '/:user/following', component: MkFollowing },

View file

@ -18,7 +18,7 @@
<li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li> <li><router-link to="/">%fa:home%%i18n:mobile.tags.mk-ui-nav.home%%fa:angle-right%</router-link></li>
<li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li> <li><router-link to="/i/notifications">%fa:R bell%%i18n:mobile.tags.mk-ui-nav.notifications%<template v-if="hasUnreadNotifications">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li> <li><router-link to="/i/messaging">%fa:R comments%%i18n:mobile.tags.mk-ui-nav.messaging%<template v-if="hasUnreadMessagingMessages">%fa:circle%</template>%fa:angle-right%</router-link></li>
<li><router-link to="/game/othello">%fa:gamepad%ゲーム%fa:angle-right%</router-link></li> <li><router-link to="/othello">%fa:gamepad%ゲーム%fa:angle-right%</router-link></li>
</ul> </ul>
<ul> <ul>
<li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li> <li><a :href="chUrl" target="_blank">%fa:tv%%i18n:mobile.tags.mk-ui-nav.ch%%fa:angle-right%</a></li>

View file

@ -1,16 +1,50 @@
<template> <template>
<mk-ui> <mk-ui>
<span slot="header">%fa:gamepad%オセロ</span> <span slot="header">%fa:gamepad%オセロ</span>
<mk-othello/> <mk-othello v-if="!fetching" :init-game="game" @gamed="onGamed"/>
</mk-ui> </mk-ui>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
export default Vue.extend({ export default Vue.extend({
data() {
return {
fetching: false,
game: null
};
},
watch: {
$route: 'fetch'
},
created() {
this.fetch();
},
mounted() { mounted() {
document.title = 'Misskey オセロ'; document.title = 'Misskey オセロ';
document.documentElement.style.background = '#fff'; document.documentElement.style.background = '#fff';
},
methods: {
fetch() {
if (this.$route.params.game == null) return;
Progress.start();
this.fetching = true;
(this as any).api('othello/games/show', {
game_id: this.$route.params.game
}).then(game => {
this.game = game;
this.fetching = false;
Progress.done();
});
},
onGamed(game) {
history.pushState(null, null, '/othello/' + game.id);
}
} }
}); });
</script> </script>