Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-24 21:21:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Celestial quote history modal

Browse Source
This commit is contained in:
Dys 2022-07-12 19:36:16 +08:00 committed by cyip92
parent 53943db2d5
commit d2938a1157
12 changed files with 283 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
javascripts/core/app/modal.js
View File

@ -41,6 +41,7 @@ import AutomatorScriptTemplate from "@/components/modals/AutomatorScriptTemplate
import AwayProgressModal from "@/components/modals/AwayProgressModal";
import BreakInfinityModal from "@/components/modals/BreakInfinityModal";
import CatchupModal from "@/components/modals/catchup/CatchupModal";
import CelesitalQuoteHistoryModal from "@/components/modals/celestial-quotes/CelestialQuoteHistoryModal";
import CreditsModal from "@/components/modals/CreditsModal";
import DeleteAutomatorScriptModal from "@/components/modals/DeleteAutomatorScriptModal";
import EnslavedHintsModal from "@/components/modals/EnslavedHintsModal";
@ -285,3 +286,9 @@ Modal.message = new class extends Modal {
}
}
}(MessageModal, 2);
Modal.celestialQuoteHistory = new class extends Modal {
show(quotes) {
super.show({ quotes });
}
}(CelesitalQuoteHistoryModal, 2, true);

43
public/stylesheets/styles.css
View File

@ -5990,49 +5990,6 @@ kbd {
/* #endregion component */
.o-celestial-quote-history {
display: flex;
flex-direction: row;
width: 70rem;
justify-content: space-evenly;
align-items: stretch;
margin: 1rem 0;
}
.l-celestial-quote-history__lines {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
font-size: 1.9rem;
line-height: 2.4rem;
}
.c-celestial-quote-history__line {
font-style: italic;
font-weight: bold;
}
.l-celestial-quote-history__buttons {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem 0 0.5rem 1.5rem;
}
.c-celestial-quote-history__button {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.c-celestial-quote-history__button--enabled {
cursor: pointer;
}
.c-celestial-quote-history__button--disabled {
opacity: 0.6;
}
/* #region Teresa tab */
.l-teresa-celestial-tab {
display: flex;

39
src/components/CelestialQuoteHistory.vue
View File

@ -7,11 +7,44 @@ export default {
required: true
}
},
computed: {
borderColor() {
return this.celestial === "laitela" ? `var(--color-laitela--accent)` : `var(--color-${this.celestial}--base)`;
}
},
methods: {
show() {
Modal.celestialQuoteHistory.show(Celestials[this.celestial].quotes.all);
},
}
};
</script>
<template>
<div class="o-celestial-quote-history">
<!-- WIP: Button will appear here -->
</div>
<button
class="c-celestial-quote-history--button"
:style="{
'border-color': borderColor
}"
@click="show"
>
{{ celestial.capitalize() }}'s Dialogue
</button>
</template>
<style scope>
.c-celestial-quote-history--button {
width: fit-content;
align-self: center;
font-family: Typewriter;
font-size: 1.8rem;
font-weight: bold;
color: var(--color-text);
background-color: var(--color-base);
border: var(--var-border-width, 0.2rem) solid;
border-radius: var(--var-border-radius, 0.5rem);
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
}
</style>

2
src/components/GameUiComponentFixed.vue
View File

@ -1,5 +1,5 @@
<script>
import CelestialQuoteModal from "@/components/modals/CelestialQuoteModal";
import CelestialQuoteModal from "@/components/modals/celestial-quotes/CelestialQuoteModal";
import CreditsContainer from "@/components/tabs/celestial-pelle/CreditsContainer";
import FadeAway from "@/components/tabs/celestial-pelle/FadeAway";
import HowToPlay from "@/components/HowToPlay";

8
src/components/modals/PopupModal.vue
View File

@ -33,8 +33,14 @@ export default {
</script>
<template>
<component
:is="modal.component"
v-if="modal.isBare && !forceDontShowModal"
v-bind="modal.props"
@close="hide"
/>
<div
v-if="!forceDontShowModal"
v-else-if="!forceDontShowModal"
class="c-modal l-modal"
>
<component

6
src/components/modals/CelestialQuoteBackground.vue → src/components/modals/celestial-quotes/CelestialQuoteBackground.vue
View File

@ -31,7 +31,7 @@ export default {
<template>
<div :class="modalClass">
<span
class="c-modal-cestial-quote__symbol"
class="c-modal-celestial-quote__symbol"
v-html="celestialSymbol"
/>
<slot />
@ -46,7 +46,7 @@ export default {
flex-direction: row;
width: 30rem;
height: 30rem;
position: fixed;
position: absolute;
/* stylelint-disable-next-line unit-allowed-list */
top: 50vh;
/* stylelint-disable-next-line unit-allowed-list */
@ -99,7 +99,7 @@ export default {
box-shadow: 0 0 1rem 0.2rem var(--scoped-quote-color), 0 0 1rem 0.1rem var(--scoped-quote-color) inset
}
.c-modal-cestial-quote__symbol {
.c-modal-celestial-quote__symbol {
display: flex;
width: 100%;
height: 100%;

155
src/components/modals/celestial-quotes/CelestialQuoteHistoryModal.vue Normal file
View File

@ -0,0 +1,155 @@
<script>
import CelestialQuoteLineBasicInteractable from "./templates/CelestialQuoteLineBasicInteractable";
export default {
name: "CelestialQuoteHistoryModal",
components: {
CelestialQuoteLineBasicInteractable
},
props: {
quotes: {
type: Array,
required: true
}
},
data() {
return {
focusedQuote: 0,
unlockedQuotes: []
};
},
computed: {
upClass() {
return {
"c-modal-celestial-quote-history__arrow": true,
"c-modal-celestial-quote-history__arrow-up": true,
"c-modal-celestial-quote-history__arrow--disabled": this.focusedQuote <= 0,
"fas": true,
"fa-chevron-circle-up": true,
};
},
downClass() {
return {
"c-modal-celestial-quote-history__arrow": true,
"c-modal-celestial-quote-history__arrow-down": true,
"c-modal-celestial-quote-history__arrow--disabled": this.focusedQuote >= this.unlockedQuotes.length - 1,
"fas": true,
"fa-chevron-circle-down": true,
};
},
},
methods: {
update() {
this.unlockedQuotes = this.quotes.filter(x => x.isUnlocked);
},
quoteStyle(id) {
return {
top: `calc(50vh + ${(id - this.focusedQuote) * 10}rem)`,
transform: `translate(-50%, -50%) scale(${Math.max(1 - Math.abs(id - this.focusedQuote) / 4, 0)})`,
"z-index": 6 - Math.abs(id - this.focusedQuote)
};
},
progressUp() {
this.focusedQuote = Math.max(0, this.focusedQuote - 1);
},
progressDown() {
this.focusedQuote = Math.min(this.unlockedQuotes.length - 1, this.focusedQuote + 1);
}
}
};
</script>
<template>
<div class="l-modal-overlay c-modal-overlay">
<i
class="c-modal-celestial-quote-history__close fas fa-circle-xmark"
@click="emitClose"
/>
<div
class="c-quote-history-modal__clickable-background"
@click="emitClose"
/>
<div class="c-quote-history-modal__controls">
<i
:class="upClass"
@click="progressUp"
/>
<i
:class="downClass"
@click="progressDown"
/>
</div>
<CelestialQuoteLineBasicInteractable
v-for="(quote, quoteId) in unlockedQuotes"
:key="quoteId"
class="c-quote-overlay"
:style="quoteStyle(quoteId)"
:quote="quote"
:is-focused="focusedQuote === quoteId"
:close-visible="false"
/>
</div>
</template>
<style scoped>
.c-modal-overlay {
cursor: pointer;
}
.c-quote-overlay {
font-size: 1.4rem;
padding: 1rem;
transition: all 0.2s, top 0.3s ease, transform 0.3s ease, z-index 0s;
}
.c-modal-celestial-quote-history__arrow,
.c-modal-celestial-quote-history__close {
font-size: 2.5rem;
color: var(--color-text);
cursor: pointer;
}
.c-modal-celestial-quote-history__arrow--disabled {
opacity: 0.4;
cursor: default;
}
.c-modal-celestial-quote-history__close {
position: absolute;
/* stylelint-disable-next-line unit-allowed-list */
bottom: calc(50vh + 16rem);
/* stylelint-disable-next-line unit-allowed-list */
left: calc(50vw + 16rem);
z-index: 1;
animation: 0.5s a-fade-in;
}
.c-quote-history-modal__controls {
display: flex;
flex-direction: column;
height: 10rem;
position: absolute;
/* stylelint-disable-next-line unit-allowed-list */
top: 50vh;
/* stylelint-disable-next-line unit-allowed-list */
right: calc(50vw + 16rem);
z-index: 1;
justify-content: space-between;
padding: 1rem;
transform: translateY(-50%);
animation: 0.5s a-fade-in;
}
.c-quote-history-modal__clickable-background {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
z-index: 0;
}
@keyframes a-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>

0
src/components/modals/CelestialQuoteLine.vue → src/components/modals/celestial-quotes/CelestialQuoteLine.vue
View File

33
src/components/modals/celestial-quotes/CelestialQuoteModal.vue Normal file
View File

@ -0,0 +1,33 @@
<script>
import CelestialQuoteLineBasicInteractable from "./templates/CelestialQuoteLineBasicInteractable";
export default {
name: "CelestialQuoteModal",
components: {
CelestialQuoteLineBasicInteractable
},
props: {
quote: {
type: Object,
required: true
}
},
};
</script>
<template>
<div class="l-modal-overlay c-modal-overlay">
<CelestialQuoteLineBasicInteractable
class="c-quote-overlay"
:quote="quote"
/>
</div>
</template>
<style scoped>
.c-quote-overlay {
font-size: 1.4rem;
padding: 1rem;
transition-duration: 0.2s;
}
</style>

66
src/components/modals/CelestialQuoteModal.vue → src/components/modals/celestial-quotes/templates/CelestialQuoteLineBasicInteractable.vue
View File

@ -1,8 +1,8 @@
<script>
import CelestialQuoteLine from "./CelestialQuoteLine";
import CelestialQuoteLine from "@/components/modals/celestial-quotes/CelestialQuoteLine";
export default {
name: "CelestialQuoteModal",
name: "CelestialQuoteBasicInteractable",
components: {
CelestialQuoteLine
},
@ -10,7 +10,32 @@ export default {
quote: {
type: Object,
required: true
}
},
isFocused: {
type: Boolean,
required: false,
default: true
},
primary: {
type: Boolean,
required: false,
default: false,
},
leftVisible: {
type: Boolean,
required: false,
default: true
},
rightVisible: {
type: Boolean,
required: false,
default: true
},
closeVisible: {
type: Boolean,
required: false,
default: true
},
},
data() {
return {
@ -46,6 +71,7 @@ export default {
},
methods: {
progressIn(direction) {
if (!this.isFocused) return false;
switch (direction) {
case "left": return this.currentLine--;
case "right": return this.currentLine++;
@ -53,6 +79,7 @@ export default {
}
},
close() {
if (!this.isFocused) return;
this.index = 0;
Quote.advanceQueue();
},
@ -61,25 +88,14 @@ export default {
</script>
<template>
<div class="l-modal-overlay c-modal-overlay">
<CelestialQuoteLine
class="c-quote-overlay"
:quote="quote"
:current-line="currentLine"
:left-visible="!isQuoteStart"
:right-visible="!isQuoteEnd"
:close-visible="isQuoteEnd"
primary
@close="close"
@progress-in="progressIn"
/>
</div>
</template>
<style scoped>
.c-quote-overlay {
font-size: 1.4rem;
padding: 1rem;
transition-duration: 0.2s;
}
</style>
<CelestialQuoteLine
:quote="quote"
:current-line="currentLine"
:left-visible="!isQuoteStart && leftVisible"
:right-visible="!isQuoteEnd && rightVisible"
:close-visible="isQuoteEnd && closeVisible"
primary
@close="close"
@progress-in="progressIn"
/>
</template>

5
src/components/tabs/celestial-enslaved/EnslavedTab.vue
View File

@ -292,11 +292,6 @@ export default {
</template>
<style scoped>
.o-celestial-quote-history {
width: 60rem;
margin: 1rem;
}
.c-enslaved-run-description-line {
margin-bottom: 1rem;
}

4
src/components/tabs/celestial-pelle/PelleTab.vue
View File

@ -188,8 +188,4 @@ export default {
.pelle-icon {
animation: a-roll infinite 8s linear;
}
.o-celestial-quote-history {
align-self: center;
}
</style>