SWREI/switched
0
0
Fork 0
Code

スライダーコントロールを追加するなど

Browse Source
This commit is contained in:
syuilo 2018-08-04 11:24:15 +09:00
parent ee050cc37e
commit 33d3d5c570
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/client/app/common/views/components/games/reversi/reversi.room.vue
View File

@ -53,7 +53,7 @@
</div> </div>
</div> </div>
<div class="card" v-if="form"> <div class="card form" v-if="form">
<header> <header>
<span>%i18n:@settings-of-the-bot%</span> <span>%i18n:@settings-of-the-bot%</span>
</header> </header>
@ -65,7 +65,7 @@
:key="message.id"/> :key="message.id"/>
<template v-for="item in form"> <template v-for="item in form">
<mk-switch v-if="item.type == 'button'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm($event, item)">{{ item.desc || '' }}</mk-switch> <mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm($event, item)">{{ item.desc || '' }}</mk-switch>
<div class="card" v-if="item.type == 'radio'" :key="item.id"> <div class="card" v-if="item.type == 'radio'" :key="item.id">
<header> <header>
@ -77,6 +77,16 @@
</div> </div>
</div> </div>
<div class="card" v-if="item.type == 'slider'" :key="item.id">
<header>
<span>{{ item.label }}</span>
</header>
<div>
<input type="range" :min="item.min" :max="item.max" :step="item.step || 1" v-model="item.value" @change="onChangeForm($event, item)"/>
</div>
</div>
<div class="card" v-if="item.type == 'textbox'" :key="item.id"> <div class="card" v-if="item.type == 'textbox'" :key="item.id">
<header> <header>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
@ -214,7 +224,7 @@ export default Vue.extend({
this.connection.send({ this.connection.send({
type: 'update-form', type: 'update-form',
id: item.id, id: item.id,
value: v value: item.value
}); });
}, },
@ -312,6 +322,14 @@ root(isDark)
&[data-none] &[data-none]
border-color transparent border-color transparent
&.form
> div
> .card + .card
margin-top 16px
input[type='range']
width 100%
.card .card
max-width 400px max-width 400px
border-radius 4px border-radius 4px

25
src/docs/reversi-bot.ja.md
View File

@ -96,8 +96,8 @@ y = Math.floor(pos / mapWidth)
フォームコントロールは、次のようなオブジェクトです: フォームコントロールは、次のようなオブジェクトです:
```javascript ```javascript
{ {
id: 'button1', id: 'switch1',
type: 'button', type: 'switch',
label: 'Enable hoge', label: 'Enable hoge',
value: false value: false
} }
@ -110,21 +110,21 @@ y = Math.floor(pos / mapWidth)
### フォームの操作を受け取る ### フォームの操作を受け取る
ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。 ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。
イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。 イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。
例えば、上で示したボタンをユーザーがオンにしたとすると、次のイベントが流れてきます: 例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
```javascript ```javascript
{ {
id: 'button1', id: 'switch1',
value: true value: true
} }
``` ```
### フォームコントロールの種類 ### フォームコントロールの種類
#### ボタン #### スイッチ
type: `button` type: `switch`
ボタンを表示します。何かの機能をオン/オフさせたい場合に有用です。 スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
##### プロパティ ##### プロパティ
`desc` ... ボタンの詳細な説明。 `desc` ... スイッチの詳細な説明。
#### ラジオボタン #### ラジオボタン
type: `radio` type: `radio`
@ -145,6 +145,15 @@ items: [{
}] }]
``` ```
#### スライダー
type: `slider`
スライダーを表示します。
##### プロパティ
`min` ... スライダーの下限。
`max` ... スライダーの上限。
`step` ... 入力欄で刻むステップ値。
#### テキストボックス #### テキストボックス
type: `textbox` type: `textbox`
テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。 テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。