zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

version viewer page remake

Browse Source
This commit is contained in:
MathieuG-P
2022-06-13 22:23:27 +02:00
parent d677e0c8b7
commit a2fea18b6d
1 changed files with 16 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/pages/version-viewer.component.tsx
+16 -30
View File
@@ -62,37 +62,23 @@ export function VersionViewer() {
}
return (
<div className="flex items-center flex-col w-full text-gray-200">
<div className='w-fit flex flex-col items-center'>
<img className='max-w-xl' src={BSLogo} alt="" />
<h1 className='text-4xl font-bold'>{state.BSVersion}</h1>
{ launchRes === LaunchResult.STEAM_NOT_RUNNING && <h2 className='text-3xl font-bold text-red-600'>STEAM NOT RUNNING</h2>}
{ launchRes === LaunchResult.EXE_NOT_FIND && <h2 className='text-3xl font-bold text-red-600'>EXECUTABLE NOT EXIST</h2>}
<div className='flex justify-around w-3/4 mt-5'>
<div>
<input onChange={e => setMode("debug", e.target.checked)} checked={debugMode} type="checkbox" name="debug-mode" id="debug-mode" />
<label htmlFor="debug-mode">DEBUG MODE</label>
</div>
<div>
<input onChange={e => setMode("oculus", e.target.checked)} checked={oculusMode} type="checkbox" name="oculus-mode" id="oculus-mode" />
<label htmlFor="oculus-mode">OCULUS MODE</label>
</div>
<div>
<input onChange={e => setMode("desktop", e.target.checked)} checked={desktopMode} type="checkbox" name="decktop-mode" id="decktop-mode" />
<label htmlFor="decktop-mode">DESKTOP MODE</label>
</div>
<>
<img className="absolute w-full h-full top-0 left-0 blur-lg brightness-75 object-cover" src={state.ReleaseImg} alt="" />
<div className="relative flex items-center flex-col w-full h-full text-gray-200">
<img className='relative -left-4 object-cover h-28 -top-3' src={BSLogo} alt="" />
<h1 className='relative text-4xl font-bold italic -top-7'>{state.BSVersion}</h1>
<div className='relative flex flex-row justify-center items-center content-center -top-2'>
<VersionLunchModButton onClick={() => setMode("oculus", !oculusMode)} active={oculusMode} text="OCULUS MOD"/>
<VersionLunchModButton onClick={() => setMode("desktop", !desktopMode)} active={desktopMode} text="DESKTOP MOD"/>
<VersionLunchModButton onClick={() => setMode("debug", !debugMode)} active={debugMode} text="DEBUG MOD"/>
</div>
{downloading &&
<div className='relative flex flex-col items-center justify-center content-center w-full mt-7 mb-7'>
<img className='absolute z-[1] h-16 top-[-34px] transition-all' style={{left: `calc(${downloadProgress}% - 34px)`}} src={BeatRunning} alt="" />
<div className='w-full h-2 relative overflow-hidden bg-main-color-1 rounded-full'>
<div className='download-progress w-full h-full overflow-hidden transition-transform' style={{transform: `translate(${downloadProgress - 100}%, 0)`}}></div>
</div>
<span>{`${downloadProgress}%`}</span>
</div>
}
{ !downloading && <button className='mt-5 text-2xl font-bold bg-gray-200 text-gray-900' onClick={launchBs}>Launch</button> }
</div>
</div>
</>
)
}
export function VersionLunchModButton(props: {onClick: Function, active: boolean, text: string}) {
return (
<span onClick={() => props.onClick()} className={`w-56 text-center cursor-pointer p-3 border-4 border-white rounded-full font-bold italic text-lg tracking-wide ml-3 mr-3 transition-all ${props.active && "bg-white text-black bg-opacity-70"} hover:bg-white hover:bg-opacity-70 hover:text-black`}>{props.text}</span>
);
}