mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-23 23:23:09 +02:00
✌️
This commit is contained in:
parent
d7fd29ae5d
commit
2c5d1c6239
3 changed files with 194 additions and 58 deletions
|
@ -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--- ' +
|
' -------- ' +
|
||||||
' ---bw--- ' +
|
' ---wb--- ' +
|
||||||
' -------- ' +
|
' ---bw--- ' +
|
||||||
' -------- ' +
|
' -------- ' +
|
||||||
' -------- ' +
|
' -------- ' +
|
||||||
' ------ '
|
' -------- ' +
|
||||||
|
' -------- ' +
|
||||||
|
' ------ '
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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,18 +23,20 @@
|
||||||
<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/>
|
<mk-switch v-model="game.settings.is_llotheo" @change="onIsLlotheoChange" text="石の少ない方が勝ち(ロセオ)"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="status">
|
<footer>
|
||||||
<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
|
<p class="status">
|
||||||
<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
|
<template v-if="isAccepted && isOpAccepted">ゲームは数秒後に開始されます<mk-ellipsis/></template>
|
||||||
<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
|
<template v-if="isAccepted && !isOpAccepted">相手の準備が完了するのを待っています<mk-ellipsis/></template>
|
||||||
<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
|
<template v-if="!isAccepted && isOpAccepted">あなたの準備が完了するのを待っています</template>
|
||||||
</p>
|
<template v-if="!isAccepted && !isOpAccepted">準備中<mk-ellipsis/></template>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<el-button @click="exit">キャンセル</el-button>
|
<el-button @click="exit">キャンセル</el-button>
|
||||||
<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>
|
||||||
|
|
Loading…
Reference in a new issue