diff --git a/index.html b/index.html
index 59126a0..1d53dc5 100644
--- a/index.html
+++ b/index.html
@@ -7,26 +7,26 @@
   <script>
   var global = window;
   // function require (file) {
-  // 	return window[file.replace(/^\.[\/\\]/,'').replace(/.js$/,'')];
+  //  return window[file.replace(/^\.[\/\\]/,'').replace(/.js$/,'')];
   // }
   function handleCardInfo() {
     // var defaultValueMap = {
-    // 	"rarity": "LR",
-    // 	"cardType": "SIGNI",
-    // 	"color": "white",
-    // 	"level": 0,
-    // 	"limit": 0,
-    // 	"power": 0,
-    // 	"limiting": "",
-    // 	"classes": [],
-    // 	"costWhite": 0,
-    // 	"costBlack": 0,
-    // 	"costRed": 0,
-    // 	"costBlue": 0,
-    // 	"costGreen": 0,
-    // 	"costColorless": 0,
-    // 	"guardFlag": false,
-    // 	"multiEner": false,
+    //  "rarity": "LR",
+    //  "cardType": "SIGNI",
+    //  "color": "white",
+    //  "level": 0,
+    //  "limit": 0,
+    //  "power": 0,
+    //  "limiting": "",
+    //  "classes": [],
+    //  "costWhite": 0,
+    //  "costBlack": 0,
+    //  "costRed": 0,
+    //  "costBlue": 0,
+    //  "costGreen": 0,
+    //  "costColorless": 0,
+    //  "guardFlag": false,
+    //  "multiEner": false,
     // };
     for (var x in CardInfo) {
       var info = CardInfo[x];
@@ -55,9 +55,9 @@
       delete info.bettedCost;
       if (info.rise) info.rise = true;
       // for (var key in defaultValueMap) {
-      // 	if (info[key] === defaultValueMap[key]) {
-      // 		delete info[key];
-      // 	}
+      //  if (info[key] === defaultValueMap[key]) {
+      //    delete info[key];
+      //  }
       // }
     }
     // var textarea = document.createElement('textarea');
@@ -94,9 +94,9 @@
       };
       props.forEach(function(rawprop) {
         // suffix.forEach(function (suf) {
-        // 	var prop = rawprop + suf;
-        // 	if (!info[prop]) return;
-        // 	obj[prop] = info[prop];
+        //  var prop = rawprop + suf;
+        //  if (!info[prop]) return;
+        //  obj[prop] = info[prop];
         // });
         obj[rawprop + "_ko"] = info[rawprop + "_en"];
       });
@@ -215,20 +215,38 @@
       <select id="ghost-decks"></select>
     </div>
     <div>
-      <button onclick="startBattle();">Oben!</button>
+      <button onclick="startBattle();">oben!</button>
     </div>
-    <div> ---- Helper Action ---- </div>
+    <div> ---- Helper Function ---- </div>
     <div>
-      <button onclick="upgrade()">upgrade</button>
-      <button onclick="game.turnPlayer.draw(5)">draw</button>
-      <button onclick="game.turnPlayer.enerCharge(10);">ener charge</button>
+      <button onclick="grow();">grow!</button>
+      <button onclick="draw()">draw</button>
+      <button onclick="charge();">ener charge</button>
     </div>
     <div>
-      <input id="card-name" type="text" placeholder="WX01-100">
+      <input id="card-name" type="text" placeholder="wx15-001">
+    </div>
+    <button onclick="addTo('handZone');">add to hand</button>
+    <button onclick="addTo('lifeClothZone');">add to life cloth</button>
+    <button onclick="addTo('enerZone');">add to ener</button>
+    <button onclick="addTo('trashZone');">add to trash</button>
+    <div>
+      <button onclick="resetLrigDeck();">reset lrig deck</button>
+    </div>
+    <div>
+    <select id="select-language" onchange="changeLanguage();">
+      <option value="en">English</option>
+      <option value="zh_CN">简体中文</option>
+      <option value="zh_TW">繁體中文</option>
+      <option value="jp">日本語</option>
+      <option value="ko">한국어</option>
+      <option value="ru">русский</option>
+      <option value="it">Italiano</option>
+    </select>
+    </div>
+    <div>
+      <textarea id="log"></textarea>
     </div>
-    <button onclick="addToHand()">add card</button>
-    <button onclick="addToLifeCloth()">add to life cloth</button>
-  </div>
   </div>
   <iframe class="float" src="../webxoss-client/DeckEditor/" width="1090px" height="690px" scrolling="no" frameborder="no" border="0"></iframe>
 </body>
@@ -240,6 +258,12 @@ a {
   -webkit-tap-highlight-color: transparent;
 }
 
+textarea {
+  resize: none;
+  width: 270px;
+  height: 500px;
+}
+
 .float {
   float: left;
 }
diff --git a/testHelper.js b/testHelper.js
index f9d9dae..db8ecf1 100644
--- a/testHelper.js
+++ b/testHelper.js
@@ -1,19 +1,15 @@
-'use strict'
+'use strict';
 
 // browser only
 
-function TestHelper() {
-  this.deckNames = this.readDeckNames();
-  this.hostDeck = '';
-  this.ghostDeck = '';
+var $ = document.getElementById.bind(document);
 
-  this.cfg = {
-    disableAudio: true,
-  }
+function TestHelper() {
+  this.noBGM = true;
 }
 TestHelper.prototype.disableAudio = function(doc) {
   // disable BGM
-  if (!this.cfg.disableAudio) {
+  if (!this.noBGM) {
     return;
   }
   var bgm = doc.getElementById('checkbox-bgm');
@@ -24,10 +20,9 @@ TestHelper.prototype.disableAudio = function(doc) {
   if (sound && sound.checked) {
     sound.click();
   }
-}
+};
 TestHelper.prototype.initClient = function(win) {
   var doc = win.document;
-  var self = this;
   var socket = new FakeSocket(win);
   win.addEventListener('unload', function() {
     socket._doEmit('disconnect');
@@ -36,30 +31,17 @@ TestHelper.prototype.initClient = function(win) {
   io._handler(socket);
 
   this.disableAudio(doc);
-}
-TestHelper.prototype.readDeckNames = function() {
-  return JSON.parse(localStorage.getItem('deck_filenames')) || [];
-}
-TestHelper.prototype.getDeckPids = function(player) {
-  var name;
-  if (player === 'host') {
-    name = this.hostDeck;
-  } else {
-    name = this.ghostDeck;
-  }
-  if (name === '') {
-    name = this.deckNames[0]; // use WHITE_HOPE
-  }
-  return JSON.parse(localStorage.getItem('deck_file_' + name));
-}
+  log(win.document.title + ' added.');
+};
 
 var helper = new TestHelper();
 
+// prepare and start game
 function startBattle() {
   if (sockets.length) {
     sockets.forEach(function(target) {
       target._win.close();
-    })
+    });
     location.reload();
     return;
   }
@@ -73,11 +55,12 @@ function startBattle() {
     helper.initClient(win);
   });
 }
+
 function oben() {
   if (sockets.length !== 2) {
-    console.log('two client needed');
+    log('two client needed');
     return;
-  };
+  }
   var createRoomMsg = {
     'roomName': 'test',
     'nickname': 'host',
@@ -85,28 +68,37 @@ function oben() {
     'mayusRoom': true,
   }
   sockets[0]._doEmit('createRoom', createRoomMsg);
+  log('Client<1> create room.');
+
   var joinRoomMsg = {
     'roomName': 'test',
     'nickname': 'ghost',
     'password': '',
   }
   sockets[1]._doEmit('joinRoom', joinRoomMsg);
+  log('Client<2> join room.');
+
+  sockets[1]._doEmit('ready', getDeckPids('host'));
+  log('Client<2> is ready.');
+  sockets[0]._doEmit('startGame', getDeckPids('ghost'));
+  log('oben!');
 
-  sockets[1]._doEmit('ready', helper.getDeckPids('host'));
-  sockets[0]._doEmit('startGame', helper.getDeckPids('ghost'));
   updateBattle();
 }
 
 var game; // in-play game
 function updateBattle() {
   if (roomManager.rooms.length === 0) {
-    console.log('no in-play game found');
+    log('no in-play game found.');
     return;
   }
   game = roomManager.rooms[0].game;
-  console.log('update game information successfully');
+  log('Handle game successfully.');
+  log('Now you can use helper function.');
 }
-function upgrade() {
+
+// helper function
+function grow() {
   var p = game.turnPlayer;
   var cards = p.lrigDeck.cards.concat(p.lrigTrashZone.cards);
   var lrigCards = [];
@@ -116,42 +108,127 @@ function upgrade() {
     }
   });
   game.moveCards(lrigCards, p.lrigZone);
+  log('grow lrig to level max.');
 }
-function addToHand() {
-  var cardName = document.getElementById('card-name').value;
-  if (game.turnPlayer.getCard(cardName))
-    console.log('add ' + cardName + ' to hand');
-  else
-    console.log('no matched card');
+function draw(num) {
+  if (!num) {
+    num = 5;
+  }
+  var p = game.turnPlayer;
+  p.draw(num);
+  log('draw ' + num + ' cards.');
 }
-function addToLifeCloth() {
-  var cardName = document.getElementById('card-name').value;
-  if (game.turnPlayer.putCardToLifeCloth(cardName))
-    console.log('put ' + cardName + ' to life cloth');
-  else
-    console.log('no matched card');
+function charge(num) {
+  if (!num) {
+    num = 5;
+  }
+  var p = game.turnPlayer;
+  p.enerCharge(num);
+  log('ener charge ' + num + '.');
+}
+
+function matchCard(arg) {
+  if (arg) {
+    arg = arg.toUpperCase();
+  } else {
+    return;
+  }
+  var cid = 0;
+  game.cards.forEach(function(card) {
+    var info = CardInfo[card.cid];
+    var matched = info.pid === arg ||
+      info.cid === arg ||
+      info.wxid === arg;
+    if (matched) {
+      cid = card.cid;
+      return;
+    }
+  });
+  if (!cid) return null;
+  var player = game.turnPlayer;
+  var cards = concat(player.mainDeck.cards,
+    player.trashZone.cards,
+    player.enerZone.cards,
+    player.lifeClothZone.cards);
+
+  cards.forEach(function(card) {
+    if (card.cid === cid) {
+      return card;
+    }
+  });
+  return null;
+}
+
+var zones = [
+  'handZone',
+  'enerZone',
+  'trashZone',
+  'lifeClothZone',
+];
+function addTo(zone) {
+  if (zones.indexOf(zone) === -1) {
+    log('no such zone: ' + zone);
+    return;
+  }
+  var input = $('card-name').value;
+  if (input && matchCard(input)) {
+    var matchedCard = matchCard(input);
+    if (!matchedCard) {
+      log('no matched card');
+      return;
+    }
+    matchedCard.moveTo(game.turnPlayer[zone]);
+    log('add <' + matchedCard.name + '> to ' + zone + '.');
+  }
+}
+
+function resetLrigDeck() {
+  game.moveCards(game.turnPlayer.lrigTrashZone.cards, game.turnPlayer.lrigDeck);
+  log('reset lrig deck.');
+}
+// log
+function log(text) {
+  var logger = $('log');
+  logger.innerHTML += text;
+  logger.innerHTML += '\n';
+}
+// dom
+function getDeckPids(player) {
+  var name = {
+    'host': $('host-decks').value || '',
+    'ghost': $('host-decks').value || '',
+  }[player];
+  if (!name) {
+    log('error in deck select');
+  }
+  return JSON.parse(localStorage.getItem('deck_file_' + name));
+}
+var deckNames = [];
+function readDeckNames() {
+  return JSON.parse(localStorage.getItem('deck_filenames')) || [];
 }
 function initDeckSelect() {
-  var hostDecks = document.getElementById('host-decks');
-  var ghostDecks = document.getElementById('ghost-decks');
-  hostDecks.innerHTML = '';
-  ghostDecks.innerHTML = '';
-  helper.deckNames.forEach(function(name) {
-    var deckname = document.createElement('option');
-    deckname.setAttribute('value', name);
-    deckname.innerHTML = name;
-    hostDecks.appendChild(deckname);
-    ghostDecks.appendChild(deckname.cloneNode(true));
-  })
-  helper.hostDeck = hostDecks.value;
-  helper.ghostDeck = ghostDecks.value;
-  hostDecks.onchange = function() {
-    helper.hostDeck = this.value;
-  }
-  ghostDecks.onchange = function() {
-    helper.ghostDeck = this.value;
-  }
+  deckNames = readDeckNames();
+  var hostDeckSelect = $('host-decks');
+  var ghostDeckSelect = $('ghost-decks');
+  hostDeckSelect.innerHTML = '';
+  ghostDeckSelect.innerHTML = '';
+  deckNames.forEach(function(name) {
+    var deckName = document.createElement('option');
+    deckName.setAttribute('value', name);
+    deckName.innerHTML = name;
+    hostDeckSelect.appendChild(deckName);
+    ghostDeckSelect.appendChild(deckName.cloneNode(true));
+  });
 }
+function changeLanguage() {
+  var lang = $('select-language').value;
+  localStorage.setItem('language', lang);
+  log('set language to ' + lang + '.');
+  location.reload();
+}
+
 window.onload = function() {
+  $('select-language').value = localStorage.getItem('language');
   initDeckSelect();
-}
\ No newline at end of file
+};