shironeko/Hytale-F2P
1
0
Fork 0
mirror of https://github.com/amiayweb/Hytale-F2P.git synced 2026-02-26 13:41:46 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor index.html for improved launcher functionality

Browse Source 
Updated HTML structure and JavaScript functionality for the Hytale Launcher, including enhancements to the installation process and UI elements.
This commit is contained in:
AMIAY
2026-01-16 16:19:20 +01:00
committed by GitHub
parent 7870b9e3d8
commit c597a08a38
1 changed files with 270 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
index.html
View File

@@ -209,6 +209,88 @@
.animate-spin { .animate-spin {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.custom-checkbox {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: rgba(10, 10, 10, 0.8);
border: 1px solid rgba(147, 51, 234, 0.3);
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.custom-checkbox:checked {
background: rgba(147, 51, 234, 0.6);
border-color: rgba(147, 51, 234, 0.8);
}
.custom-checkbox:checked::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 12px;
}
.custom-checkbox:hover {
border-color: rgba(147, 51, 234, 0.6);
box-shadow: 0 0 10px rgba(147, 51, 234, 0.3);
}
.custom-options {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
margin-top: 0;
}
.custom-options.show {
max-height: 200px;
opacity: 1;
margin-top: 1rem;
}
.browse-btn {
background: rgba(147, 51, 234, 0.3);
border: 1px solid rgba(147, 51, 234, 0.4);
transition: all 0.3s ease;
}
.browse-btn:hover {
background: rgba(147, 51, 234, 0.5);
border-color: rgba(147, 51, 234, 0.7);
box-shadow: 0 0 15px rgba(147, 51, 234, 0.4);
}
.uninstall-btn {
background: rgba(239, 68, 68, 0.2);
border: 1px solid rgba(239, 68, 68, 0.4);
transition: all 0.3s ease;
}
.uninstall-btn:hover {
background: rgba(239, 68, 68, 0.4);
border-color: rgba(239, 68, 68, 0.7);
box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style> </style>
</head> </head>
<body class="bg-image relative"> <body class="bg-image relative">
@@ -233,8 +315,8 @@
<div class="w-[1280px] h-[720px] relative pt-8 z-10"> <div class="w-[1280px] h-[720px] relative pt-8 z-10">
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<div class="flex-1 flex items-center justify-center relative"> <div class="flex-1 flex items-center justify-center relative overflow-y-auto no-scrollbar" style="max-height: calc(100% - 180px);">
<div class="flex flex-col items-center gap-8"> <div class="flex flex-col items-center gap-3 py-2">
<div class="text-center"> <div class="text-center">
<h1 class="text-7xl font-bold neon-glow text-purple-500 mb-2 tracking-tight"> <h1 class="text-7xl font-bold neon-glow text-purple-500 mb-2 tracking-tight">
HYTALE HYTALE
@@ -242,37 +324,81 @@
<p class="font-mono text-sm text-gray-400 tracking-widest">F2P LAUNCHER</p> <p class="font-mono text-sm text-gray-400 tracking-widest">F2P LAUNCHER</p>
</div> </div>
<div class="w-80"> <div class="w-80">
<label class="block font-mono text-xs text-gray-400 mb-2 uppercase tracking-wider"> <label class="block font-mono text-xs text-gray-400 mb-2 uppercase tracking-wider">
Player Name Player Name
</label> </label>
<input <input
type="text" type="text"
id="playerName" id="playerName"
value="Player" value="Player"
class="input-field w-full rounded-lg px-4 py-3 text-white font-mono text-base focus:outline-none" class="input-field w-full rounded-lg px-4 py-3 text-white font-mono text-base focus:outline-none"
placeholder="Enter your name" placeholder="Enter your name"
> >
</div> </div>
<div class="w-[28rem]"> <div class="w-[28rem]">
<label class="block font-mono text-xs text-gray-400 mb-2 uppercase tracking-wider"> <label class="flex items-center justify-center gap-3 cursor-pointer">
Java Path (optional) <input
</label> type="checkbox"
<input id="customInstallCheck"
type="text" class="custom-checkbox"
id="javaPath" >
class="input-field w-full rounded-lg px-4 py-3 text-white font-mono text-sm focus:outline-none" <span class="font-mono text-sm text-gray-300 uppercase tracking-wider">Custom Installation</span>
placeholder="/Library/Java/JavaVirtualMachines/.../bin/java" </label>
>
</div> <div id="customOptions" class="custom-options">
<div class="mb-4">
<label class="block font-mono text-xs text-gray-400 mb-2 uppercase tracking-wider">
Installation Folder
</label>
<div class="flex gap-2">
<input
type="text"
id="installPath"
class="input-field flex-1 rounded-lg px-4 py-3 text-white font-mono text-sm focus:outline-none"
placeholder="Default: AppData/Local/HytaleF2P"
readonly
>
<button
onclick="browseInstallPath()"
class="browse-btn px-4 py-3 rounded-lg text-white font-mono text-sm"
>
<i class="fas fa-folder-open"></i>
</button>
</div>
</div>
<div>
<label class="block font-mono text-xs text-gray-400 mb-2 uppercase tracking-wider">
Java Path (optional)
</label>
<input
type="text"
id="javaPath"
class="input-field w-full rounded-lg px-4 py-3 text-white font-mono text-sm focus:outline-none"
placeholder="/Library/Java/JavaVirtualMachines/.../bin/java"
>
</div>
</div>
</div>
<button <button
id="playBtn" id="playBtn"
onclick="launch()" onclick="launch()"
class="play-button w-64 h-16 rounded-2xl text-white font-bold text-2xl flex items-center justify-center transition-all transform disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:transform-none relative" class="play-button w-64 h-16 rounded-2xl text-white font-bold text-2xl flex items-center justify-center transition-all transform disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:transform-none relative"
> >
<span id="playText" class="relative z-10 font-mono tracking-wider">PLAY</span> <span id="playText" class="relative z-10 font-mono tracking-wider">INSTALL</span>
</button>
<button
id="uninstallBtn"
onclick="uninstallGame()"
class="uninstall-btn w-64 h-12 rounded-xl text-white font-bold text-sm flex items-center justify-center transition-all transform disabled:opacity-50 disabled:cursor-not-allowed"
style="display: none;"
>
<i class="fas fa-trash-alt mr-2"></i>
<span class="font-mono tracking-wider">UNINSTALL</span>
</button> </button>
</div> </div>
</div> </div>
@@ -319,32 +445,73 @@
let isDownloading = false; let isDownloading = false;
const playBtn = document.getElementById('playBtn'); const playBtn = document.getElementById('playBtn');
const playText = document.getElementById('playText'); const playText = document.getElementById('playText');
const playerNameInput = document.getElementById('playerName'); const uninstallBtn = document.getElementById('uninstallBtn');
const javaPathInput = document.getElementById('javaPath'); const playerNameInput = document.getElementById('playerName');
const progressText = document.getElementById('progressText'); const javaPathInput = document.getElementById('javaPath');
const progressPercent = document.getElementById('progressPercent'); const installPathInput = document.getElementById('installPath');
const progressSpeed = document.getElementById('progressSpeed'); const customInstallCheck = document.getElementById('customInstallCheck');
const progressSize = document.getElementById('progressSize'); const customOptions = document.getElementById('customOptions');
const progressBar = document.getElementById('progressBar'); const progressText = document.getElementById('progressText');
const loadingScreen = document.getElementById('loadingScreen'); const progressPercent = document.getElementById('progressPercent');
const progressSpeed = document.getElementById('progressSpeed');
async function init() { const progressSize = document.getElementById('progressSize');
try { const progressBar = document.getElementById('progressBar');
const [savedUsername, javaPath] = await Promise.all([ const loadingScreen = document.getElementById('loadingScreen');
window.electronAPI.loadUsername(),
window.electronAPI.loadJavaPath() customInstallCheck.addEventListener('change', () => {
]); if (customInstallCheck.checked) {
if (savedUsername) { customOptions.classList.add('show');
playerNameInput.value = savedUsername; } else {
username = savedUsername; customOptions.classList.remove('show');
} }
if (typeof javaPath === 'string') { });
javaPathInput.value = javaPath;
} async function browseInstallPath() {
} catch (error) { const result = await window.electronAPI.selectInstallPath();
console.error('Failed to load username:', error); if (result) {
} finally { installPathInput.value = result;
await window.electronAPI.saveInstallPath(result);
}
}
async function init() {
try {
const [savedUsername, javaPath, installPath, gameInstalled] = await Promise.all([
window.electronAPI.loadUsername(),
window.electronAPI.loadJavaPath(),
window.electronAPI.loadInstallPath(),
window.electronAPI.isGameInstalled()
]);
if (savedUsername) {
playerNameInput.value = savedUsername;
username = savedUsername;
}
if (typeof javaPath === 'string' && javaPath) {
javaPathInput.value = javaPath;
customInstallCheck.checked = true;
customOptions.classList.add('show');
}
if (typeof installPath === 'string' && installPath) {
installPathInput.value = installPath;
customInstallCheck.checked = true;
customOptions.classList.add('show');
}
if (gameInstalled) {
const customInstallContainer = document.querySelector('.w-\\[28rem\\]');
if (customInstallContainer) {
customInstallContainer.style.display = 'none';
}
playText.textContent = 'PLAY';
uninstallBtn.style.display = 'flex';
} else {
playText.textContent = 'INSTALL';
uninstallBtn.style.display = 'none';
}
} catch (error) {
console.error('Failed to load settings:', error);
} finally {
setTimeout(() => { setTimeout(() => {
loadingScreen.style.opacity = '0'; loadingScreen.style.opacity = '0';
loadingScreen.style.transition = 'opacity 0.5s ease'; loadingScreen.style.transition = 'opacity 0.5s ease';
@@ -386,34 +553,35 @@
updateProgress(data); updateProgress(data);
}); });
playerNameInput.addEventListener('input', async () => { playerNameInput.addEventListener('input', async () => {
const playerName = playerNameInput.value.trim(); const playerName = playerNameInput.value.trim();
if (playerName) { if (playerName) {
await window.electronAPI.saveUsername(playerName); await window.electronAPI.saveUsername(playerName);
} }
}); });
javaPathInput.addEventListener('input', async () => { javaPathInput.addEventListener('input', async () => {
await window.electronAPI.saveJavaPath(javaPathInput.value.trim()); await window.electronAPI.saveJavaPath(javaPathInput.value.trim());
}); });
async function launch() { async function launch() {
const playerName = playerNameInput.value.trim() || 'Player'; const playerName = playerNameInput.value.trim() || 'Player';
const javaPath = javaPathInput.value.trim(); const javaPath = javaPathInput.value.trim();
const installPath = installPathInput.value.trim();
await window.electronAPI.saveUsername(playerName);
await window.electronAPI.saveUsername(playerName);
if (isDownloading || playBtn.disabled) return;
if (isDownloading || playBtn.disabled) return;
isDownloading = true; isDownloading = true;
playBtn.disabled = true; playBtn.disabled = true;
playText.textContent = 'PROCESSING...'; playText.textContent = 'PROCESSING...';
try { try {
const result = await window.electronAPI.launchGame(playerName, javaPath); const result = await window.electronAPI.launchGame(playerName, javaPath, installPath);
if (result.success) { if (result.success) {
progressText.textContent = 'Game started!'; progressText.textContent = 'Game started!';
setTimeout(() => { setTimeout(() => {
window.electronAPI.closeWindow(); window.electronAPI.closeWindow();
}, 2000); }, 2000);
@@ -439,6 +607,35 @@
window.electronAPI.minimizeWindow(); window.electronAPI.minimizeWindow();
} }
async function uninstallGame() {
if (!confirm('Are you sure you want to uninstall Hytale? All game files will be deleted.')) {
return;
}
uninstallBtn.disabled = true;
progressText.textContent = 'Uninstalling game...';
try {
const result = await window.electronAPI.uninstallGame();
if (result.success) {
progressText.textContent = 'Game uninstalled successfully!';
playText.textContent = 'INSTALL';
uninstallBtn.style.display = 'none';
const customInstallContainer = document.querySelector('.w-\\[28rem\\]');
if (customInstallContainer) {
customInstallContainer.style.display = 'block';
}
} else {
progressText.textContent = `Uninstall failed: ${result.error}`;
}
} catch (error) {
progressText.textContent = `Uninstall failed: ${error.message}`;
} finally {
uninstallBtn.disabled = false;
}
}
playerNameInput.addEventListener('keypress', (e) => { playerNameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
launch(); launch();