diff --git a/README.md b/README.md index 800631f7..cc34866f 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,21 @@ + Thaumcraft 4.1 Research Helper ========== -[Link](http://ythri.github.io/tcresearch/) +[This script](http://jesuscuenca.github.io/tcresearch/) helps you with your Thaumcraft 4.x research. If you have a research note with two aspects that you don't know how to connect, this is your tool. + ++ Select the __aspect from wich__ you have to __start__. ++ Select the __aspect__ you have __to get to__. ++ Additionally, you can __specify the minimum number of steps__ needed, that is, the number of empty spaces between the two aspects in your research note. ++ __Hit Go!__ + +If you are unhappy with the path you got, because you do not have access to those aspects yet or they are quite rare, simply disable those aspects in the config section. Besides, clicking an aspect in the search result will rerun the search again, but with aspect disabled (just momentarily). + + +### Info + +This work is licensed under a [Creative Commons Attribution 4.0 License](http://creativecommons.org/licenses/by/4.0/). -This script helps you with your Thaumcraft 4.1 research. If you have a research note with two aspects that you don't -know how to connect, simply choose them in the dropdown list above (From: and To:). Additionally, choose the minimum -number of steps between those two aspects. If in your research note, the two aspects have two blank spaces between -them, choose the value 2 for Min. Steps. Then click Find Connection and the script will search for the shortest path -(well, with at least the minimum length) that connects the two aspects. Note that sometimes the length of any path is -longer then the given minimum, but this should not be a problem for your research note. +Original sources are hosted in [ythri GitHub repo](https://github.com/ythri/tcresearch). Original page can be found [here](http://ythri.github.io/tcresearch/). -If your are unhappy with the path you got, because you do not have access to those aspects yet or they are quite rare, -simply disable those aspects from Available Aspects:. The script will then try to find paths without these. Note that -this may cause the path to grow longer. If too many aspects are disabled and there are no paths left without any of -those, the script will try to find the shortest path using the minimal number of disabled aspects. +Styled by [Jesús Cuenca](http://about.me/jesus.cuenca). Fork hosted in [GitHub](https://github.com/JesusCuenca/tcresearch). Page can be found on its [GitHub page](http://jesuscuenca.github.io/tcresearch/) \ No newline at end of file diff --git a/css/LESS/_basic.less b/css/LESS/_basic.less new file mode 100644 index 00000000..ea3fefbf --- /dev/null +++ b/css/LESS/_basic.less @@ -0,0 +1,151 @@ +/** + * Basic styles that are common throughout the page. + */ + +@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,600,400'); + +@media (min-width: 768px) { + .full-height { + height: 100%; + } +} +body { + font-family: 'Open Sans', Helvetica, sans-serif; + font-size: 62.5%; + + background-image: url('../zwartevilt.png'); + background-repeat: repeat; + background-attachment: fixed; + color: #fff; +} +.tb { + display: table; + margin: 0 auto; +} +.tbc { + display: table-cell; +} +.vam { + vertical-align: middle; +} +label.btn { + input[type=checkbox], + input[type=radio] { + display: none; + } +} +.btn { + &:hover, + &:focus, + &:active, + .active { + outline: none; + } +} +.btn.btn-default { + border-color: @color-primary-500; + color: @color-primary-500; + background-color: transparent; + + &:hover, + &:focus { + color: @color-text-lighter; + background-color: @color-primary-600; + } + + &:active, + &.active { + color: @color-text-lighter; + background-color: @color-primary-800; + border-color: @color-primary-500; + box-shadow: none; + } +} +.btn.btn-primary { + border-color: @color-primary-400; + background-color: @color-primary-500; + color: @color-text-lighter; + + &:hover, + &:focus, + &.active { + background-color: @color-primary-600; + } + + &:active { + background-color: @color-primary-800; + border-color: @color-primary-500; + } + +} +h2 { + font-size: 2.5rem; + font-weight: 400; + font-variant: small-caps; + color: @color-secondary-500; + text-align: center; + padding: 10px 0; +} + +#combination-box-wrapper { + + position: fixed; + bottom: 0; + text-align: center; + width: 100%; + + #combination-box { + display: none; + padding: 10px 0; + background-image: url('../zwartevilt.png'); + background-repeat: repeat; + background-attachment: fixed; + border-style: solid; + border-color: @color-primary-500; + border-width: 1px 1px 0 1px; + border-radius: 3px; + } + + #left, + #right, + #equals { + + padding: 0 18px; + position: relative; + + img { + max-width: 24px; + margin: 0 auto; + } + .aspect-name { + font-size: 1.2rem; + font-weight: 400; + text-transform: capitalize; + } + .aspect-desc { + font-size: 1rem; + font-weight: 300; + font-style: italic; + text-transform: capitalize; + } + } + #right::before, + #left::before { + font-family: 'FontAwesome'; + position: absolute; + top: 12px; + right: -6px; + font-size: 1.2rem; + margin-left: 5px; + } + #left::before { + content: '\f067'; + } + #right::before { + content: '\f054'; + } + +} + + + diff --git a/css/LESS/_config.less b/css/LESS/_config.less new file mode 100644 index 00000000..58b3ba4e --- /dev/null +++ b/css/LESS/_config.less @@ -0,0 +1,103 @@ +/** + * Config Section styles + */ +#config { + display: none; + margin-top: 50px; + margin-bottom: 50px; + + .btn-group { + margin-right: 15px; + padding-bottom: 15px; + + &:last-child { + margin: 0; + } + } + + p.avail-label { + font-size: 1.8em; + color: @color-text-light; + font-weight: 600; + text-transform: uppercase; + margin: 20px 0; + text-align: center; + } + + #avail { + font-size: 0; + text-align: center; + padding: 0; + + &::-webkit-scrollbar-track { + // -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); + background-color: transparent; + border: 1px solid @color-primary-300; + } + &::-webkit-scrollbar { + width: 6px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: @color-primary-300; + } + + li.aspect { + width: 20%; + display: inline-block; + text-align: center; + cursor: pointer; + padding: 5px 5px 10px 5px; + + * { + padding: 0; + margin: 0; + overflow: initial; + float: none; + } + + img { + display: inline-block; + } + + .aspect-text { + width: 100%; + text-align: center; + color: @color-text-light; + + h4 { + font-size: 1.4rem; + font-weight: 400; + text-transform: capitalize; + margin: 0; + padding-top: 5px; + } + .desc { + font-size: 1.2rem; + font-weight: 300; + text-transform: capitalize; + font-style: italic; + } + } + + &.unavail { + background-color: fade(@color-primary-300, 20%); + &:hover { + background-color: fade(@color-primary-500, 20%); + } + } + + &:hover { + background-color: fade(@color-secondary-300, 30%); + } + } + } + +} + +@media (max-width: 768px) { + #config #avail li.aspect { + width: 33.3333%; + } +} + diff --git a/css/LESS/_info.less b/css/LESS/_info.less new file mode 100644 index 00000000..78c09f5d --- /dev/null +++ b/css/LESS/_info.less @@ -0,0 +1,40 @@ +/** + * Info section styles + */ +#info { + + margin-top: 50px; + margin-bottom: 50px; + + + display: none; + font-size: 1.5rem; + + strong { + font-weight: 600; + color: @color-primary-300; + } + + .web-info { + + margin-top: 20px; + font-size: 1.2rem; + + p { + margin-bottom: 3px; + text-align: center; + a { + color: @color-secondary-500; + &:hover, + &:focus, + &:active { + outline: none; + color: @color-primary-500; + } + } + } + + } + + +} diff --git a/css/LESS/_search.less b/css/LESS/_search.less new file mode 100644 index 00000000..9a087e3e --- /dev/null +++ b/css/LESS/_search.less @@ -0,0 +1,319 @@ +/** + * Search section styles + */ +#search-container { + + transition: margin-left 0.7s ease-in-out; + + form { + + label { + text-transform: uppercase; + font-weight: bold; + font-size: 1.2rem; + color: @color-text-lighter; + } + .select2-container.form-control { + padding: 0; + border: 0; + box-shadow: none; + height: auto; + } + .form-control { + border-color: @color-text-light; + background-color: transparent; + color: @color-text-lighter; + font-weight: 600; + } + .input-group-btn + .form-control { + border-left: 0; + text-align: center; + } + + .input-group { + width: 100%; + } + + } + +} + +/** + * Select 2 styles + */ +.select2-drop { + + .select2-search { + padding: 3px 10px; + // background-color: @color-primary-50; + border-bottom: 1px solid @color-secondary-300; + + input { + border: 0; + font-size: 1.2rem; + background-image: none; + padding-top: 5px; + } + } + .select2-results { + padding: 0; + margin: 0; + + .select2-result { + &.select2-highlighted { + background-color: fade(@color-secondary-300, 50%); + } + .aspect { + .aspect-desc, + .aspect-name { + color: @color-text-dark; + } + } + } + + + &::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); + background-color: #fff; + } + &::-webkit-scrollbar { + width: 6px; + background-color: #fff; + } + + &::-webkit-scrollbar-thumb { + background-color: #333; + } + } +} +// Selected Aspect +.select2-container { + background-color: transparent; + .select2-choice { + height: 44px; + } + &, + &.select2-dropdown-open.select2-drop-above, + &.select2-dropdown-open.select2-drop-above { + .select2-choice { + background-image: none; + background-color: transparent; + border: 1px solid @color-text-light; + border-radius: 2px; + + .select2-arrow { + background-image: none; + background-color: transparent; + border-color: @color-text-light; + } + } + } +} +#select2-drop, +.select2-container { + .aspect { + + display: table; + padding: 5px 0; + color: @color-text-lighter; + font-size: 1.2rem; + + img { + float: none; + display: table-cell; + vertical-align: middle; + margin: 0 !important; + padding-left: 5px; + } + div { + display: inline-block; + display: table-cell; + vertical-align: middle; + padding-left: 5px; + text-transform: capitalize; + } + .aspect-name { + font-weight: 600; + } + .aspect-desc { + font-weight: 300; + font-size: 85%; + font-style: italic; + } + + } +} + +/** + * Search Results styles + */ +#search-results-wrapper { + display: none; + overflow-y: auto; + &::-webkit-scrollbar-track { + // -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); + background-color: transparent; + border: 1px solid @color-primary-300; + } + &::-webkit-scrollbar { + width: 6px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: @color-primary-300; + } +} +.search-result { + margin-top: -20px; + opacity: 0; + + width: 100%; + padding: 15px 15px 10px 15px; + position: relative; + border-bottom: 1px solid fade(#fff, 10%); + + .close-result { + position: absolute; + font-size: 1.3rem; + display: block; + right: 15px; + color: @color-primary-300; + top: 15px; + } + + h2 { + margin: 0; + font-size: 1.2rem; + text-transform: uppercase; + font-weight: bold; + color: @color-primary-500; + + span { + font-size: 1.5rem; + &.from { + margin-right: 3px; + } + &.to { + margin-left: 3px; + } + } + } + + ul.aspect-list { + padding: 10px 35px; + text-align: center; + list-style: none; + margin: 0; + + li.aspect { + display: inline-block; + padding: 0 15px 15px 12px; + text-align: center; + position: relative; + + &:after { + font-family: 'FontAwesome'; + vertical-align: middle; + position: absolute; + content: '\f054'; + font-size: 9px; + display: table; + height: 100%; + top: 16px; + right: 0; + color: fade(#fff, 30%); + } + + &:last-child:after { + content: none; + } + + img { + margin: 0; + width: 32px; + float: none; + } + .aspect-name { + font-size: 1.5rem; + font-weight: 300; + font-style: normal; + text-align: center; + text-transform: capitalize; + } + } + + } + + .search-info { + width: 100%; + font-size: 1rem; + position: relative; + text-transform: uppercase; + font-weight: 600; + + .total-steps { + font-size: 1.5rem; + font-weight: 600; + } + + p, + ul, + ul li, + ul li img { + display: inline-block; + } + + > p { + margin-right: 15px; + } + + ul.used-aspects { + padding: 0; + margin: 0; + + li:first-child { + padding-right: 3px; + } + + li.used-aspect { + padding-right: 7px; + font-size: 1.2em; + + img { + width: 20px; + padding-right: 3px; + vertical-align: middle; + } + + span { + vertical-align: middle; + } + &:after { + content: "|"; + margin-left: 7px; + position: relative; + color: #ccc; + } + &:last-child:after { + content: none; + } + } + } + + + } +} + +#close_results { + margin-left: 10px; + display: none; +} + + + +@media (max-width: 768px) { + #search-container { + margin-top: 50px; + } +} + diff --git a/css/LESS/_vars.less b/css/LESS/_vars.less new file mode 100644 index 00000000..35529d54 --- /dev/null +++ b/css/LESS/_vars.less @@ -0,0 +1,41 @@ +/** + * Vars definitions. + */ + +@color-text-light: #ccc; +@color-text-lighter: #fff; +@color-text-dark: #555; +@color-blue: #2196F3; + +@color-primary-50: #FCE4EC; +@color-primary-100: #F8BBD0; +@color-primary-200: #F48FB1; +@color-primary-300: #F06292; +@color-primary-400: #EC407A; +@color-primary-500: #E91E63; +@color-primary-600: #D81B60; +@color-primary-700: #C2185B; +@color-primary-800: #AD1457; +@color-primary-900: #880E4F; + +@color-secondary-50:#E3F2FD; +@color-secondary-100:#BBDEFB; +@color-secondary-200:#90CAF9; +@color-secondary-300:#64B5F6; +@color-secondary-400:#42A5F5; +@color-secondary-500:#2196F3; +@color-secondary-600:#1E88E5; +@color-secondary-700:#1976D2; +@color-secondary-800:#1565C0; +@color-secondary-900:#0D47A1; + +@color-bbb-50:#FFF3E0; +@color-bbb-100:#FFE0B2; +@color-bbb-200:#FFCC80; +@color-bbb-300:#FFB74D; +@color-bbb-400:#FFA726; +@color-bbb-500:#FF9800; +@color-bbb-600:#FB8C00; +@color-bbb-700:#F57C00; +@color-bbb-800:#EF6C00; +@color-bbb-900:#E65100; \ No newline at end of file diff --git a/css/LESS/style.css b/css/LESS/style.css new file mode 100644 index 00000000..2b6ea69f --- /dev/null +++ b/css/LESS/style.css @@ -0,0 +1,526 @@ +@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,600,400'); +/** + * Thaumcraft 4 Research Helper Styles. + * + * This file just merges all the separated style files for the page. + */ +/** + * Vars definitions. + */ +/** + * Basic styles that are common throughout the page. + */ +@media (min-width: 768px) { + .full-height { + height: 100%; + } +} +body { + font-family: 'Open Sans', Helvetica, sans-serif; + font-size: 62.5%; + background-image: url('../zwartevilt.png'); + background-repeat: repeat; + background-attachment: fixed; + color: #fff; +} +.tb { + display: table; + margin: 0 auto; +} +.tbc { + display: table-cell; +} +.vam { + vertical-align: middle; +} +label.btn input[type=checkbox], +label.btn input[type=radio] { + display: none; +} +.btn:hover, +.btn:focus, +.btn:active, +.btn .active { + outline: none; +} +.btn.btn-default { + border-color: #e91e63; + color: #e91e63; + background-color: transparent; +} +.btn.btn-default:hover, +.btn.btn-default:focus { + color: #ffffff; + background-color: #d81b60; +} +.btn.btn-default:active, +.btn.btn-default.active { + color: #ffffff; + background-color: #ad1457; + border-color: #e91e63; + box-shadow: none; +} +.btn.btn-primary { + border-color: #ec407a; + background-color: #e91e63; + color: #ffffff; +} +.btn.btn-primary:hover, +.btn.btn-primary:focus, +.btn.btn-primary.active { + background-color: #d81b60; +} +.btn.btn-primary:active { + background-color: #ad1457; + border-color: #e91e63; +} +h2 { + font-size: 2.5rem; + font-weight: 400; + font-variant: small-caps; + color: #2196f3; + text-align: center; + padding: 10px 0; +} +#combination-box-wrapper { + position: fixed; + bottom: 0; + text-align: center; + width: 100%; +} +#combination-box-wrapper #combination-box { + display: none; + padding: 10px 0; + background-image: url('../zwartevilt.png'); + background-repeat: repeat; + background-attachment: fixed; + border-style: solid; + border-color: #e91e63; + border-width: 1px 1px 0 1px; + border-radius: 3px; +} +#combination-box-wrapper #left, +#combination-box-wrapper #right, +#combination-box-wrapper #equals { + padding: 0 18px; + position: relative; +} +#combination-box-wrapper #left img, +#combination-box-wrapper #right img, +#combination-box-wrapper #equals img { + max-width: 24px; + margin: 0 auto; +} +#combination-box-wrapper #left .aspect-name, +#combination-box-wrapper #right .aspect-name, +#combination-box-wrapper #equals .aspect-name { + font-size: 1.2rem; + font-weight: 400; + text-transform: capitalize; +} +#combination-box-wrapper #left .aspect-desc, +#combination-box-wrapper #right .aspect-desc, +#combination-box-wrapper #equals .aspect-desc { + font-size: 1rem; + font-weight: 300; + font-style: italic; + text-transform: capitalize; +} +#combination-box-wrapper #right::before, +#combination-box-wrapper #left::before { + font-family: 'FontAwesome'; + position: absolute; + top: 12px; + right: -6px; + font-size: 1.2rem; + margin-left: 5px; +} +#combination-box-wrapper #left::before { + content: '\f067'; +} +#combination-box-wrapper #right::before { + content: '\f054'; +} +/** + * Search section styles + */ +#search-container { + transition: margin-left 0.7s ease-in-out; +} +#search-container form label { + text-transform: uppercase; + font-weight: bold; + font-size: 1.2rem; + color: #ffffff; +} +#search-container form .select2-container.form-control { + padding: 0; + border: 0; + box-shadow: none; + height: auto; +} +#search-container form .form-control { + border-color: #cccccc; + background-color: transparent; + color: #ffffff; + font-weight: 600; +} +#search-container form .input-group-btn + .form-control { + border-left: 0; + text-align: center; +} +#search-container form .input-group { + width: 100%; +} +/** + * Select 2 styles + */ +.select2-drop .select2-search { + padding: 3px 10px; + border-bottom: 1px solid #64b5f6; +} +.select2-drop .select2-search input { + border: 0; + font-size: 1.2rem; + background-image: none; + padding-top: 5px; +} +.select2-drop .select2-results { + padding: 0; + margin: 0; +} +.select2-drop .select2-results .select2-result.select2-highlighted { + background-color: rgba(100, 181, 246, 0.5); +} +.select2-drop .select2-results .select2-result .aspect .aspect-desc, +.select2-drop .select2-results .select2-result .aspect .aspect-name { + color: #555555; +} +.select2-drop .select2-results::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); + background-color: #fff; +} +.select2-drop .select2-results::-webkit-scrollbar { + width: 6px; + background-color: #fff; +} +.select2-drop .select2-results::-webkit-scrollbar-thumb { + background-color: #333; +} +.select2-container { + background-color: transparent; +} +.select2-container .select2-choice { + height: 44px; +} +.select2-container .select2-choice, +.select2-container.select2-dropdown-open.select2-drop-above .select2-choice, +.select2-container.select2-dropdown-open.select2-drop-above .select2-choice { + background-image: none; + background-color: transparent; + border: 1px solid #cccccc; + border-radius: 2px; +} +.select2-container .select2-choice .select2-arrow, +.select2-container.select2-dropdown-open.select2-drop-above .select2-choice .select2-arrow, +.select2-container.select2-dropdown-open.select2-drop-above .select2-choice .select2-arrow { + background-image: none; + background-color: transparent; + border-color: #cccccc; +} +#select2-drop .aspect, +.select2-container .aspect { + display: table; + padding: 5px 0; + color: #ffffff; + font-size: 1.2rem; +} +#select2-drop .aspect img, +.select2-container .aspect img { + float: none; + display: table-cell; + vertical-align: middle; + margin: 0 !important; + padding-left: 5px; +} +#select2-drop .aspect div, +.select2-container .aspect div { + display: inline-block; + display: table-cell; + vertical-align: middle; + padding-left: 5px; + text-transform: capitalize; +} +#select2-drop .aspect .aspect-name, +.select2-container .aspect .aspect-name { + font-weight: 600; +} +#select2-drop .aspect .aspect-desc, +.select2-container .aspect .aspect-desc { + font-weight: 300; + font-size: 85%; + font-style: italic; +} +/** + * Search Results styles + */ +#search-results-wrapper { + display: none; + overflow-y: auto; +} +#search-results-wrapper::-webkit-scrollbar-track { + background-color: transparent; + border: 1px solid #f06292; +} +#search-results-wrapper::-webkit-scrollbar { + width: 6px; + background-color: transparent; +} +#search-results-wrapper::-webkit-scrollbar-thumb { + background-color: #f06292; +} +.search-result { + margin-top: -20px; + opacity: 0; + width: 100%; + padding: 15px 15px 10px 15px; + position: relative; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} +.search-result .close-result { + position: absolute; + font-size: 1.3rem; + display: block; + right: 15px; + color: #f06292; + top: 15px; +} +.search-result h2 { + margin: 0; + font-size: 1.2rem; + text-transform: uppercase; + font-weight: bold; + color: #e91e63; +} +.search-result h2 span { + font-size: 1.5rem; +} +.search-result h2 span.from { + margin-right: 3px; +} +.search-result h2 span.to { + margin-left: 3px; +} +.search-result ul.aspect-list { + padding: 10px 35px; + text-align: center; + list-style: none; + margin: 0; +} +.search-result ul.aspect-list li.aspect { + display: inline-block; + padding: 0 15px 15px 12px; + text-align: center; + position: relative; +} +.search-result ul.aspect-list li.aspect:after { + font-family: 'FontAwesome'; + vertical-align: middle; + position: absolute; + content: '\f054'; + font-size: 9px; + display: table; + height: 100%; + top: 16px; + right: 0; + color: rgba(255, 255, 255, 0.3); +} +.search-result ul.aspect-list li.aspect:last-child:after { + content: none; +} +.search-result ul.aspect-list li.aspect img { + margin: 0; + width: 32px; + float: none; +} +.search-result ul.aspect-list li.aspect .aspect-name { + font-size: 1.5rem; + font-weight: 300; + font-style: normal; + text-align: center; + text-transform: capitalize; +} +.search-result .search-info { + width: 100%; + font-size: 1rem; + position: relative; + text-transform: uppercase; + font-weight: 600; +} +.search-result .search-info .total-steps { + font-size: 1.5rem; + font-weight: 600; +} +.search-result .search-info p, +.search-result .search-info ul, +.search-result .search-info ul li, +.search-result .search-info ul li img { + display: inline-block; +} +.search-result .search-info > p { + margin-right: 15px; +} +.search-result .search-info ul.used-aspects { + padding: 0; + margin: 0; +} +.search-result .search-info ul.used-aspects li:first-child { + padding-right: 3px; +} +.search-result .search-info ul.used-aspects li.used-aspect { + padding-right: 7px; + font-size: 1.2em; +} +.search-result .search-info ul.used-aspects li.used-aspect img { + width: 20px; + padding-right: 3px; + vertical-align: middle; +} +.search-result .search-info ul.used-aspects li.used-aspect span { + vertical-align: middle; +} +.search-result .search-info ul.used-aspects li.used-aspect:after { + content: "|"; + margin-left: 7px; + position: relative; + color: #ccc; +} +.search-result .search-info ul.used-aspects li.used-aspect:last-child:after { + content: none; +} +#close_results { + margin-left: 10px; + display: none; +} +@media (max-width: 768px) { + #search-container { + margin-top: 50px; + } +} +/** + * Config Section styles + */ +#config { + display: none; + margin-top: 50px; + margin-bottom: 50px; +} +#config .btn-group { + margin-right: 15px; + padding-bottom: 15px; +} +#config .btn-group:last-child { + margin: 0; +} +#config p.avail-label { + font-size: 1.8em; + color: #cccccc; + font-weight: 600; + text-transform: uppercase; + margin: 20px 0; + text-align: center; +} +#config #avail { + font-size: 0; + text-align: center; + padding: 0; +} +#config #avail::-webkit-scrollbar-track { + background-color: transparent; + border: 1px solid #f06292; +} +#config #avail::-webkit-scrollbar { + width: 6px; + background-color: transparent; +} +#config #avail::-webkit-scrollbar-thumb { + background-color: #f06292; +} +#config #avail li.aspect { + width: 20%; + display: inline-block; + text-align: center; + cursor: pointer; + padding: 5px 5px 10px 5px; +} +#config #avail li.aspect * { + padding: 0; + margin: 0; + overflow: initial; + float: none; +} +#config #avail li.aspect img { + display: inline-block; +} +#config #avail li.aspect .aspect-text { + width: 100%; + text-align: center; + color: #cccccc; +} +#config #avail li.aspect .aspect-text h4 { + font-size: 1.4rem; + font-weight: 400; + text-transform: capitalize; + margin: 0; + padding-top: 5px; +} +#config #avail li.aspect .aspect-text .desc { + font-size: 1.2rem; + font-weight: 300; + text-transform: capitalize; + font-style: italic; +} +#config #avail li.aspect.unavail { + background-color: rgba(240, 98, 146, 0.2); +} +#config #avail li.aspect.unavail:hover { + background-color: rgba(233, 30, 99, 0.2); +} +#config #avail li.aspect:hover { + background-color: rgba(100, 181, 246, 0.3); +} +@media (max-width: 768px) { + #config #avail li.aspect { + width: 33.3333%; + } +} +/** + * Info section styles + */ +#info { + margin-top: 50px; + margin-bottom: 50px; + display: none; + font-size: 1.5rem; +} +#info strong { + font-weight: 600; + color: #f06292; +} +#info .web-info { + margin-top: 20px; + font-size: 1.2rem; +} +#info .web-info p { + margin-bottom: 3px; + text-align: center; +} +#info .web-info p a { + color: #2196f3; +} +#info .web-info p a:hover, +#info .web-info p a:focus, +#info .web-info p a:active { + outline: none; + color: #e91e63; +} diff --git a/css/LESS/style.less b/css/LESS/style.less new file mode 100644 index 00000000..f52267a4 --- /dev/null +++ b/css/LESS/style.less @@ -0,0 +1,20 @@ +/** + * Thaumcraft 4 Research Helper Styles. + * + * This file just merges all the separated style files for the page. + */ + +// Some variables +@import '_vars.less'; + +// Common styles in all the page +@import '_basic.less'; + +// Search section styles +@import '_search.less'; + +// Config section styles +@import '_config.less'; + +// Info section styles +@import '_info.less'; \ No newline at end of file diff --git a/select2-spinner.gif b/css/select2-spinner.gif similarity index 100% rename from select2-spinner.gif rename to css/select2-spinner.gif diff --git a/select2.css b/css/select2.css similarity index 100% rename from select2.css rename to css/select2.css diff --git a/select2.png b/css/select2.png similarity index 100% rename from select2.png rename to css/select2.png diff --git a/tcresearch.css b/css/tcresearch.css similarity index 100% rename from tcresearch.css rename to css/tcresearch.css diff --git a/css/zwartevilt.png b/css/zwartevilt.png new file mode 100644 index 00000000..0557b66e Binary files /dev/null and b/css/zwartevilt.png differ diff --git a/index.html b/index.html index b8a2d988..e1627fa8 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,185 @@ - + - Thaumcraft 4.x Research Helper - + Thaumcraft 4 Research Helper + + + + - - + + - - - - - - - + + + + + + - -

Thaumcraft 4.x Research Helper

-
+=
- - - - - - - - - - - -
Version: - -
From:
To:
Min. Steps:
Addons:
Available
Aspects:
    - -

    Help

    -

    This script helps you with your Thaumcraft 4.x research. If you have a research note with two aspects that you don't know how to connect, simply choose them in the dropdown list above (From: and To:). Additionally, choose the minimum number of steps between those two aspects. If in your research note, the two aspects have two blank spaces between them, choose the value 2 for Min. Steps. Then click Find Connection and the script will search for the shortest path (well, with at least the minimum length) that connects the two aspects. Note that sometimes the length of any path is longer then the given minimum, but this should not be a problem for your research note.

    -

    If you are unhappy with the path you got, because you do not have access to those aspects yet or they are quite rare, simply disable those aspects from Available Aspects:. The script will then try to find paths without these. Note that this may cause the path to grow longer. If too many aspects are disabled and there are no paths left without any of those, the script will try to find the shortest path using the minimal number of disabled aspects.

    -

    This work is licensed under a Creative Commons Attribution 4.0 License. Sources can be found in the github repository.

    + + +
    + +
    + + +
    +
    + +
    +
    + +
    + +
    +
    + + +
    + +
    + +
    + +
    +
    + +

    Thaumcraft 4 Research Helper

    + +
    + + +
    + +
    + + +
    + +
    + +
    + + + + + + + +
    +
    + +
    + Go! +
    + +
    +
    + +
    +
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    +
    + +

    Configuration

    + +
    + +
    + Select All + Deselect All +
    + +
    +
    + +
    + +
    + +
    + +

    Available Aspects

    +
      + +
      +
      +
      + +
      +
      +
      + +

      Help

      + +

      This script helps you with your Thaumcraft 4.x research. If + you have a research note with two aspects that you don't know how + to connect, this is your tool.

      + +
        +
      • Select the aspect from which you have to start.
        • +
      • Select the aspect you have to get to.
        • +
      • Additionally, you can specify the minimum number of + steps needed, that is, the number of empty spaces between + the two aspects in your research note.
        • +
      • Hit Go!
        • +
      + +

      If you are unhappy with the path you got, because you do not + have access to those aspects yet or they are quite rare, simply + disable those aspects in the config section. Besides, clicking an + aspect in a search result will rerun the search again, + but with the aspect disabled (just momentarily).

      + +
      +

      This work is licensed under a Creative Commons Attribution 4.0 License

      +

      Original sources are hosted on GitHub. Original page can be found here.

      +

      Styled by Jesús Cuenca. Fork hosted in GitHub. Page can be found in its GitHub page.

      +
      + + +
      +
      +
      + +
      +
      +
      + +
      +
      +
      + +
      + +
      +
      +
      +
      +
      + + + diff --git a/addon_dictionary.js b/js/addon_dictionary.js similarity index 100% rename from addon_dictionary.js rename to js/addon_dictionary.js diff --git a/buckets-minified.js b/js/buckets-minified.js similarity index 100% rename from buckets-minified.js rename to js/buckets-minified.js diff --git a/jquery.ddslick.min.js b/js/jquery.ddslick.min.js similarity index 100% rename from jquery.ddslick.min.js rename to js/jquery.ddslick.min.js diff --git a/select2.min.js b/js/select2.min.js similarity index 100% rename from select2.min.js rename to js/select2.min.js diff --git a/tcresearch.js b/js/tcresearch.js similarity index 98% rename from tcresearch.js rename to js/tcresearch.js index b6bb2bcd..8a2937b4 100644 --- a/tcresearch.js +++ b/js/tcresearch.js @@ -24,12 +24,14 @@ $(function(){ return (a.text == b.text) ? 0 : (a.text steps + 1) return element.path; graph[node].forEach(function(entry) { var newpath = element.path.slice(); @@ -94,10 +96,7 @@ $(function(){ fromSel = document.getElementById("fromSel"); toSel = document.getElementById("toSel"); check = document.getElementById("available"); - steps = $("#spinner").spinner({ - min: 1, - max: 10 - }); + steps = $("#steps"); reset_aspects(); $("#find_connection").click(function(){ run(); @@ -192,7 +191,6 @@ $(function(){ data: ddData, formatResult: format, formatSelection: format, - width: '200px', allowClear:false, sortResults: function(results, container, query) { return results.sort(function(a, b) { @@ -212,7 +210,7 @@ $(function(){ function run() { var fromSel = $('#fromSel').select2("val"); var toSel = $('#toSel').select2("val"); - var path = find(fromSel, toSel, steps.spinner("value")); + var path = find(fromSel, toSel, +steps.val()); var id = fromSel+'to'+toSel; var title = formatAspectName(translate[fromSel])+' → '+formatAspectName(translate[toSel]); var step_count=0; diff --git a/js/tcresearch_v2.js b/js/tcresearch_v2.js new file mode 100644 index 00000000..be0ca23c --- /dev/null +++ b/js/tcresearch_v2.js @@ -0,0 +1,563 @@ +'use strict'; + +var tcresearch = { + + // App variables + version : "4.2.2.0", // Default version + addonAspects : null, + combinations : {}, + aspects : [], + graph : {}, + + // Cached objects + c: { + $from : $('#fromSel'), + $to : $('#toSel'), + $steps : $('#steps'), + $avail : $('#avail'), + $addons : $('#addons'), + $version: $('#version'), + $search : $('#search-container'), + $searchResults: $('#search-results'), + $resultsWrapper: $('#search-results-wrapper'), + $combBox: $('#combination-box'), + $combBoxL: $('#combination-box #left'), + $combBoxR: $('#combination-box #right'), + $combBoxE: $('#combination-box #equals'), + }, + + html: { + searchResult: '
      ' + + '' + + '

      >

      ' + + '
      ', + aspectsList: '', + searchAspect: '
    • ' + + '' + +'
      ' + + '
      • ', + searchInfo: '
      ' + + '

      Total steps:

      ' + + '' + + '
      ', + usedAspect: '
    • ' + + '' + + '' + + '
      • ', + toggleAddon: '' + }, + + // Add an unidirectional conection between two aspects in the graph + addConnection: function (from, to) { + if ( ! (from in this.graph) ) + this.graph[from] = []; + this.graph[from].push(to); + }, + + // Connects two aspects in the graph + connect: function (aspect1, aspect2) { + this.addConnection(aspect1, aspect2); + this.addConnection(aspect2, aspect1); + }, + + find: function (from, to, steps) { + var visited = {}, + queue = new buckets.PriorityQueue(function (a, b) { + return b.length - a.length; + }); + queue.enqueue({ + 'path': [from], + 'length': 0 + }); + return this.search(queue, to, visited, steps); + }, + + search: function (queue, to, visited, steps) { + while ( ! queue.isEmpty() ) { + + var element = queue.dequeue(), + node = element.path.pop(); + + if ( ! (node in visited) || visited[node].indexOf(element.path.length) < 0 ) { + element.path.push(node); + + if ( node == to && element.path.length > steps + 1 ) + return element.path; + + this.graph[node].forEach(function (entry) { + var newpath = element.path.slice(); + newpath.push(entry); + queue.enqueue({ + 'path': newpath, + 'length': element.length + getWeight(entry) + }); + }); + + if ( ! (node in visited) ) + visited[node] = []; + + visited[node].push(element.path.length - 1); + + }; + } + return null; + }, + + pushAddons: function (aspects, combinations) { + + var self = this, + addonArray = addon_dictionary; + self.addonAspects = [], + + $.each(addon_dictionary, function (key, addonInfo) { + + var $addon = $(self.html.toggleAddon); + $addon + .find('input') + .attr('id', key) + .next() + .text(addonInfo['name']) + .parent() + .appendTo(self.c.$addons); + + $.each(addonInfo['combinations'], function (name, comb) { + self.combinations[name] = comb; + }); + + $.each(addonInfo['aspects'], function (number, aspect) { + self.addonAspects.push(aspect); + }); + + }); + + self.addonAspects = self.addonAspects.sort(aspectSort); + + $.each(self.addonAspects, function (number, aspect) { + aspects.push(aspect); + }); + }, + + enableAspect: function (aspect) { + $(aspect) + .removeClass('unavail') + .find('img') + .attr('src', function (i, orig) { + return orig.replace(/mono/, 'color'); + }); + }, + + disableAspect: function (aspect) { + $(aspect) + .addClass('unavail') + .find('img') + .attr('src', function (i, orig) { + return orig.replace(/color/, 'mono'); + }); + }, + + toggle: function (aspect) { + if ( $(aspect).hasClass('unavail') ) + this.enableAspect(aspect); + else + this.disableAspect(aspect); + }, + + toggleAddons: function (list) { + var self = this; + list.forEach(function (aspect) { + self.disableAspect('#avail #' + aspect); + }); + }, + + run: function () { + var self = this, + from = this.c.$from.val(), + to = this.c.$to.val(), + steps = +this.c.$steps.val(), + id = from + 'to' + to, + path = this.find(from, to, steps), + stepCount = 0, + loopCount = 0, + aspectCount = {}; + + var $searchResult = $(self.html.searchResult), + $aspectsList = $(self.html.aspectsList), + $searchInfo = $(self.html.searchInfo); + + path.forEach(function (aspect) { + loopCount++; + + if (loopCount != 1 && loopCount < path.length) { + typeof aspectCount[aspect] == 'undefined' && (aspectCount[aspect] = 0); + aspectCount[aspect]++; + stepCount++; + }; + + $(self.html.searchAspect) + .attr('id', aspect) + .find('img') + .attr('src', 'aspects/color/' + translate[aspect] + '.png') + .next() + .text(translate[aspect]) + .parent() + .appendTo($aspectsList); + }); + + $.each(aspectCount, function (aspect, value) { + + if ( ! value ) + return; + + $(self.html.usedAspect) + .find('img') + .attr('src', 'aspects/color/' + translate[aspect] + '.png') + .next() + .text(value) + .parent() + .appendTo($searchInfo.find('ul')); + + }); + + $searchResult + .find('.from') + .text(from) + .next() + .text(to) + .parent() + .after($aspectsList); + + $searchInfo + .find('.total-steps') + .text(stepCount); + + $aspectsList + .after($searchInfo); + + self.c.$searchResults.append($searchResult); + $searchResult.animate({ + 'margin-top': 0, + opacity: 1 + }); + }, + + resetAspects: function () { + // Get aspects and combinations according to the selected version + this.aspects = $.extend( + [], + version_dictionary[this.version]['base_aspects'] + ); + this.combinations = $.extend(true, + {}, + version_dictionary[this.version]['combinations'] + ); + + // Reset the view + this.c.$from.select2('destroy'); + this.c.$to.select2('destroy'); + this.c.$addons.empty(); + this.c.$avail.empty(); + + var tierAspects = []; + $.each(this.combinations, function (aspect, value) { + tierAspects.push(aspect); + }); + tierAspects = tierAspects.sort(aspectSort); + this.aspects = this.aspects.concat(tierAspects); + + this.pushAddons(this.aspects, this.combinations) + + this.createAspectsList(); + + this.toggleAddons(this.addonAspects); + + var ddData = []; + this.aspects.forEach(function (aspect) { + ddData.push({text: aspect, id: aspect}); + }); + ddData.sort(ddDataSort); + + this.initSelect2(this.c.$from, ddData, 'air'); + this.initSelect2(this.c.$to, ddData, 'air'); + + this.createCombinations(); + }, + + createAspectsList: function () { + var self = this; + this.aspects.forEach(function (aspect) { + + var $aspect = $('

      • '); + + $aspect. + attr('id', aspect) + .find('img') + .attr('src', 'aspects/color/' + translate[aspect] + '.png') + .next() + .find('h4') + .text(translate[aspect]) + .next() + .text(aspect); + + $aspect.appendTo(self.c.$avail); + }); + }, + + initSelect2: function (element, data, value) { + + function format (d) { + var aspect = d.id; + return '
      ' + translate[aspect] + '
      ' + aspect + '
      ' + } + + $(element).select2({ + data: data, + formatResult: format, + formatSelection: format, + allowClear: false, + placeholder: 'Search by name...', + sortResults: function (results, container, query) { + return results.sort(function (a, b) { + return translate[a.id].localeCompare(translate[b.id]); + }); + }, + matcher: function (search, text) { + return text.toUpperCase().indexOf(search.toUpperCase())>=0 || translate[text].toUpperCase().indexOf(search.toUpperCase()) >= 0; + } + }); + + $(element).select2('val', value); + }, + + createCombinations: function () { + this.graph = {}; + + for( var compound in this.combinations) { + this.connect(compound, this.combinations[compound][0]); + this.connect(compound, this.combinations[compound][1]); + } + }, + + setVersions: function () { + var self = this; + $.each(version_dictionary, function (key, version) { + $('