Add Galaxy cloud saves support #64
1 changed files with 37 additions and 3 deletions
|
@ -36,7 +36,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div @click="savesManager?.open()">
|
<div @click="savesManager?.open()">
|
||||||
<Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
|
<Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
|
||||||
<span class="material-icons">library_books</span>
|
<span class="material-icons" :class="{ needsSync }">library_books</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div @click="options?.open()">
|
<div @click="options?.open()">
|
||||||
|
@ -53,7 +53,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div @click="savesManager?.open()">
|
<div @click="savesManager?.open()">
|
||||||
<Tooltip display="Saves" :direction="Direction.Right">
|
<Tooltip display="Saves" :direction="Direction.Right">
|
||||||
<span class="material-icons">library_books</span>
|
<span class="material-icons" :class="{ needsSync }">library_books</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div @click="options?.open()">
|
<div @click="options?.open()">
|
||||||
|
@ -98,9 +98,11 @@
|
||||||
import Changelog from "data/Changelog.vue";
|
import Changelog from "data/Changelog.vue";
|
||||||
import projInfo from "data/projInfo.json";
|
import projInfo from "data/projInfo.json";
|
||||||
import Tooltip from "features/tooltips/Tooltip.vue";
|
import Tooltip from "features/tooltips/Tooltip.vue";
|
||||||
|
import settings from "game/settings";
|
||||||
import { Direction } from "util/common";
|
import { Direction } from "util/common";
|
||||||
|
import { galaxy, syncedSaves } from "util/galaxy";
|
||||||
import type { ComponentPublicInstance } from "vue";
|
import type { ComponentPublicInstance } from "vue";
|
||||||
import { ref } from "vue";
|
import { computed, ref } from "vue";
|
||||||
import Info from "./Info.vue";
|
import Info from "./Info.vue";
|
||||||
import Options from "./Options.vue";
|
import Options from "./Options.vue";
|
||||||
import SavesManager from "./saves/SavesManager.vue";
|
import SavesManager from "./saves/SavesManager.vue";
|
||||||
|
@ -117,6 +119,10 @@ const { useHeader, banner, title, discordName, discordLink, versionNumber } = pr
|
||||||
function openDiscord() {
|
function openDiscord() {
|
||||||
window.open(discordLink, "mywindow");
|
window.open(discordLink, "mywindow");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const needsSync = computed(
|
||||||
|
() => galaxy.value?.loggedIn && !syncedSaves.value.includes(settings.active)
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -264,4 +270,32 @@ function openDiscord() {
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.needsSync {
|
||||||
|
color: var(--danger);
|
||||||
|
animation: 4s wiggle ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wiggle {
|
||||||
|
0% {
|
||||||
|
transform: rotate(-3deg);
|
||||||
|
box-shadow: 0 2px 2px #0003;
|
||||||
|
}
|
||||||
|
5% {
|
||||||
|
transform: rotate(20deg);
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
transform: rotate(5deg);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: rotate(-1deg);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: rotate(0);
|
||||||
|
box-shadow: 0 2px 2px #0003;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue