floodgate 棋譜ビューア

by mizarjp

HTML

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.8/dist/clipboard.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/na2hiro/Kifu-for-JS/redux/css/kifuforjs.css">
<div><select id="csalist"></select></div>
<div>
<button id="list_reload">List Reload</button>
<button id="csa_reload">CSA Reload</button>
<span><input type="checkbox" id="autotail" checked="checked">AutoTail</span>
<span><input type="checkbox" id="cmtrep" checked="checked">CommentReplace</span>
<button id="copybtn">Copy to Clipboard</button>
</div>
<div id="kifuplay"></div>
<div id="graph"></div>
<footer><div><a href="http://wdoor.c.u-tokyo.ac.jp/shogi/floodgate.html">コンピュータ将棋連続対局場所 (floodgate)</a></div></footer>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono|Noto+Sans|Open+Sans+Condensed:300);
@import url(https://cdn.rawgit.com/web-fonts/dejavu-sans-condensed/master/css/dejavu-sans-condensed.min.css);
body, input, button { font-family: 'Noto Sans CJK JP', 'Noto Sans', sans-serif; }
.info {  }
.tebanname { font-family: 'Open Sans Condensed', 'DejaVu Sans Condensed', 'Segoe UI', 'Segoe UI Symbol', 'Noto Sans CJK JP', sans-serif; font-weight: 300; white-space: nowrap; overflow: hidden;  }
pre, textarea, select { font-family: 'Noto Sans Mono CJK JP', 'Droid Sans Mono', monospace; }

JavaScript

//var Kifu = require('Kifu');
//Kifu.settings = {ImageDirectoryPath: 'https://cdn.rawgit.com/na2hiro/Kifu-for-JS/master/images'};
var kifuctl;
(function(){
//// Floodgate棋譜ビューア(仮)
//// - Floodgate: http://wdoor.c.u-tokyo.ac.jp/shogi/floodgate.html
//// - Kifu-for-JS: https://github.com/na2hiro/Kifu-for-JS
//// - D3.js: https://d3js.org/
//// - clipboard.js: https://clipboardjs.com/
//// - jQuery: https://jquery.com/
//// - React: https://facebook.github.io/react/
//// - Apache: https://httpd.apache.org/
//// - GitHub: https://github.com/
//// - JSFiddle: https://jsfiddle.net/
//var ReactDOM = require('react-dom');
//var ReactTestUtils = require('react-addons-test-utils');
var trackurl;
//// wdoor.c.u-tokyo.ac.jpはHTTPS,CORS非対応のため、Reverse Proxyを噛ます
var wdoorbase = 'https://mzr.jp/wdoor-latest/';
var wlist = [];
var kplay = 'kifuplay', kpj = '#' + kplay;
var pi = [
  '-KY-KE-GI-KI-OU-KI-GI-KE-KY',
  ' * -HI *  *  *  *  * -KA * ',
  '-FU-FU-FU-FU-FU-FU-FU-FU-FU',
  ' *  *  *  *  *  *  *  *  * ',
  ' *  *  *  *  *  *  *  *  * ',
  ' *  *  *  *  *  *  *  *  * ',
  '+FU+FU+FU+FU+FU+FU+FU+FU+FU',
  ' * +KA *  *  *  *  * +HI * ',
  '+KY+KE+GI+KI+OU+KI+GI+KE+KY',
  '   '].join(''); //// 盤上の駒 + 直前の手番,着手先f
var graph_obj = {}, graph_width = 260, graph_hheight = 32, graph_height = graph_hheight * 2, fix_num = 3;
function score_eval(score){
  var HalfPi = Math.PI / 2;
  //var Inv_HalfPi = 2 / Math.PI; //.63661977236758134307553505349;
  //return Math.max(Math.min(score * .0015, 1), -1);
  //return Math.tanh(score / 600);
  //return score / Math.sqrt(score * score + 404444);
  //return Inv_HalfPi * Math.atan(score / 1200 * Math.PI);
  //return score / (Math.abs(score) + 467);
  //return Inv_HalfPi * Math.asin(score / (Math.abs(score) + 241));
  return Math.asin(Math.atan(score * Math.PI * Math.PI / 4800) / HalfPi) / HalfPi;
  //return Inv_HalfPi * Math.asin(Inv_HalfPi * Math.asin(Inv_HalfPi * Math.atan(score / 121)));
}
function graph_build(){
// value,text_bool,boldline_bool
 ...