import { makeAutoObservable } from 'mobx' ; import { Store } from '..' ; import { setLS , getLS } from '../../utils/storage' ; import { xssEscape } from '../../utils/lodash' ; import { LangMapKey , ShortNameMapKey , SortRuleMapKey , ThemeMapKey , DisplayModeMapKey , DisplayContentMapKey , TickerAlignMapKey , TickerMapKey , BottomDispMapKey , FontFamilyMapKey , FontWeightMapKey , MAP_FONT_WEIGHT , } from '../../utils/constants' ; interface PartialSettings { [ key ] : unknown ; } /**
 * save settings to local storage
 */ function saveSettings ( settings ) { const savedSettings = ( getLS ( 'settings' ) || { } ) as PartialSettings ; const newSettings = { ... savedSettings , ... settings } ; setLS ( 'settings' , newSettings ) ; } interface SortSettings { key : SortRuleMapKey ; rule : - 1 | 1 ; } interface PartialSortSettings { key ? : SortRuleMapKey ; rule ? : - 1 | 1 ; } interface DispContentSettings { left : DisplayContentMapKey ; right : DisplayContentMapKey ; } interface PartialDispContentSettings { left ? : DisplayContentMapKey ; right ? : DisplayContentMapKey ; } interface TickerSettings { top : TickerMapKey ; bottom : TickerMapKey ; } interface PartialTickerSettings { top ? : TickerMapKey ; bottom ? : TickerMapKey ; } interface TickerAlignSettings { top : TickerAlignMapKey ; bottom : TickerAlignMapKey ; } interface PartialTickerAlignSettings { top ? : TickerAlignMapKey ; bottom ? : TickerAlignMapKey ; } class Settings { rootStore : Store = null as never ; mobx showCombatants = true ; showSettings = false ; blurName = false ; sort : SortSettings = { key : 'dps' , rule : - 1 } ; playerLimit = 8 ; showLB = true ; youName = 'YOU' ; petMergeID = '' ; bottomDisp : BottomDispMapKey = 'maxhit' ; dispMode : DisplayModeMapKey = 'single' ; dispContent : DispContentSettings = { left : 'hps' , right : 'dps' } ; hlYou = true ; ticker : TickerSettings = { top : 'none' , bottom : 'dps' } ; tickerAlign : TickerAlignSettings = { top : 'right' , bottom : 'left' } ; shortName : ShortNameMapKey = 'fstlst' ; shortNumber = false ; theme : ThemeMapKey = 'default' ; lang : LangMapKey = 'en' ; zoom = 1 ; font : FontFamilyMapKey = 'default' ; fontWeight : FontWeightMapKey = 'regular' ; customCSS = '#root {}' ; mobx constructor constructor ( rootStore ) { const savedSettings = ( getLS ( 'settings' ) || { } ) as PartialSettings ; for ( const key of Object . keys ( savedSettings ) ) { this [ key ] = savedSettings [ key ] ; } document . body . setAttribute ( 'data-theme' , this . theme ) ; document . documentElement . setAttribute ( 'data-font' , this . font ) ; const weight = MAP_FONT_WEIGHT [ this . fontWeight ] . data . weight ; document . documentElement . style . fontWeight = weight ; document . documentElement . setAttribute ( 'lang' , this . lang ) ; document . documentElement . style . fontSize = `${ Math . floor ( 100 * this . zoom ) || 100 }px` ; const customStyles = document . createElement ( 'style' ) ; customStyles . setAttribute ( 'id' , 'skyline-custom-css' ) ; customStyles . innerHTML = xssEscape ( this . customCSS ) ; document . head . appendChild ( customStyles ) ; this . rootStore = rootStore ; makeAutoObservable ( this , { rootStore : false } , { autoBind : true } ) ; } mobx toggleShowCombatants ( payload ? ) { if ( payload !== undefined ) { this . showCombatants = payload ; } else { this . showCombatants = ! this . showCombatants ; } saveSettings ( { showCombatants : this . showCombatants } ) ; } toggleSettings ( ) { this . showSettings = ! this . showSettings ; saveSettings ( { showSettings : this . showSettings } ) ; } toggleBlurName ( ) { this . blurName = ! this . blurName ; saveSettings ( { blurName : this . blurName } ) ; } updateSort ( payload ) { this . sort = { ... this . sort , ... payload } ; saveSettings ( { sort : this . sort } ) ; } updatePlayerLimit ( payload ) { this . playerLimit = payload ; saveSettings ( { playerLimit : payload } ) ; } updateShowLB ( payload ) { this . showLB = payload ; saveSettings ( { showLB : payload } ) ; } updateYouName ( payload ) { this . youName = payload ; saveSettings ( { youName : payload } ) ; } updatePetMergeID ( payload ) { this . petMergeID = payload ; saveSettings ( { petMergeID : payload } ) ; } updateBottomDisp ( payload ) { this . bottomDisp = payload ; saveSettings ( { bottomDisp : payload } ) ; } updateDispMode ( payload ) { this . dispMode = payload ; saveSettings ( { dispMode : payload } ) ; } updateDispContent ( payload ) { this . dispContent = { ... this . dispContent , ... payload } ; saveSettings ( { dispContent : this . dispContent } ) ; } updateHlYou ( payload ) { this . hlYou = payload ; saveSettings ( { hlYou : payload } ) ; } updateTicker ( payload ) { this . ticker = { ... this . ticker , ... payload } ; saveSettings ( { ticker : this . ticker } ) ; } updateTickerAlign ( payload ) { this . tickerAlign = { ... this . tickerAlign , ... payload } ; saveSettings ( { tickerAlign : this . tickerAlign } ) ; } updateShortName ( payload ) { this . shortName = payload ; saveSettings ( { shortName : payload } ) ; } updateShortNumber ( payload ) { this . shortNumber = payload ; saveSettings ( { shortNumber : payload } ) ; } updateTheme ( payload ) { this . theme = payload ; if ( payload === 'default' ) { document . body . removeAttribute ( 'data-theme' ) ; } else { document . body . setAttribute ( 'data-theme' , payload ) ; } saveSettings ( { theme : payload } ) ; } updateLang ( payload ) { this . lang = payload ; this . rootStore . translation . setTranslation ( payload ) ; saveSettings ( { lang : payload } ) ; } updateZoom ( payload ) { this . zoom = payload ; document . documentElement . style . fontSize = `${ Math . floor ( 100 * payload ) || 100 }px` ; saveSettings ( { zoom : payload } ) ; } updateFont ( payload ) { this . font = payload ; document . documentElement . setAttribute ( 'data-font' , payload ) ; saveSettings ( { font : payload } ) ; } updateFontWeight ( payload ) { this . fontWeight = payload ; const weight = MAP_FONT_WEIGHT [ payload ] . data . weight ; document . documentElement . style . fontWeight = weight ; saveSettings ( { fontWeight : payload } ) ; } updateCustomCSS ( payload ) { this . customCSS = payload ; const customStyles = document . querySelector ( '#skyline-custom-css' ) ; if ( customStyles ) { customStyles . innerHTML = xssEscape ( payload ) ; } saveSettings ( { customCSS : payload } ) ; } } export default Settings ;