2022-07-29 17:37:09 +00:00
/ * *
* File containing utility functions relevant to the builder page , as well as the setup code ( at the very bottom ) .
* /
2021-01-11 11:08:10 +00:00
2021-10-01 02:00:11 +00:00
function populateBuildList ( ) {
const buildList = document . getElementById ( "build-choice" ) ;
const savedBuilds = window . localStorage . getItem ( "builds" ) === null ? { } : JSON . parse ( window . localStorage . getItem ( "builds" ) ) ;
for ( const buildName of Object . keys ( savedBuilds ) . sort ( ) ) {
const buildOption = document . createElement ( "option" ) ;
buildOption . setAttribute ( "value" , buildName ) ;
buildList . appendChild ( buildOption ) ;
}
}
2021-09-12 06:18:20 +00:00
function saveBuild ( ) {
if ( player _build ) {
2021-10-01 02:00:11 +00:00
const savedBuilds = window . localStorage . getItem ( "builds" ) === null ? { } : JSON . parse ( window . localStorage . getItem ( "builds" ) ) ;
const saveName = document . getElementById ( "build-name" ) . value ;
2022-06-19 07:42:49 +00:00
const encodedBuild = encodeBuild ( player _build ) ;
2021-09-25 17:22:04 +00:00
if ( ( ! Object . keys ( savedBuilds ) . includes ( saveName )
|| document . getElementById ( "saved-error" ) . textContent !== "" ) && encodedBuild !== "" ) {
2021-09-17 20:56:29 +00:00
savedBuilds [ saveName ] = encodedBuild . replace ( "#" , "" ) ;
2021-09-12 06:18:20 +00:00
window . localStorage . setItem ( "builds" , JSON . stringify ( savedBuilds ) ) ;
document . getElementById ( "saved-error" ) . textContent = "" ;
2021-10-01 02:00:11 +00:00
document . getElementById ( "saved-build" ) . textContent = "Build saved locally" ;
const buildList = document . getElementById ( "build-choice" ) ;
const buildOption = document . createElement ( "option" ) ;
buildOption . setAttribute ( "value" , saveName ) ;
buildList . appendChild ( buildOption ) ;
2021-09-12 06:18:20 +00:00
} else {
2021-09-25 17:22:04 +00:00
document . getElementById ( "saved-build" ) . textContent = "" ;
if ( encodedBuild === "" ) {
2021-09-12 06:18:20 +00:00
document . getElementById ( "saved-error" ) . textContent = "Empty build" ;
2021-09-25 17:22:04 +00:00
}
else {
2021-09-12 06:18:20 +00:00
document . getElementById ( "saved-error" ) . textContent = "Exists. Overwrite?" ;
2021-09-25 17:22:04 +00:00
}
2021-09-12 06:18:20 +00:00
}
}
}
function loadBuild ( ) {
let savedBuilds = window . localStorage . getItem ( "builds" ) === null ? { } : JSON . parse ( window . localStorage . getItem ( "builds" ) ) ;
let saveName = document . getElementById ( "build-name" ) . value ;
if ( Object . keys ( savedBuilds ) . includes ( saveName ) ) {
2022-12-16 10:29:01 +00:00
// NOTE: this is broken since decodeBuild is async func.
// Doubly broken because of versioning... lets just kill this for now
2021-09-12 06:18:20 +00:00
decodeBuild ( savedBuilds [ saveName ] )
2021-09-25 17:22:04 +00:00
document . getElementById ( "loaded-error" ) . textContent = "" ;
2021-09-12 06:18:20 +00:00
document . getElementById ( "loaded-build" ) . textContent = "Build loaded" ;
2021-09-25 17:22:04 +00:00
} else {
document . getElementById ( "loaded-build" ) . textContent = "" ;
2021-09-12 06:18:20 +00:00
document . getElementById ( "loaded-error" ) . textContent = "Build doesn't exist" ;
2021-09-25 17:22:04 +00:00
}
2021-09-12 06:18:20 +00:00
}
2021-01-06 20:54:15 +00:00
function resetFields ( ) {
2022-06-20 17:51:17 +00:00
for ( const i of powder _inputs ) {
setValue ( i , "" ) ;
2021-01-09 03:53:57 +00:00
}
2022-06-20 17:51:17 +00:00
for ( const i of equipment _inputs ) {
setValue ( i , "" ) ;
2021-01-09 03:53:57 +00:00
}
2022-07-29 20:40:19 +00:00
for ( const i of tomeInputs ) {
setValue ( i , "" ) ;
}
2021-01-07 10:23:54 +00:00
setValue ( "str-skp" , "0" ) ;
setValue ( "dex-skp" , "0" ) ;
setValue ( "int-skp" , "0" ) ;
setValue ( "def-skp" , "0" ) ;
setValue ( "agi-skp" , "0" ) ;
2022-06-20 17:51:17 +00:00
for ( const special _name of specialNames ) {
for ( let i = 1 ; i < 6 ; i ++ ) { //toggle all pressed buttons of the same powder special off
//name is same, power is i
let elem = document . getElementById ( special _name . replace ( " " , "_" ) + '-' + i ) ;
if ( elem . classList . contains ( "toggleOn" ) ) {
elem . classList . remove ( "toggleOn" ) ;
}
}
}
for ( const [ key , value ] of damageMultipliers ) {
let elem = document . getElementById ( key + "-boost" )
if ( elem . classList . contains ( "toggleOn" ) ) {
elem . classList . remove ( "toggleOn" ) ;
}
}
2022-06-23 09:23:56 +00:00
for ( const elem of skp _order ) {
console . log ( document . getElementById ( elem + "_boost_armor" ) . value ) ;
document . getElementById ( elem + "_boost_armor" ) . value = 0 ;
document . getElementById ( elem + "_boost_armor" ) . style . background = ` linear-gradient(to right, #AAAAAA, #AAAAAA 0%, #AAAAAA 100%) ` ;
document . getElementById ( elem + "_boost_armor_label" ) . textContent = ` % ${ damageClasses [ skp _order . indexOf ( elem ) + 1 ] } Damage Boost: 0 ` ;
}
2022-06-20 17:51:17 +00:00
2022-06-23 09:23:56 +00:00
const nodes _to _reset = item _nodes . concat ( powder _nodes ) . concat ( edit _input _nodes ) . concat ( [ powder _special _input , boosts _node , armor _powder _node ] ) ;
2022-06-20 17:51:17 +00:00
for ( const node of nodes _to _reset ) {
node . mark _dirty ( ) ;
}
for ( const node of nodes _to _reset ) {
node . update ( ) ;
}
2021-01-29 22:13:52 +00:00
setValue ( "level-choice" , "106" ) ;
2021-01-08 01:16:06 +00:00
location . hash = "" ;
2021-01-06 22:46:00 +00:00
}
2021-01-18 14:18:14 +00:00
function toggleID ( ) {
let button = document . getElementById ( "show-id-button" ) ;
let targetDiv = document . getElementById ( "id-edit" ) ;
if ( button . classList . contains ( "toggleOn" ) ) { //toggle the pressed button off
targetDiv . style . display = "none" ;
button . classList . remove ( "toggleOn" ) ;
}
else {
targetDiv . style . display = "block" ;
button . classList . add ( "toggleOn" ) ;
}
}
2022-05-22 07:57:47 +00:00
function toggleButton ( button _id ) {
let button = document . getElementById ( button _id ) ;
if ( button ) {
if ( button . classList . contains ( "toggleOn" ) ) {
button . classList . remove ( "toggleOn" ) ;
} else {
button . classList . add ( "toggleOn" ) ;
}
}
}
2022-06-19 16:49:04 +00:00
2022-06-19 20:44:02 +00:00
// autocomplete initialize
function init _autocomplete ( ) {
let dropdowns = new Map ( ) ;
for ( const eq of equipment _keys ) {
if ( tome _keys . includes ( eq ) ) {
continue ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
// build dropdown
let item _arr = [ ] ;
if ( eq == 'weapon' ) {
for ( const weaponType of weapon _keys ) {
for ( const weapon of itemLists . get ( weaponType ) ) {
let item _obj = itemMap . get ( weapon ) ;
if ( item _obj [ "restrict" ] && item _obj [ "restrict" ] === "DEPRECATED" ) {
continue ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
if ( item _obj [ "name" ] == 'No ' + eq . charAt ( 0 ) . toUpperCase ( ) + eq . slice ( 1 ) ) {
continue ;
}
item _arr . push ( weapon ) ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
}
} else {
for ( const item of itemLists . get ( eq . replace ( /[0-9]/g , '' ) ) ) {
let item _obj = itemMap . get ( item ) ;
if ( item _obj [ "restrict" ] && item _obj [ "restrict" ] === "DEPRECATED" ) {
continue ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
if ( item _obj [ "name" ] == 'No ' + eq . charAt ( 0 ) . toUpperCase ( ) + eq . slice ( 1 ) ) {
continue ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
item _arr . push ( item )
}
}
// create dropdown
dropdowns . set ( eq , new autoComplete ( {
data : {
src : item _arr
} ,
selector : "#" + eq + "-choice" ,
wrapper : false ,
resultsList : {
maxResults : 1000 ,
tabSelect : true ,
noResults : true ,
class : "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm" ,
element : ( list , data ) => {
// dynamic result loc
let position = document . getElementById ( eq + '-dropdown' ) . getBoundingClientRect ( ) ;
list . style . top = position . bottom + window . scrollY + "px" ;
list . style . left = position . x + "px" ;
list . style . width = position . width + "px" ;
list . style . maxHeight = position . height * 2 + "px" ;
if ( ! data . results . length ) {
message = document . createElement ( 'li' ) ;
message . classList . add ( 'scaled-font' ) ;
message . textContent = "No results found!" ;
list . prepend ( message ) ;
}
} ,
} ,
resultItem : {
class : "scaled-font search-item" ,
selected : "dark-5" ,
element : ( item , data ) => {
item . classList . add ( itemMap . get ( data . value ) . tier ) ;
} ,
} ,
events : {
input : {
selection : ( event ) => {
if ( event . detail . selection . value ) {
event . target . value = event . detail . selection . value ;
}
2022-06-23 09:51:51 +00:00
event . target . dispatchEvent ( new Event ( 'change' ) ) ;
2022-06-19 20:44:02 +00:00
} ,
} ,
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
} ) ) ;
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
for ( const eq of tome _keys ) {
// build dropdown
let tome _arr = [ ] ;
2022-07-29 19:10:52 +00:00
let tome _aliases = new Map ( ) ;
for ( const tome _name of tomeLists . get ( eq . replace ( /[0-9]/g , '' ) ) ) {
let tome _obj = tomeMap . get ( tome _name ) ;
2022-06-19 20:44:02 +00:00
if ( tome _obj [ "restrict" ] && tome _obj [ "restrict" ] === "DEPRECATED" ) {
continue ;
}
//this should suffice for tomes - jank
if ( tome _obj [ "name" ] . includes ( 'No ' + eq . charAt ( 0 ) . toUpperCase ( ) ) ) {
continue ;
}
2022-07-29 19:10:52 +00:00
let tome _alias = tome _obj [ 'alias' ] ;
2022-06-19 20:44:02 +00:00
tome _arr . push ( tome _name ) ;
2022-07-29 19:10:52 +00:00
tome _arr . push ( tome _alias ) ;
tome _aliases . set ( tome _alias , tome _name ) ;
2022-06-19 20:44:02 +00:00
}
// create dropdown
dropdowns . set ( eq , new autoComplete ( {
data : {
src : tome _arr
} ,
selector : "#" + eq + "-choice" ,
wrapper : false ,
resultsList : {
maxResults : 1000 ,
tabSelect : true ,
2022-06-23 10:16:36 +00:00
noResults : false ,
2022-06-19 20:44:02 +00:00
class : "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm" ,
element : ( list , data ) => {
// dynamic result loc
let position = document . getElementById ( eq + '-dropdown' ) . getBoundingClientRect ( ) ;
list . style . top = position . bottom + window . scrollY + "px" ;
list . style . left = position . x + "px" ;
list . style . width = position . width + "px" ;
list . style . maxHeight = position . height * 2 + "px" ;
if ( ! data . results . length ) {
message = document . createElement ( 'li' ) ;
message . classList . add ( 'scaled-font' ) ;
message . textContent = "No results found!" ;
list . prepend ( message ) ;
}
} ,
} ,
resultItem : {
class : "scaled-font search-item" ,
selected : "dark-5" ,
element : ( tome , data ) => {
2022-07-29 19:10:52 +00:00
let val = data . value ;
if ( tome _aliases . has ( val ) ) { val = tome _aliases . get ( val ) ; }
tome . classList . add ( tomeMap . get ( val ) . tier ) ;
2022-06-19 20:44:02 +00:00
} ,
} ,
events : {
input : {
selection : ( event ) => {
if ( event . detail . selection . value ) {
2022-07-29 19:10:52 +00:00
let val = event . detail . selection . value ;
if ( tome _aliases . has ( val ) ) { val = tome _aliases . get ( val ) ; }
event . target . value = val ;
2022-06-19 20:44:02 +00:00
}
2022-06-23 09:51:51 +00:00
event . target . dispatchEvent ( new Event ( 'change' ) ) ;
2022-06-19 20:44:02 +00:00
} ,
} ,
}
} ) ) ;
}
}
function collapse _element ( elmnt ) {
elem _list = document . querySelector ( elmnt ) . children ;
if ( elem _list ) {
for ( elem of elem _list ) {
if ( elem . classList . contains ( "no-collapse" ) ) { continue ; }
if ( elem . style . display == "none" ) {
elem . style . display = "" ;
} else {
elem . style . display = "none" ;
}
}
2021-07-27 10:04:12 +00:00
}
2022-06-19 20:44:02 +00:00
// macy quirk
window . dispatchEvent ( new Event ( 'resize' ) ) ;
// weird bug where display: none overrides??
document . querySelector ( elmnt ) . style . removeProperty ( 'display' ) ;
2021-07-27 10:04:12 +00:00
}
2022-12-16 10:29:01 +00:00
async function init ( ) {
2022-05-22 07:57:47 +00:00
console . log ( "builder.js init" ) ;
2022-06-19 20:44:02 +00:00
// Other "main" stuff
// Spell dropdowns
for ( const eq of equipment _keys ) {
document . querySelector ( "#" + eq + "-tooltip" ) . addEventListener ( "click" , ( ) => collapse _element ( '#' + eq + '-tooltip' ) ) ;
}
2022-07-13 07:37:31 +00:00
// Armor Specials
2022-07-07 02:44:51 +00:00
for ( let i = 0 ; i < 5 ; ++ i ) {
const powder _special = powderSpecialStats [ i ] ;
const elem _name = damageClasses [ i + 1 ] ; // skip neutral
const elem _char = skp _elements [ i ] ; // TODO: merge?
const skp _name = skp _order [ i ] ; // TODO: merge?
const boost _parent = document . getElementById ( skp _name + '-boost' ) ;
const slider _id = skp _name + '_boost_armor' ;
const label _name = "% " + elem _name + " Dmg Boost" ;
const slider _container = gen _slider _labeled ( { label _name : label _name , max : powder _special . cap , id : slider _id , color : elem _colors [ i ] } ) ;
boost _parent . appendChild ( slider _container ) ;
document . getElementById ( slider _id ) . addEventListener ( "change" , ( _ ) => armor _powder _node . mark _dirty ( ) . update ( ) ) ;
}
2022-06-19 20:44:02 +00:00
// Masonry setup
2022-12-16 10:29:01 +00:00
try {
let masonry = Macy ( {
container : "#masonry-container" ,
columns : 1 ,
mobileFirst : true ,
breakAt : {
1200 : 4 ,
} ,
margin : {
x : 20 ,
y : 20 ,
}
} ) ;
2022-06-19 20:44:02 +00:00
2022-12-16 10:29:01 +00:00
let search _masonry = Macy ( {
container : "#search-results" ,
columns : 1 ,
mobileFirst : true ,
breakAt : {
1200 : 4 ,
} ,
margin : {
x : 20 ,
y : 20 ,
}
} ) ;
} catch ( e ) {
console . log ( "Could not initialize macy components. Maybe you're offline?" ) ;
2022-12-20 21:34:11 +00:00
console . log ( e ) ;
2022-12-16 10:29:01 +00:00
}
2022-12-20 21:34:11 +00:00
const save _skp = await parse _hash ( url _tag ) ;
2022-12-16 10:29:01 +00:00
try {
init _autocomplete ( ) ;
} catch ( e ) {
console . log ( "Could not initialize autocomplete. Maybe you're offline?" ) ;
2022-12-20 21:34:11 +00:00
console . log ( e ) ;
2022-12-16 10:29:01 +00:00
}
2022-12-20 21:34:11 +00:00
builder _graph _init ( save _skp ) ;
2022-07-13 08:17:45 +00:00
for ( const item _node of item _nodes ) {
if ( item _node . get _value ( ) === null ) {
// likely DB load failure...
if ( confirm ( 'One or more items failed to load correctly. This could be due to a corrupted build link, or (more likely) a database load failure. Would you like to reload?' ) ) {
hardReload ( ) ;
}
2022-12-16 10:29:01 +00:00
console . log ( item _node ) ;
2022-07-13 08:17:45 +00:00
break ;
}
}
2021-04-30 10:36:25 +00:00
}
2022-05-22 07:57:47 +00:00
2022-06-26 12:29:06 +00:00
window . onerror = function ( message , source , lineno , colno , error ) {
document . getElementById ( 'err-box' ) . textContent = message ;
document . getElementById ( 'stack-box' ) . textContent = error . stack ;
} ;
2022-06-12 14:45:48 +00:00
( async function ( ) {
2022-12-16 10:29:01 +00:00
await init ( ) ;
2022-06-12 14:45:48 +00:00
} ) ( ) ;