Skip to content

Commit e69d5f9

Browse files
velzievelzie
committed
ui fixed
1 parent c78d7a5 commit e69d5f9

File tree

8 files changed

+86
-20
lines changed

8 files changed

+86
-20
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# Vapour - a compact frontend for launching steam games
1+
# Vapour - an <i>aesthetic</i> frontend for launching steam games

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"scripts": {
66
"build": "tailwindcss -i src/app.css -o src/dist.css; rollup -c",
77
"dev": "tailwindcss -i src/app.css -o src/dist.css; rollup -c -w",
8-
"_dev":"HOST=10.0.1.65 rollup -c -w",
8+
"_dev": "HOST=10.0.1.65 rollup -c -w",
99
"start": "sirv public --no-clear",
1010
"check": "svelte-check --tsconfig ./tsconfig.json",
1111
"tauri": "tauri"
@@ -29,6 +29,7 @@
2929
},
3030
"dependencies": {
3131
"@tauri-apps/api": "^1.1.0",
32+
"98.css": "^0.1.18",
3233
"autoprefixer": "^10.4.12",
3334
"postcss": "^8.4.17",
3435
"sirv-cli": "^2.0.0",

‎src-tauri/Cargo.toml

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ tauri-build = { version = "1.1.1", features = [] }
1717
[dependencies]
1818
serde_json = "1.0"
1919
serde = { version = "1.0", features = ["derive"] }
20-
tauri = { version = "1.1.1", features = ["api-all"] }
20+
tauri = { version = "1.1.1", features = ["api-all", "devtools"] }
2121
sysinfo = "*"
2222

2323
[features]
@@ -27,3 +27,4 @@ default = [ "custom-protocol" ]
2727
# this feature is used for production builds where `devPath` points to the filesystem
2828
# DO NOT remove this
2929
custom-protocol = [ "tauri/custom-protocol" ]
30+

‎src-tauri/tauri.conf.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"icons/icon.icns",
3535
"icons/icon.ico"
3636
],
37-
"identifier": "com.tauri.dev",
37+
"identifier": "me.coolelectronics.vapour",
3838
"longDescription": "",
3939
"macOS": {
4040
"entitlements": null,
@@ -53,7 +53,7 @@
5353
}
5454
},
5555
"security": {
56-
"csp": "default-src 'self';img-src 'self' asset: https://asset.localhost"
56+
"csp": "default-src 'self';script-src 'self' 'unsafe-inline';img-src 'self' http: data: asset: https://asset.localhost"
5757
},
5858
"updater": {
5959
"active": false

‎src/App.svelte

+53-15
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,74 @@
11
<script lang="ts">
22
import { invoke, convertFileSrc } from "@tauri-apps/api/tauri";
33
import { emit, Event, listen } from "@tauri-apps/api/event";
4+
import { appWindow } from "@tauri-apps/api/window";
45
56
var games = [];
67
7-
invoke("find_games").then((_:any)=>games = _);
8+
invoke("find_games").then((_: any) => (games = _));
89
function launch_game(game) {
910
invoke("launch_game", {
1011
appid:game.appid
1112
});
1213
}
1314
</script>
1415

15-
<main>
16-
<div id = "grid">
16+
<main class = "window flex flex-col">
17+
18+
<div class="title-bar">
19+
<div class="title-bar-text">Vapour</div>
20+
<div class="title-bar-controls">
21+
<button aria-label="Minimize" on:click={appWindow.minimize} />
22+
<button aria-label="Maximize" on:click={appWindow.maximize} />
23+
<button aria-label="Close" on:click={appWindow.close} />
24+
</div>
25+
</div>
26+
<div id="grid">
1727
{#each games as game}
18-
<div class = "game">
19-
<!-- <p class = "text-slate-100">{game.name}</p> -->
20-
<img alt = {game.name} src = {convertFileSrc(game.header_path)}>
21-
<!-- <img alt = {game.name} src = {convertFileSrc(game.icon_path)}> -->
22-
<!-- <button on:click={() => launch_game(game)}>launch</button> -->
28+
<div class="game window" on:click={() => launch_game(game)}>
29+
<div class = "flex justify-center p-3">
30+
<img class = "status-bar-field gameimg" alt={game.name} src={convertFileSrc(game.header_path)} on:error = {function () {this.src = "../clouds.png"}}/>
31+
</div>
32+
<!-- <img alt = {game.name} src = {convertFileSrc(game.icon_path)}> -->
33+
<!-- <button on:click={() => launch_game(game)}>launch</button> -->
34+
<div class="gamefooter flex items-center justify-center">
35+
<p class="text text-lg">{game.name}</p>
36+
</div>
2337
</div>
24-
2538
{/each}
2639
</div>
2740
</main>
41+
2842
<style>
29-
#grid{
30-
display:grid;
31-
grid-gap:1em;
32-
grid-template-columns: fit-content(8ch) auto;
33-
/* grid-auto-rows: auto; */
34-
/* grid-auto-columns: auto; */
43+
44+
.game {
45+
height: min-content;
46+
/* text-size-adjust: 80%; */
47+
white-space: nowrap;
48+
text-overflow: clip;
49+
}
50+
main {
51+
overflow: hidden;
52+
height: 100%;
53+
}
54+
.title-bar {
55+
background: linear-gradient(90deg, rgb(27, 121, 188), #d010d0);
56+
}
57+
#grid {
58+
background-color: pink;
59+
overflow-y: scroll;
60+
overflow-x: hidden;
61+
height: 100%;
62+
display: grid;
63+
grid-gap:1.5em;
64+
padding: 1.5em;
65+
grid-auto-rows: min-content;
66+
grid-template-columns: repeat(auto-fill,minmax(20vw, 1fr));
67+
background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.wallpapersafari.com%2F95%2F75%2Fxwho2M.jpg&f=1&nofb=1&ipt=e7da74d9e19457455c3a5d85ab40227032389845f2cf7ee570aba33e3886a7d7&ipo=images");
68+
/* filter:hue-rotate(45deg) */
69+
}
70+
.gameimg {
71+
/* width: 20vw; */
72+
/* height: auto; */
3573
}
3674
</style>

‎src/app.css

+14
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
:root{
6+
--dialouge-blue: salmon !important;
7+
--dialouge-blue-light:green !important;
8+
}
9+
10+
.text{
11+
/* import pixel font */
12+
}
13+
main,body{
14+
margin:0;
15+
padding:0;
16+
overflow:hidden;
17+
}

‎src/main.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import App from './App.svelte';
22
import "./dist.css";
3+
import "98.css";
34
const app = new App({
45
target: document.body,
56
props: {

0 commit comments

Comments
 (0)