135 lines
3.2 KiB
Svelte
135 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import logo from './assets/images/fc-logo.png'
|
|
import Instances from './Instances.svelte'
|
|
import Loading from './Loading.svelte'
|
|
import Modpacks from './Modpacks.svelte'
|
|
import {CheckPrerequisites} from '../wailsjs/go/main/App.js'
|
|
import { onMount } from 'svelte'
|
|
import { loading, currentPage, instances, themecolor } from './global'
|
|
import { slide } from 'svelte/transition'
|
|
import Navbar from './Navbar.svelte'
|
|
import Instancepage from './Instancepage.svelte'
|
|
import { set_attributes, set_style } from 'svelte/internal';
|
|
import {GetInstances} from '../wailsjs/go/main/InstanceManager.js'
|
|
import Settingspage from './Settingspage.svelte';
|
|
|
|
let width: number = 10
|
|
let navMargin = document.getElementById("body") as HTMLElement;
|
|
let r
|
|
|
|
function UpdateInstances() {
|
|
$loading = true
|
|
GetInstances().then((result) => {
|
|
$instances = result
|
|
$loading = false
|
|
})
|
|
}
|
|
|
|
onMount(() => {
|
|
CheckPrerequisites().then(() => {
|
|
UpdateInstances()
|
|
})
|
|
r = document.getElementById('wrapper');
|
|
})
|
|
function setMargin(){
|
|
r.style.setProperty('--navMargin', '17rem');
|
|
}
|
|
function unsetMargin(){
|
|
r.style.setProperty('--navMargin', '5rem');
|
|
}
|
|
|
|
function initialColor() {
|
|
r.style.setProperty('--accent-color', 'purple');
|
|
}
|
|
function setcolor() {
|
|
console.log("changing theme");
|
|
r.style.setProperty('--accent-color', $themecolor);
|
|
}
|
|
|
|
|
|
window.document.onload = function() {setcolor()};
|
|
|
|
|
|
</script>
|
|
|
|
<main>
|
|
<div id = "wrapper">
|
|
<div class="navbar" on:mouseover={setMargin} on:focus={setMargin} on:mouseleave={unsetMargin} >
|
|
<Navbar />
|
|
</div>
|
|
<body class="body" id="body">
|
|
<!--<img alt="Wails logo" id="logo" src="{logo}">-->
|
|
{#if $loading}
|
|
<div transition:slide="{{duration:100}}" class="central">
|
|
<Loading />
|
|
</div>
|
|
{:else if $currentPage == 1}
|
|
<div transition:slide="{{duration:100}}" class="central">
|
|
<Instancepage on:change-theme = {setcolor} />
|
|
</div>
|
|
{:else if $currentPage == 2}
|
|
<div transition:slide="{{duration:100}}" class="central">
|
|
<Instances UpdateInstances={UpdateInstances} />
|
|
</div>
|
|
{:else if $currentPage == 3}
|
|
<div transition:slide="{{duration:100}}" class="central">
|
|
<Modpacks UpdateInstances={UpdateInstances} />
|
|
</div>
|
|
{:else if $currentPage == 4}
|
|
<div transition:slide="{{duration:100}}" class="central">
|
|
<Settingspage on:change-theme = {setcolor} on:change-theme-back = {initialColor} />
|
|
</div>
|
|
{/if}
|
|
</body>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
:root{
|
|
font-size: 16px;
|
|
--text-primary: #b6b6b6;
|
|
--text-secondary: #ececec;
|
|
--bg-secondary: #2c2c33;
|
|
--bg-primary: #141418;
|
|
|
|
background-color: var(--bg-secondary);
|
|
|
|
}
|
|
#wrapper{
|
|
--accent-color: purple;
|
|
--navMargin: 5rem;
|
|
}
|
|
.navbar{
|
|
z-index: 5;
|
|
}
|
|
|
|
#logo {
|
|
display: flex;
|
|
width: 70%;
|
|
height: 70%;
|
|
margin: auto;
|
|
padding: 10% 0 0;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-origin: content-box;
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: var(--navMargin);
|
|
transition: 200ms;
|
|
}
|
|
|
|
main{
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
.central{
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
|
|
|
|
</style>
|