Skip to content

Commit 406adc2

Browse files
swz-gitswz-git
committed
revamp welcome screen
1 parent cf0c4c5 commit 406adc2

9 files changed

Lines changed: 164 additions & 72 deletions

File tree

‎app.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ func (a *App) GetDefaultPath() string {
4949
xdgDataHome = filepath.Join(home, ".local/share")
5050
}
5151

52-
return filepath.Join(xdgDataHome, "rlbotgui")
52+
return filepath.Join(xdgDataHome, "RLBot5")
5353
}
5454

5555
func (a *App) DownloadBotpack(repo string, installPath string) (string, error) {

‎frontend/src/App.svelte‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,24 @@ import GuiSettings from "./components/GuiSettings.svelte";
88
import Home from "./pages/Home.svelte";
99
import RocketHost from "./pages/RocketHost.svelte";
1010
import StoryMode from "./pages/StoryMode.svelte";
11-
import Welcome from "./components/Welcome.svelte";
11+
import Welcome from "./pages/Welcome.svelte";
1212
import { parseJSON } from "./index";
13+
import arenaImages from "./arena-images";
1314
14-
let activePage = $state("home");
15+
const backgroundImage =
16+
arenaImages[Math.floor(Math.random() * arenaImages.length)];
17+
18+
let activePage = $state(
19+
localStorage.getItem("SHOW_WELCOME") !== "false" ? "welcome" : "home",
20+
);
21+
22+
$effect(() => {
23+
if (activePage === "welcome") {
24+
localStorage.setItem("SHOW_WELCOME", "true");
25+
} else {
26+
localStorage.setItem("SHOW_WELCOME", "false");
27+
}
28+
});
1529
1630
let eventsNow = $state(0);
1731
let eventsFuture = $state(0);
@@ -30,8 +44,8 @@ let paths: {
3044

3145
<Toaster />
3246

33-
<main>
34-
<div class="navbar">
47+
<main style={`background-image: url("${backgroundImage}")`}>
48+
<div class={"navbar " + (activePage == "welcome" ? "offset" : "")}>
3549
<div>
3650
<!-- svelte-ignore a11y_click_events_have_key_events -->
3751
<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -90,48 +104,70 @@ let paths: {
90104
onclick={()=>{showGuiSettings = true}}
91105
>GUI Settings</button
92106
>
107+
<button
108+
onclick={()=>{activePage = "welcome"}}
109+
>Re-open setup screen</button
110+
>
93111
</div>
94112
</div>
95113
</div>
96114
</div>
97115

98116
<div
99-
class={activePage == "home" ? "pageContainer" : "pageContainer hidden"}
117+
class={"pageContainer" + (activePage == "home" ? "" : " hidden")}
100118
>
101119
<Home bind:paths />
102120
</div>
103121

104122
<div
105-
class={activePage == "rhost" ? "pageContainer" : "pageContainer hidden"}
123+
class={"pageContainer" + (activePage == "rhost" ? "" : " hidden")}
106124
>
107125
<RocketHost />
108126
</div>
109127

110128
<div
111-
class={activePage == "storymode" ? "pageContainer" : "pageContainer hidden"}
129+
class={"pageContainer" + (activePage == "storymode" ? "" : " hidden")}
112130
>
113131
<StoryMode />
114132
</div>
133+
134+
<div
135+
class={"pageContainer" + (activePage == "welcome" ? "" : " hidden")}
136+
>
137+
<Welcome bind:paths closeMe={()=>{activePage = "home"}} />
138+
</div>
115139
</main>
116140

117141
<Events bind:visible={eventsVisible} bind:eventsNow bind:eventsFuture />
118142
<GuiSettings bind:visible={showGuiSettings} />
119-
<Welcome bind:paths />
120143

121144
<style>
122145
main {
123146
display: flex;
124147
height: 100%;
125148
width: 100%;
126149
flex-direction: column;
150+
151+
background-size: cover;
152+
background-repeat: no-repeat;
153+
background-position: center;
154+
background-attachment: fixed;
127155
}
128156
.navbar {
129157
display: flex;
130158
height: 3rem;
131159
justify-content: space-between;
132160
padding: 0.1rem;
161+
/* Nice transparent blur */
162+
background-color: rgba(0, 0, 0, 0.6);
163+
-webkit-backdrop-filter: blur(10px);
164+
backdrop-filter: blur(10px);
133165
/* background: var(--background-alt);
134166
color: var(--foreground-alt); */
167+
transition: translate 0.2s ease-in-out;
168+
}
169+
.navbar.offset {
170+
translate: 0 -100%;
135171
}
136172
.navbar > div {
137173
display: flex;

‎frontend/src/components/AddBotpack.svelte‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ const OFFICIAL_BOTPACK_REPOS = [
1010
];
1111
1212
let {
13-
parentVisible = $bindable(false),
1413
visible = $bindable(false),
1514
paths = $bindable([]),
1615
}: {
17-
parentVisible?: boolean;
1816
visible?: boolean;
1917
paths?: {
2018
tagName: string | null;
@@ -45,7 +43,6 @@ let downloadTotalSteps = $state(0);
4543
function closeAddBotpackModal() {
4644
downloadModalVisible = false;
4745
visible = false;
48-
parentVisible = true;
4946
selectedBotpackType = "official";
5047
customRepo = "";
5148
setDefaultPath();

‎frontend/src/components/Welcome.svelte‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎frontend/src/pages/Home.svelte‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
Result,
1010
type StartMatchOptions,
1111
} from "../../bindings/gui/index.js";
12-
import arenaImages from "../arena-images";
1312
import { MAPS_STANDARD } from "../arena-names";
1413
import reloadIcon from "../assets/reload.svg";
1514
import { BASE_PLAYERS } from "../base-players";
@@ -42,9 +41,6 @@ let {
4241
}[];
4342
} = $props();
4443
45-
const backgroundImage =
46-
arenaImages[Math.floor(Math.random() * arenaImages.length)];
47-
4844
let botpackNotifIds: { [repo: string]: string } = {};
4945
5046
function updateBotpack(repoName: string) {
@@ -407,7 +403,7 @@ function handleSearch(event: Event) {
407403
}
408404
</script>
409405

410-
<div class="page" style={`background-image: url("${backgroundImage}")`}>
406+
<div class="page">
411407
<div class="availableBots box">
412408
<header>
413409
<h1>Bots</h1>
@@ -464,10 +460,6 @@ function handleSearch(event: Event) {
464460
display: flex;
465461
flex-direction: column;
466462
overflow: auto;
467-
background-size: cover;
468-
background-repeat: no-repeat;
469-
background-position: center;
470-
background-attachment: fixed;
471463
}
472464
.page * {
473465
user-select: none;

‎frontend/src/pages/RocketHost.svelte‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -239,13 +239,14 @@ let launcherOptionsVisible = $state(false);
239239
<style>
240240
.page {
241241
display: flex;
242-
width: fit-content;
243-
height: 100%;
244-
max-width: 60rem;
245-
margin: 0px 3rem;
242+
height: fit-content;
243+
min-width: min(80vh, 100vw);
244+
background-color: var(--background);
245+
padding: 2rem;
246+
border-radius: 1rem;
247+
margin-top: 3rem;
246248
flex-direction: column;
247249
align-items: center;
248-
padding: 1rem;
249250
gap: 1.5rem;
250251
}
251252
h2 {

‎frontend/src/pages/StoryMode.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<script></script>
2+
13
<div class="container">
24
<h1>Coming soon...</h1>
35
</div>
@@ -10,4 +12,7 @@
1012
justify-content: center;
1113
align-items: center;
1214
}
15+
h1 {
16+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
17+
}
1318
</style>

‎frontend/src/pages/Welcome.svelte‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script lang="ts">
2+
import AddBotpack from "../components/AddBotpack.svelte";
3+
import LauncherSelector from "../components/LauncherSelector.svelte";
4+
import logo from "../assets/rlbot_logo.svg";
5+
6+
let {
7+
paths = $bindable([]),
8+
closeMe,
9+
}: {
10+
paths?: {
11+
tagName: string | null;
12+
repo: string | null;
13+
installPath: string;
14+
visible: boolean;
15+
isDependency: boolean;
16+
}[];
17+
closeMe?: () => void;
18+
} = $props();
19+
20+
let addBotpackVisible = $state(false);
21+
function openAddBotpackModal() {
22+
addBotpackVisible = true;
23+
}
24+
</script>
25+
26+
<div class="welcomeContainer">
27+
<div class="titleBox">
28+
<img src={logo} alt="logo">
29+
<h1>RLBot Setup</h1>
30+
</div>
31+
32+
<div class="blurred">
33+
<div class="options">
34+
<p>Select your platform</p>
35+
<LauncherSelector />
36+
<br />
37+
<div style="display:flex;flex-direction:column;">
38+
<label for="wdlbotpack" style="color:#ff4444"> Recommended: </label>
39+
<button id="wdlbotpack" onclick={openAddBotpackModal}>Download the botpack</button>
40+
</div>
41+
</div>
42+
43+
<button class="continue" onclick={closeMe}>Continue</button>
44+
</div>
45+
</div>
46+
47+
48+
<AddBotpack bind:visible={addBotpackVisible} bind:paths />
49+
50+
<style>
51+
.welcomeContainer {
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
height: fit-content;
56+
margin: auto;
57+
border-radius: 1rem;
58+
flex-direction: column;
59+
}
60+
61+
.blurred {
62+
display: flex;
63+
flex-direction: column;
64+
align-items: center;
65+
justify-content: center;
66+
background-color: rgba(0, 0, 0, 0.8);
67+
-webkit-backdrop-filter: blur(10px);
68+
backdrop-filter: blur(10px);
69+
padding: 2rem 3rem;
70+
border-radius: 1rem;
71+
}
72+
73+
.titleBox {
74+
display: flex;
75+
align-items: center;
76+
padding-bottom: 1rem;
77+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
78+
}
79+
.titleBox img {
80+
padding-right: .6rem;
81+
height: 2.8rem;
82+
}
83+
.titleBox h1 {
84+
font-size: 2rem;
85+
}
86+
87+
#wdlbotpack {
88+
background-color: royalblue;
89+
}
90+
.continue {
91+
margin-left: auto;
92+
background-color: green;
93+
}
94+
95+
.options > * {
96+
margin-bottom: 0.5rem;
97+
}
98+
.options {
99+
margin-bottom: 1rem;
100+
}
101+
</style>

‎main.go‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ func checkNvidia() bool {
3131
func main() {
3232
// see https://github.com/tauri-apps/tauri/issues/9394
3333
if checkNvidia() {
34-
os.Setenv("WEBKIT_DISABLE_DMABUF_RENDERER", "1")
34+
os.Setenv("__NV_DISABLE_EXPLICIT_SYNC", "1")
3535
}
3636

3737
// Create an instance of the app structure
@@ -44,6 +44,11 @@ func main() {
4444
Assets: application.AssetOptions{
4545
Handler: application.AssetFileServerFS(assets),
4646
},
47+
// Not possible on linux unfortunately
48+
// TODO: Another reason to switch away from localstorage
49+
Windows: application.WindowsOptions{
50+
WebviewUserDataPath: "%APPDATA%\\RLBot5\\webviewdata",
51+
},
4752
})
4853

4954
// Create application with options

0 commit comments

Comments
 (0)