eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Fix syncing, repairing, add edit method (#111)

Browse Source 
* Fix syncing, repairing, add edit method

* comp err

* temp push up

* fixes

* fix more

* add frontend
This commit is contained in:
Geometrically
2023-05-11 10:26:00 -07:00
committed by GitHub
parent 71cf2c53f5
commit 7a0798d9d0
24 changed files with 501 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
theseus_gui/src/components/GridDisplay.vue
View File

@@ -97,19 +97,13 @@ const modsRow = ref(null)
.instances {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
width: 100%;
gap: 1rem;
margin-right: auto;
margin-top: 0.8rem;
scroll-behavior: smooth;
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar {
width: 0px;
background: transparent;
}
overflow-y: scroll;
}
}

42
theseus_gui/src/components/RowDisplay.vue
View File

@@ -1,7 +1,6 @@
<script setup>
import { ChevronLeftIcon, ChevronRightIcon } from 'omorphia'
import Instance from '@/components/ui/Instance.vue'
import News from '@/components/ui/News.vue'
import { onMounted, onUnmounted, ref } from 'vue'
const props = defineProps({
@@ -11,12 +10,6 @@ const props = defineProps({
return []
},
},
news: {
type: Array,
default() {
return []
},
},
label: {
type: String,
default: '',
@@ -26,16 +19,9 @@ const props = defineProps({
const allowPagination = ref(false)
const modsRow = ref(null)
const newsRow = ref(null)
const shouldRenderNormalInstances = props.instances && props.instances?.length !== 0
const shouldRenderNews = props.news && props.news?.length !== 0
const handlePaginationDisplay = () => {
let parentsRow
if (shouldRenderNormalInstances) parentsRow = modsRow.value
if (shouldRenderNews) parentsRow = newsRow.value
if (!parentsRow) return
let parentsRow = modsRow.value
// This is wrapped in a setTimeout because the HtmlCollection seems to struggle
// with getting populated sometimes. It's a flaky error, but providing a bit of
@@ -53,7 +39,7 @@ const handlePaginationDisplay = () => {
onMounted(() => {
if (props.canPaginate) window.addEventListener('resize', handlePaginationDisplay)
// Check if pagination should be rendered on mount
handlePaginationDisplay()
})
onUnmounted(() => {
@@ -61,12 +47,10 @@ onUnmounted(() => {
})
const handleLeftPage = () => {
if (shouldRenderNormalInstances) modsRow.value.scrollLeft -= 170
else if (shouldRenderNews) newsRow.value.scrollLeft -= 170
modsRow.value.scrollLeft -= 170
}
const handleRightPage = () => {
if (shouldRenderNormalInstances) modsRow.value.scrollLeft += 170
else if (shouldRenderNews) newsRow.value.scrollLeft += 170
modsRow.value.scrollLeft += 170
}
</script>
<template>
@@ -79,7 +63,7 @@ const handleRightPage = () => {
<ChevronRightIcon role="button" @click="handleRightPage" />
</div>
</div>
<section v-if="shouldRenderNormalInstances" ref="modsRow" class="instances">
<section ref="modsRow" class="instances">
<Instance
v-for="instance in props.instances"
:key="instance?.project_id || instance?.id"
@@ -88,9 +72,6 @@ const handleRightPage = () => {
class="row-instance"
/>
</section>
<section v-else-if="shouldRenderNews" ref="newsRow" class="news">
<News v-for="actualNews in props.news" :key="actualNews.id" :news="actualNews" />
</section>
</div>
</template>
<style lang="scss" scoped>
@@ -153,19 +134,6 @@ const handleRightPage = () => {
gap: 1rem;
}
.news {
margin: auto;
width: 100%;
scroll-behavior: smooth;
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar {
width: 0px;
background: transparent;
}
}
.instances {
display: flex;
flex-direction: row;

12
theseus_gui/src/components/ui/InstallConfirmModal.vue
View File

@@ -1,25 +1,25 @@
<script setup>
import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
import { useRouter } from 'vue-router'
import { install as pack_install } from '@/helpers/pack'
import { ref } from 'vue'
const router = useRouter()
const version = ref('')
const title = ref('')
const icon = ref('')
const confirmModal = ref(null)
defineExpose({
show: (id) => {
show: (id, projectTitle, projectIcon) => {
version.value = id
title.value = projectTitle
icon.value = projectIcon
confirmModal.value.show()
},
})
async function install() {
let id = await pack_install(version.value)
await router.push({ path: `/instance/${encodeURIComponent(id)}` })
confirmModal.value.hide()
await pack_install(version.value, title.value, icon.value ? icon.value : null)
}
</script>

22
theseus_gui/src/components/ui/Instance.vue
View File

@@ -74,13 +74,13 @@ const install = async (e) => {
) {
try {
modLoading.value = true
await pack_install(versions[0].id, props.instance.title)
await pack_install(versions[0].id, props.instance.title, props.instance.icon_url)
modLoading.value = false
} catch (err) {
console.error(err)
modLoading.value = false
}
} else confirmModal.value.show(versions[0].id)
} else confirmModal.value.show(versions[0].id, props.instance.title, props.instance.icon_url)
}
modLoading.value = false
@@ -119,7 +119,7 @@ const stop = async (e) => {
}
await process_listener((e) => {
if (e.event === 'Finished' && e.uuid === uuid.value) playing.value = false
if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
})
</script>
@@ -147,10 +147,12 @@ await process_listener((e) => {
@mouseenter="checkProcess"
>
<Avatar
size="lg"
size="none"
:src="
props.instance.metadata
? convertFileSrc(props.instance.metadata?.icon)
? props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http')
? props.instance.metadata.icon
: convertFileSrc(props.instance.metadata?.icon)
: props.instance.icon_url
"
alt="Mod card"
@@ -315,8 +317,14 @@ await process_listener((e) => {
background: hsl(220, 11%, 11%) !important;
}
.mod-image {
border-radius: 1.5rem !important;
> .avatar {
--size: 100%;
width: 100% !important;
height: auto !important;
max-width: unset !important;
max-height: unset !important;
aspect-ratio: 1 / 1 !important;
}
.project-info {

14
theseus_gui/src/components/ui/InstanceInstallModal.vue
View File

@@ -55,7 +55,7 @@ async function install(instance) {
await installMod(instance.path, version.id)
await installVersionDependencies(instance, version)
instance.installed = true
instance.installedMod = true
instance.installing = false
}
@@ -75,7 +75,7 @@ const filteredVersions = computed(() => {
filtered.map((profile) => {
profile.installing = false
profile.installed = checkInstalled(profile, project.value)
profile.installedMod = checkInstalled(profile, project.value)
})
return filtered
@@ -149,10 +149,12 @@ const check_valid = computed(() => {
<Avatar :src="convertFileSrc(profile.metadata.icon)" class="profile-image" />
{{ profile.metadata.name }}
</Button>
<Button :disabled="profile.installed || profile.installing" @click="install(profile)">
<DownloadIcon v-if="!profile.installed && !profile.installing" />
<CheckIcon v-else-if="profile.installed" />
{{ profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install' }}
<Button :disabled="profile.installedMod || profile.installing" @click="install(profile)">
<DownloadIcon v-if="!profile.installedMod && !profile.installing" />
<CheckIcon v-else-if="profile.installedMod" />
{{
profile.installing ? 'Installing...' : profile.installedMod ? 'Installed' : 'Install'
}}
</Button>
</div>
</div>

91
theseus_gui/src/components/ui/News.vue
View File

@@ -1,91 +0,0 @@
<script setup>
import { Card, ChevronRightIcon } from 'omorphia'
const props = defineProps({
news: {
type: Object,
default() {
return {}
},
},
})
</script>
<template>
<Card class="news-cta">
<img :src="props.news.img" alt="News Image" />
<div class="body">
<div class="headline">
<h2>{{ props.news.headline }}</h2>
<p>{{ props.news.blurb }}</p>
</div>
<div class="underline">
<p>{{ props.news.source }}</p>
<a href="#"><ChevronRightIcon /></a>
</div>
</div>
</Card>
</template>
<style lang="scss" scoped>
.news-cta {
display: flex;
justify-content: center;
padding: 0;
background: var(--color-raised-bg);
min-width: 24.125rem; /* from wireframe */
min-height: 8.5rem; /* from wireframe */
box-shadow: var(--shadow-raised-lg);
cursor: pointer;
transition: all ease-in-out 0.1s;
&:hover {
box-shadow: var(--shadow-floating);
filter: brightness(0.85);
}
img {
display: flex;
width: 8.4375rem; /* from wireframe */
height: 8.5rem; /* from wireframe */
border-radius: 0.9rem 0 0 0.9rem;
}
.body {
display: flex;
flex-direction: column;
width: 100%;
height: 8.5rem; /* from wireframe */
padding: 0.45rem;
.headline {
display: inherit;
flex-direction: inherit;
margin: 0.4rem 0;
width: 100%;
h2 {
font-size: 1rem;
text-transform: uppercase;
}
p {
font-size: 0.7rem;
}
}
.underline {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: auto;
p {
font-size: 0.7rem;
}
a {
transition: all ease-in-out 0.2s;
width: 1.5rem;
color: var(--color-primary);
font-size: 1.3rem;
&:hover {
transform: translate(1px);
filter: brightness(150%);
}
}
}
}
}
</style>

4
theseus_gui/src/helpers/pack.js
View File

@@ -6,8 +6,8 @@
import { invoke } from '@tauri-apps/api/tauri'
// Installs pack from a version ID
export async function install(versionId, packTitle) {
return await invoke('pack_install_version_id', { versionId, packTitle })
export async function install(versionId, packTitle, packIcon) {
return await invoke('pack_install_version_id', { versionId, packTitle, packIcon })
}
// Installs pack from a path

5
theseus_gui/src/helpers/profile.js
View File

@@ -101,3 +101,8 @@ export async function run(path) {
export async function run_wait(path) {
return await invoke('profile_run_wait', { path })
}
// Edits a profile
export async function edit(path, editProfile) {
return await invoke('profile_edit', { path, editProfile })
}

28
theseus_gui/src/pages/Library.vue
View File

@@ -12,28 +12,28 @@ const breadcrumbs = useBreadcrumbs()
breadcrumbs.setRootContext({ name: 'Library', link: route.path })
const profiles = await list()
const instances = shallowRef(
Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
)
const modpacks = shallowRef(
Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
)
const instances = shallowRef(Object.values(profiles))
loading_listener(async (profile) => {
console.log(profile)
if (profile.event === 'loaded') {
const profiles = await list()
instances.value = Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
modpacks.value = Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
instances.value = Object.values(profiles)
}
})
</script>
<template>
<div>
<GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
<GridDisplay v-if="modpacks.length > 0" label="Modpacks" :instances="modpacks" />
</div>
<GridDisplay
v-if="instances.length > 0"
label="Instances"
:instances="instances"
class="display"
/>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.display {
background-color: rgb(30, 31, 34);
min-height: 100%;
}
</style>

11
theseus_gui/src/pages/instance/Index.vue
View File

@@ -2,7 +2,14 @@
<div class="instance-container">
<div class="side-cards">
<Card class="instance-card">
<Avatar size="lg" :src="convertFileSrc(instance.metadata.icon)" />
<Avatar
size="lg"
:src="
instance.metadata.icon && instance.metadata.icon.startsWith('http')
? instance.metadata.icon
: convertFileSrc(instance.metadata?.icon)
"
/>
<div class="instance-info">
<h2 class="name">{{ instance.metadata.name }}</h2>
<span class="metadata">
@@ -136,7 +143,7 @@ const stopInstance = async () => {
}
const unlisten = await process_listener((e) => {
if (e.event === 'Finished' && uuid.value === e.uuid) playing.value = false
if (e.event === 'finished' && uuid.value === e.uuid) playing.value = false
})
onUnmounted(() => unlisten())

5
theseus_gui/src/pages/project/Index.vue
View File

@@ -291,10 +291,9 @@ async function install(version) {
.map((value) => value.metadata)
.find((pack) => pack.linked_data?.project_id === data.value.id)
) {
let id = await packInstall(queuedVersionData.id, data.value.title)
await router.push({ path: `/instance/${encodeURIComponent(id)}` })
await packInstall(queuedVersionData.id, data.value.title, data.value.icon_url)
} else {
confirmModal.value.show(queuedVersionData.id)
confirmModal.value.show(queuedVersionData.id, data.value.title, data.value.icon_url)
}
} else {
if (instance.value) {