         friendShipLv: friendShipLv
     componentDidMount: ->
       window.addEventListener 'game.response', @handleResponse
+
     render: ->
-      <div>
-        <Alert>
-          <Grid>
-            <Col xs={3}>舰名</Col>
-            <Col xs={3}>等级</Col>
-            <Col xs={3}>战前</Col>
-            <Col xs={3}>战后</Col>
-          </Grid>
-        </Alert>
-        <Table>
-          <tbody>
-          {
-            for shipName, i in @state.friendShipName            
-              continue unless @state.friendShipLv[i] != -1
-              [
+      if layout == 'horizonal'
+        <div>
+          <Alert>
+            <Grid>
+              <Col xs={4}>舰名</Col>
+              <Col xs={4}>战前</Col>
+              <Col xs={4}>战后</Col>
+            </Grid>
+          </Alert>
+          <Table>
+            <tbody>
+            {
+              for shipName, i in @state.friendShipName
+                continue unless @state.friendShipLv[i] != -1
                 <tr key={i + 1}>
                   <td>Lv. {@state.friendShipLv[i]} - {shipName}</td>
                   <td className="hp-progress">

                      label={"#{@state.afterEnemyHp[i]} / #{@state.maxEnemyHp[i]}"} />
                  </td>
                </tr>
              ]
          }
          </tbody>
        </Table>
      </div>

                      label={"#{@state.afterFriendHp[i]} / #{@state.maxFriendHp[i]}"} />
                  </td>
                </tr>
            }
            </tbody>
          </Table>
          <Alert>
            <Grid>
              <Col xs={4}>舰名</Col>
              <Col xs={4}>战前</Col>
              <Col xs={4}>战后</Col>
            </Grid>
          </Alert>
          <Table>
            <tbody>
            {
              for shipName, i in @state.enemyShipName
                continue unless @state.enemyShipLv[i] != -1
                <tr key={i + 8}>
                  <td>Lv. {@state.enemyShipLv[i]} - {shipName}</td>
                  <td className="hp-progress">
