diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index 2f5c3cf81..d482f7076 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -53,7 +53,7 @@
-
+
+
+
{{ item.label }}
@@ -214,7 +224,7 @@ export default Vue.extend({
this.connection.send({
type: 'update-form',
id: item.id,
- value: v
+ value: item.value
});
},
@@ -312,6 +322,14 @@ root(isDark)
&[data-none]
border-color transparent
+ &.form
+ > div
+ > .card + .card
+ margin-top 16px
+
+ input[type='range']
+ width 100%
+
.card
max-width 400px
border-radius 4px
diff --git a/src/docs/reversi-bot.ja.md b/src/docs/reversi-bot.ja.md
index cb273a1ce..cf5a3e417 100644
--- a/src/docs/reversi-bot.ja.md
+++ b/src/docs/reversi-bot.ja.md
@@ -96,8 +96,8 @@ y = Math.floor(pos / mapWidth)
フォームコントロールは、次のようなオブジェクトです:
```javascript
{
- id: 'button1',
- type: 'button',
+ id: 'switch1',
+ type: 'switch',
label: 'Enable hoge',
value: false
}
@@ -110,21 +110,21 @@ y = Math.floor(pos / mapWidth)
### フォームの操作を受け取る
ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。
イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。
-例えば、上で示したボタンをユーザーがオンにしたとすると、次のイベントが流れてきます:
+例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
```javascript
{
- id: 'button1',
+ id: 'switch1',
value: true
}
```
### フォームコントロールの種類
-#### ボタン
-type: `button`
-ボタンを表示します。何かの機能をオン/オフさせたい場合に有用です。
+#### スイッチ
+type: `switch`
+スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
##### プロパティ
-`desc` ... ボタンの詳細な説明。
+`desc` ... スイッチの詳細な説明。
#### ラジオボタン
type: `radio`
@@ -145,6 +145,15 @@ items: [{
}]
```
+#### スライダー
+type: `slider`
+スライダーを表示します。
+
+##### プロパティ
+`min` ... スライダーの下限。
+`max` ... スライダーの上限。
+`step` ... 入力欄で刻むステップ値。
+
#### テキストボックス
type: `textbox`
テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。