helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

✌️

Browse source
This commit is contained in:
syuilo 2018-03-08 22:11:08 +09:00
parent d7fd29ae5d
commit 2c5d1c6239
3 changed files with 194 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
src/common/othello/maps.ts
View file

@ -10,12 +10,14 @@
export type Map = { export type Map = {
name?: string; name?: string;
category?: string;
size: number; size: number;
data: string; data: string;
}; };
export const fourfour: Map = { export const fourfour: Map = {
name: '4x4', name: '4x4',
category: '4x4',
size: 4, size: 4,
data: data:
'----' + '----' +
@ -26,6 +28,7 @@ export const fourfour: Map = {
export const sixsix: Map = { export const sixsix: Map = {
name: '6x6', name: '6x6',
category: '6x6',
size: 6, size: 6,
data: data:
'------' + '------' +
@ -36,8 +39,35 @@ export const sixsix: Map = {
'------' '------'
}; };
export const roundedSixsix: Map = {
name: '6x6 rounded',
category: '6x6',
size: 6,
data:
' ---- ' +
'------' +
'--wb--' +
'--bw--' +
'------' +
' ---- '
};
export const roundedSixsix2: Map = {
name: '6x6 rounded 2',
category: '6x6',
size: 6,
data:
' -- ' +
' ---- ' +
'--wb--' +
'--bw--' +
' -----' +
' -- '
};
export const eighteight: Map = { export const eighteight: Map = {
name: '8x8', name: '8x8',
category: '8x8',
size: 8, size: 8,
data: data:
'--------' + '--------' +
@ -52,6 +82,7 @@ export const eighteight: Map = {
export const roundedEighteight: Map = { export const roundedEighteight: Map = {
name: '8x8 rounded', name: '8x8 rounded',
category: '8x8',
size: 8, size: 8,
data: data:
' ------ ' + ' ------ ' +
@ -66,6 +97,7 @@ export const roundedEighteight: Map = {
export const roundedEighteight2: Map = { export const roundedEighteight2: Map = {
name: '8x8 rounded 2', name: '8x8 rounded 2',
category: '8x8',
size: 8, size: 8,
data: data:
' ---- ' + ' ---- ' +
@ -78,8 +110,24 @@ export const roundedEighteight2: Map = {
' ---- ' ' ---- '
}; };
export const roundedEighteight3: Map = {
name: '8x8 rounded 3',
category: '8x8',
size: 8,
data:
' -- ' +
' ---- ' +
' ------ ' +
'---wb---' +
'---bw---' +
' ------ ' +
' ---- ' +
' -- '
};
export const eighteightWithNotch: Map = { export const eighteightWithNotch: Map = {
name: '8x8 with notch', name: '8x8 with notch',
category: '8x8',
size: 8, size: 8,
data: data:
'--- ---' + '--- ---' +
@ -94,6 +142,7 @@ export const eighteightWithNotch: Map = {
export const eighteightWithSomeHoles: Map = { export const eighteightWithSomeHoles: Map = {
name: '8x8 with some holes', name: '8x8 with some holes',
category: '8x8',
size: 8, size: 8,
data: data:
'--- ----' + '--- ----' +
@ -106,22 +155,69 @@ export const eighteightWithSomeHoles: Map = {
'--------' '--------'
}; };
export const sixeight: Map = { export const circle: Map = {
name: '6x8', name: 'Circle',
category: '8x8',
size: 8,
data:
' -- ' +
' ------ ' +
' ------ ' +
'---wb---' +
'---bw---' +
' ------ ' +
' ------ ' +
' -- '
};
export const dice: Map = {
name: 'Dice',
category: '8x8',
size: 8,
data:
'--------' +
'- -- -' +
'- -- -' +
'---wb---' +
'---bw---' +
'- -- -' +
'- -- -' +
'--------'
};
export const face: Map = {
name: 'Face',
category: '8x8',
size: 8, size: 8,
data: data:
' ------ ' + ' ------ ' +
'--------' +
'-- -- --' + '-- -- --' +
' ------ ' + '---wb---' +
' --wb-- ' +
'-- bw --' + '-- bw --' +
'--- ---' + '--- ---' +
' ------ ' + '--------' +
' ------ ' ' ------ '
}; };
export const window: Map = {
name: 'Window',
category: '8x8',
size: 8,
data:
'--------' +
'- -- -' +
'- -- -' +
'---wb---' +
'---bw---' +
'- -- -' +
'- -- -' +
'--------'
};
export const tenthtenth: Map = { export const tenthtenth: Map = {
name: '10x10', name: '10x10',
category: '10x10',
size: 10, size: 10,
data: data:
'----------' + '----------' +
@ -137,7 +233,8 @@ export const tenthtenth: Map = {
}; };
export const hole: Map = { export const hole: Map = {
name: 'hole', name: 'The Hole',
category: '10x10',
size: 10, size: 10,
data: data:
'----------' + '----------' +
@ -152,8 +249,41 @@ export const hole: Map = {
'----------' '----------'
}; };
export const grid: Map = {
name: 'Grid',
category: '10x10',
size: 10,
data:
'----------' +
'- - -- - -' +
'----------' +
'- - -- - -' +
'----wb----' +
'----bw----' +
'- - -- - -' +
'----------' +
'- - -- - -' +
'----------'
};
export const sixeight: Map = {
name: '6x8',
category: 'special',
size: 8,
data:
' ------ ' +
' ------ ' +
' ------ ' +
' --wb-- ' +
' --bw-- ' +
' ------ ' +
' ------ ' +
' ------ '
};
export const spark: Map = { export const spark: Map = {
name: 'spark', name: 'Spark',
category: 'special',
size: 10, size: 10,
data: data:
' - - ' + ' - - ' +
@ -169,7 +299,8 @@ export const spark: Map = {
}; };
export const islands: Map = { export const islands: Map = {
name: 'islands', name: 'Islands',
category: 'special',
size: 10, size: 10,
data: data:
'-------- ' + '-------- ' +
@ -184,34 +315,21 @@ export const islands: Map = {
' --------' ' --------'
}; };
export const grid: Map = {
name: 'grid',
size: 10,
data:
'----------' +
'- - -- - -' +
'----------' +
'- - -- - -' +
'----wb----' +
'----bw----' +
'- - -- - -' +
'----------' +
'- - -- - -' +
'----------'
};
export const iphonex: Map = { export const iphonex: Map = {
name: 'iPhone X', name: 'iPhone X',
size: 10, category: 'special',
size: 12,
data: data:
' -- -- ' + ' -- -- ' +
' -------- ' + ' -------- ' +
' -------- ' + ' -------- ' +
' -------- ' + ' -------- ' +
' -------- ' +
' ---wb--- ' + ' ---wb--- ' +
' ---bw--- ' + ' ---bw--- ' +
' -------- ' + ' -------- ' +
' -------- ' + ' -------- ' +
' -------- ' + ' -------- ' +
' -------- ' +
' ------ ' ' ------ '
}; };

11
src/web/app/common/views/components/othello.game.vue
View file

@ -12,7 +12,7 @@
<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }"> <div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }">
<div v-for="(stone, i) in o.board" <div v-for="(stone, i) in o.board"
:class="{ empty: stone == null, none: o.map.data[i] == ' ', myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }" :class="{ empty: stone == null, none: o.map.data[i] == ' ', isEnded: game.is_ended, myTurn: !game.is_ended && isMyTurn, can: turnUser ? o.canPut(turnUser.id == blackUser.id ? 'black' : 'white', i) : null, prev: o.prevPos == i }"
@click="set(i)" @click="set(i)"
> >
<img v-if="stone == 'black'" :src="`${blackUser.avatar_url}?thumbnail&size=128`" alt=""> <img v-if="stone == 'black'" :src="`${blackUser.avatar_url}?thumbnail&size=128`" alt="">
@ -200,13 +200,13 @@ export default Vue.extend({
user-select none user-select none
&.empty &.empty
border solid 2px #f5f5f5 border solid 2px #eee
&.empty.can &.empty.can
background #f5f5f5 background #eee
&.empty.myTurn &.empty.myTurn
border-color #eee border-color #ddd
&.can &.can
background #eee background #eee
@ -222,6 +222,9 @@ export default Vue.extend({
&.prev &.prev
box-shadow 0 0 0 4px rgba($theme-color, 0.7) box-shadow 0 0 0 4px rgba($theme-color, 0.7)
&.isEnded
border-color #ddd
&.none &.none
border-color transparent !important border-color transparent !important

25
src/web/app/common/views/components/othello.room.vue
View file

@ -5,7 +5,9 @@
<p>ゲームの設定</p> <p>ゲームの設定</p>
<el-select v-model="mapName" placeholder="マップを選択" @change="onMapChange"> <el-select v-model="mapName" placeholder="マップを選択" @change="onMapChange">
<el-option v-for="m in maps" :key="m.name" :label="m.name" :value="m.name"/> <el-option-group v-for="c in mapCategories" :key="c" :label="c">
<el-option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name"/>
</el-option-group>
</el-select> </el-select>
<div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }"> <div class="board" :style="{ 'grid-template-rows': `repeat(${ game.settings.map.size }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map.size }, 1fr)` }">
@ -21,6 +23,7 @@
<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/> <mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/>
</div> </div>
<footer>
<p class="status"> <p class="status">
<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template> <template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template> <template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
@ -33,6 +36,7 @@
<el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button> <el-button type="primary" @click="accept" v-if="!isAccepted">準備完了</el-button>
<el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button> <el-button type="primary" @click="cancel" v-if="isAccepted">準備続行</el-button>
</div> </div>
</footer>
</div> </div>
</template> </template>
@ -53,6 +57,10 @@ export default Vue.extend({
}, },
computed: { computed: {
mapCategories(): string[] {
const categories = Object.entries(maps).map(x => x[1].category);
return categories.filter((item, pos) => categories.indexOf(item) == pos);
},
isAccepted(): boolean { isAccepted(): boolean {
if (this.game.user1_id == (this as any).os.i.id && this.game.user1_accepted) return true; if (this.game.user1_id == (this as any).os.i.id && this.game.user1_accepted) return true;
if (this.game.user2_id == (this as any).os.i.id && this.game.user2_accepted) return true; if (this.game.user2_id == (this as any).os.i.id && this.game.user2_accepted) return true;
@ -142,7 +150,7 @@ export default Vue.extend({
> div > div
background transparent background transparent
border solid 2px #eee border solid 2px #ddd
border-radius 6px border-radius 6px
overflow hidden overflow hidden
@ -157,8 +165,15 @@ export default Vue.extend({
> .rules > .rules
max-width 300px max-width 300px
margin 0 auto margin 0 auto 32px auto
> .actions > footer
margin-bottom 16px position sticky
bottom 0
padding 16px
background rgba(255, 255, 255, 0.9)
border-top solid 1px #c4cdd4
> .status
margin 0 0 16px 0
</style> </style>