From 2c0b13784891c0e7f75109051c0411c6bdaf4caf Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 23 Jun 2018 16:55:52 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=AA=E3=83=90=E3=83=BC=E3=82=B7=E3=81=AE?= =?UTF-8?q?=E3=83=A9=E3=83=99=E3=83=AB=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=A7?= =?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/ja.yml | 1 + .../common/views/components/reversi.game.vue | 140 +++++++++++++----- .../app/desktop/views/components/settings.vue | 7 + .../app/mobile/views/pages/settings.vue | 8 + src/client/app/store.ts | 3 +- 5 files changed, 117 insertions(+), 42 deletions(-) diff --git a/locales/ja.yml b/locales/ja.yml index 052dd5997..80fb50ea3 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -54,6 +54,7 @@ common: update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。" my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。" i-like-sushi: "私は(プリンよりむしろ)寿司が好き" + show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示" widgets: analog-clock: "アナログ時計" diff --git a/src/client/app/common/views/components/reversi.game.vue b/src/client/app/common/views/components/reversi.game.vue index dc79c95bb..b38ca856a 100644 --- a/src/client/app/common/views/components/reversi.game.vue +++ b/src/client/app/common/views/components/reversi.game.vue @@ -13,14 +13,23 @@

-
-
- - +
+
+ {{ String.fromCharCode(96 + i) }} +
+
+
+
{{ i }}
+
+
+
+ + +
+
@@ -92,6 +101,12 @@ export default Vue.extend({ isMyTurn(): boolean { if (this.turnUser == null) return null; return this.turnUser.id == this.$store.state.i.id; + }, + cellsStyle(): any { + return { + 'grid-template-rows': `repeat(${ this.game.settings.map.length }, 1fr)`, + 'grid-template-columns': `repeat(${ this.game.settings.map[0].length }, 1fr)` + }; } }, @@ -244,54 +259,97 @@ export default Vue.extend({ border-bottom dashed 1px #c4cdd4 > .board - display grid - grid-gap 4px width 350px height 350px margin 0 auto - > div - background transparent - border-radius 6px - overflow hidden + $label-size = 32px + $gap = 4px - * - pointer-events none - user-select none + > .labels-x + height $label-size + padding-left $label-size + display flex - &.empty - border solid 2px #eee + > * + flex 1 + display flex + align-items center + justify-content center - &.empty.can - background #eee + &:first-child + margin-left -($gap / 2) - &.empty.myTurn - border-color #ddd + &:last-child + margin-right -($gap / 2) - &.can - background #eee - cursor pointer + > .flex + display flex - &:hover - border-color darken($theme-color, 10%) - background $theme-color + > .labels-y + width $label-size + display flex + flex-direction column - &:active - background darken($theme-color, 10%) + > * + flex 1 + display flex + align-items center + justify-content center - &.prev - box-shadow 0 0 0 4px rgba($theme-color, 0.7) + &:first-child + margin-top -($gap / 2) - &.isEnded - border-color #ddd + &:last-child + margin-bottom -($gap / 2) - &.none - border-color transparent !important + > .cells + flex 1 + display grid + grid-gap $gap - > img - display block - width 100% - height 100% + > div + background transparent + border-radius 6px + overflow hidden + + * + pointer-events none + user-select none + + &.empty + border solid 2px #eee + + &.empty.can + background #eee + + &.empty.myTurn + border-color #ddd + + &.can + background #eee + cursor pointer + + &:hover + border-color darken($theme-color, 10%) + background $theme-color + + &:active + background darken($theme-color, 10%) + + &.prev + box-shadow 0 0 0 4px rgba($theme-color, 0.7) + + &.isEnded + border-color #ddd + + &.none + border-color transparent !important + + > img + display block + width 100% + height 100% > .graph display grid diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue index 536d270dc..74ab45626 100644 --- a/src/client/app/desktop/views/components/settings.vue +++ b/src/client/app/desktop/views/components/settings.vue @@ -54,6 +54,7 @@ %i18n:@show-maps-desc% +
@@ -369,6 +370,12 @@ export default Vue.extend({ value: v }); }, + onChangeReversiBoardLabels(v) { + this.$store.dispatch('settings/set', { + key: 'reversiBoardLabels', + value: v + }); + }, onChangeGradientWindowHeader(v) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue index 34482fccb..89e5eaff6 100644 --- a/src/client/app/mobile/views/pages/settings.vue +++ b/src/client/app/mobile/views/pages/settings.vue @@ -13,6 +13,7 @@ %i18n:@dark-mode% %i18n:@circle-icons% %i18n:common.i-like-sushi% + %i18n:common.show-reversi-board-labels%
%i18n:@timeline%
@@ -182,6 +183,13 @@ export default Vue.extend({ }); }, + onChangeReversiBoardLabels(v) { + this.$store.dispatch('settings/set', { + key: 'reversiBoardLabels', + value: v + }); + }, + onChangeShowReplyTarget(v) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', diff --git a/src/client/app/store.ts b/src/client/app/store.ts index 1bc39ae66..dfb24bb5f 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -19,7 +19,8 @@ const defaultSettings = { loadRemoteMedia: true, disableViaMobile: false, memo: null, - iLikeSushi: false + iLikeSushi: false, + reversiBoardLabels: false }; const defaultDeviceSettings = {