diff --git a/src/web/app/common/views/components/othello.vue b/src/web/app/common/views/components/othello.vue
index d4157eb76..70bb6b2ef 100644
--- a/src/web/app/common/views/components/othello.vue
+++ b/src/web/app/common/views/components/othello.vue
@@ -67,6 +67,7 @@ export default Vue.extend({
components: {
XGameroom
},
+ props: ['initGame'],
data() {
return {
game: null,
@@ -80,6 +81,16 @@ export default Vue.extend({
connectionId: null
};
},
+ watch: {
+ game(g) {
+ this.$emit('gamed', g);
+ }
+ },
+ created() {
+ if (this.initGame) {
+ this.game = this.initGame;
+ }
+ },
mounted() {
this.connection = (this as any).os.streams.othelloStream.getConnection();
this.connectionId = (this as any).os.streams.othelloStream.use();
@@ -162,6 +173,7 @@ export default Vue.extend({
.mk-othello
color #677f84
+ background #fff
> .matching
> h1
diff --git a/src/web/app/desktop/script.ts b/src/web/app/desktop/script.ts
index 78549741b..25a60d7ec 100644
--- a/src/web/app/desktop/script.ts
+++ b/src/web/app/desktop/script.ts
@@ -28,6 +28,7 @@ import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkPost from './views/pages/post.vue';
import MkSearch from './views/pages/search.vue';
+import MkOthello from './views/pages/othello.vue';
/**
* init
@@ -80,6 +81,8 @@ init(async (launch) => {
{ path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch },
+ { path: '/othello', component: MkOthello },
+ { path: '/othello/:game', component: MkOthello },
{ path: '/:user', component: MkUser },
{ path: '/:user/:post', component: MkPost }
]);
diff --git a/src/web/app/desktop/views/components/game-window.vue b/src/web/app/desktop/views/components/game-window.vue
index bf339092a..3c8bf40e1 100644
--- a/src/web/app/desktop/views/components/game-window.vue
+++ b/src/web/app/desktop/views/components/game-window.vue
@@ -1,14 +1,27 @@
-