Skip to content

Commit

Permalink
feat: ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@SenkJu
SenkJu committed Mar 21, 2024
1 parent 167404d commit 7dc9cfd
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 62 deletions.
86 changes: 53 additions & 33 deletions src/lib/Window.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,80 @@
import { check } from "@tauri-apps/plugin-updater";
import { relaunch } from "@tauri-apps/plugin-process";
check().then((result) => {
console.debug("Update Check Result", result);
if (result && result.available) {
result.downloadAndInstall().then(() => {
relaunch().catch(e => console.error(e));
}).catch(e => console.error("Download and Install Failed", e));
}
}).catch(e => console.error("Update Check Failed", e));
check()
.then((result) => {
console.debug("Update Check Result", result);
if (result && result.available) {
result
.downloadAndInstall()
.then(() => {
relaunch().catch((e) => console.error(e));
})
.catch((e) =>
console.error("Download and Install Failed", e),
);
}
})
.catch((e) => console.error("Update Check Failed", e));
// Load options from file
let options;
invoke("get_options").then((result) => {
options = result;
invoke("get_options")
.then((result) => {
options = result;
// Debug options - might be interesting to see what's in there
console.debug("Options", options);
// Debug options - might be interesting to see what's in there
console.debug("Options", options);
// Easy way to store options
options.store = function() {
console.debug("Storing options...", options);
invoke("store_options", { options })
.catch(e => console.error(e));
};
}).catch(e => console.error(e));
// Easy way to store options
options.store = function () {
console.debug("Storing options...", options);
invoke("store_options", { options }).catch((e) =>
console.error(e),
);
};
})
.catch((e) => console.error(e));
// Logout from current account
function logout() {
// Revoke the actual session
invoke("logout", { accountData: options.currentAccount })
.catch(e => console.error(e));
invoke("logout", { accountData: options.currentAccount }).catch((e) =>
console.error(e),
);
// Remove account data from options data
options.currentAccount = null;
options.store();
}
invoke("check_online_status").then((result) => {
console.debug("Status", result);
}).catch(e => {
alert("You are offline! Please connect to the internet and restart the app.\n If this problem persists, please contact the developer.\n\n (Error: " + e + ")");
console.error(e);
});
invoke("check_online_status")
.then((result) => {
console.debug("Status", result);
})
.catch((e) => {
alert(
"You are offline! Please connect to the internet and restart the app.\n If this problem persists, please contact the developer.\n\n (Error: " +
e +
")",
);
console.error(e);
});
</script>

<div class="window">
<div class="drag-area" data-tauri-drag-region>

</div>
<div class="drag-area" data-tauri-drag-region></div>

{#if options }
{#if options.currentAccount }
{#if options}
{#if options.currentAccount}
<MainScreen bind:options on:logout={logout} />
{:else}
<LoginScreen bind:options />
{/if}
{:else}
<h1>The launcher is loading...</h1>
{/if}

</div>

<style>
Expand All @@ -86,6 +100,12 @@
/* border-radius: 14px; */
}
@media (prefers-color-scheme: light) {
.window {
background-color: rgba(0, 0, 0, 0.8);
}
}
h1 {
color: white;
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/common/ButtonClose.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
height: 48px;
width: 48px;
background-color: transparent;
border: solid 1px rgba(255, 255, 255, .5);
border: solid 2px rgba(255, 255, 255, .5);
transition: ease background-color .2s;
display: flex;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/common/ToolTip.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
.tooltip {
background-color: #4677FF;
color: white;
padding: 5px 7px;
border-radius: 6px;
padding: 7px 10px;
border-radius: 15px;
font-size: 14px;
font-weight: 600;
position: absolute;
Expand Down
54 changes: 33 additions & 21 deletions src/lib/login/Facts.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@
const facts = [
{
title: "5.000.000 Total Downloads",
description: "LiquidBounce is one of the most popular hacked clients of all time."
description:
"LiquidBounce is one of the most popular hacked clients of all time.",
},
{
title: "Free & Open Source",
description: "LiquidBounce's source code is publicly available."
description: "LiquidBounce's source code is publicly available.",
},
{
title: "Extensible",
description: "LiquidBounce's JavaScript API allows users to write their own modules and commands."
}
description:
"LiquidBounce's JavaScript API allows users to write their own modules and commands.",
},
];
let currentFact = 0;
Expand All @@ -40,18 +42,28 @@
</script>

<div class="wrapper">
<div class="fact">
<div class="title">{facts[currentFact].title}</div>
<div class="description">{facts[currentFact].description}</div>
<div class="buttons-wrapper">
<button type="button" class="button-switch-fact" on:click={handlePrevClick}>
<img src="img/icon/icon-prev.svg" alt="prev">
</button>
<button type="button" class="button-switch-fact" on:click={handleNextClick}>
<img src="img/icon/icon-next.svg" alt="next">
</button>
{#key currentFact}
<div class="fact" in:fly={{duration: 200, x: 50}} out:fly={{duration: 200, x: -50}}>
<div class="title">{facts[currentFact].title}</div>
<div class="description">{facts[currentFact].description}</div>
<div class="buttons-wrapper">
<button
type="button"
class="button-switch-fact"
on:click={handlePrevClick}
>
<img src="img/icon/icon-prev.svg" alt="prev" />
</button>
<button
type="button"
class="button-switch-fact"
on:click={handleNextClick}
>
<img src="img/icon/icon-next.svg" alt="next" />
</button>
</div>
</div>
</div>
{/key}
</div>

<style>
Expand All @@ -78,7 +90,7 @@
.description {
font-size: 18px;
color: rgba(255, 255, 255, .5);
color: rgba(255, 255, 255, 0.5);
}
.buttons-wrapper {
Expand All @@ -87,19 +99,19 @@
}
.button-switch-fact {
height :44px;
height: 44px;
width: 44px;
border-radius: 50%;
border: solid 1px rgba(255, 255, 255, .5);
border: solid 2px rgba(255, 255, 255, 0.5);
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: ease background-color .2s;
transition: ease background-color 0.2s;
cursor: pointer;
}
.button-switch-fact:hover {
background-color: rgba(255, 255, 255, .1);
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</style>
5 changes: 2 additions & 3 deletions src/lib/main/LaunchArea.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,14 @@
overflow: hidden;
position: relative;
display: flex;
align-items: center;
align-items: flex-end;
}
.version-info .banner .title {
font-weight: 800;
color: white;
font-size: 18px;
max-width: 50%;
margin-left: 20px;
margin: 10px 20px;
}
.version-info .date {
Expand Down
18 changes: 16 additions & 2 deletions src/lib/main/news/News.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@
</script>

<div class="news">
<div class="banner" style="background-image: linear-gradient(to bottom, transparent, #4677ffc5), url({bannerUrl});">
<div class="banner">
<div class="banner-text">{bannerText}</div>
<div class="background" style="background-image: linear-gradient(to bottom, transparent, #4677ffc5), url({bannerUrl});"></div>
</div>
<div class="content">
<div class="title-date">
Expand All @@ -42,12 +43,25 @@
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
filter: blur(3px);
z-index: -1;
}
.banner-text {
color: white;
font-weight: 600;
font-size: 26px;
font-size: 20px;
}
.content {
Expand Down

0 comments on commit 7dc9cfd

Please sign in to comment.