From 33d3d5c5705474ffbaef86399a9dfd44c7f5cfe5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 4 Aug 2018 11:24:15 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=83=A9=E3=82=A4=E3=83=80=E3=83=BC?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=88=E3=83=AD=E3=83=BC=E3=83=AB=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=81=99=E3=82=8B=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/games/reversi/reversi.room.vue | 24 +++++++++++++++---
 src/docs/reversi-bot.ja.md                    | 25 +++++++++++++------
 2 files changed, 38 insertions(+), 11 deletions(-)

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 @@
 			</div>
 		</div>
 
-		<div class="card" v-if="form">
+		<div class="card form" v-if="form">
 			<header>
 				<span>%i18n:@settings-of-the-bot%</span>
 			</header>
@@ -65,7 +65,7 @@
 						:key="message.id"/>
 
 				<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">
 						<header>
@@ -77,6 +77,16 @@
 						</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">
 						<header>
 							<span>{{ item.label }}</span>
@@ -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`
 テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。