Fix bug: ForkList not shown after adding first fork

na2hiro · Apr 15, 2018 · ea11b73 · ea11b73
1 parent b159661
commit ea11b73
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 24 deletions.
diff --git a/css/kifuforjs.css b/css/kifuforjs.css
@@ -25,6 +25,10 @@
 .kifuforjs .mochi.info dl dd{
 	margin-left:20px;
 }
+.kifuforjs .mochi.panel {
+	display: flex;
+	flex-direction: column;
+}
 
 .kifuforjs div.players select.kifulist{
 	font-size:12px;
@@ -33,15 +37,6 @@
 	overflow: scroll;
 /*	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;*/
 }
-.kifuforjs div.players.withfork select.kifulist{
-	height: 60%;
-}
-.kifuforjs div.players li.fork{
-	display: none;
-}
-.kifuforjs div.players.withfork li.fork{
-	display: block;
-}
 .kifuforjs ul.lines{
 	margin: 0px;
 	padding-left: 0;

diff --git a/src/ForkList.tsx b/src/ForkList.tsx
@@ -1,9 +1,9 @@
-import { JKFPlayer } from "json-kifu-format";
 import { observer } from "mobx-react";
 import * as React from "react";
+import KifuStore from "./stores/KifuStore";
 
 export interface IProps {
-    player: JKFPlayer;
+    kifuStore: KifuStore;
 }
 
 @observer
@@ -14,10 +14,10 @@ export default class ForkList extends React.Component<IProps, any> {
     }
 
     public render() {
-        const { player } = this.props;
+        const { player } = this.props.kifuStore;
         const nowMove = player.tesuu < player.getMaxTesuu() ? player.getReadableKifu(player.tesuu + 1) : null;
         // 分岐
-        const forks = this.props.player.getReadableForkKifu();
+        const forks = player.getReadableForkKifu();
         let options;
         if (forks.length > 0) {
             options = [
@@ -35,13 +35,15 @@ export default class ForkList extends React.Component<IProps, any> {
             options = <option value="top">変化なし</option>;
         }
         return (
-            <select className="forklist" value="top" onChange={this.onChange} disabled={forks.length === 0}>
-                {options}
-            </select>
+            this.props.kifuStore.hasFork && (
+                <select className="forklist" value="top" onChange={this.onChange} disabled={forks.length === 0}>
+                    {options}
+                </select>
+            )
         );
     }
 
     private onChange(e) {
-        this.props.player.forkAndForward(e.target.value);
+        this.props.kifuStore.player.forkAndForward(e.target.value);
     }
 }
diff --git a/src/Kifu.tsx b/src/Kifu.tsx
@@ -60,10 +60,6 @@ class Kifu extends React.Component<IProps, {}> {
                 <img src={item.imgSrc} className="dragPreview" style={style} />
             ) : null;
 
-        const handClassName =
-            "inlineblock players " +
-            (this.kifuStore.player.kifu.moves.some((move) => move.forks && move.forks.length > 0) ? "withfork" : "");
-
         return this.props.connectDropTarget(
             <div>
                 <table className="kifuforjs" style={{ backgroundColor: this.props.isOver ? "silver" : "" }}>
@@ -72,7 +68,7 @@ class Kifu extends React.Component<IProps, {}> {
                             <td>
                                 <Preview generator={previewGenerator} />
                                 <DevTools />
-                                <div className={handClassName}>
+                                <div className="inlineblock players">
                                     <Hand kifuStore={this.kifuStore} defaultColor={1} />
                                     <LeftControl kifuStore={this.kifuStore} />
                                 </div>

diff --git a/src/LeftControl.tsx b/src/LeftControl.tsx
@@ -20,11 +20,11 @@ export default class LeftControl extends React.Component<IProps, {}> {
     public render() {
         const { player } = this.props.kifuStore;
         return (
-            <div className="mochi">
+            <div className="mochi panel">
                 <KifuList player={player} />
                 <ul className="lines">
                     <li className="fork">
-                        <ForkList player={player} />
+                        <ForkList kifuStore={this.props.kifuStore} />
                     </li>
                     <li>
                         <button className="dl" onClick={this.onClickDl} disabled={!this.clickDlAvailable()}>

diff --git a/src/stores/KifuStore.ts b/src/stores/KifuStore.ts
@@ -97,6 +97,10 @@ export default class KifuStore {
             }, s * 1000);
         }
     }
+
+    get hasFork() {
+        return this.player.kifu.moves.some((move) => move.forks && move.forks.length > 0);
+    }
 }
 
 /**