This commit is contained in:
SpikeHD
2022-07-03 15:10:49 -07:00
parent 98f530eb0c
commit 0ec9ef92ee
18 changed files with 99 additions and 99 deletions

View File

@@ -166,7 +166,7 @@ class App extends React.Component<IProps, IState> {
{ {
// Mini downloads section // Mini downloads section
this.state.miniDownloadsOpen ? ( this.state.miniDownloadsOpen ? (
<div className="MiniDownloads" id={'miniDownloadContainer'}> <div className="MiniDownloads" id="miniDownloadContainer">
<MiniDialog <MiniDialog
title="Downloads" title="Downloads"
closeFn={() => { closeFn={() => {
@@ -209,7 +209,7 @@ class App extends React.Component<IProps, IState> {
) : null ) : null
} }
<div className="BottomSection" id={'bottomSectionContainer'}> <div className="BottomSection" id="bottomSectionContainer">
<ServerLaunchSection /> <ServerLaunchSection />
<div id="DownloadProgress" <div id="DownloadProgress"

View File

@@ -32,16 +32,16 @@ export default class MiniDialog extends React.Component<IProps, never> {
render() { render() {
return ( return (
<div className="MiniDialog" id={'miniDialogContainer'}> <div className="MiniDialog" id="miniDialogContainer">
{ {
this.props.closeable !== undefined && this.props.closeable ? this.props.closeable !== undefined && this.props.closeable ?
<div className="MiniDialogTop" id={'miniDialogContainerTop'} onClick={this.props.closeFn}> <div className="MiniDialogTop" id="miniDialogContainerTop" onClick={this.props.closeFn}>
<span>{this.props?.title}</span> <span>{this.props?.title}</span>
<img src={Close} className="MiniDialogClose" id={'miniDialogButtonClose'} /> <img src={Close} className="MiniDialogClose" id="miniDialogButtonClose" />
</div> : null </div> : null
} }
<div className="MiniDialogInner" id={'miniDialogContent'}> <div className="MiniDialogInner" id="miniDialogContent">
{this.props.children} {this.props.children}
</div> </div>
</div> </div>

View File

@@ -16,12 +16,12 @@ export default class RightBar extends React.Component {
render() { render() {
return ( return (
<div className="RightBar" id={'rightBarContainer'}> <div className="RightBar" id="rightBarContainer">
<div className="RightBarInner" id={'rightBarContent'}> <div className="RightBarInner" id="rightBarContent">
<div className="BarDiscord BarImg" id={'rightBarButtonDiscord'} onClick={() => this.openInBrowser(DISCORD)}> <div className="BarDiscord BarImg" id="rightBarButtonDiscord" onClick={() => this.openInBrowser(DISCORD)}>
<img src={Discord} /> <img src={Discord} />
</div> </div>
<div className="BarGithub BarImg" id={'rightBarButtonGithub'} onClick={() => this.openInBrowser(GITHUB)}> <div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
<img src={Github} /> <img src={Github} />
</div> </div>
</div> </div>

View File

@@ -196,7 +196,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
{ {
this.state.grasscutterEnabled && ( this.state.grasscutterEnabled && (
<div> <div>
<div className="ServerConfig" id={'serverConfigContainer'}> <div className="ServerConfig" id="serverConfigContainer">
<TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} /> <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} />
<TextInput style={{ <TextInput style={{
width: '10%', width: '10%',
@@ -210,10 +210,10 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
} }
<div className="ServerLaunchButtons" id={'serverLaunchContainer'}> <div className="ServerLaunchButtons" id="serverLaunchContainer">
<BigButton onClick={this.playGame} id="officialPlay">{this.state.buttonLabel}</BigButton> <BigButton onClick={this.playGame} id="officialPlay">{this.state.buttonLabel}</BigButton>
<BigButton onClick={this.launchServer} id="serverLaunch"> <BigButton onClick={this.launchServer} id="serverLaunch">
<img className="ServerIcon" id={'serverLaunchIcon'} src={Server} /> <img className="ServerIcon" id="serverLaunchIcon" src={Server} />
</BigButton> </BigButton>
</div> </div>
</div> </div>

View File

@@ -43,14 +43,14 @@ export default class TopBar extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="TopBar" id={'topBarContainer'} data-tauri-drag-region> <div className="TopBar" id="topBarContainer" data-tauri-drag-region>
<div id="title"> <div id="title">
<span data-tauri-drag-region> <span data-tauri-drag-region>
<Tr text="main.title" /> <Tr text="main.title" />
</span> </span>
<span data-tauri-drag-region id="version">{this.state?.version}</span> <span data-tauri-drag-region id="version">{this.state?.version}</span>
</div> </div>
<div className="TopBtns" id={'topBarButtonContainer'}> <div className="TopBtns" id="topBarButtonContainer">
<div id="closeBtn" onClick={this.handleClose} className='TopButton'> <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
<img src={closeIcon} alt="close" /> <img src={closeIcon} alt="close" />
</div> </div>

View File

@@ -38,7 +38,7 @@ export default class BigButton extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}> <div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}>
<div className="BigButtonText" id={'commonBigButtonContent'}>{this.props.children}</div> <div className="BigButtonText" id="commonBigButtonContent">{this.props.children}</div>
</div> </div>
) )
} }

View File

@@ -40,10 +40,10 @@ export default class Checkbox extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="Checkbox" id={'commonCheckboxContainer'}> <div className="Checkbox" id="commonCheckboxContainer">
<input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} /> <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
<label id={'commonCheckboxLabel'} htmlFor={this.props.id}> <label id="commonCheckboxLabel" htmlFor={this.props.id}>
<div className="CheckboxDisplay" id={'commonCheckboxDisplay'}> <div className="CheckboxDisplay" id="commonCheckboxDisplay">
{this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null} {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
</div> </div>
<span>{this.props.label || ''}</span> <span>{this.props.label || ''}</span>

View File

@@ -100,8 +100,8 @@ export default class DirInput extends React.Component<IProps, IState> {
}} }}
customClearBehaviour={this.props.customClearBehaviour} customClearBehaviour={this.props.customClearBehaviour}
/> />
<div className="FileSelectIcon" id={'commonDirInputFileSelContainer'} onClick={this.handleIconClick}> <div className="FileSelectIcon" id="commonDirInputFileSelContainer" onClick={this.handleIconClick}>
<img id={'commonDirInputFileSelIcon'} src={File} /> <img id="commonDirInputFileSelIcon" src={File} />
</div> </div>
</div> </div>
) )

View File

@@ -21,12 +21,12 @@ export default class DownloadSection extends React.Component<IProps, never> {
render() { render() {
return ( return (
<div className="DownloadSection" id={'commonDownloadSectionContainer'}> <div className="DownloadSection" id="commonDownloadSectionContainer">
<div className="DownloadTitle" id={'commonDownloadSectionTitle'}> <div className="DownloadTitle" id="commonDownloadSectionTitle">
<div className="DownloadPath" id={'commonDownloadSectionPath'}>{this.getFilenameFromPath()}</div> <div className="DownloadPath" id="commonDownloadSectionPath">{this.getFilenameFromPath()}</div>
<div className="DownloadStatus" id={'commonDownloadSectionSize'}> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div> <div className="DownloadStatus" id="commonDownloadSectionSize"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
</div> </div>
<div className="DownloadSectionInner" id={'commonDownloadSectionProgress'}> <div className="DownloadSectionInner" id="commonDownloadSectionProgress">
<ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} /> <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
</div> </div>
</div> </div>

View File

@@ -36,12 +36,12 @@ export default class HelpButton extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="HelpSection" id={'commonHelpButtonContainer'}> <div className="HelpSection" id="commonHelpButtonContainer">
<div className="HelpButton" id={'commonHelpButtonClosed'} onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}> <div className="HelpButton" id="commonHelpButtonClosed" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
<img id={'commonHelpButtonIcon'} src={Help} /> <img id="commonHelpButtonIcon" src={Help} />
</div> </div>
<div className="HelpContents" id={'commonHelpButtonContainerOpen'} style={{ <div className="HelpContents" id="commonHelpButtonContainerOpen" style={{
display: this.state.opened ? 'block' : 'none' display: this.state.opened ? 'block' : 'none'
}}> }}>
<MiniDialog closeFn={this.setClosed}> <MiniDialog closeFn={this.setClosed}>

View File

@@ -49,9 +49,9 @@ export default class ProgressBar extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="MainProgressBarWrapper" id={'commonMainProgressContainer'}> <div className="MainProgressBarWrapper" id="commonMainProgressContainer">
<div className="ProgressBar" id={'commonMainProgress'}> <div className="ProgressBar" id="commonMainProgress">
<div className="InnerProgress" id={'commonMainProgressInner'} style={{ <div className="InnerProgress" id="commonMainProgressInner" style={{
width: `${(() => { width: `${(() => {
// Handles no files downloading // Handles no files downloading
if (this.state.files === 0) { if (this.state.files === 0) {
@@ -67,7 +67,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
}}></div> }}></div>
</div> </div>
<div className="MainProgressText" id={'commonMainProgressText'}> <div className="MainProgressText" id="commonMainProgressText">
<Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed}) <Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
<br /> <br />
<Tr text="main.files_extracting" /> {this.state.extracting} <Tr text="main.files_extracting" /> {this.state.extracting}

View File

@@ -53,12 +53,12 @@ export default class ProgressBar extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="ProgressBarWrapper" id={'commonProgressBarContainer'}> <div className="ProgressBarWrapper" id="commonProgressBarContainer">
<div style={{ <div style={{
width: '80%' width: '80%'
}}> }}>
<div className="ProgressBar" id={'commonProgressBar'}> <div className="ProgressBar" id="commonProgressBar">
<div className="InnerProgress" id={'commonProgressBarContent'} style={{ <div className="InnerProgress" id="commonProgressBarContent" style={{
width: `${(() => { width: `${(() => {
// Handles files with content-lengths of 0 // Handles files with content-lengths of 0
if (this.state.status === 'finished') { if (this.state.status === 'finished') {
@@ -73,14 +73,14 @@ export default class ProgressBar extends React.Component<IProps, IState> {
})()}%`, })()}%`,
}}></div> }}></div>
</div> </div>
<div className="DownloadControls" id={'commonProgressbarDownContrContainer'}> <div className="DownloadControls" id="commonProgressbarDownContrContainer">
<div onClick={this.stopDownload} id={'commonProgressBarDownStopContainer'} className="downloadStop"> <div onClick={this.stopDownload} id="commonProgressBarDownStopContainer" className="downloadStop">
<img id={'commonProgressBarDownStopIcon'} src={Stop}></img> <img id="commonProgressBarDownStopIcon" src={Stop}></img>
</div> </div>
</div> </div>
</div> </div>
<div className="ProgressText" id={'commonProgressBarText'}> <div className="ProgressText" id="commonProgressBarText">
{capitalize(this.state.status) || 'Waiting'} {capitalize(this.state.status) || 'Waiting'}
</div> </div>
</div> </div>

View File

@@ -44,14 +44,14 @@ export default class TextInput extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="TextInputWrapper" id={'commonTextInputContainer'} style={this.props.style || {}}> <div className="TextInputWrapper" id="commonTextInputContainer" style={this.props.style || {}}>
<input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => { <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
this.setState({ value: e.target.value }) this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value) if (this.props.onChange) this.props.onChange(e.target.value)
}} /> }} />
{ {
this.props.clearable ? this.props.clearable ?
<div className="TextClear" id={'commonTextInputClearableContainer'} onClick={() => { <div className="TextClear" id="commonTextInputClearableContainer" onClick={() => {
// Run custom behaviour first // Run custom behaviour first
if (this.props.customClearBehaviour) return this.props.customClearBehaviour() if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
@@ -61,7 +61,7 @@ export default class TextInput extends React.Component<IProps, IState> {
this.forceUpdate() this.forceUpdate()
}}> }}>
<img src={Close} className="TextInputClear" id={'commonTextInputClearableIcon'} /> <img src={Close} className="TextInputClear" id="commonTextInputClearableIcon" />
</div> : null </div> : null
} }
</div> </div>

View File

@@ -5,8 +5,8 @@ import './Divider.css'
export default class Divider extends React.Component { export default class Divider extends React.Component {
render() { render() {
return ( return (
<div className="Divider" id={'dividerContainer'}> <div className="Divider" id="dividerContainer">
<div className="DividerLine" id={'dividerLine'}></div> <div className="DividerLine" id="dividerLine"></div>
</div> </div>
) )
} }

View File

@@ -190,8 +190,8 @@ export default class Downloads extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads"> <Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
<div className='DownloadMenuSection' id={'downloadMenuContainerGCStable'}> <div className='DownloadMenuSection' id="downloadMenuContainerGCStable">
<div className='DownloadLabel' id={'downloadMenuLabelGCStable'}> <div className='DownloadLabel' id="downloadMenuLabelGCStable">
<Tr text={ <Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update' this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'
} /> } />
@@ -199,14 +199,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_stable_jar" /> <Tr text="help.gc_stable_jar" />
</HelpButton> </HelpButton>
</div> </div>
<div className='DownloadValue' id={'downloadMenuButtonGCStable'}> <div className='DownloadValue' id="downloadMenuButtonGCStable">
<BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" > <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" >
<Tr text="components.download" /> <Tr text="components.download" />
</BigButton> </BigButton>
</div> </div>
</div> </div>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCDev'}> <div className='DownloadMenuSection' id="downloadMenuContainerGCDev">
<div className='DownloadLabel' id={'downloadMenuLabelGCDev'}> <div className='DownloadLabel' id="downloadMenuLabelGCDev">
<Tr text={ <Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update' this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'
} /> } />
@@ -214,7 +214,7 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_dev_jar" /> <Tr text="help.gc_dev_jar" />
</HelpButton> </HelpButton>
</div> </div>
<div className='DownloadValue' id={'downloadMenuButtonGCDev'}> <div className='DownloadValue' id="downloadMenuButtonGCDev">
<BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" > <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" >
<Tr text="components.download" /> <Tr text="components.download" />
</BigButton> </BigButton>
@@ -223,8 +223,8 @@ export default class Downloads extends React.Component<IProps, IState> {
<Divider /> <Divider />
<div className='DownloadMenuSection' id={'downloadMenuContainerGCStableData'}> <div className='DownloadMenuSection' id="downloadMenuContainerGCStableData">
<div className='DownloadLabel' id={'downloadMenuLabelGCStableData'}> <div className='DownloadLabel' id="downloadMenuLabelGCStableData">
<Tr text={ <Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update' this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update'
} /> } />
@@ -232,14 +232,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_stable_data" /> <Tr text="help.gc_stable_data" />
</HelpButton> </HelpButton>
</div> </div>
<div className='DownloadValue' id={'downloadMenuButtonGCStableData'}> <div className='DownloadValue' id="downloadMenuButtonGCStableData">
<BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" > <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" >
<Tr text="components.download" /> <Tr text="components.download" />
</BigButton> </BigButton>
</div> </div>
</div> </div>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCDevData'}> <div className='DownloadMenuSection' id="downloadMenuContainerGCDevData">
<div className='DownloadLabel' id={'downloadMenuLabelGCDevData'}> <div className='DownloadLabel' id="downloadMenuLabelGCDevData">
<Tr text={ <Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update' this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update'
} /> } />
@@ -247,7 +247,7 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_dev_data" /> <Tr text="help.gc_dev_data" />
</HelpButton> </HelpButton>
</div> </div>
<div className='DownloadValue' id={'downloadMenuButtonGCDevData'}> <div className='DownloadValue' id="downloadMenuButtonGCDevData">
<BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" > <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" >
<Tr text="components.download" /> <Tr text="components.download" />
</BigButton> </BigButton>
@@ -256,14 +256,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Divider /> <Divider />
<div className='DownloadMenuSection' id={'downloadMenuContainerResources'}> <div className='DownloadMenuSection' id="downloadMenuContainerResources">
<div className='DownloadLabel' id={'downloadMenuLabelResources'}> <div className='DownloadLabel' id="downloadMenuLabelResources">
<Tr text="downloads.resources" /> <Tr text="downloads.resources" />
<HelpButton> <HelpButton>
<Tr text="help.resources" /> <Tr text="help.resources" />
</HelpButton> </HelpButton>
</div> </div>
<div className='DownloadValue' id={'downloadMenuButtonResources'}> <div className='DownloadValue' id="downloadMenuButtonResources">
<BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" > <BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" >
<Tr text="components.download" /> <Tr text="components.download" />
</BigButton> </BigButton>

View File

@@ -17,14 +17,14 @@ export default class Menu extends React.Component<IProps, never> {
render() { render() {
return ( return (
<div className={'Menu ' + this.props.className} id={'menuContainer'}> <div className={'Menu ' + this.props.className} id="menuContainer">
<div className='MenuTop' id={'menuContainerTop'}> <div className='MenuTop' id="menuContainerTop">
<div className="MenuHeading" id={'menuHeading'}>{this.props.heading}</div> <div className="MenuHeading" id="menuHeading">{this.props.heading}</div>
<div className="MenuExit" id={'menuButtonCloseContainer'} onClick={this.props.closeFn}> <div className="MenuExit" id="menuButtonCloseContainer" onClick={this.props.closeFn}>
<img src={Close} className="MenuClose" id={'menuButtonCloseIcon'} /> <img src={Close} className="MenuClose" id="menuButtonCloseIcon" />
</div> </div>
</div> </div>
<div className='MenuInner' id={'menuContent'}> <div className='MenuInner' id="menuContent">
{this.props.children} {this.props.children}
</div> </div>
</div> </div>

View File

@@ -170,27 +170,27 @@ export default class Options extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<Menu closeFn={this.props.closeFn} className="Options" heading="Options"> <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
<div className='OptionSection' id={'menuOptionsContainerGameExec'}> <div className='OptionSection' id="menuOptionsContainerGameExec">
<div className='OptionLabel' id={'menuOptionsLabelGameExec'}> <div className='OptionLabel' id="menuOptionsLabelGameExec">
<Tr text="options.game_exec" /> <Tr text="options.game_exec" />
</div> </div>
<div className='OptionValue' id={'menuOptionsDirGameExec'}> <div className='OptionValue' id="menuOptionsDirGameExec">
<DirInput onChange={this.setGameExec} value={this.state?.game_install_path} extensions={['exe']} /> <DirInput onChange={this.setGameExec} value={this.state?.game_install_path} extensions={['exe']} />
</div> </div>
</div> </div>
<div className='OptionSection' id={'menuOptionsContainerGCJar'}> <div className='OptionSection' id="menuOptionsContainerGCJar">
<div className='OptionLabel' id={'menuOptionsLabelGCJar'}> <div className='OptionLabel' id="menuOptionsLabelGCJar">
<Tr text="options.grasscutter_jar" /> <Tr text="options.grasscutter_jar" />
</div> </div>
<div className='OptionValue' id={'menuOptionsDirGCJar'}> <div className='OptionValue' id="menuOptionsDirGCJar">
<DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} /> <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
</div> </div>
</div> </div>
<div className='OptionSection' id={'menuOptionsContainerToggleEnc'}> <div className='OptionSection' id="menuOptionsContainerToggleEnc">
<div className='OptionLabel' id={'menuOptionsLabelToggleEnc'}> <div className='OptionLabel' id="menuOptionsLabelToggleEnc">
<Tr text="options.toggle_encryption" /> <Tr text="options.toggle_encryption" />
</div> </div>
<div className='OptionValue' id={'menuOptionsButtonToggleEnc'}> <div className='OptionValue' id="menuOptionsButtonToggleEnc">
<BigButton onClick={this.toggleEncryption} id="toggleEnc"> <BigButton onClick={this.toggleEncryption} id="toggleEnc">
{ {
this.state.encryption this.state.encryption
@@ -201,23 +201,23 @@ export default class Options extends React.Component<IProps, IState> {
<Divider /> <Divider />
<div className='OptionSection' id={'menuOptionsContainerGCWGame'}> <div className='OptionSection' id="menuOptionsContainerGCWGame">
<div className='OptionLabel' id={'menuOptionsLabelGCWDame'}> <div className='OptionLabel' id="menuOptionsLabelGCWDame">
<Tr text="options.grasscutter_with_game" /> <Tr text="options.grasscutter_with_game" />
</div> </div>
<div className='OptionValue' id={'menuOptionsCheckboxGCWGame'}> <div className='OptionValue' id="menuOptionsCheckboxGCWGame">
<Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" /> <Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" />
</div> </div>
</div> </div>
<Divider /> <Divider />
<div className='OptionSection' id={'menuOptionsContainerThemes'}> <div className='OptionSection' id="menuOptionsContainerThemes">
<div className='OptionLabel' id={'menuOptionsLabelThemes'}> <div className='OptionLabel' id="menuOptionsLabelThemes">
<Tr text="options.theme" /> <Tr text="options.theme" />
</div> </div>
<div className='OptionValue' id={'menuOptionsSelectThemes'}> <div className='OptionValue' id="menuOptionsSelectThemes">
<select value={this.state.theme} id={'menuOptionsSelectMenuThemes'} onChange={(event) => { <select value={this.state.theme} id="menuOptionsSelectMenuThemes" onChange={(event) => {
this.setTheme(event.target.value) this.setTheme(event.target.value)
}}> }}>
{this.state.themes.map(t => ( {this.state.themes.map(t => (
@@ -234,20 +234,20 @@ export default class Options extends React.Component<IProps, IState> {
<Divider /> <Divider />
<div className='OptionSection' id={'menuOptionsContainerJavaPath'}> <div className='OptionSection' id="menuOptionsContainerJavaPath">
<div className='OptionLabel' id={'menuOptionsLabelJavaPath'}> <div className='OptionLabel' id="menuOptionsLabelJavaPath">
<Tr text="options.java_path" /> <Tr text="options.java_path" />
</div> </div>
<div className='OptionValue' id={'menuOptionsDirJavaPath'}> <div className='OptionValue' id="menuOptionsDirJavaPath">
<DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} /> <DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
</div> </div>
</div> </div>
<div className='OptionSection' id={'menuOptionsContainerBG'}> <div className='OptionSection' id="menuOptionsContainerBG">
<div className='OptionLabel' id={'menuOptionsLabelBG'}> <div className='OptionLabel' id="menuOptionsLabelBG">
<Tr text="options.background" /> <Tr text="options.background" />
</div> </div>
<div className='OptionValue' id={'menuOptionsDirBG'}> <div className='OptionValue' id="menuOptionsDirBG">
<DirInput <DirInput
onChange={this.setCustomBackground} onChange={this.setCustomBackground}
value={this.state?.bg_url_or_path} value={this.state?.bg_url_or_path}
@@ -262,12 +262,12 @@ export default class Options extends React.Component<IProps, IState> {
</div> </div>
</div> </div>
<div className='OptionSection' id={'menuOptionsContainerLang'}> <div className='OptionSection' id="menuOptionsContainerLang">
<div className='OptionLabel' id={'menuOptionsLabelLang'}> <div className='OptionLabel' id="menuOptionsLabelLang">
<Tr text="options.language" /> <Tr text="options.language" />
</div> </div>
<div className='OptionValue' id={'menuOptionsSelectLang'}> <div className='OptionValue' id="menuOptionsSelectLang">
<select value={this.state.current_language} id={'menuOptionsSelectMenuLang'} onChange={(event) => { <select value={this.state.current_language} id="menuOptionsSelectMenuLang" onChange={(event) => {
this.setLanguage(event.target.value) this.setLanguage(event.target.value)
}}> }}>
{this.state.language_options.map(lang => ( {this.state.language_options.map(lang => (

View File

@@ -68,9 +68,9 @@ export default class NewsSection extends React.Component<IProps, IState> {
const commitsList = obj.slice(0, 10) const commitsList = obj.slice(0, 10)
const commitsListHtml = commitsList.map((commit: any) => { const commitsListHtml = commitsList.map((commit: any) => {
return ( return (
<tr className="Commit" id={'newsCommitsTable'} key={commit.sha}> <tr className="Commit" id="newsCommitsTable" key={commit.sha}>
<td className="CommitAuthor" id={'newsCommitsAuthor'}><span>{commit.commit.author.name}</span></td> <td className="CommitAuthor" id="newsCommitsAuthor"><span>{commit.commit.author.name}</span></td>
<td className="CommitMessage" id={'newsCommitsCommitMessage'}><span>{commit.commit.message}</span></td> <td className="CommitMessage" id="newsCommitsCommitMessage"><span>{commit.commit.message}</span></td>
</tr> </tr>
) )
}) })
@@ -108,8 +108,8 @@ export default class NewsSection extends React.Component<IProps, IState> {
render() { render() {
return ( return (
<div className="NewsSection" id={'newsContainer'}> <div className="NewsSection" id="newsContainer">
<div className="NewsTabs" id={'newsTabsContainer'}> <div className="NewsTabs" id="newsTabsContainer">
<div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}> <div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}>
<Tr text="news.latest_commits" /> <Tr text="news.latest_commits" />
</div> </div>
@@ -117,7 +117,7 @@ export default class NewsSection extends React.Component<IProps, IState> {
<Tr text="news.latest_version" /> <Tr text="news.latest_version" />
</div> </div>
</div> </div>
<table className="NewsContent" id={'newsContent'}> <table className="NewsContent" id="newsContent">
<tbody> <tbody>
{this.state.news} {this.state.news}
</tbody> </tbody>