2021-01-31 02:43:13 +13:00
|
|
|
<template>
|
|
|
|
<q-page class="column items-center justify-center">
|
|
|
|
|
2021-03-04 13:27:07 +13:00
|
|
|
<!-- Import project dialog -->
|
2021-05-16 00:23:39 +12:00
|
|
|
<loadProjectCheckDialog
|
|
|
|
:dialog-trigger="loadProjectDialogTrigger"
|
|
|
|
@trigger-dialog-close="loadProjectDialogClose"
|
2021-03-04 13:27:07 +13:00
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- New project dialog -->
|
|
|
|
<newProjectCheckDialog
|
|
|
|
:dialog-trigger="newProjectDialogTrigger"
|
|
|
|
@trigger-dialog-close="newProjectDialogClose"
|
|
|
|
/>
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
<div class="col-12">
|
2021-03-19 14:54:44 +13:00
|
|
|
<h5 class="mainSubTitle">Welcome to </h5>
|
|
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
|
|
<h2 class="mainTitle">Fantasia Archive</h2>
|
2021-01-31 02:43:13 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-12 q-mb-lg">
|
|
|
|
<q-btn
|
|
|
|
v-if="projectExists"
|
|
|
|
color="primary"
|
|
|
|
size="md"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outline="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
class="q-px-xl q-py-xs"
|
|
|
|
to="/project"
|
|
|
|
>
|
|
|
|
<div>Resume project </div>
|
|
|
|
</q-btn>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-12 q-mb-lg">
|
2021-03-04 13:27:07 +13:00
|
|
|
<q-btn
|
2021-01-31 02:43:13 +13:00
|
|
|
color="primary"
|
|
|
|
size="md"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outline="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
class="q-px-xl q-py-xs"
|
2021-03-04 13:27:07 +13:00
|
|
|
@click="newProjectAssignUID"
|
2021-01-31 02:43:13 +13:00
|
|
|
>
|
2021-03-04 13:27:07 +13:00
|
|
|
New Project
|
|
|
|
</q-btn>
|
2021-01-31 02:43:13 +13:00
|
|
|
</div>
|
|
|
|
|
2021-03-19 14:54:44 +13:00
|
|
|
<div class="col-12">
|
2021-01-31 02:43:13 +13:00
|
|
|
<q-btn
|
|
|
|
color="primary"
|
2021-03-18 10:26:08 +13:00
|
|
|
:outline="isDarkMode"
|
2021-01-31 02:43:13 +13:00
|
|
|
size="md"
|
|
|
|
class="q-px-xl q-py-xs"
|
2021-05-16 00:23:39 +12:00
|
|
|
@click="saveProjectAssignUID()"
|
2021-01-31 02:43:13 +13:00
|
|
|
>
|
2021-05-16 00:23:39 +12:00
|
|
|
Load existing project
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-btn>
|
|
|
|
</div>
|
|
|
|
|
2021-03-19 14:54:44 +13:00
|
|
|
<template v-if="!hideWelcomeScreenSocials">
|
2021-04-29 11:18:26 +12:00
|
|
|
<q-separator color="primary" horizonatal dark class="q-mt-xl q-mb-lg" style="opacity: 0.5; width: 400px;" />
|
2021-03-19 14:54:44 +13:00
|
|
|
|
2021-04-29 11:18:26 +12:00
|
|
|
<div class="col-12 q-mx-sm q-my-md">
|
|
|
|
<div class="patreonButton shadow-1" @click="openPatreonLink">
|
|
|
|
Support Fantasia Archive on Patreon!
|
2021-03-19 14:54:44 +13:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-04-29 11:18:26 +12:00
|
|
|
<div class="col-12 q-mb-lg">
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
<div class="q-mx-sm q-my-md">
|
|
|
|
<div class="discordButton shadow-1" @click="openDiscordInviteLink">
|
|
|
|
Discord
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="q-mx-sm q-my-md">
|
|
|
|
<div class="redditButton shadow-1" @click="openRedditLink"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="q-mx-sm q-my-md">
|
|
|
|
<div class="websiteButton shadow-1" @click="openWebsiteLink">
|
|
|
|
Website
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="q-mx-sm q-my-md">
|
|
|
|
<div class="githubButton shadow-1" @click="openGithubLink">
|
|
|
|
GitHub
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2021-03-19 14:54:44 +13:00
|
|
|
</div>
|
2021-04-29 11:18:26 +12:00
|
|
|
|
2021-03-19 14:54:44 +13:00
|
|
|
</div>
|
2021-04-29 11:18:26 +12:00
|
|
|
|
2021-03-19 14:54:44 +13:00
|
|
|
</template>
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-page>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-03-18 10:26:08 +13:00
|
|
|
import { Component, Watch } from "vue-property-decorator"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
import BaseClass from "src/BaseClass"
|
2021-05-16 00:23:39 +12:00
|
|
|
import loadProjectCheckDialog from "src/components/dialogs/LoadProjectCheck.vue"
|
2021-03-04 13:27:07 +13:00
|
|
|
import newProjectCheckDialog from "src/components/dialogs/NewProjectCheck.vue"
|
2021-03-19 14:54:44 +13:00
|
|
|
import { shell } from "electron"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
@Component({
|
2021-03-04 13:27:07 +13:00
|
|
|
components: {
|
2021-05-16 00:23:39 +12:00
|
|
|
loadProjectCheckDialog,
|
2021-03-04 13:27:07 +13:00
|
|
|
newProjectCheckDialog
|
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
})
|
|
|
|
export default class WelcomeScreen extends BaseClass {
|
2021-04-06 01:28:33 +12:00
|
|
|
/****************************************************************/
|
|
|
|
// LOCAL SETTINGS
|
|
|
|
/****************************************************************/
|
2021-03-18 10:26:08 +13:00
|
|
|
|
2021-04-06 01:28:33 +12:00
|
|
|
/**
|
|
|
|
* React to changes on the options store
|
|
|
|
*/
|
2021-03-18 10:26:08 +13:00
|
|
|
@Watch("SGET_options", { immediate: true, deep: true })
|
|
|
|
onSettingsChange () {
|
|
|
|
const options = this.SGET_options
|
|
|
|
this.isDarkMode = options.darkMode
|
2021-03-19 14:54:44 +13:00
|
|
|
this.hideWelcomeScreenSocials = options.hideWelcomeScreenSocials
|
2021-03-18 10:26:08 +13:00
|
|
|
}
|
|
|
|
|
2021-04-06 01:28:33 +12:00
|
|
|
/**
|
|
|
|
* Determines if the page should show in dark mode or not
|
|
|
|
*/
|
|
|
|
isDarkMode = false
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Determines if the welcome screen social links should show or not
|
|
|
|
*/
|
|
|
|
hideWelcomeScreenSocials = false
|
|
|
|
|
|
|
|
/****************************************************************/
|
|
|
|
// BASIC DATA
|
|
|
|
/****************************************************************/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Determines if any project exists on the window
|
|
|
|
*/
|
2021-01-31 02:43:13 +13:00
|
|
|
projectExists: undefined | string | boolean = false
|
|
|
|
|
2021-04-06 01:28:33 +12:00
|
|
|
/****************************************************************/
|
|
|
|
// COMPONENT FUNCTIONALITY
|
|
|
|
/****************************************************************/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get project name upon creation
|
|
|
|
* For the purposes of this component, we only check if the project exists via this
|
|
|
|
*/
|
2021-06-13 08:23:20 +12:00
|
|
|
created () {
|
|
|
|
this.checkProjectStatus()
|
|
|
|
}
|
|
|
|
|
|
|
|
@Watch("SGET_getProjectName")
|
|
|
|
checkProjectStatus () {
|
|
|
|
this.projectExists = (this.SGET_getProjectName.length > 0)
|
2021-04-06 01:28:33 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Open Discord invite link in thw default browser window
|
|
|
|
*/
|
|
|
|
openDiscordInviteLink () {
|
|
|
|
shell.openExternal("https://discord.gg/JQDBvsN9Te").catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Open Patreon link in thw default browser window
|
|
|
|
*/
|
|
|
|
openPatreonLink () {
|
|
|
|
shell.openExternal("https://www.patreon.com/elvanos").catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
|
2021-04-29 11:18:26 +12:00
|
|
|
/**
|
|
|
|
* Open Reddit link in thw default browser window
|
|
|
|
*/
|
|
|
|
openRedditLink () {
|
|
|
|
shell.openExternal("https://www.reddit.com/r/FantasiaArchive/").catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Open Website link in thw default browser window
|
|
|
|
*/
|
|
|
|
openWebsiteLink () {
|
|
|
|
shell.openExternal("http://fantasiaarchive.com/").catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Open GitHub link in thw default browser window
|
|
|
|
*/
|
|
|
|
openGithubLink () {
|
|
|
|
shell.openExternal("https://github.com/Elvanos/fantasia-archive").catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
|
2021-04-06 01:28:33 +12:00
|
|
|
/****************************************************************/
|
|
|
|
// NEW PROJECT DIALOG
|
|
|
|
/****************************************************************/
|
2021-03-04 13:27:07 +13:00
|
|
|
newProjectDialogTrigger: string | false = false
|
|
|
|
newProjectDialogClose () {
|
|
|
|
this.newProjectDialogTrigger = false
|
|
|
|
}
|
|
|
|
|
|
|
|
newProjectAssignUID () {
|
|
|
|
this.newProjectDialogTrigger = this.generateUID()
|
|
|
|
}
|
|
|
|
|
2021-04-06 01:28:33 +12:00
|
|
|
/****************************************************************/
|
|
|
|
// IMPORT PROJECT DIALOG
|
|
|
|
/****************************************************************/
|
2021-05-16 00:23:39 +12:00
|
|
|
loadProjectDialogTrigger: string | false = false
|
|
|
|
loadProjectDialogClose () {
|
|
|
|
this.loadProjectDialogTrigger = false
|
2021-03-04 13:27:07 +13:00
|
|
|
}
|
|
|
|
|
2021-05-16 00:23:39 +12:00
|
|
|
saveProjectAssignUID () {
|
|
|
|
this.loadProjectDialogTrigger = this.generateUID()
|
2021-03-04 13:27:07 +13:00
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
|
|
|
</script>
|
2021-03-19 14:54:44 +13:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
|
|
.mainTitle {
|
|
|
|
color: var(--q-color-dark);
|
|
|
|
}
|
|
|
|
|
|
|
|
body.body--dark {
|
|
|
|
.mainTitle {
|
|
|
|
color: var(--q-color-primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.mainSubTitle {
|
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0;
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainTitle {
|
|
|
|
position: relative;
|
|
|
|
margin-top: 10px;
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
content: '';
|
|
|
|
top: -25px;
|
|
|
|
right: -95px;
|
|
|
|
position: absolute;
|
|
|
|
height: 100px;
|
|
|
|
width: 90px;
|
|
|
|
background-image: url('../assets/appLogo.png');
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: contain;
|
|
|
|
transform: scaleX(-1);
|
|
|
|
filter: drop-shadow(-1px 1px 2px var(--q-color-dark));
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: '';
|
|
|
|
top: -25px;
|
|
|
|
left: -95px;
|
|
|
|
position: absolute;
|
|
|
|
height: 100px;
|
|
|
|
width: 90px;
|
|
|
|
background-image: url('../assets/appLogo.png');
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: contain;
|
|
|
|
filter: drop-shadow(-1px 1px 2px var(--q-color-dark));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|