mirror of
https://github.com/YouHaveTrouble/GuildMaster.git
synced 2026-05-12 06:26:59 +00:00
Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 YouHaveTrouble
|
c569a1110c | ||
|
YouHaveTrouble
|
56407505ea | ||
|
YouHaveTrouble
|
5e4a78530a | ||
|
YouHaveTrouble
|
7be4d2b9ca | ||
|
YouHaveTrouble
|
eb4b0fba00 | ||
|
YouHaveTrouble
|
3f22b4511d | ||
|
YouHaveTrouble
|
6f777332a4 | ||
|
YouHaveTrouble
|
101ea0ffb5 | ||
|
YouHaveTrouble
|
af11324fb7 | ||
 RhythmicSys
|
6903774f97 | ||
|
RhythmicSys
|
1a9d2d0d9f | ||
|
YouHaveTrouble
|
359abd3ab4 | ||
|
YouHaveTrouble
|
1a3a493df4 | ||
|
YouHaveTrouble
|
0890efd1ec | ||
|
YouHaveTrouble
|
5b4278cf30 | ||
|
YouHaveTrouble
|
8665506160 | ||
|
YouHaveTrouble
|
fdd0a8bbb1 |
@@ -0,0 +1,6 @@
|
||||
<h1>Guild Master</h1>
|
||||
<h2>Adventurer's guild management game</h2>
|
||||
<p>It's a game where you manage an adventurer's guild. You can hire adventurers, assign them to quests to send them on adventures. </p>
|
||||
|
||||
<h3>How to play</h3>
|
||||
Game is playable on <a href="https://guildmaster.yht.one/">guildmaster.yht.one</a> and is always automatically updated when new release is made.
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "adventurers-guild",
|
||||
"version": "0.0.1",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "adventurers-guild",
|
||||
"version": "0.0.1",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@vueuse/components": "^9.13.0",
|
||||
"sass": "^1.59.3",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "adventurers-guild",
|
||||
"version": "0.1.0",
|
||||
"version": "0.4.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="800px" height="800px" viewBox="0 0 569.613 569.614"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M371.49,563.638l113.052-65.854c5.26-3.063,9.088-8.094,10.64-13.975c1.555-5.888,0.701-12.148-2.359-17.405
|
||||
l-30.769-52.807c4.789-6.524,9.083-13.115,12.972-19.918c3.893-6.799,7.405-13.84,10.606-21.275l61.114-0.221
|
||||
c6.086-0.021,11.915-2.464,16.202-6.781c4.287-4.32,6.687-10.165,6.665-16.255l-0.48-130.833
|
||||
c-0.024-6.089-2.464-11.919-6.784-16.206c-4.299-4.269-10.113-6.662-16.166-6.662c-0.03,0-0.062,0-0.089,0l-61.182,0.242
|
||||
c-6.444-14.462-14.428-28.14-23.871-40.913l30.417-53.143c6.294-11.001,2.481-25.025-8.52-31.316L369.403,5.335
|
||||
c-5.281-3.023-11.545-3.822-17.424-2.231c-5.872,1.598-10.872,5.462-13.892,10.747L307.665,67
|
||||
c-15.766-1.662-31.653-1.613-47.363,0.144l-30.796-52.892c-3.063-5.263-8.094-9.091-13.975-10.646
|
||||
c-5.884-1.551-12.148-0.704-17.408,2.359L85.068,71.823c-10.949,6.38-14.657,20.429-8.28,31.38l30.765,52.831
|
||||
c-4.761,6.484-9.048,13.076-12.953,19.899c-3.904,6.824-7.417,13.855-10.6,21.255l-61.139,0.235
|
||||
C10.187,197.472-0.046,207.785,0,220.456L0.48,351.29c0.024,6.086,2.463,11.919,6.784,16.206
|
||||
c4.299,4.269,10.11,6.661,16.166,6.661c0.028,0,0.058,0,0.086,0l61.203-0.229c6.432,14.452,14.413,28.131,23.868,40.915
|
||||
l-30.413,53.141c-3.023,5.284-3.825,11.548-2.231,17.423c1.597,5.872,5.462,10.872,10.747,13.896l113.535,64.977
|
||||
c3.596,2.056,7.513,3.032,11.38,3.032c7.962,0,15.701-4.146,19.942-11.552l30.417-53.149c15.799,1.671,31.684,1.619,47.348-0.144
|
||||
l30.799,52.89c3.066,5.26,8.094,9.088,13.978,10.643C359.967,567.552,366.23,566.705,371.49,563.638z M341.129,465.911
|
||||
c-4.902-8.418-14.599-12.815-24.137-10.994c-20.588,3.935-42.174,3.999-63.128,0.202c-9.572-1.735-19.184,2.741-24.015,11.181
|
||||
l-26.748,46.745l-73.694-42.18l26.75-46.741c4.832-8.439,3.819-19.006-2.521-26.371c-13.978-16.239-24.685-34.594-31.818-54.554
|
||||
c-3.265-9.131-11.918-15.227-21.61-15.227c-0.027,0-0.058,0-0.085,0l-53.825,0.199l-0.315-84.937l53.819-0.205
|
||||
c9.722-0.04,18.366-6.197,21.576-15.374c3.69-10.557,7.962-20.019,13.06-28.917c5.101-8.914,11.089-17.387,18.311-25.897
|
||||
c6.294-7.417,7.225-17.993,2.334-26.396l-27.081-46.509l73.385-42.754l27.078,46.497c4.893,8.4,14.544,12.821,24.095,11.004
|
||||
c20.716-3.911,42.317-3.978,63.189-0.19c9.557,1.753,19.189-2.742,24.019-11.178l26.753-46.744l73.697,42.179l-26.753,46.742
|
||||
c-4.826,8.437-3.816,19,2.521,26.368c13.956,16.221,24.669,34.587,31.842,54.59c3.271,9.119,11.919,15.202,21.604,15.202
|
||||
c0.031,0,0.062,0,0.092,0l53.789-0.214l0.315,84.927l-53.783,0.192c-9.712,0.037-18.351,6.182-21.569,15.347
|
||||
c-3.746,10.654-8.023,20.131-13.082,28.975c-5.064,8.847-11.067,17.338-18.356,25.958c-6.271,7.418-7.194,17.978-2.305,26.368
|
||||
l27.078,46.472l-73.391,42.749L341.129,465.911z"/>
|
||||
<path d="M392.531,346.458c16.472-28.773,20.746-62.24,12.047-94.232s-29.342-58.685-58.115-75.151
|
||||
c-18.761-10.74-40.05-16.417-61.562-16.417c-44.446,0-85.762,23.944-107.822,62.485c-33.994,59.404-13.327,135.39,46.071,169.386
|
||||
c18.764,10.737,40.052,16.411,61.564,16.411C329.158,408.943,370.475,385.001,392.531,346.458z M352.696,323.658
|
||||
c-13.902,24.293-39.955,39.385-67.985,39.385c-13.528,0-26.934-3.58-38.764-10.349c-37.433-21.426-50.456-69.312-29.033-106.751
|
||||
c13.905-24.291,39.958-39.385,67.987-39.385c13.528,0,26.932,3.58,38.762,10.355c18.136,10.379,31.142,27.197,36.628,47.359
|
||||
C365.771,284.435,363.075,305.524,352.696,323.658z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" fill="none"/>
|
||||
<path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 660 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 474 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
+66
-10
@@ -4,19 +4,20 @@ import {RouterLink, RouterView} from 'vue-router'</script>
|
||||
<template>
|
||||
<header>
|
||||
<nav>
|
||||
<RouterLink to="/">Guild</RouterLink>
|
||||
<RouterLink to="/quests">Quests</RouterLink>
|
||||
<RouterLink to="/adventurers">Adventurers</RouterLink>
|
||||
<RouterLink :to="{name: 'guild'}">Guild</RouterLink>
|
||||
<RouterLink :to="{name: 'quests'}">Quests</RouterLink>
|
||||
<RouterLink :to="{name: 'adventurers'}">Adventurers</RouterLink>
|
||||
<RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
<RouterView
|
||||
:guild="guild"
|
||||
:adventurers="adventurers"
|
||||
:quests="missives"
|
||||
:lastRecruitTime="lastRecruitHandled"
|
||||
:adventurerForHire="adventurerForHire"
|
||||
@finalizeQuest="finalizeQuest($event)"
|
||||
@wipeSave="resetSave()"
|
||||
@recruitActionTaken="lastRecruitHandled = Number(new Date())"
|
||||
@recruitActionTaken="recruitAction($event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -26,9 +27,10 @@ import {Adventurer} from "@/classes/Adventurer";
|
||||
import {getQuestWithRewards, Quest} from "@/classes/Quest";
|
||||
import {Guild} from "@/classes/Guild";
|
||||
import {getFromString, QuestRank} from "@/classes/QuestRank";
|
||||
import {GameData, loadAvailableQuests, loadGame, saveGame} from "@/GameData";
|
||||
import {GameData, loadAdventurersForHire, loadAvailableQuests, loadGame, saveGame} from "@/GameData";
|
||||
import type {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||
import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
|
||||
import {getNewAdventurerForHire} from "@/classes/Recruitment";
|
||||
|
||||
export default defineComponent({
|
||||
name: "GuildView",
|
||||
@@ -44,6 +46,8 @@ export default defineComponent({
|
||||
F: null as null|number,
|
||||
} as { [key: string]: null|number },
|
||||
lastRecruitHandled: null as null|number,
|
||||
adventurerForHire: null as Adventurer|null,
|
||||
adventurersDatabase: {} as Array<Adventurer>,
|
||||
adventurers: {} as { [key: string]: Adventurer },
|
||||
quests: {} as { [key: string]: { [key: string]: Quest } },
|
||||
missives: {
|
||||
@@ -76,6 +80,28 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
},
|
||||
async checkForNewRecruit(currentTimestamp: number) {
|
||||
if (this.lastRecruitHandled === null) {
|
||||
this.lastRecruitHandled = 0;
|
||||
}
|
||||
if (currentTimestamp - this.lastRecruitHandled >= 1000 * 60 * 30 && this.adventurerForHire === null) {
|
||||
this.adventurerForHire = getNewAdventurerForHire(this.adventurersDatabase);
|
||||
}
|
||||
},
|
||||
recruitAction(adventurer: Adventurer|null): void {
|
||||
this.lastRecruitHandled = Number(new Date());
|
||||
this.adventurerForHire = null;
|
||||
if (adventurer === null) return;
|
||||
|
||||
this.adventurers[adventurer.id] = adventurer;
|
||||
for (const id in this.adventurersDatabase) {
|
||||
const databaseAdventurer = this.adventurersDatabase[id];
|
||||
if (databaseAdventurer.id === adventurer.id) {
|
||||
this.adventurersDatabase.splice(Number(id), 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
finalizeQuest(missive: Quest) {
|
||||
missive.progressPoints = 0;
|
||||
this.guild.gold += missive.goldReward;
|
||||
@@ -133,6 +159,8 @@ export default defineComponent({
|
||||
}
|
||||
this.adventurers = adventurers;
|
||||
|
||||
|
||||
|
||||
const missives = {} as { [key: string]: { [key: string]: Quest } };
|
||||
|
||||
for (const id in saveData.missives) {
|
||||
@@ -152,6 +180,21 @@ export default defineComponent({
|
||||
this.missives = missives;
|
||||
|
||||
this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
|
||||
|
||||
if (Object.keys(this.adventurers).length <= 0) {
|
||||
this.adventurerForHire = this.adventurersDatabase[0];
|
||||
return;
|
||||
}
|
||||
|
||||
if (saveData.currentlyForHireId !== null) {
|
||||
for (const id in this.adventurersDatabase) {
|
||||
const adventurer = this.adventurersDatabase[id];
|
||||
if (adventurer.id === saveData.currentlyForHireId) {
|
||||
this.adventurerForHire = adventurer;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
resetSave() {
|
||||
if (!confirm("You are about to wipe your save file. Are you sure?")) return;
|
||||
@@ -162,6 +205,7 @@ export default defineComponent({
|
||||
async mounted() {
|
||||
this.loadGame();
|
||||
this.quests = await loadAvailableQuests();
|
||||
this.adventurersDatabase = await loadAdventurersForHire(Object.keys(this.adventurers));
|
||||
|
||||
setInterval(() => {
|
||||
saveGame(new GameData(
|
||||
@@ -169,7 +213,8 @@ export default defineComponent({
|
||||
this.adventurers,
|
||||
this.missives,
|
||||
this.lastQuestGot,
|
||||
this.lastRecruitHandled
|
||||
this.lastRecruitHandled,
|
||||
this.adventurerForHire?.id ?? null
|
||||
)
|
||||
);
|
||||
}, 10*1000)
|
||||
@@ -179,6 +224,8 @@ export default defineComponent({
|
||||
|
||||
const now = Number(new Date());
|
||||
|
||||
this.checkForNewRecruit(now);
|
||||
|
||||
for (const id in this.lastQuestGot) {
|
||||
const lastTime = this.lastQuestGot[getFromString(id as QuestRank)];
|
||||
if (lastTime === null) this.lastQuestGot[getFromString(id as QuestRank)] = 0;
|
||||
@@ -290,14 +337,23 @@ nav {
|
||||
background-blend-mode: darken;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: white;
|
||||
filter: invert(1);
|
||||
transform: translateY(0.35rem);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
&.router-link-active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
+10
-1
@@ -9,13 +9,21 @@ export class GameData {
|
||||
missives: { [key: string]: { [key: string]: Quest } };
|
||||
lastQuestGot: { [key: string]: null | number };
|
||||
lastRecruitAction: null | number;
|
||||
currentlyForHireId: string|null;
|
||||
|
||||
constructor(guild: Guild, adventurers: { [key: string]: Adventurer }, missives: { [key: string]: { [key: string]: Quest } }, lastQuestGot: { [key: string]: null | number }, lastRecruitAction: null | number) {
|
||||
constructor(
|
||||
guild: Guild, adventurers: { [key: string]: Adventurer },
|
||||
missives: { [key: string]: { [key: string]: Quest } },
|
||||
lastQuestGot: { [key: string]: null | number },
|
||||
lastRecruitAction: null | number,
|
||||
currentlyForHireId: string|null = null
|
||||
) {
|
||||
this.guild = guild;
|
||||
this.adventurers = adventurers;
|
||||
this.missives = missives;
|
||||
this.lastQuestGot = lastQuestGot;
|
||||
this.lastRecruitAction = lastRecruitAction;
|
||||
this.currentlyForHireId = currentlyForHireId;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,6 +41,7 @@ export function saveGame(
|
||||
missives: data.missives,
|
||||
lastQuestGot: data.lastQuestGot,
|
||||
lastRecruitAction: data.lastRecruitAction,
|
||||
adventurerForHireId: data.currentlyForHireId,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
|
||||
:root {
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0 0 10rem;
|
||||
min-height: calc(100vh - 10rem);
|
||||
font-family: 'EB Garamond', serif;
|
||||
overflow-y: scroll;
|
||||
user-select: none;
|
||||
background-size: 30%;
|
||||
background: rgba(87, 50, 20, 0.75) url("/img/background/panels/plaster.png") repeat;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
|
||||
:root {
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0 0 10rem;
|
||||
min-height: calc(100vh - 10rem);
|
||||
font-family: 'EB Garamond', serif;
|
||||
overflow-y: scroll;
|
||||
user-select: none;
|
||||
background-size: 25rem;
|
||||
background-color: rgba(87, 50, 20, 0.45);
|
||||
background-image: url("/img/background/wood/cut_wood_background.png");
|
||||
background-blend-mode: darken;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.panel {
|
||||
&.pinned-paper {
|
||||
background-image: url("/img/quests/backgrounds/paper.png");
|
||||
position: relative;
|
||||
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
|
||||
|
||||
.nail {
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
|
||||
|
||||
&.small {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.top-left {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
&.top-right {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.note-paper {
|
||||
background-image: url("/img/background/paper/small_tile_paper.png");
|
||||
position: relative;
|
||||
filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
|
||||
border-image: url("/img/borders/metal_corner.png") 30 round;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import type {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||
import {AdventurerCapacityUpgrade} from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
|
||||
import formatGold from "@/classes/NumberMagic";
|
||||
|
||||
export class Guild {
|
||||
gold: number;
|
||||
@@ -30,7 +31,7 @@ export class Guild {
|
||||
} else {
|
||||
const newCost = this.getUpgradeCost();
|
||||
if (newCost === null) return;
|
||||
this.displayUpgradeCost = newCost;
|
||||
this.displayUpgradeCost = formatGold(newCost);
|
||||
this.upgradeCost = newCost;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
const formatter = new Intl.NumberFormat('en-US', {
|
||||
maximumFractionDigits: 3,
|
||||
// @ts-ignore - typescript doesn't know about this option for some godforsaken reason
|
||||
notation: "compact",
|
||||
useGrouping: true,
|
||||
});
|
||||
|
||||
export default function formatGold(number: number): string {
|
||||
return formatter.format(number);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import type {Adventurer} from "@/classes/Adventurer";
|
||||
|
||||
|
||||
/**
|
||||
* Get a random adventurer from the pool
|
||||
* @param adventurerPool
|
||||
* @returns {Adventurer|null} null if the pool is empty
|
||||
*/
|
||||
export function getNewAdventurerForHire(adventurerPool: Array<Adventurer>): Adventurer|null {
|
||||
if (adventurerPool.length <= 0) return null;
|
||||
const randomId = adventurerPool.length * Math.random() << 0;
|
||||
return adventurerPool[randomId];
|
||||
}
|
||||
@@ -18,14 +18,15 @@ export default defineComponent({
|
||||
name: "AdventurerList",
|
||||
components: {AdventurerMiniComponent},
|
||||
data: () => ({
|
||||
currentAdventurer: null as Adventurer|null
|
||||
currentAdventurer: null as Adventurer | null
|
||||
}),
|
||||
props: {
|
||||
adventurers: {
|
||||
type: Object as PropType<{[key: string]: Adventurer}>,
|
||||
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||
default() {
|
||||
return {} as {[key: string]: Adventurer};
|
||||
return {} as { [key: string]: Adventurer };
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -39,12 +40,13 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.slot {
|
||||
padding: 0;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: 2px solid #000;
|
||||
background-color: rgba(0,0,0, 0.2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
@@ -65,12 +65,10 @@ export default defineComponent({
|
||||
default() {
|
||||
return {} as {[key: string]: Adventurer};
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
print(a:string) {
|
||||
console.log(a);
|
||||
},
|
||||
closeSelect() {
|
||||
this.selection = false;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
:title="adventurer.name + (adventurer.busy ? ' (busy)' : '')"
|
||||
>
|
||||
<img :src="adventurer.portrait" :alt="adventurer.name" draggable="false">
|
||||
<div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{adventurer.level}}<span v-if="adventurer.isMaxLevel()">⇪</span></div>
|
||||
<div class="level" :title="adventurer.isMaxLevel() ? 'Max level' : ''">{{ adventurer.level }}<span
|
||||
v-if="adventurer.isMaxLevel()">⇪</span></div>
|
||||
<div class="exp"></div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -12,7 +13,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
import type {Adventurer} from "@/classes/Adventurer";
|
||||
import {defineComponent, type PropType } from "vue";
|
||||
import {defineComponent, type PropType} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "AdventurerTile",
|
||||
@@ -22,6 +23,7 @@ export default defineComponent({
|
||||
default() {
|
||||
return {} as Adventurer;
|
||||
},
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
@@ -49,19 +51,21 @@ export default defineComponent({
|
||||
overflow: clip;
|
||||
font-size: 5rem;
|
||||
line-height: 1;
|
||||
color: rgba(0,0,0, 0.75);
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
position: relative;
|
||||
|
||||
.level {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 1rem;
|
||||
min-width: 1rem;
|
||||
background-color: rgba(0,0,0, 0.75);
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
border-bottom-right-radius: 0.2rem;
|
||||
padding: 0.1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.exp {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -71,6 +75,7 @@ export default defineComponent({
|
||||
background-color: rgba(203, 33, 213, 0.75);
|
||||
transition: width 1s linear;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="changelog panel pinned-paper">
|
||||
<div class="nail top-left">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<div class="nail top-right">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<h1>Changelog</h1>
|
||||
<div class="changelog-entry" v-for="release in releases">
|
||||
<hr>
|
||||
<h2>Version {{ release.name }}</h2>
|
||||
<pre>{{ release.body }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: "ChangelogComponent",
|
||||
data: () => ({
|
||||
releases: [] as Array<any>,
|
||||
lastPage: 1,
|
||||
}),
|
||||
methods: {
|
||||
async getReleases(page: number): Promise<void> {
|
||||
const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
|
||||
.catch((e) => {
|
||||
return null;
|
||||
});
|
||||
|
||||
if (result === null) return;
|
||||
const json = await result.json();
|
||||
|
||||
|
||||
for (const release of json) {
|
||||
const version = {} as any;
|
||||
version.body = release.body.trim();
|
||||
version.name = release.name;
|
||||
if (release.body.length === 0) continue;
|
||||
this.releases.push(version);
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.getReleases(1);
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.changelog {
|
||||
padding-block: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
max-width: 45rem;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.changelog-entry {
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
width: calc(100% - 2rem);
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
pre {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'EB Garamond', serif;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,8 +40,8 @@
|
||||
</div>
|
||||
<h3>Rewards</h3>
|
||||
<div class="rewards">
|
||||
<span>Gold: <b>{{missive.goldReward}}</b></span>
|
||||
<span>Exp: <b>{{missive.expReward}}</b></span>
|
||||
<span>Gold: <b>{{ missive.goldReward }}</b></span>
|
||||
<span>Exp: <b>{{ missive.expReward }}</b></span>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
@@ -57,16 +57,18 @@ export default defineComponent({
|
||||
components: {AdventurerComponent},
|
||||
props: {
|
||||
missive: {
|
||||
type: Object as PropType<Quest|any>,
|
||||
type: Object as PropType<Quest | any>,
|
||||
default() {
|
||||
return {} as Quest;
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
adventurers: {
|
||||
type: Object as PropType<{[key: string]: Adventurer}>,
|
||||
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||
default() {
|
||||
return {} as {[key: string]: Adventurer};
|
||||
return {} as { [key: string]: Adventurer };
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data: () => {
|
||||
@@ -126,6 +128,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
z-index: -5;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -137,6 +140,7 @@ export default defineComponent({
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.15rem;
|
||||
margin: 0;
|
||||
@@ -148,6 +152,7 @@ export default defineComponent({
|
||||
margin: 0.5rem auto;
|
||||
position: relative;
|
||||
height: 1.25rem;
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -158,6 +163,7 @@ export default defineComponent({
|
||||
background-color: rgba(0, 128, 0, 0.65);
|
||||
transition: width 250ms linear;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -221,6 +227,7 @@ export default defineComponent({
|
||||
background-size: contain;
|
||||
opacity: 1;
|
||||
z-index: -4;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -241,6 +248,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 45%;
|
||||
height: 35%;
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
<template>
|
||||
<section class="upgrades">
|
||||
<h2>Upgrades</h2>
|
||||
<div class="upgrade">
|
||||
<span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
|
||||
<button
|
||||
v-if="guild.adventurerCapacity.nextLevelCost"
|
||||
:disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
|
||||
@click="upgradeAdventurerCapacity()"
|
||||
>
|
||||
Upgrade ({{guild.adventurerCapacity.nextLevelCost.toFixed(0)}} gold)
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="upgrades">
|
||||
<h2>Upgrades</h2>
|
||||
<div class="upgrade">
|
||||
<span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
|
||||
<button
|
||||
v-if="guild.adventurerCapacity.nextLevelCost"
|
||||
:disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
|
||||
@click="upgradeAdventurerCapacity()"
|
||||
>
|
||||
Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Guild } from "@/classes/Guild";
|
||||
import {Guild} from "@/classes/Guild";
|
||||
import {defineComponent, type PropType} from "vue";
|
||||
import formatGold from "../classes/NumberMagic";
|
||||
|
||||
export default defineComponent({
|
||||
name: "UpgradesList",
|
||||
@@ -25,10 +26,12 @@ export default defineComponent({
|
||||
type: Object as PropType<Guild>,
|
||||
default() {
|
||||
return new Guild(1, 0) as Guild;
|
||||
}
|
||||
},
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatGold,
|
||||
upgradeAdventurerCapacity(): void {
|
||||
if (!this.guild.adventurerCapacity) return;
|
||||
if (!this.guild.adventurerCapacity.nextLevelCost) return;
|
||||
@@ -47,11 +50,13 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
margin: 2rem 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.upgrade {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import './assets/main.css'
|
||||
import './assets/main.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -18,6 +18,11 @@ const router = createRouter({
|
||||
path: '/adventurers',
|
||||
name: 'adventurers',
|
||||
component: () => import('../views/AdventurerView.vue')
|
||||
},
|
||||
{
|
||||
path: '/technical',
|
||||
name: 'technical',
|
||||
component: () => import('../views/TechnicalView.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -1,43 +1,44 @@
|
||||
<template>
|
||||
<div class="adventurer-section">
|
||||
<section class="recruit">
|
||||
<h1>Applying adventurers</h1>
|
||||
<div class="adventurers">
|
||||
<div v-if="currentlyForHire">
|
||||
<adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
|
||||
<div class="decision">
|
||||
<div class="adventurer-section">
|
||||
<section class="recruit panel pinned-paper">
|
||||
<h1>Applying adventurers</h1>
|
||||
<div class="adventurers">
|
||||
<div v-if="adventurerForHire">
|
||||
<adventurer-tile class="hire-tile" :adventurer="adventurerForHire"/>
|
||||
<div class="decision">
|
||||
<span
|
||||
title="Hire"
|
||||
@click="hireAdventurer(currentlyForHire)"
|
||||
@click="hireAdventurer()"
|
||||
:class="{disabled: Object.keys(adventurers).length >= guild.adventurerCapacity.getAdventurerCapacity()}"
|
||||
>
|
||||
✔
|
||||
</span>
|
||||
<span
|
||||
:title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
|
||||
:class="{disabled: Object.keys(adventurers).length <= 0}"
|
||||
@click="dismissAdventurer()"
|
||||
>
|
||||
<span
|
||||
:title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
|
||||
:class="{disabled: Object.keys(adventurers).length <= 0}"
|
||||
@click="dismissAdventurer()"
|
||||
>
|
||||
✗
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>Noone applied as of now. Check back later!</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="collection panel pinned-paper">
|
||||
<h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
|
||||
{{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
|
||||
<div class="adventurers">
|
||||
<div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
|
||||
<AdventurerTile class="entry" :adventurer="adventurer"/>
|
||||
<b>{{ adventurer.name }}</b>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>Noone applied as of now. Check back later!</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="collection">
|
||||
<h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
|
||||
<div class="adventurers">
|
||||
<div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
|
||||
<AdventurerTile class="entry" :adventurer="adventurer" />
|
||||
<b>{{ adventurer.name }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -45,7 +46,7 @@ import type {PropType} from "vue";
|
||||
import {defineComponent} from "vue";
|
||||
import AdventurerTile from "@/components/AdventurerTile.vue";
|
||||
import type {Adventurer} from "@/classes/Adventurer";
|
||||
import { loadAdventurersForHire } from "@/GameData";
|
||||
import {loadAdventurersForHire} from "@/GameData";
|
||||
import type {Guild} from "@/classes/Guild";
|
||||
|
||||
export default defineComponent({
|
||||
@@ -53,7 +54,7 @@ export default defineComponent({
|
||||
components: {AdventurerTile},
|
||||
data: () => {
|
||||
return {
|
||||
currentlyForHire: null as Adventurer|null,
|
||||
currentlyForHire: null as Adventurer | null,
|
||||
adventurersForHire: [] as Array<Adventurer>,
|
||||
}
|
||||
},
|
||||
@@ -63,83 +64,34 @@ export default defineComponent({
|
||||
default() {
|
||||
return {} as Guild
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
adventurers: {
|
||||
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||
default() {
|
||||
return {} as { [key: string]: Adventurer };
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
lastRecruitTime: {
|
||||
type: Number as PropType<number>,
|
||||
adventurerForHire: {
|
||||
type: Object as PropType<Adventurer|null>,
|
||||
default() {
|
||||
return 0;
|
||||
return null;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getRandomAdventurer(): Adventurer|null {
|
||||
if (this.adventurersForHire.length <= 0) return null;
|
||||
const randomId = this.adventurersForHire.length * Math.random() << 0;
|
||||
return this.adventurersForHire[randomId];
|
||||
},
|
||||
getNewAdventurerForHire(): void {
|
||||
const adventurer = this.getRandomAdventurer();
|
||||
if (adventurer === null) {
|
||||
this.currentlyForHire = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.adventurers[adventurer.id] != null) {
|
||||
this.currentlyForHire = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentlyForHire = adventurer;
|
||||
window.localStorage.setItem("currentlyForHire", adventurer.id);
|
||||
|
||||
},
|
||||
hireAdventurer(adventurer: Adventurer|any): void {
|
||||
hireAdventurer(): void {
|
||||
if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
|
||||
this.adventurers[adventurer.id] = adventurer;
|
||||
this.currentlyForHire = null;
|
||||
window.localStorage.removeItem("currentlyForHire");
|
||||
this.$emit("recruitActionTaken", adventurer);
|
||||
this.$emit("recruitActionTaken", this.adventurerForHire);
|
||||
},
|
||||
dismissAdventurer() {
|
||||
if (Object.keys(this.adventurers).length <= 0) return;
|
||||
this.currentlyForHire = null;
|
||||
this.$emit("recruitActionTaken", null);
|
||||
window.localStorage.removeItem("currentlyForHire");
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
this.adventurersForHire = await loadAdventurersForHire(Object.keys(this.adventurers));
|
||||
|
||||
if (Object.keys(this.adventurers).length <= 0) {
|
||||
this.currentlyForHire = this.adventurersForHire[0];
|
||||
window.localStorage.setItem("currentlyForHire", this.adventurersForHire[0].id);
|
||||
return;
|
||||
}
|
||||
|
||||
const savedCurrentForHire = window.localStorage.getItem("currentlyForHire");
|
||||
if (savedCurrentForHire !== null) {
|
||||
for (const id in this.adventurersForHire) {
|
||||
const adventurer = this.adventurersForHire[id];
|
||||
if (adventurer.id === savedCurrentForHire) {
|
||||
this.currentlyForHire = adventurer;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const now = Number(new Date());
|
||||
|
||||
if (now - this.lastRecruitTime >= 1000 * 60 * 30 && this.currentlyForHire === null) {
|
||||
this.getNewAdventurerForHire();
|
||||
}
|
||||
|
||||
},
|
||||
emits: ["recruitActionTaken"]
|
||||
|
||||
@@ -148,22 +100,28 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.adventurer-section {
|
||||
padding-block: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
|
||||
section {
|
||||
max-width: 1280px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-block: 1rem;
|
||||
padding: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
max-width: 45rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.adventurers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -171,6 +129,7 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
.adventurer-tile {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -178,10 +137,12 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
.entry {
|
||||
height: 7rem;
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
b {
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
@@ -192,6 +153,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decision {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -199,17 +161,21 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
gap: 1rem;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: rgba(0,0,0, 0.5);
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hire-tile {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
|
||||
+55
-20
@@ -1,26 +1,35 @@
|
||||
<template>
|
||||
<main>
|
||||
<section class="title">
|
||||
<section class="title panel note-paper">
|
||||
<h1>Guild Master</h1>
|
||||
<h3>Adventurer's guild management game</h3>
|
||||
<small>v{{version}}</small>
|
||||
<small>v{{ version }}</small>
|
||||
</section>
|
||||
<section class="coffer">
|
||||
<p>Coffer: {{guild.gold}} gold</p>
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<p>Guild level: {{ guild.level }}</p>
|
||||
<button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
|
||||
<span>Upgrade guild level</span><br>
|
||||
<span>({{ guild.displayUpgradeCost }})</span>
|
||||
</button>
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<UpgradesList :guild="guild" />
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
|
||||
<section class="upgrades panel pinned-paper">
|
||||
<div class="nail top-left">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<div class="nail top-right">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<section class="coffer">
|
||||
<p>Coffer: {{ formatGold(guild.gold) }} gold</p>
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<p>Guild level: {{ guild.level }}</p>
|
||||
<button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
|
||||
<span>Upgrade guild level</span><br>
|
||||
<span>({{ guild.displayUpgradeCost }})</span>
|
||||
</button>
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<UpgradesList :guild="guild"/>
|
||||
</section>
|
||||
<section class="upgrade">
|
||||
<span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -31,9 +40,11 @@ import {Guild} from "@/classes/Guild";
|
||||
|
||||
import {version} from "../../package.json"
|
||||
import UpgradesList from "@/components/UpgradesList.vue";
|
||||
import formatGold from "../classes/NumberMagic";
|
||||
|
||||
export default defineComponent({
|
||||
name: "GuildView",
|
||||
methods: {formatGold},
|
||||
components: {UpgradesList},
|
||||
data: () => {
|
||||
return {
|
||||
@@ -44,46 +55,69 @@ export default defineComponent({
|
||||
guild: {
|
||||
type: Object as PropType<Guild>,
|
||||
default: () => new Guild(1, 0) as Guild,
|
||||
required: true,
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-block: 1rem;
|
||||
gap: 1rem;
|
||||
|
||||
.upgrades {
|
||||
max-width: 45rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2.5rem;
|
||||
padding-block: 2.5rem;
|
||||
text-align: center;
|
||||
|
||||
width: 100%;
|
||||
max-width: 45rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
line-height: 0.75;
|
||||
|
||||
white-space: pre-wrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
line-height: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
.coffer {
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.upgrade {
|
||||
text-align: center;
|
||||
|
||||
.wipe-save {
|
||||
display: inline-flex;
|
||||
font-weight: bold;
|
||||
@@ -91,6 +125,7 @@ export default defineComponent({
|
||||
color: #d52121;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
|
||||
+91
-87
@@ -1,89 +1,90 @@
|
||||
<template>
|
||||
<div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
|
||||
<h1>Rank S Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.S"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
|
||||
<h1>Rank A Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.A"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
|
||||
<h1>Rank B Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.B"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
|
||||
<h1>Rank C Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.C"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
|
||||
<h1>Rank D Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.D"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest((missive))"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
|
||||
<h1>Rank E Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.E"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="Object.keys(quests.F).length > 0">
|
||||
<h1>Rank F Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.F"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="guild" v-if="guild.level >= 7 && Object.keys(quests.S).length > 0">
|
||||
<h1>Rank S Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.S"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 6 && Object.keys(quests.A).length > 0">
|
||||
<h1>Rank A Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.A"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 5 && Object.keys(quests.B).length > 0">
|
||||
<h1>Rank B Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.B"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 4 && Object.keys(quests.C).length > 0">
|
||||
<h1>Rank C Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.C"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 3 && Object.keys(quests.D).length > 0">
|
||||
<h1>Rank D Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.D"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest((missive))"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="guild.level >= 2 && Object.keys(quests.E).length > 0">
|
||||
<h1>Rank E Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.E"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
<div class="guild" v-if="Object.keys(quests.F).length > 0">
|
||||
<h1>Rank F Quests</h1>
|
||||
<section class="missives">
|
||||
<QuestMissive
|
||||
v-for="(missive, key, index) in quests.F"
|
||||
:key="key"
|
||||
:adventurers="adventurers"
|
||||
:missive="missive"
|
||||
@click="finalizeQuest(missive)"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -103,18 +104,21 @@ export default defineComponent({
|
||||
default() {
|
||||
return new Guild(1, 0);
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
adventurers: {
|
||||
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||
default() {
|
||||
return {} as { [key: string]: Adventurer };
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
quests: {
|
||||
type: Object as PropType<{ [key: string]: Quest }>,
|
||||
default() {
|
||||
return {} as { [key: string]: Quest };
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
lastRecruitTime: {
|
||||
type: Number as PropType<number>,
|
||||
@@ -123,10 +127,10 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
},
|
||||
emits: [ 'finalizeQuest', 'wipeSave', 'recruitActionTaken'],
|
||||
emits: ['finalizeQuest', 'wipeSave', 'recruitActionTaken'],
|
||||
methods: {
|
||||
// This is a workaround for vue not reporting Quest as Quest in v-for
|
||||
finalizeQuest(quest: any|Quest): void {
|
||||
finalizeQuest(quest: any | Quest): void {
|
||||
if (quest.progressPoints < quest.maxProgress) return;
|
||||
this.$emit('finalizeQuest', quest)
|
||||
},
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<section class="technical-view">
|
||||
<div class="socials panel pinned-paper">
|
||||
<div class="nail top-left small">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<div class="nail top-right small">
|
||||
<img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
|
||||
</div>
|
||||
<h1>Socials</h1>
|
||||
<div class="links">
|
||||
<a class="link" href="https://discord.gg/j8KK5dGBps">
|
||||
<img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
|
||||
Discord
|
||||
</a>
|
||||
<a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
|
||||
<img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ChangelogComponent/>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "vue";
|
||||
import ChangelogComponent from "@/components/ChangelogComponent.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "TechnicalView",
|
||||
components: {ChangelogComponent},
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.technical-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-block: 1rem;
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.05rem;
|
||||
text-decoration: underline;
|
||||
font-size: 1.5rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user