Skip to content

Commit

Permalink
ui fixed
Browse files Browse the repository at this point in the history
velzie committed Oct 5, 2022
1 parent c78d7a5 commit e69d5f9
Showing 8 changed files with 86 additions and 20 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
# Vapour - a compact frontend for launching steam games
# Vapour - an <i>aesthetic</i> frontend for launching steam games
11 changes: 11 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
"scripts": {
"build": "tailwindcss -i src/app.css -o src/dist.css; rollup -c",
"dev": "tailwindcss -i src/app.css -o src/dist.css; rollup -c -w",
"_dev":"HOST=10.0.1.65 rollup -c -w",
"_dev": "HOST=10.0.1.65 rollup -c -w",
"start": "sirv public --no-clear",
"check": "svelte-check --tsconfig ./tsconfig.json",
"tauri": "tauri"
@@ -29,6 +29,7 @@
},
"dependencies": {
"@tauri-apps/api": "^1.1.0",
"98.css": "^0.1.18",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.17",
"sirv-cli": "^2.0.0",
3 changes: 2 additions & 1 deletion src-tauri/Cargo.toml
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ tauri-build = { version = "1.1.1", features = [] }
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.1.1", features = ["api-all"] }
tauri = { version = "1.1.1", features = ["api-all", "devtools"] }
sysinfo = "*"

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

4 changes: 2 additions & 2 deletions src-tauri/tauri.conf.json
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@
"icons/icon.icns",
"icons/icon.ico"
],
"identifier": "com.tauri.dev",
"identifier": "me.coolelectronics.vapour",
"longDescription": "",
"macOS": {
"entitlements": null,
@@ -53,7 +53,7 @@
}
},
"security": {
"csp": "default-src 'self';img-src 'self' asset: https://asset.localhost"
"csp": "default-src 'self';script-src 'self' 'unsafe-inline';img-src 'self' http: data: asset: https://asset.localhost"
},
"updater": {
"active": false
68 changes: 53 additions & 15 deletions src/App.svelte
Original file line number Diff line number Diff line change
@@ -1,36 +1,74 @@
<script lang="ts">
import { invoke, convertFileSrc } from "@tauri-apps/api/tauri";
import { emit, Event, listen } from "@tauri-apps/api/event";
import { appWindow } from "@tauri-apps/api/window";
var games = [];
invoke("find_games").then((_:any)=>games = _);
invoke("find_games").then((_: any) => (games = _));
function launch_game(game) {
invoke("launch_game", {
appid:game.appid
});
}
</script>

<main>
<div id = "grid">
<main class = "window flex flex-col">

<div class="title-bar">
<div class="title-bar-text">Vapour</div>
<div class="title-bar-controls">
<button aria-label="Minimize" on:click={appWindow.minimize} />
<button aria-label="Maximize" on:click={appWindow.maximize} />
<button aria-label="Close" on:click={appWindow.close} />
</div>
</div>
<div id="grid">
{#each games as game}
<div class = "game">
<!-- <p class = "text-slate-100">{game.name}</p> -->
<img alt = {game.name} src = {convertFileSrc(game.header_path)}>
<!-- <img alt = {game.name} src = {convertFileSrc(game.icon_path)}> -->
<!-- <button on:click={() => launch_game(game)}>launch</button> -->
<div class="game window" on:click={() => launch_game(game)}>
<div class = "flex justify-center p-3">
<img class = "status-bar-field gameimg" alt={game.name} src={convertFileSrc(game.header_path)} on:error = {function () {this.src = "../clouds.png"}}/>
</div>
<!-- <img alt = {game.name} src = {convertFileSrc(game.icon_path)}> -->
<!-- <button on:click={() => launch_game(game)}>launch</button> -->
<div class="gamefooter flex items-center justify-center">
<p class="text text-lg">{game.name}</p>
</div>
</div>

{/each}
</div>
</main>

<style>
#grid{
display:grid;
grid-gap:1em;
grid-template-columns: fit-content(8ch) auto;
/* grid-auto-rows: auto; */
/* grid-auto-columns: auto; */
.game {
height: min-content;
/* text-size-adjust: 80%; */
white-space: nowrap;
text-overflow: clip;
}
main {
overflow: hidden;
height: 100%;
}
.title-bar {
background: linear-gradient(90deg, rgb(27, 121, 188), #d010d0);
}
#grid {
background-color: pink;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
display: grid;
grid-gap:1.5em;
padding: 1.5em;
grid-auto-rows: min-content;
grid-template-columns: repeat(auto-fill,minmax(20vw, 1fr));
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");
/* filter:hue-rotate(45deg) */
}
.gameimg {
/* width: 20vw; */
/* height: auto; */
}
</style>
14 changes: 14 additions & 0 deletions src/app.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
--dialouge-blue: salmon !important;
--dialouge-blue-light:green !important;
}

.text{
/* import pixel font */
}
main,body{
margin:0;
padding:0;
overflow:hidden;
}
1 change: 1 addition & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import App from './App.svelte';
import "./dist.css";
import "98.css";
const app = new App({
target: document.body,
props: {

0 comments on commit e69d5f9

Please sign in to comment.