enhance(games): 抜けている翻訳を追加・スタイル共通化 (#13434)
* enhance(games): 抜けている翻訳を追加・スタイル共通化 * frameDivider の使用箇所が見当たらなかったので削除 * ミス * インナーでもcss変数を使う * コロンを翻訳から外す * 一部の翻訳を除去 * p * revert some text --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
parent
600d91beda
commit
d834232232
6 changed files with 177 additions and 127 deletions
62
locales/index.d.ts
vendored
62
locales/index.d.ts
vendored
|
@ -4856,6 +4856,14 @@ export interface Locale extends ILocale {
|
||||||
* リプレイ中
|
* リプレイ中
|
||||||
*/
|
*/
|
||||||
"replaying": string;
|
"replaying": string;
|
||||||
|
/**
|
||||||
|
* リプレイを終了
|
||||||
|
*/
|
||||||
|
"endReplay": string;
|
||||||
|
/**
|
||||||
|
* リプレイデータをコピー
|
||||||
|
*/
|
||||||
|
"copyReplayData": string;
|
||||||
/**
|
/**
|
||||||
* ランキング
|
* ランキング
|
||||||
*/
|
*/
|
||||||
|
@ -4884,11 +4892,57 @@ export interface Locale extends ILocale {
|
||||||
* スワイプしてタブを切り替える
|
* スワイプしてタブを切り替える
|
||||||
*/
|
*/
|
||||||
"enableHorizontalSwipe": string;
|
"enableHorizontalSwipe": string;
|
||||||
|
/**
|
||||||
|
* 読み込み中
|
||||||
|
*/
|
||||||
|
"loading": string;
|
||||||
|
/**
|
||||||
|
* やめる
|
||||||
|
*/
|
||||||
|
"surrender": string;
|
||||||
|
/**
|
||||||
|
* リトライ
|
||||||
|
*/
|
||||||
|
"gameRetry": string;
|
||||||
"_bubbleGame": {
|
"_bubbleGame": {
|
||||||
/**
|
/**
|
||||||
* 遊び方
|
* 遊び方
|
||||||
*/
|
*/
|
||||||
"howToPlay": string;
|
"howToPlay": string;
|
||||||
|
/**
|
||||||
|
* ホールド
|
||||||
|
*/
|
||||||
|
"hold": string;
|
||||||
|
"_score": {
|
||||||
|
/**
|
||||||
|
* スコア
|
||||||
|
*/
|
||||||
|
"score": string;
|
||||||
|
/**
|
||||||
|
* 稼いだ金額
|
||||||
|
*/
|
||||||
|
"scoreYen": string;
|
||||||
|
/**
|
||||||
|
* ハイスコア
|
||||||
|
*/
|
||||||
|
"highScore": string;
|
||||||
|
/**
|
||||||
|
* 最大チェーン数
|
||||||
|
*/
|
||||||
|
"maxChain": string;
|
||||||
|
/**
|
||||||
|
* {yen}円
|
||||||
|
*/
|
||||||
|
"yen": ParameterizedString<"yen">;
|
||||||
|
/**
|
||||||
|
* {qty}個分
|
||||||
|
*/
|
||||||
|
"estimatedQty": ParameterizedString<"qty">;
|
||||||
|
/**
|
||||||
|
* おにぎり {onigiriQtyWithUnit}
|
||||||
|
*/
|
||||||
|
"scoreSweets": ParameterizedString<"onigiriQtyWithUnit">;
|
||||||
|
};
|
||||||
"_howToPlay": {
|
"_howToPlay": {
|
||||||
/**
|
/**
|
||||||
* 位置を調整してハコにモノを落とします。
|
* 位置を調整してハコにモノを落とします。
|
||||||
|
@ -9659,6 +9713,14 @@ export interface Locale extends ILocale {
|
||||||
* 変則なし
|
* 変則なし
|
||||||
*/
|
*/
|
||||||
"disallowIrregularRules": string;
|
"disallowIrregularRules": string;
|
||||||
|
/**
|
||||||
|
* 盤面に行・列番号を表示
|
||||||
|
*/
|
||||||
|
"showBoardLabels": string;
|
||||||
|
/**
|
||||||
|
* 石をアイコンにする
|
||||||
|
*/
|
||||||
|
"useAvatarAsStone": string;
|
||||||
};
|
};
|
||||||
"_offlineScreen": {
|
"_offlineScreen": {
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1210,6 +1210,8 @@ soundWillBePlayed: "サウンドが再生されます"
|
||||||
showReplay: "リプレイを見る"
|
showReplay: "リプレイを見る"
|
||||||
replay: "リプレイ"
|
replay: "リプレイ"
|
||||||
replaying: "リプレイ中"
|
replaying: "リプレイ中"
|
||||||
|
endReplay: "リプレイを終了"
|
||||||
|
copyReplayData: "リプレイデータをコピー"
|
||||||
ranking: "ランキング"
|
ranking: "ランキング"
|
||||||
lastNDays: "直近{n}日"
|
lastNDays: "直近{n}日"
|
||||||
backToTitle: "タイトルへ"
|
backToTitle: "タイトルへ"
|
||||||
|
@ -1217,9 +1219,21 @@ hemisphere: "お住まいの地域"
|
||||||
withSensitive: "センシティブなファイルを含むノートを表示"
|
withSensitive: "センシティブなファイルを含むノートを表示"
|
||||||
userSaysSomethingSensitive: "{name}のセンシティブなファイルを含む投稿"
|
userSaysSomethingSensitive: "{name}のセンシティブなファイルを含む投稿"
|
||||||
enableHorizontalSwipe: "スワイプしてタブを切り替える"
|
enableHorizontalSwipe: "スワイプしてタブを切り替える"
|
||||||
|
loading: "読み込み中"
|
||||||
|
surrender: "やめる"
|
||||||
|
gameRetry: "リトライ"
|
||||||
|
|
||||||
_bubbleGame:
|
_bubbleGame:
|
||||||
howToPlay: "遊び方"
|
howToPlay: "遊び方"
|
||||||
|
hold: "ホールド"
|
||||||
|
_score:
|
||||||
|
score: "スコア"
|
||||||
|
scoreYen: "稼いだ金額"
|
||||||
|
highScore: "ハイスコア"
|
||||||
|
maxChain: "最大チェーン数"
|
||||||
|
yen: "{yen}円"
|
||||||
|
estimatedQty: "{qty}個分"
|
||||||
|
scoreSweets: "おにぎり {onigiriQtyWithUnit}"
|
||||||
_howToPlay:
|
_howToPlay:
|
||||||
section1: "位置を調整してハコにモノを落とします。"
|
section1: "位置を調整してハコにモノを落とします。"
|
||||||
section2: "同じ種類のモノがくっつくと別のモノに変化して、スコアが得られます。"
|
section2: "同じ種類のモノがくっつくと別のモノに変化して、スコアが得られます。"
|
||||||
|
@ -2572,6 +2586,8 @@ _reversi:
|
||||||
opponentHasSettingsChanged: "相手が設定を変更しました"
|
opponentHasSettingsChanged: "相手が設定を変更しました"
|
||||||
allowIrregularRules: "変則許可 (完全フリー)"
|
allowIrregularRules: "変則許可 (完全フリー)"
|
||||||
disallowIrregularRules: "変則なし"
|
disallowIrregularRules: "変則なし"
|
||||||
|
showBoardLabels: "盤面に行・列番号を表示"
|
||||||
|
useAvatarAsStone: "石をアイコンにする"
|
||||||
|
|
||||||
_offlineScreen:
|
_offlineScreen:
|
||||||
title: "オフライン - サーバーに接続できません"
|
title: "オフライン - サーバーに接続できません"
|
||||||
|
|
|
@ -7,9 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkSpacer :contentMax="800">
|
<MkSpacer :contentMax="800">
|
||||||
<div :class="$style.root">
|
<div :class="$style.root">
|
||||||
<div v-if="!gameLoaded" :class="$style.loadingScreen">
|
<div v-if="!gameLoaded" :class="$style.loadingScreen">
|
||||||
<div>
|
<div>{{ i18n.ts.loading }}<MkEllipsis/></div>
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- ↓に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
|
<!-- ↓に対してTransitionコンポーネントを使うと何故かkeyを指定していてもキャッシュが効かず様々なコンポーネントが都度再評価されてパフォーマンスが低下する -->
|
||||||
<div v-show="gameLoaded" class="_gaps_s">
|
<div v-show="gameLoaded" class="_gaps_s">
|
||||||
|
@ -32,18 +30,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
||||||
<div :class="$style.header">
|
<div :class="$style.header">
|
||||||
<div :class="[$style.frame, $style.headerTitle]">
|
<div class="_woodenFrame" :class="[$style.headerTitle]">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<b>BUBBLE GAME</b>
|
<b>{{ i18n.ts.bubbleGame }}</b>
|
||||||
<div>- {{ gameMode }} -</div>
|
<div>- {{ gameMode.toUpperCase() }} -</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.frame, $style.frameH]">
|
<div class="_woodenFrame _woodenFrameH">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<MkButton inline small @click="hold">HOLD</MkButton>
|
<MkButton inline small @click="hold">{{ i18n.ts._bubbleGame.hold }}</MkButton>
|
||||||
<img v-if="holdingStock" :src="getTextureImageUrl(holdingStock.mono)" style="width: 32px; margin-left: 8px; vertical-align: bottom;"/>
|
<img v-if="holdingStock" :src="getTextureImageUrl(holdingStock.mono)" style="width: 32px; margin-left: 8px; vertical-align: bottom;"/>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.frameInner, $style.stock]" style="text-align: center;">
|
<div class="_woodenFrameInner" :class="$style.stock" style="text-align: center;">
|
||||||
<TransitionGroup
|
<TransitionGroup
|
||||||
:enterActiveClass="$style.transition_stock_enterActive"
|
:enterActiveClass="$style.transition_stock_enterActive"
|
||||||
:leaveActiveClass="$style.transition_stock_leaveActive"
|
:leaveActiveClass="$style.transition_stock_leaveActive"
|
||||||
|
@ -90,58 +88,74 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
|
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
|
||||||
<div class="_gaps_s">
|
<div class="_gaps_s">
|
||||||
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
|
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
|
||||||
<div>SCORE: <MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</div>
|
<div>{{ i18n.ts._bubbleGame._score.score }}: <MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</div>
|
||||||
<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
|
<div>{{ i18n.ts._bubbleGame._score.maxChain }}: <MkNumber :value="maxCombo"/></div>
|
||||||
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b><MkNumber :value="yenTotal ?? score"/>円</b></div>
|
<div v-if="gameMode === 'yen'">
|
||||||
<div v-if="gameMode === 'sweets'"><b>おにぎり<MkNumber :value="score / 130"/>個分</b></div>
|
{{ i18n.ts._bubbleGame._score.scoreYen }}:
|
||||||
|
<I18n :src="i18n.ts._bubbleGame._score.yen" tag="b">
|
||||||
|
<template #yen><MkNumber :value="yenTotal ?? score"/></template>
|
||||||
|
</I18n>
|
||||||
|
</div>
|
||||||
|
<I18n v-if="gameMode === 'sweets'" :src="i18n.ts._bubbleGame._score.scoreSweets" tag="div">
|
||||||
|
<template #onigiriQtyWithUnit>
|
||||||
|
<I18n :src="i18n.ts._bubbleGame._score.estimatedQty" tag="b">
|
||||||
|
<template #qty><MkNumber :value="score / 130"/></template>
|
||||||
|
</I18n>
|
||||||
|
</template>
|
||||||
|
</I18n>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></div>
|
<div v-if="replaying" :class="$style.replayIndicator"><span :class="$style.replayIndicatorText"><i class="ti ti-player-play"></i> {{ i18n.ts.replaying }}</span></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="replaying" :class="$style.frame">
|
<div v-if="replaying" class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div style="background: #0004;">
|
<div style="background: #0004;">
|
||||||
<div style="height: 10px; background: var(--accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
|
<div style="height: 10px; background: var(--accent); will-change: width;" :style="{ width: `${(currentFrame / endedAtFrame) * 100}%` }"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_buttonsCenter">
|
<div class="_buttonsCenter">
|
||||||
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton>
|
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> {{ i18n.ts.endReplay }}</MkButton>
|
||||||
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
|
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
|
||||||
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
|
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="isGameOver" :class="$style.frame">
|
<div v-if="isGameOver" class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_buttonsCenter">
|
<div class="_buttonsCenter">
|
||||||
<MkButton primary rounded @click="backToTitle">{{ i18n.ts.backToTitle }}</MkButton>
|
<MkButton primary rounded @click="backToTitle">{{ i18n.ts.backToTitle }}</MkButton>
|
||||||
<MkButton primary rounded @click="replay">{{ i18n.ts.showReplay }}</MkButton>
|
<MkButton primary rounded @click="replay">{{ i18n.ts.showReplay }}</MkButton>
|
||||||
<MkButton primary rounded @click="share">{{ i18n.ts.share }}</MkButton>
|
<MkButton primary rounded @click="share">{{ i18n.ts.share }}</MkButton>
|
||||||
<MkButton rounded @click="exportLog">Copy replay data</MkButton>
|
<MkButton rounded @click="exportLog">{{ i18n.ts.copyReplayData }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<div :class="$style.frame" style="flex: 1; margin-right: 10px;">
|
<div class="_woodenFrame" style="flex: 1; margin-right: 10px;">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div>SCORE: <b><MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</b></div>
|
<div>{{ i18n.ts._bubbleGame._score.score }}: <MkNumber :value="score"/>{{ getScoreUnit(gameMode) }}</div>
|
||||||
<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ getScoreUnit(gameMode) }}</b><b v-else>-</b></div>
|
<div>{{ i18n.ts._bubbleGame._score.highScore }}: <b v-if="highScore"><MkNumber :value="highScore"/>{{ getScoreUnit(gameMode) }}</b><b v-else>-</b></div>
|
||||||
<div v-if="gameMode === 'yen'">TOTAL EARNINGS: <b v-if="yenTotal"><MkNumber :value="yenTotal"/>円</b><b v-else>-</b></div>
|
<div v-if="gameMode === 'yen'">
|
||||||
|
{{ i18n.ts._bubbleGame._score.scoreYen }}:
|
||||||
|
<I18n :src="i18n.ts._bubbleGame._score.yen" tag="b">
|
||||||
|
<template #yen><MkNumber :value="yenTotal ?? score"/></template>
|
||||||
|
</I18n>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[$style.frame]" style="margin-left: auto;">
|
<div class="_woodenFrame" style="margin-left: auto;">
|
||||||
<div :class="$style.frameInner" style="text-align: center;">
|
<div class="_woodenFrameInner" style="text-align: center;">
|
||||||
<div @click="showConfig = !showConfig"><i class="ti ti-settings"></i></div>
|
<div @click="showConfig = !showConfig"><i class="ti ti-settings"></i></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="showConfig" :class="$style.frame">
|
<div v-if="showConfig" class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_gaps">
|
<div class="_gaps">
|
||||||
<MkRange v-model="bgmVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('bgmVolume', v)">
|
<MkRange v-model="bgmVolume" :min="0" :max="1" :step="0.01" :textConverter="(v) => `${Math.floor(v * 100)}%`" :continuousUpdate="true" @dragEnded="(v) => updateSettings('bgmVolume', v)">
|
||||||
<template #label>BGM {{ i18n.ts.volume }}</template>
|
<template #label>BGM {{ i18n.ts.volume }}</template>
|
||||||
|
@ -153,8 +167,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="$style.frame">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div>FUSION RECIPE</div>
|
<div>FUSION RECIPE</div>
|
||||||
<div>
|
<div>
|
||||||
<div v-for="(mono, i) in game.monoDefinitions.sort((a, b) => a.level - b.level)" :key="mono.id" style="display: inline-block;">
|
<div v-for="(mono, i) in game.monoDefinitions.sort((a, b) => a.level - b.level)" :key="mono.id" style="display: inline-block;">
|
||||||
|
@ -165,10 +179,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="$style.frame">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">Surrender</MkButton>
|
<MkButton v-if="!isGameOver && !replaying" full danger @click="surrender">{{ i18n.ts.surrender }}</MkButton>
|
||||||
<MkButton v-else full @click="restart">Retry</MkButton>
|
<MkButton v-else full @click="restart">{{ i18n.ts.gameRetry }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1313,38 +1327,6 @@ definePageMetadata(() => ({
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame {
|
|
||||||
padding: 7px;
|
|
||||||
background: #8C4F26;
|
|
||||||
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameH {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameInner {
|
|
||||||
padding: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
background: #F1E8DC;
|
|
||||||
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #693410;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameDivider {
|
|
||||||
height: 0;
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid #693410;
|
|
||||||
border-bottom: 1px solid #ce8a5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
|
@ -15,13 +15,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkSpacer v-if="!gameStarted" :contentMax="800">
|
<MkSpacer v-if="!gameStarted" :contentMax="800">
|
||||||
<div :class="$style.root">
|
<div :class="$style.root">
|
||||||
<div class="_gaps">
|
<div class="_gaps">
|
||||||
<div :class="$style.frame" style="text-align: center;">
|
<div class="_woodenFrame" style="text-align: center;">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
|
<img src="/client-assets/drop-and-fusion/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frame" style="text-align: center;">
|
<div class="_woodenFrame" style="text-align: center;">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_gaps" style="padding: 16px;">
|
<div class="_gaps" style="padding: 16px;">
|
||||||
<MkSelect v-model="gameMode">
|
<MkSelect v-model="gameMode">
|
||||||
<option value="normal">NORMAL</option>
|
<option value="normal">NORMAL</option>
|
||||||
|
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
|
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_gaps" style="padding: 16px;">
|
<div class="_gaps" style="padding: 16px;">
|
||||||
<div style="font-size: 90%;"><i class="ti ti-music"></i> {{ i18n.ts.soundWillBePlayed }}</div>
|
<div style="font-size: 90%;"><i class="ti ti-music"></i> {{ i18n.ts.soundWillBePlayed }}</div>
|
||||||
<MkSwitch v-model="mute">
|
<MkSwitch v-model="mute">
|
||||||
|
@ -42,10 +42,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frame">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_gaps_s" style="padding: 16px;">
|
<div class="_gaps_s" style="padding: 16px;">
|
||||||
<div><b>{{ i18n.tsx.lastNDays({ n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
|
<div><b>{{ i18n.tsx.lastNDays({ n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode.toUpperCase() }})</div>
|
||||||
<div v-if="ranking" class="_gaps_s">
|
<div v-if="ranking" class="_gaps_s">
|
||||||
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
|
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
|
||||||
<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
|
<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
|
||||||
|
@ -57,8 +57,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frame">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.frameInner" style="padding: 16px;">
|
<div class="_woodenFrameInner" style="padding: 16px;">
|
||||||
<div style="font-weight: bold;">{{ i18n.ts._bubbleGame.howToPlay }}</div>
|
<div style="font-weight: bold;">{{ i18n.ts._bubbleGame.howToPlay }}</div>
|
||||||
<ol>
|
<ol>
|
||||||
<li>{{ i18n.ts._bubbleGame._howToPlay.section1 }}</li>
|
<li>{{ i18n.ts._bubbleGame._howToPlay.section1 }}</li>
|
||||||
|
@ -67,8 +67,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="$style.frame">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.frameInner">
|
<div class="_woodenFrameInner">
|
||||||
<div class="_gaps_s" style="padding: 16px;">
|
<div class="_gaps_s" style="padding: 16px;">
|
||||||
<div><b>Credit</b></div>
|
<div><b>Credit</b></div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -149,38 +149,6 @@ definePageMetadata(() => ({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame {
|
|
||||||
padding: 7px;
|
|
||||||
background: #8C4F26;
|
|
||||||
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameH {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameInner {
|
|
||||||
padding: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
background: #F1E8DC;
|
|
||||||
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #693410;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frameDivider {
|
|
||||||
height: 0;
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid #693410;
|
|
||||||
border-bottom: 1px solid #ce8a5c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rankingRecord {
|
.rankingRecord {
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
|
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="$style.board">
|
<div class="_woodenFrame">
|
||||||
<div :class="$style.boardInner">
|
<div :class="$style.boardInner">
|
||||||
<div v-if="showBoardLabels" :class="$style.labelsX">
|
<div v-if="showBoardLabels" :class="$style.labelsX">
|
||||||
<span v-for="i in game.map[0].length" :key="i" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
|
<span v-for="i in game.map[0].length" :key="i" :class="$style.labelsXLabel">{{ String.fromCharCode(64 + i) }}</span>
|
||||||
|
@ -124,8 +124,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<MkFolder>
|
<MkFolder>
|
||||||
<template #label>{{ i18n.ts.options }}</template>
|
<template #label>{{ i18n.ts.options }}</template>
|
||||||
<div class="_gaps_s" style="text-align: left;">
|
<div class="_gaps_s" style="text-align: left;">
|
||||||
<MkSwitch v-model="showBoardLabels">Show labels</MkSwitch>
|
<MkSwitch v-model="showBoardLabels">{{ i18n.ts._reversi.showBoardLabels }}</MkSwitch>
|
||||||
<MkSwitch v-model="useAvatarAsStone">useAvatarAsStone</MkSwitch>
|
<MkSwitch v-model="useAvatarAsStone">{{ i18n.ts._reversi.useAvatarAsStone }}</MkSwitch>
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
|
||||||
|
@ -500,17 +500,6 @@ $gap: 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
padding: 7px;
|
|
||||||
background: #8C4F26;
|
|
||||||
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.boardInner {
|
.boardInner {
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
|
|
||||||
|
|
|
@ -417,6 +417,39 @@ rt {
|
||||||
transition-timing-function: cubic-bezier(0,.5,.5,1);
|
transition-timing-function: cubic-bezier(0,.5,.5,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
._woodenFrame {
|
||||||
|
padding: 7px;
|
||||||
|
background: #8C4F26;
|
||||||
|
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
--bg: #F1E8DC;
|
||||||
|
--panel: #fff;
|
||||||
|
--fg: #693410;
|
||||||
|
--switchOffBg: rgba(0, 0, 0, 0.1);
|
||||||
|
--switchOffFg: rgb(255, 255, 255);
|
||||||
|
--switchOnBg: var(--accent);
|
||||||
|
--switchOnFg: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
._woodenFrameH {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
._woodenFrameInner {
|
||||||
|
padding: 8px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: var(--bg);
|
||||||
|
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--fg);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
._transition_zoom-enter-active, ._transition_zoom-leave-active {
|
._transition_zoom-enter-active, ._transition_zoom-leave-active {
|
||||||
transition: opacity 0.5s, transform 0.5s !important;
|
transition: opacity 0.5s, transform 0.5s !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue