JSFiddle - React, Tailwind, and code Playground
by Eclair
HTML
<dl style="float:left;">
<dt style="float:left;">凡例</dt>
<dd class="capturable">捕獲可能</dd>
<dd class="buyable">購入可能</dd>
</dl>
<form name="config" style="position:relative; left:50px; top:15px;">
<input type="checkbox" id="showbuyable" name="showbuyable" value="showbuyable">購入可能な配合も表示</form>
<div style="clear:both;"></div> <textarea id="recipeList" style="display:none">
|No|誕生|基本|生贄|Lv|店|備考|h
|001|カミルドラゴン|アースドラゴン|恨みの地震剣||||
|002|アクアドラゴン|シードラゴン|恨みの氷結剣||||
|003|ケノルドラゴン|ファイアドラゴン|恨みの火炎剣||||
|004|ディオリキス|サンダードラゴン|恨みの電撃剣||||
|005|ディケイル|ドラゴントゥース|キマイラ|||歪竜。オルファンルート限定。<br>一つずつ配合していくイベント。|
|006|メルケラス|ディケイル|グルルフ|||~|
|007|ルン=フィアレス|メルケラス|アウエラガーゴイル|||~|
|008|ゼラウラス|ルン=フィアレス|凌恋の霊姫|||~|
|009|ペルソアティス|ゼラウラス|ディオリキス|||~|
|010|ハイゴブリン|ゴブリン|ゴブリン|1|||
|011|ゴブリン指揮官|ハイゴブリン|ハイゴブリン||○||
|012|ゴブリン大将軍|ゴブリン指揮官|ゴブリン指揮官||||
|013|ゴウモール|ゴブリン|オーク|1|||
|014|ハイゴウモール|ゴウモール|オーク指揮官|2|||
|015|オークメイジ|オーク|ゴブリン|1|||
|016|オーク指揮官|オークメイジ|オーク|2|○||
|017|オーク大将軍|オーク指揮官|オーク指揮官||||
|018|オークナイト|オーク指揮官|ゴブリン指揮官||||
|019|オークパラディン|ゴブリン大将軍|トリエスタル||||
|020|トトリス|トリャーユ|肉食アースマン|2|||
|021|トリエスタル|トトリス|アースエクス||||
|022|肉食アースマン|アースマン|アースマン|2|○||
|023|アースエクス|水流アースマン|肉食アースマン||○||
|024|水流アースマン|肉食アースマン|ティエネー|2|||
|025|強酸アースマン|肉食アースマン|シルフィ|2|||
|026|泡油アースマン|肉食アースマン|ファマ|2|||
|027|ウンディーネ|ティエネー|ティエネー|1|||
|028|セイレン|ウンディーネ|ジルニー|3|||
|029|モリガン・モルガナ|ニール|ザフィエル||||
|030|ヴィリニ|ティエネー|トリャーユ|2|||
|031|ヴュリテュン|ヴィリニ|トトリス||||
|032|レニア・ヌイ|ヴュリテュン|トリエスタル||||
|033|グルムンド|ファラム|ファマ|2|||
|034|グルルフ|グルムンド|ファラ・ヌイ||○||
|035|ネミルユイチリ|ユイチリ|トリャーユ|2|||
|036|ニルユイチリ|ユイチリ|ファクシー||||
|037|ジルニー|シルフィ|ハルピュア|2|○||
|038|ルファニー|ジルニー|ルトハルピュア||||
...CSS
.capturable {
color:blue;
}
.buyable {
color:red;
}
.anything {
color:green;
}
html, body {
position:fixed;
overflow:hidden;
width:100%;
height:100%;
}
#list {
font-size:small;
column-width:110px;
-moz-column-width:110px;
-webkit-column-width:110px;
-o-column-width:110px;
-ms-column-width:110px;
}
#result {
position:relative;
overflow:auto;
top:10px;
left:10px;
height:100%;
}JavaScript
var recipeListStr = jQuery('#recipeList').val();
var questListStr = jQuery('#questList').val();
var parseStr = function (str) {
var spl = str.split("\n");
var i, l;
var ret = [];
for (i = 0; i < spl.length; i++) {
if (spl[i]) {
l = spl[i].split('|');
if (l[l.length - 1] != 'h') {
l.shift();
l.pop();
ret.push(l);
}
}
}
return ret;
};
var recipe = function (s) {
var list = parseStr(s);
var ret = {};
for (var i = 0; i < list.length; i++) {
if (list[1]) {
// No|誕生|基本|生贄|Lv|店|備考|h
ret[list[i][1]] = {
no: list[i][0],
name: list[i][1],
left: list[i][2],
right: list[i][3],
lv: list[i][4],
shop: list[i][5],
other: list[i][6]
};
}
}
return ret;
}(recipeListStr);
var capture = function (s) {
var list = parseStr(s);
var ret = {};
for (var i = 0; i < list.length; i++) {
if (list[i]) {
// No|誕生|基本|生贄|Lv|店|備考|h
ret[list[i][2]] = true;
}
}
return ret;
}(questListStr);
var shop = function (s) {
var list = parseStr(s);
var ret = {};
for (var i = 0; i < list.length; i++) {
if (list[i] && list[i][5]) {
ret[list[i][1]] = true;
}
}
return ret;
}(recipeListStr);
function getRecipe(target, indent) {
var ret = [];
console.log(target);
var currentItem = {
"target": target,
"indent": indent
};
var space = {
"target": "",
"indent": -1
};
ret.push(currentItem);
ret.push(space);
var r0 = target.left.split("/");
for (var h = 0; h < r0.length; h++) {
if (recipe[r0[h]] && (document.getElementById('showbuyable').checked || shop[r0[h]] !== true)) {
var rl = getRecipe(recipe[r0[h]],...