Compare commits
82 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aaf0eb6546 | |||
| c14a135c94 | |||
| 40d5a876b8 | |||
| 3b47ed1bed | |||
| fdc5d370de | |||
| 19c4a3f7ac | |||
| 2dad283de9 | |||
| 61ff80b69f | |||
| a185bc2153 | |||
| b213cae62b | |||
| 19d3dd5515 | |||
| 4f2d742284 | |||
| a0b7db1bf6 | |||
| c569a1110c | |||
| 56407505ea | |||
| 5e4a78530a | |||
| 7be4d2b9ca | |||
| eb4b0fba00 | |||
| 3f22b4511d | |||
| 6f777332a4 | |||
| 101ea0ffb5 | |||
| af11324fb7 | |||
| 6903774f97 | |||
| 1a9d2d0d9f | |||
| 359abd3ab4 | |||
| 1a3a493df4 | |||
| 0890efd1ec | |||
| 5b4278cf30 | |||
| 8665506160 | |||
| fdd0a8bbb1 | |||
| 8499782fdd | |||
| 124cc85d82 | |||
| 2c39bb9eef | |||
| e05f47e2cb | |||
| 630219a546 | |||
| 7386742c1b | |||
| b19ecd29f8 | |||
| 0bca77a3c7 | |||
| 6230d4b050 | |||
| 54a052bb23 | |||
| 9dcb403289 | |||
| fae1faded5 | |||
| e6654858a1 | |||
| b6e2a7e813 | |||
| c71eeda11f | |||
| 9ac13c4cae | |||
| 4e3f13e77e | |||
| 5f875af0a6 | |||
| 247a87b41c | |||
| 31bf1d8b8f | |||
| abca7e3cd1 | |||
| 11d2e831df | |||
| b89d041064 | |||
| 28295e69d5 | |||
| 52144735f7 | |||
| e979923712 | |||
| 189fe142d1 | |||
| 5acc51534d | |||
| 9fb64e7539 | |||
| 01152a9ad4 | |||
| f605ef0f08 | |||
| 2131d70d6c | |||
| 91d91f26f2 | |||
| 10cb19c10d | |||
| 8d8e669bb3 | |||
| 3864d042ab | |||
| fd01ac366d | |||
| 9ca26e2a7a | |||
| a7d1748c80 | |||
| c659f447ac | |||
| ede32735c3 | |||
| 6533dff020 | |||
| e85b28866a | |||
| e1159914c6 | |||
| 51ca2e0ef1 | |||
| c0f9edadef | |||
| 76fb24a948 | |||
| 6323b530ca | |||
| f4281c7c08 | |||
| 484fe4f2aa | |||
| ff5e5e2411 | |||
| 3ccab02cc8 |
@@ -0,0 +1,16 @@
|
|||||||
|
name: Build Vue
|
||||||
|
on:
|
||||||
|
release:
|
||||||
|
types: [published]
|
||||||
|
jobs:
|
||||||
|
build_vue:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
name: Build Vue
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- id: Build-Vue
|
||||||
|
uses: xRealNeon/VuePagesAction@1.0.1
|
||||||
|
with:
|
||||||
|
username: 'YouHaveTrouble'
|
||||||
|
reponame: 'GuildMaster'
|
||||||
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -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.
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
{
|
|
||||||
"ranks": {
|
|
||||||
"A": [
|
|
||||||
{
|
|
||||||
"title": "Ogre king",
|
|
||||||
"text": "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Devilish dungeon",
|
|
||||||
"text": "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Eater of Worlds",
|
|
||||||
"text": "A giant worm emerged from the ground and appears to be consuming the ground itself."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"B": [
|
|
||||||
{
|
|
||||||
"title": "Undead horde",
|
|
||||||
"text": "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Runaway prisoner",
|
|
||||||
"text": "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "The aristocrats",
|
|
||||||
"text": "Royalty wants an escort for one of their carriages."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"C": [
|
|
||||||
{
|
|
||||||
"title": "Scratchy, the butcher",
|
|
||||||
"text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Hobgnoblin subjugation",
|
|
||||||
"text": "Gnoblins evolved and are back for vengeance."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Holy",
|
|
||||||
"text": "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"D": [
|
|
||||||
{
|
|
||||||
"title": "Caravan escort",
|
|
||||||
"text": "Escort a merchant caravan."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Rare ore",
|
|
||||||
"text": "Obtain laudanium ore for town's blacksmith."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Demonic pests!",
|
|
||||||
"text": "Clear the fields from cabbage imps."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"E": [
|
|
||||||
{
|
|
||||||
"title": "Gnoblin subjugation",
|
|
||||||
"text": "Kill 3 gnoblins."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Phantom menace",
|
|
||||||
"text": "Exorcise ghosts out of someone's apartment."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Scratchy in peril",
|
|
||||||
"text": "Get Scratchy the cat from the tree safe onto the ground."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"F": [
|
|
||||||
{
|
|
||||||
"title": "Frog Frenzy",
|
|
||||||
"text": "Kill 10 demon frogs."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Rats!",
|
|
||||||
"text": "Get rid of the rats from someone's basement."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Herb gathering",
|
|
||||||
"text": "Collect medicinal herbs."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Big pile of rubble",
|
|
||||||
"text": "Tavern collapsed. Again. Help clean up the debris."
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"S": [
|
|
||||||
{
|
|
||||||
"title": "The Demon King",
|
|
||||||
"text": "Demon King has awoken and is a threat to whole existence. Heroes needed."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Scratchy, Destruction Incarnate",
|
|
||||||
"text": "Scratchy was reborn as a machine of pure destruction and needs to be stopped."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Jiggly Jungle",
|
|
||||||
"text": "A jungle south began rapidly expanding and experts think arson is our only option."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 304 KiB |
|
Before Width: | Height: | Size: 119 KiB |
@@ -1,33 +1,19 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Guild Master - Adventurer's guild management game</title>
|
<title>Guild Master - Adventurer's guild management game</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
|
||||||
<link rel="manifest" href="/manifest.json" />
|
|
||||||
<meta name="description"
|
|
||||||
content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
|
|
||||||
<meta property="twitter:title" content="Guild Master - Adventurer's guild management game"/>
|
|
||||||
<meta property="twitter:image" content="https://guildmaster.yht.one/img/app-icons/icon.png"/>
|
|
||||||
<meta property="twitter:description"
|
|
||||||
content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
|
|
||||||
<meta property="og:title" content="Guild Master - Adventurer's guild management game"/>
|
|
||||||
<meta property="og:url" content="https://guildmaster.yht.one/"/>
|
|
||||||
<meta property="og:description"
|
|
||||||
content="Guild Master is a browser game where you manage your own adventurer's guild!"/>
|
|
||||||
<meta property="og:image" content="https://guildmaster.yht.one/img/app-icons/icon.png"/>
|
|
||||||
<script type="module" crossorigin src="/assets/index-981baea9.js"></script>
|
|
||||||
<link rel="stylesheet" href="/assets/index-87987ee1.css">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<noscript>
|
<noscript>
|
||||||
This is a javascript game. You need to enable javascript for it to work.
|
This is a javascript game. You need to enable javascript for it to work.
|
||||||
</noscript>
|
</noscript>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,59 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Guild Master - Adventurer's guild management game",
|
|
||||||
"short_name": "Guild Master",
|
|
||||||
"theme_color": "#3C2114",
|
|
||||||
"background_color": "#d9c8b3",
|
|
||||||
"display": "standalone",
|
|
||||||
"scope": "./",
|
|
||||||
"start_url": "./",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-72x72.png",
|
|
||||||
"sizes": "72x72",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-96x96.png",
|
|
||||||
"sizes": "96x96",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-128x128.png",
|
|
||||||
"sizes": "128x128",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-144x144.png",
|
|
||||||
"sizes": "144x144",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-152x152.png",
|
|
||||||
"sizes": "152x152",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-192x192.png",
|
|
||||||
"sizes": "192x192",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon-384x384.png",
|
|
||||||
"sizes": "384x384",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "img/app-icons/icon.png",
|
|
||||||
"sizes": "512x512",
|
|
||||||
"type": "image/png",
|
|
||||||
"purpose": "maskable any"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "adventurers-guild",
|
||||||
|
"version": "0.6.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check build-only && cp -r CNAME dist/CNAME",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vueuse/components": "^9.13.0",
|
||||||
|
"sass": "^1.59.3",
|
||||||
|
"vue": "^3.2.45",
|
||||||
|
"vue-router": "^4.1.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^18.11.12",
|
||||||
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"eslint": "^8.36.0",
|
||||||
|
"eslint-plugin-vue": "^9.9.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"typescript": "~4.7.4",
|
||||||
|
"vite": "^4.0.0",
|
||||||
|
"vue-tsc": "^1.0.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "rincewind-diskworld",
|
||||||
|
"name": "Rincewind",
|
||||||
|
"portrait": "/img/adventurers/rincewind.png",
|
||||||
|
"attackExponent": 1.09
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "fran-sword-isekai",
|
||||||
|
"name": "Fran",
|
||||||
|
"portrait": "/img/adventurers/fran.png",
|
||||||
|
"attackExponent": 1.115
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "kazuma-konosuba",
|
||||||
|
"name": "Kazuma",
|
||||||
|
"portrait": "/img/adventurers/kazuma.png",
|
||||||
|
"attackExponent": 1.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "rein-beast-tamer",
|
||||||
|
"name": "Rein",
|
||||||
|
"portrait": "/img/adventurers/rein.png",
|
||||||
|
"attackExponent": 1.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "momon-overlord",
|
||||||
|
"name": "Momon",
|
||||||
|
"portrait": "/img/adventurers/momon.png",
|
||||||
|
"attackExponent": 1.11
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "goblin-slayer",
|
||||||
|
"name": "Goblin Slayer",
|
||||||
|
"portrait": "/img/adventurers/goblin-slayer.png",
|
||||||
|
"attackExponent": 1.1
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Ogre king",
|
||||||
|
"text": "Ogres have chosen a new king through democratic vote. They all voted for the strongest ogre."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Devilish dungeon",
|
||||||
|
"text": "New dungeon was discovered. It needs to be mapped and explored so lower rank adventurers can enter."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Eater of Worlds",
|
||||||
|
"text": "A giant worm emerged from the ground and appears to be consuming the ground itself."
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Undead horde",
|
||||||
|
"text": "Due to the spillage of necromancy potion at nearby graveyard we now have an undead army on our doorstep."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Runaway prisoner",
|
||||||
|
"text": "During the last prison guard strike a prisoner managed to escape. Bring them back to their cell."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "The aristocrats",
|
||||||
|
"text": "Royalty wants an escort for one of their carriages."
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Scratchy, the butcher",
|
||||||
|
"text": "Scratchy turned evil and is terrorizing its victims. Put a stop to it!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Hobgnoblin subjegation",
|
||||||
|
"text": "Gnoblins evolved and are back for vengeance."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Holy",
|
||||||
|
"text": "Gnoblins summoned their machine god and it started going haywire on everything around it. Destroy it!"
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Caravan escort",
|
||||||
|
"text": "Escort a merchant caravan."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Rare ore",
|
||||||
|
"text": "Obtain laudanium ore for town's blacksmith."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Demonic pests!",
|
||||||
|
"text": "Clear the fields from cabbage imps."
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Gnoblin subjegation",
|
||||||
|
"text": "Kill 3 gnoblins."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Phantom menace",
|
||||||
|
"text": "Exorcise ghosts out of someone's apartment."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Scratchy in peril",
|
||||||
|
"text": "Get Scratchy the cat from the tree safe onto the ground."
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "Frog Frenzy",
|
||||||
|
"text": "Kill 10 demon frogs."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Rats!",
|
||||||
|
"text": "Get rid of the rats from someone's basement."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Herb gathering",
|
||||||
|
"text": "Collect medicinal herbs."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Big pile of rubble",
|
||||||
|
"text": "Tavern collapsed. Again. Help clean up the debris."
|
||||||
|
}
|
||||||
|
]
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"title": "The Demon King",
|
||||||
|
"text": "Demon King has awoken and is a threat to whole existence. Heroes needed."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Scratchy, Destruction Incarnate",
|
||||||
|
"text": "Scratchy was reborn as a machine of pure destruction and needs to be stopped."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Jiggly Jungle",
|
||||||
|
"text": "A jungle south began rapidly expanding and experts think arson is our only option."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 208 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 4.9 MiB |
|
After Width: | Height: | Size: 5.6 MiB |
|
After Width: | Height: | Size: 5.3 MiB |
|
After Width: | Height: | Size: 4.9 MiB |
|
After Width: | Height: | Size: 406 KiB |
|
After Width: | Height: | Size: 470 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 3.6 KiB 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 |
|
After Width: | Height: | Size: 1018 KiB |
|
After Width: | Height: | Size: 947 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 474 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 200 KiB |
@@ -0,0 +1,373 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {RouterLink, RouterView} from 'vue-router'</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<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"
|
||||||
|
:adventurerForHire="adventurerForHire"
|
||||||
|
@finalizeQuest="finalizeQuest($event)"
|
||||||
|
@wipeSave="resetSave()"
|
||||||
|
@recruitActionTaken="recruitAction($event)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {getQuestWithRewards, Quest} from "@/classes/Quest";
|
||||||
|
import {Guild} from "@/classes/Guild";
|
||||||
|
import {getFromString, QuestRank} from "@/classes/QuestRank";
|
||||||
|
import {
|
||||||
|
GameData,
|
||||||
|
loadAdventurersForHire,
|
||||||
|
loadAvailableQuests,
|
||||||
|
loadGame,
|
||||||
|
removeAlreadyHiredAdventurers,
|
||||||
|
saveGame
|
||||||
|
} from "@/GameData";
|
||||||
|
import type {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||||
|
import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
|
||||||
|
import {getNewAdventurerForHire} from "@/classes/Recruitment";
|
||||||
|
import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "GuildView",
|
||||||
|
data: () => ({
|
||||||
|
guild: new Guild(1, 500),
|
||||||
|
lastQuestGot: {
|
||||||
|
S: null as null | number,
|
||||||
|
A: null as null | number,
|
||||||
|
B: null as null | number,
|
||||||
|
C: null as null | number,
|
||||||
|
D: null as null | number,
|
||||||
|
E: null as null | number,
|
||||||
|
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: {
|
||||||
|
F: {} as { [key: string]: Quest },
|
||||||
|
E: {} as { [key: string]: Quest },
|
||||||
|
D: {} as { [key: string]: Quest },
|
||||||
|
C: {} as { [key: string]: Quest },
|
||||||
|
B: {} as { [key: string]: Quest },
|
||||||
|
A: {} as { [key: string]: Quest },
|
||||||
|
S: {} as { [key: string]: Quest },
|
||||||
|
} as { [key: string]: { [key: string]: Quest } },
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
async updateMissives() {
|
||||||
|
for (const missiveRank in this.missives) {
|
||||||
|
const rank = getFromString(missiveRank as QuestRank);
|
||||||
|
for (const missiveId in this.missives[rank.toString() as QuestRank]) {
|
||||||
|
const missive = this.missives[rank.toString()][missiveId];
|
||||||
|
if (missive.adventurers.length <= 0) {
|
||||||
|
missive.progressPoints = 0;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (missive.progressPoints >= missive.maxProgress) continue;
|
||||||
|
for (const adventurerId in missive.adventurers) {
|
||||||
|
const adventurer = missive.adventurers[adventurerId];
|
||||||
|
const attack = adventurer.getAttack();
|
||||||
|
missive.progressPoints = Math.min(missive.progressPoints + attack, missive.maxProgress);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
async checkForNewRecruit(currentTimestamp: number) {
|
||||||
|
|
||||||
|
if (this.lastRecruitHandled == null) {
|
||||||
|
this.lastRecruitHandled = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(this.adventurers).length <= 0) {
|
||||||
|
this.adventurerForHire = this.adventurersDatabase[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;
|
||||||
|
for (const adventurerId in missive.adventurers) {
|
||||||
|
const adventurer = missive.adventurers[adventurerId];
|
||||||
|
adventurer.addExp(missive.expReward / missive.adventurers.length);
|
||||||
|
adventurer.busy = false;
|
||||||
|
}
|
||||||
|
missive.adventurers = [];
|
||||||
|
delete this.missives[missive.rank.toString() as QuestRank][missive.id];
|
||||||
|
},
|
||||||
|
getRandomQuest(rank: QuestRank): Quest | null {
|
||||||
|
const keys = Object.keys(this.quests[rank]);
|
||||||
|
if (keys.length <= 0) return null;
|
||||||
|
const questsForRank = this.quests[rank] as { [key: string]: Quest };
|
||||||
|
const randomId = keys.length * Math.random() << 0;
|
||||||
|
const randomIdString = keys[randomId] as string;
|
||||||
|
return getQuestWithRewards(questsForRank[randomIdString], this.guild.expModifier.getModifier());
|
||||||
|
},
|
||||||
|
createMissive(questToAdd: Quest, rank: QuestRank) {
|
||||||
|
const quest = JSON.parse(JSON.stringify(questToAdd));
|
||||||
|
const newId = Math.random().toString(16).slice(2).toString();
|
||||||
|
quest.id = newId;
|
||||||
|
this.missives[rank][newId] = quest;
|
||||||
|
},
|
||||||
|
loadGame() {
|
||||||
|
const saveData = loadGame();
|
||||||
|
if (saveData === null) return;
|
||||||
|
|
||||||
|
this.lastQuestGot = saveData.lastQuestGot;
|
||||||
|
|
||||||
|
const guildUpgrades = {} as { [key: string]: GuildUpgrade };
|
||||||
|
if (saveData.guild.adventurerCapacity) {
|
||||||
|
guildUpgrades.adventurerCapacity = new AdventurerCapacityUpgrade(saveData.guild.adventurerCapacity.level);
|
||||||
|
}
|
||||||
|
if (saveData.guild.expModifier) {
|
||||||
|
guildUpgrades.expModifier = new QuestExpUpgrade(saveData.guild.expModifier.level);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.guild = new Guild(saveData.guild.level, saveData.guild.gold, guildUpgrades);
|
||||||
|
|
||||||
|
const adventurers = {} as { [key: string]: Adventurer };
|
||||||
|
|
||||||
|
for (const id in saveData.adventurers) {
|
||||||
|
const data = saveData.adventurers[id];
|
||||||
|
try {
|
||||||
|
const adventurer = new Adventurer(
|
||||||
|
data.id,
|
||||||
|
data.name,
|
||||||
|
data.portrait,
|
||||||
|
data.attackExponent ?? 1.1,
|
||||||
|
data.level ?? 1,
|
||||||
|
data.exp ?? 0,
|
||||||
|
data.prestige ?? 0,
|
||||||
|
);
|
||||||
|
adventurer.busy = data.busy;
|
||||||
|
adventurers[data.id] = adventurer;
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.adventurers = adventurers;
|
||||||
|
|
||||||
|
const missives = {} as { [key: string]: { [key: string]: Quest } };
|
||||||
|
|
||||||
|
for (const id in saveData.missives) {
|
||||||
|
const missiveRank = {} as { [key: string]: Quest }
|
||||||
|
for (const questId in saveData.missives[id]) {
|
||||||
|
const data = saveData.missives[id][questId];
|
||||||
|
const quest = new Quest(questId, getFromString(data.rank), data.title, data.text, data.maxProgress, data.expReward, data.goldReward);
|
||||||
|
quest.progressPoints = data.progressPoints;
|
||||||
|
if (data.adventurers.length > 0) {
|
||||||
|
quest.adventurers.push(this.adventurers[data.adventurers[0].id])
|
||||||
|
}
|
||||||
|
missiveRank[questId] = quest;
|
||||||
|
}
|
||||||
|
missives[id] = missiveRank;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.missives = missives;
|
||||||
|
|
||||||
|
this.lastRecruitHandled = saveData.lastRecruitAction ?? 0;
|
||||||
|
|
||||||
|
if (saveData.adventurerForHireId != null) {
|
||||||
|
for (const id in this.adventurersDatabase) {
|
||||||
|
const adventurer = this.adventurersDatabase[id];
|
||||||
|
if (adventurer.id === saveData.adventurerForHireId) {
|
||||||
|
this.adventurerForHire = adventurer;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetSave() {
|
||||||
|
if (!confirm("You are about to wipe your save file. Are you sure?")) return;
|
||||||
|
window.localStorage.removeItem("savedGame");
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this.quests = await loadAvailableQuests();
|
||||||
|
this.adventurersDatabase = await loadAdventurersForHire();
|
||||||
|
this.loadGame();
|
||||||
|
|
||||||
|
this.adventurersDatabase = removeAlreadyHiredAdventurers(this.adventurersDatabase, this.adventurers);
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
saveGame(new GameData({
|
||||||
|
adventurers: this.adventurers,
|
||||||
|
guild: this.guild,
|
||||||
|
missives: this.missives,
|
||||||
|
lastQuestGot: this.lastQuestGot,
|
||||||
|
lastRecruitAction: this.lastRecruitHandled,
|
||||||
|
adventurerForHireId: this.adventurerForHire?.id ?? null,
|
||||||
|
}));
|
||||||
|
}, 10 * 1000)
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
this.updateMissives();
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.F) >= 12 * 1000) {
|
||||||
|
this.lastQuestGot.F = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.F]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.F);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.F);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 2) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.E) >= 20 * 1000) {
|
||||||
|
this.lastQuestGot.E = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.E]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.E);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.E);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 3) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.D) >= 50 * 1000) {
|
||||||
|
this.lastQuestGot.D = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.D]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.D);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.D);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 4) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.C) >= 2 * 60 * 1000) {
|
||||||
|
this.lastQuestGot.C = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.C]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.C);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.C);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 5) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.B) >= 2 * 60 * 1000) {
|
||||||
|
this.lastQuestGot.B = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.B]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.B);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.B);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 6) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.A) >= 5 * 60 * 1000) {
|
||||||
|
this.lastQuestGot.A = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.A]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.A);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.A);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.guild.level < 6) return;
|
||||||
|
if (Number(now) - Number(this.lastQuestGot.S) >= 30 * 60 * 1000) {
|
||||||
|
this.lastQuestGot.S = now;
|
||||||
|
const keys = Object.keys(this.missives[QuestRank.S]);
|
||||||
|
if (keys.length >= 5) return;
|
||||||
|
const quest = this.getRandomQuest(QuestRank.S);
|
||||||
|
if (quest !== null) {
|
||||||
|
this.createMissive(quest, QuestRank.S);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 250);
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
header {
|
||||||
|
line-height: 1;
|
||||||
|
max-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: max-content;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background-size: 200px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
import {Guild} from "@/classes/Guild";
|
||||||
|
import {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {Quest} from "@/classes/Quest";
|
||||||
|
import {getFromString, QuestRank} from "@/classes/QuestRank";
|
||||||
|
|
||||||
|
export class GameData {
|
||||||
|
guild: Guild;
|
||||||
|
adventurers: { [key: string]: Adventurer };
|
||||||
|
missives: { [key: string]: { [key: string]: Quest } };
|
||||||
|
lastQuestGot: { [key: string]: null | number };
|
||||||
|
lastRecruitAction: null | number;
|
||||||
|
adventurerForHireId: string | null;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
data: any,
|
||||||
|
) {
|
||||||
|
this.guild = data.guild ?? new Guild(1, 0);
|
||||||
|
this.adventurers = data.adventurers ?? {} as { [key: string]: Adventurer };
|
||||||
|
this.missives = data.missives ?? {} as { [key: string]: { [key: string]: Quest } };
|
||||||
|
this.lastQuestGot = data.lastQuestGot ?? {} as { [key: string]: null | number };
|
||||||
|
this.lastRecruitAction = data.lastRecruitAction ?? null;
|
||||||
|
this.adventurerForHireId = data.adventurerForHireId ?? null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save the game to local storage
|
||||||
|
*/
|
||||||
|
export function saveGame(
|
||||||
|
data: GameData
|
||||||
|
): void {
|
||||||
|
console.debug("Saving game...");
|
||||||
|
window.localStorage.setItem("savedGame", JSON.stringify({
|
||||||
|
guild: data.guild,
|
||||||
|
adventurers: data.adventurers,
|
||||||
|
missives: data.missives,
|
||||||
|
lastQuestGot: data.lastQuestGot,
|
||||||
|
lastRecruitAction: data.lastRecruitAction,
|
||||||
|
adventurerForHireId: data.adventurerForHireId,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loadGame(): GameData | null {
|
||||||
|
const savedGame = window.localStorage.getItem("savedGame");
|
||||||
|
if (!savedGame) return null;
|
||||||
|
const parsedGame = JSON.parse(savedGame);
|
||||||
|
console.debug("Loading game...");
|
||||||
|
return new GameData(parsedGame);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loadAvailableQuests(): Promise<{ [key: string]: { [key: string]: Quest } }> {
|
||||||
|
const quests = {
|
||||||
|
S: {} as { [key: string]: Quest },
|
||||||
|
A: {} as { [key: string]: Quest },
|
||||||
|
B: {} as { [key: string]: Quest },
|
||||||
|
C: {} as { [key: string]: Quest },
|
||||||
|
D: {} as { [key: string]: Quest },
|
||||||
|
E: {} as { [key: string]: Quest },
|
||||||
|
F: {} as { [key: string]: Quest },
|
||||||
|
} as { [key: string]: { [key: string]: Quest } };
|
||||||
|
|
||||||
|
for (const rank in quests) {
|
||||||
|
const response = await fetch(`data/quests/Rank${rank}.json`);
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.error("Failed to load quests");
|
||||||
|
alert("Failed to load quests. Please try refreshing the page.");
|
||||||
|
return quests;
|
||||||
|
}
|
||||||
|
const questData = await response.json();
|
||||||
|
|
||||||
|
let id = 0;
|
||||||
|
for (const quest of questData) {
|
||||||
|
id++;
|
||||||
|
quests[rank.toString()][id] = new Quest(
|
||||||
|
id.toString(),
|
||||||
|
getFromString(rank as QuestRank),
|
||||||
|
quest.title,
|
||||||
|
quest.text,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return quests;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loadAdventurersForHire(): Promise<Array<Adventurer>> {
|
||||||
|
const response = await fetch("data/adventurers.json");
|
||||||
|
if (response.status !== 200) {
|
||||||
|
console.error("Failed to load adventurers");
|
||||||
|
alert("Failed to load adventurers. Please try refreshing the page.");
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const adventurerData = await response.json();
|
||||||
|
|
||||||
|
const adventurers: Array<Adventurer> = [];
|
||||||
|
for (const adventurer of adventurerData) {
|
||||||
|
adventurers.push(new Adventurer(
|
||||||
|
adventurer.id,
|
||||||
|
adventurer.name,
|
||||||
|
adventurer.portrait,
|
||||||
|
adventurer.attackExponent,
|
||||||
|
adventurer.level,
|
||||||
|
adventurer.exp,
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
return adventurers;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeAlreadyHiredAdventurers(
|
||||||
|
adventurers: Array<Adventurer>,
|
||||||
|
adventurersHired: { [key: string]: Adventurer }
|
||||||
|
): Array<Adventurer> {
|
||||||
|
const adventurersForHire: Array<Adventurer> = [];
|
||||||
|
for (const adventurer of adventurers) {
|
||||||
|
if (adventurersHired[adventurer.id]) continue;
|
||||||
|
adventurersForHire.push(adventurer);
|
||||||
|
}
|
||||||
|
return adventurersForHire;
|
||||||
|
}
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: 'EB Garamond', serif;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid rgb(0, 0, 0);
|
||||||
|
transition: filter 0.05s linear;
|
||||||
|
white-space: nowrap;
|
||||||
|
&.metal {
|
||||||
|
background-image: url("/img/borders/metal_strip.png");
|
||||||
|
background-size: contain;
|
||||||
|
background-blend-mode: darken;
|
||||||
|
background-repeat: repeat;
|
||||||
|
color: #dcdcdc;
|
||||||
|
}
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
filter: brightness(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
export class Adventurer {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
portrait: string;
|
||||||
|
level: number;
|
||||||
|
exp: number;
|
||||||
|
attackExponent: number;
|
||||||
|
prestige: number;
|
||||||
|
busy: boolean;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
id: string,
|
||||||
|
name: string,
|
||||||
|
portrait: string,
|
||||||
|
attackExponent: number,
|
||||||
|
level: number = 1,
|
||||||
|
exp: number = 0,
|
||||||
|
prestige: number = 0
|
||||||
|
) {
|
||||||
|
this.id = id;
|
||||||
|
this.name = name;
|
||||||
|
this.portrait = portrait;
|
||||||
|
this.attackExponent = attackExponent;
|
||||||
|
this.level = level;
|
||||||
|
this.exp = exp;
|
||||||
|
this.prestige = prestige;
|
||||||
|
this.busy = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
levelUp(): void {
|
||||||
|
this.exp = 0;
|
||||||
|
this.level += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
prestigeUp(): void {
|
||||||
|
this.level = 1;
|
||||||
|
this.exp = 0;
|
||||||
|
this.prestige += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
canLevelUp(): boolean {
|
||||||
|
if (this.level >= this.getMaxLevel()) return false;
|
||||||
|
return this.exp >= this.getNextLevelExpRequirement();
|
||||||
|
}
|
||||||
|
|
||||||
|
canPrestigeUp(): boolean {
|
||||||
|
if (this.busy) return false;
|
||||||
|
if (this.level < getMaxLevelForPrestige(this.prestige)) return false;
|
||||||
|
return this.prestige < 5
|
||||||
|
}
|
||||||
|
|
||||||
|
getNextLevelExpRequirement(): number {
|
||||||
|
return Math.max(1, Math.floor((3 * Math.pow(1.2, this.level - 1)) * Math.pow(1.025, this.level - 1)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the percentage of exp to the next level
|
||||||
|
*/
|
||||||
|
getExpPercentage(): number {
|
||||||
|
return (this.exp / this.getNextLevelExpRequirement()) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
addExp(exp: number): void {
|
||||||
|
if (this.isMaxLevel()) return;
|
||||||
|
this.exp += exp;
|
||||||
|
if (this.canLevelUp()) {
|
||||||
|
this.levelUp();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getAttack(): number {
|
||||||
|
const scalingFactor = Math.pow(1.05, this.level - 1);
|
||||||
|
return (2 * scalingFactor) * Math.pow(this.attackExponent, this.level - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
getDPS(): number {
|
||||||
|
return this.getAttack() * 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMaxLevel(): number {
|
||||||
|
return getMaxLevelForPrestige(this.prestige);
|
||||||
|
}
|
||||||
|
|
||||||
|
isMaxLevel(): boolean {
|
||||||
|
return this.level >= this.getMaxLevel();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMaxLevelForPrestige(prestige: number): number {
|
||||||
|
return 25 + (prestige * 5);
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import type {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||||
|
import AdventurerCapacityUpgrade from "@/classes/guildUpgrades/AdventurerCapacityUpgrade";
|
||||||
|
import {formatGold} from "@/classes/NumberMagic";
|
||||||
|
import QuestExpUpgrade from "@/classes/guildUpgrades/QuestExpUpgrade";
|
||||||
|
|
||||||
|
|
||||||
|
export class Guild {
|
||||||
|
gold: number;
|
||||||
|
level: number;
|
||||||
|
displayUpgradeCost: number|string;
|
||||||
|
upgradeCost: number|null = null;
|
||||||
|
adventurerCapacity: AdventurerCapacityUpgrade;
|
||||||
|
expModifier: QuestExpUpgrade;
|
||||||
|
|
||||||
|
constructor(level: number, gold: number, upgrades: {[index:string]: GuildUpgrade} = {}) {
|
||||||
|
this.gold = gold;
|
||||||
|
this.level = level;
|
||||||
|
const rawDisplayUpgradeCost = this.getUpgradeCost();
|
||||||
|
this.displayUpgradeCost = rawDisplayUpgradeCost ? formatGold(rawDisplayUpgradeCost) : "Max level";
|
||||||
|
this.upgradeCost = this.getUpgradeCost();
|
||||||
|
|
||||||
|
this.adventurerCapacity = upgrades.adventurerCapacity as AdventurerCapacityUpgrade ?? new AdventurerCapacityUpgrade();
|
||||||
|
this.expModifier = upgrades.expModifier as QuestExpUpgrade ?? new QuestExpUpgrade();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
upgrade(): void {
|
||||||
|
const cost = this.getUpgradeCost();
|
||||||
|
if (cost === null) return;
|
||||||
|
if (this.gold < cost) return;
|
||||||
|
this.gold -= cost;
|
||||||
|
this.level += 1;
|
||||||
|
if (this.level >= 7) {
|
||||||
|
this.displayUpgradeCost = "Max level";
|
||||||
|
this.upgradeCost = null;
|
||||||
|
} else {
|
||||||
|
const newCost = this.getUpgradeCost();
|
||||||
|
if (newCost === null) return;
|
||||||
|
this.displayUpgradeCost = formatGold(newCost);
|
||||||
|
this.upgradeCost = newCost;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getUpgradeCost(): number|null {
|
||||||
|
return upgradeCosts[this.level] ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
isMaxLevel(): boolean {
|
||||||
|
return this.level >= 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const upgradeCosts = {
|
||||||
|
"1": 1000,
|
||||||
|
"2": 2500,
|
||||||
|
"3": 5000,
|
||||||
|
"4": 10000,
|
||||||
|
"5": 25000,
|
||||||
|
"6": 100000,
|
||||||
|
"7": 750000,
|
||||||
|
} as {[index:string]: number}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export class GuildUpgrade {
|
||||||
|
|
||||||
|
level: number = 1;
|
||||||
|
nextLevelCost: number | null = null;
|
||||||
|
guildLevelRequirement: number = 1;
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
const goldFormatter = new Intl.NumberFormat('en-US', {
|
||||||
|
maximumFractionDigits: 3,
|
||||||
|
// @ts-ignore - typescript doesn't know about this option for some godforsaken reason
|
||||||
|
notation: "compact",
|
||||||
|
useGrouping: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const damageFormatter = new Intl.NumberFormat('en-US', {
|
||||||
|
maximumFractionDigits: 2,
|
||||||
|
// @ts-ignore - typescript doesn't know about this option for some godforsaken reason
|
||||||
|
notation: "compact",
|
||||||
|
});
|
||||||
|
|
||||||
|
export function formatGold(number: number): string {
|
||||||
|
return goldFormatter.format(number);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDamage(number: number): string {
|
||||||
|
return damageFormatter.format(number);
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {QuestRank} from "@/classes/QuestRank";
|
||||||
|
|
||||||
|
export class Quest {
|
||||||
|
id: string;
|
||||||
|
rank: QuestRank;
|
||||||
|
title: string;
|
||||||
|
text: string;
|
||||||
|
adventurers: Array<Adventurer>;
|
||||||
|
progressPoints: number;
|
||||||
|
maxProgress: number;
|
||||||
|
expReward: number;
|
||||||
|
goldReward: number;
|
||||||
|
|
||||||
|
constructor(id: string, rank: QuestRank, title: string, text: string, maxProgress: number, expReward: number, goldReward: number) {
|
||||||
|
this.id = id;
|
||||||
|
this.rank = rank;
|
||||||
|
this.title = title;
|
||||||
|
this.text = text;
|
||||||
|
this.maxProgress = maxProgress;
|
||||||
|
this.expReward = expReward;
|
||||||
|
this.goldReward = goldReward;
|
||||||
|
this.progressPoints = 0;
|
||||||
|
this.adventurers = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
getPercentProgress(): number {
|
||||||
|
return Math.round(this.progressPoints / this.maxProgress * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate rewards for a quest and return it
|
||||||
|
* @param quest
|
||||||
|
* @param expModifier - multiplification modifier for the exp reward
|
||||||
|
*/
|
||||||
|
export function getQuestWithRewards(quest: Quest, expModifier: number = 1) {
|
||||||
|
|
||||||
|
let maxProgress = 1;
|
||||||
|
|
||||||
|
switch (quest.rank) {
|
||||||
|
case QuestRank.S:
|
||||||
|
// at level 30 adventurers have ~6513 dps, this will take 30 seconds on level 30
|
||||||
|
maxProgress = 195390;
|
||||||
|
break;
|
||||||
|
case QuestRank.A:
|
||||||
|
// at level 25 adventurers have ~2051 dps, this will take 15 seconds on level 25
|
||||||
|
maxProgress = 30770;
|
||||||
|
break;
|
||||||
|
case QuestRank.B:
|
||||||
|
// at level 20 adventurers have ~645 dps, this will take 15 seconds on level 20
|
||||||
|
maxProgress = 9690;
|
||||||
|
break;
|
||||||
|
case QuestRank.C:
|
||||||
|
// at level 15 adventurers have ~203 dps, this will take 15 seconds on level 15
|
||||||
|
maxProgress = 3045;
|
||||||
|
break;
|
||||||
|
case QuestRank.D:
|
||||||
|
// at level 10 adventurers have ~64 dps, this will take 15 seconds on level 10
|
||||||
|
maxProgress = 960;
|
||||||
|
break;
|
||||||
|
case QuestRank.E:
|
||||||
|
// at level 5 adventurers have ~20 dps, this will take 15 seconds on level 5
|
||||||
|
maxProgress = 300;
|
||||||
|
break;
|
||||||
|
case QuestRank.F:
|
||||||
|
// at level 1 adventurers have ~8 dps, this will take 15 seconds on level 1
|
||||||
|
maxProgress = 120;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let goldReward = Math.floor(maxProgress/6);
|
||||||
|
let expReward = Math.floor((Math.floor(maxProgress/120) - maxProgress/1000) * expModifier);
|
||||||
|
|
||||||
|
// add some randomness to the rewards
|
||||||
|
goldReward = Math.floor(randomNumberBetween(goldReward * 0.95, goldReward * 1.1));
|
||||||
|
expReward = Math.max(1, Math.floor(randomNumberBetween(expReward * 0.95, expReward * 1.2)));
|
||||||
|
|
||||||
|
return new Quest(quest.id, quest.rank, quest.title, quest.text, maxProgress, expReward, goldReward);
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomNumberBetween(min: number, max: number) {
|
||||||
|
return Math.random() * (max - min) + min;
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
export enum QuestRank {
|
||||||
|
S = "S",
|
||||||
|
A = "A",
|
||||||
|
B = "B",
|
||||||
|
C = "C",
|
||||||
|
D = "D",
|
||||||
|
E = "E",
|
||||||
|
F = "F",
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getFromString(string: keyof typeof QuestRank): QuestRank {
|
||||||
|
return QuestRank[string];
|
||||||
|
}
|
||||||
@@ -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];
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||||
|
|
||||||
|
export default class AdventurerCapacityUpgrade extends GuildUpgrade {
|
||||||
|
constructor(level: number = 1) {
|
||||||
|
super();
|
||||||
|
this.level = level;
|
||||||
|
this.nextLevelCost = this.getCostForLevel(this.level);
|
||||||
|
this.guildLevelRequirement = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
upgrade(): void {
|
||||||
|
this.level += 1;
|
||||||
|
this.nextLevelCost = this.getCostForLevel(this.level);
|
||||||
|
}
|
||||||
|
|
||||||
|
getCostForLevel(level: number): number {
|
||||||
|
const scalingFactor = Math.pow(1.25, level - 1);
|
||||||
|
return Math.floor(1500 * scalingFactor * Math.pow(level, 1.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the number of adventurers the guild can have
|
||||||
|
*/
|
||||||
|
getAdventurerCapacity(): number {
|
||||||
|
return 1 + this.level ;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import {GuildUpgrade} from "@/classes/GuildUpgrade";
|
||||||
|
|
||||||
|
export default class QuestExpUpgrade extends GuildUpgrade {
|
||||||
|
constructor(level: number = 1) {
|
||||||
|
super();
|
||||||
|
this.level = level;
|
||||||
|
this.nextLevelCost = this.getCostForLevel(this.level);
|
||||||
|
this.guildLevelRequirement = 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
upgrade(): void {
|
||||||
|
this.level += 1;
|
||||||
|
this.nextLevelCost = this.getCostForLevel(this.level);
|
||||||
|
}
|
||||||
|
|
||||||
|
getCostForLevel(level: number): number {
|
||||||
|
const scalingFactor = Math.pow(1.15, level - 1);
|
||||||
|
return Math.floor(4000000 * scalingFactor * Math.pow(level, 1.1));
|
||||||
|
}
|
||||||
|
|
||||||
|
getModifier(): number {
|
||||||
|
return 1 + (this.level * 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<dialog ref="modal" class="adventurer-details" v-if="adventurer">
|
||||||
|
<button class="close" @click="$emit('closeButtonClicked')">✗</button>
|
||||||
|
|
||||||
|
<div class="adventurer-portrait">
|
||||||
|
<img :src="adventurer.portrait" alt="" draggable="false"/>
|
||||||
|
</div>
|
||||||
|
<span class="name">{{ adventurer.name }}</span>
|
||||||
|
<div class="adventurer-data">
|
||||||
|
<p>Level: {{ adventurer.level }} / {{ adventurer.getMaxLevel() }}</p>
|
||||||
|
<p>Prestige level: {{ adventurer.prestige }}</p>
|
||||||
|
|
||||||
|
<p>Exp: {{ adventurer.exp }} / {{ adventurer.getNextLevelExpRequirement() }}</p>
|
||||||
|
<p>DPS: {{ formatDamage(adventurer.getDPS()) }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="adventurer-upgrades">
|
||||||
|
<button
|
||||||
|
class="button metal"
|
||||||
|
:disabled="!adventurer.canPrestigeUp()"
|
||||||
|
:title="!adventurer.canPrestigeUp() ? 'Adventurer needs to be at max level to prestige up' : ''"
|
||||||
|
@click="() => {
|
||||||
|
if (adventurer === null) return;
|
||||||
|
if (!adventurer.canPrestigeUp()) return;
|
||||||
|
adventurer.prestigeUp();
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
Prestige up
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
import {formatDamage} from "../classes/NumberMagic";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "AdventurerDetails",
|
||||||
|
methods: {formatDamage},
|
||||||
|
props: {
|
||||||
|
adventurer: {
|
||||||
|
type: Object as PropType<Adventurer | null>,
|
||||||
|
default() {
|
||||||
|
return null as Adventurer | null;
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const refs = this.$refs as any;
|
||||||
|
refs.modal.showModal();
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.adventurer-details {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 10rem;
|
||||||
|
max-width: 45rem;
|
||||||
|
background-image: url("/img/background/paper/small_tile_paper.png");
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.25rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 3rem;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ab0707;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font-family: 'EB Garamond', serif;
|
||||||
|
transition: color 0.05s linear;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid #ff0000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventurer-portrait {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 15rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventurer-data {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin: 0;
|
||||||
|
width: calc(50% - 1rem);
|
||||||
|
text-align: center;
|
||||||
|
padding-inline: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div class="slots">
|
||||||
|
<button class="slot" v-for="adventurer in adventurers" :key="adventurer.id">
|
||||||
|
<AdventurerMiniComponent
|
||||||
|
:adventurer="currentAdventurer"
|
||||||
|
:all-adventurers="adventurers"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
import AdventurerMiniComponent from "@/components/AdventurerMiniComponent.vue";
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "AdventurerList",
|
||||||
|
components: {AdventurerMiniComponent},
|
||||||
|
data: () => ({
|
||||||
|
currentAdventurer: null as Adventurer | null
|
||||||
|
}),
|
||||||
|
props: {
|
||||||
|
adventurers: {
|
||||||
|
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||||
|
default() {
|
||||||
|
return {} as { [key: string]: Adventurer };
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.slots {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
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);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { vOnClickOutside } from '@vueuse/components'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<AdventurerTile
|
||||||
|
v-if="adventurer"
|
||||||
|
:adventurer="adventurer"
|
||||||
|
@click="() => {
|
||||||
|
$emit('freeAdventurer', adventurer.id)
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<article
|
||||||
|
class="select"
|
||||||
|
v-else
|
||||||
|
@click="() => {
|
||||||
|
if (Object.keys(allAdventurers).length <= 0) return;
|
||||||
|
selection = !selection;
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span>+</span>
|
||||||
|
</article>
|
||||||
|
<div class="selection" v-if="selection" v-on-click-outside="closeSelect">
|
||||||
|
<button
|
||||||
|
class="slot"
|
||||||
|
v-for="adventurer in allAdventurers"
|
||||||
|
:key="adventurer.id"
|
||||||
|
:class="{busy: adventurer.busy}"
|
||||||
|
@click="() => {
|
||||||
|
if (adventurer.busy) return;
|
||||||
|
$emit('hireAdventurer', adventurer.id);
|
||||||
|
selection = false;
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<AdventurerTile
|
||||||
|
:adventurer="adventurer"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import AdventurerTile from "@/components/AdventurerTile.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "AdventurerMiniComponent",
|
||||||
|
components: {AdventurerTile},
|
||||||
|
emits: [ "freeAdventurer", "hireAdventurer" ],
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
selection: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
adventurer: {
|
||||||
|
type: Object as PropType<Adventurer|null|any>,
|
||||||
|
default() {
|
||||||
|
return null as Adventurer|null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
allAdventurers: {
|
||||||
|
type: Object as PropType<{[key: string]: Adventurer}>,
|
||||||
|
default() {
|
||||||
|
return {} as {[key: string]: Adventurer};
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeSelect() {
|
||||||
|
this.selection = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.selection {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: max-content;
|
||||||
|
max-width: 17rem;
|
||||||
|
transform: translateX(-50%) translateY(104%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: rgba(0,0,0, 0.2);
|
||||||
|
z-index: 2;
|
||||||
|
cursor: default;
|
||||||
|
max-height: 12rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
.slot {
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
border-color: #000;
|
||||||
|
background-color: transparent;
|
||||||
|
background-blend-mode: darken;
|
||||||
|
transition: background-color 0.25s linear, filter 0.25s linear;
|
||||||
|
&.busy {
|
||||||
|
filter: grayscale(1);
|
||||||
|
background-color: rgba(0,0,0, 0.6);
|
||||||
|
&:hover {
|
||||||
|
cursor: not-allowed;
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<article
|
||||||
|
class="adventurer"
|
||||||
|
: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="exp"></div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "AdventurerTile",
|
||||||
|
props: {
|
||||||
|
adventurer: {
|
||||||
|
type: Object as PropType<Adventurer>,
|
||||||
|
default() {
|
||||||
|
return {} as Adventurer;
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
expProgress: "0%",
|
||||||
|
}),
|
||||||
|
watch: {
|
||||||
|
adventurer: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (adventurer: Adventurer) {
|
||||||
|
this.expProgress = adventurer.getExpPercentage() + "%";
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.adventurer === undefined) return;
|
||||||
|
this.expProgress = this.adventurer.getExpPercentage() + "%";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.adventurer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: clip;
|
||||||
|
font-size: 5rem;
|
||||||
|
line-height: 1;
|
||||||
|
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);
|
||||||
|
border-bottom-right-radius: 0.2rem;
|
||||||
|
padding: 0.1rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exp {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: v-bind(expProgress);
|
||||||
|
height: 3.5%;
|
||||||
|
background-color: rgba(203, 33, 213, 0.75);
|
||||||
|
transition: width 1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
<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><span>Version {{ release.name }}</span><small class="date">{{ timeFormat.format(release.createdAt) }}</small></h2>
|
||||||
|
<pre>{{ release.body }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ChangelogComponent",
|
||||||
|
data: () => ({
|
||||||
|
timeFormat: Intl.DateTimeFormat(Intl.DateTimeFormat().resolvedOptions().locale, {
|
||||||
|
year: "numeric",
|
||||||
|
month: "numeric",
|
||||||
|
day: "numeric",
|
||||||
|
}),
|
||||||
|
releases: [] as Array<{body: string, name: string, createdAt: Date}>,
|
||||||
|
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;
|
||||||
|
version.createdAt = new Date(release.published_at);
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin: 0;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
color: rgba(0,0,0, 0.6);
|
||||||
|
font-size: 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>
|
||||||
@@ -0,0 +1,260 @@
|
|||||||
|
<template>
|
||||||
|
<article
|
||||||
|
class="missive"
|
||||||
|
:class="{done: missive.maxProgress <= missive.progressPoints}"
|
||||||
|
>
|
||||||
|
<div class="parchment">
|
||||||
|
<img src="/img/quests/backgrounds/dirty_paper.png" alt="parchment">
|
||||||
|
</div>
|
||||||
|
<div class="stain" v-if="stain">
|
||||||
|
<img src="/img/quests/overlays/water_stain.png" alt="stain">
|
||||||
|
</div>
|
||||||
|
<div class="drink-stain" v-if="drinkStain.exists">
|
||||||
|
<img src="/img/quests/overlays/drink_stain.png" alt="stain">
|
||||||
|
</div>
|
||||||
|
<h2>{{ missive.title }}</h2>
|
||||||
|
<p>{{ missive.text }}</p>
|
||||||
|
<div class="slots">
|
||||||
|
<button class="slot">
|
||||||
|
<AdventurerComponent
|
||||||
|
:adventurer="missive.adventurers[0]"
|
||||||
|
:all-adventurers="adventurers"
|
||||||
|
@hire-adventurer="(id) => {
|
||||||
|
adventurers[id].busy = true;
|
||||||
|
missive.adventurers[0] = adventurers[id];
|
||||||
|
}"
|
||||||
|
@free-adventurer="(id) => {
|
||||||
|
if (missive.progressPoints >= missive.maxProgress) return;
|
||||||
|
adventurers[id].busy = false;
|
||||||
|
missive.adventurers.splice(0, 1);
|
||||||
|
if (missive.adventurers.length <= 0) {
|
||||||
|
missive.progressPoints = 0;
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="progressWrap">
|
||||||
|
<span class="progress"></span>
|
||||||
|
<span class="percentage">{{ progressPercentage }}</span>
|
||||||
|
</div>
|
||||||
|
<h3>Rewards</h3>
|
||||||
|
<div class="rewards">
|
||||||
|
<span>Gold: <b>{{ missive.goldReward }}</b></span>
|
||||||
|
<span>Exp: <b>{{ missive.expReward }}</b></span>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type {Quest} from "@/classes/Quest";
|
||||||
|
import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "QuestMissive",
|
||||||
|
components: {AdventurerComponent},
|
||||||
|
props: {
|
||||||
|
missive: {
|
||||||
|
type: Object as PropType<Quest | any>,
|
||||||
|
default() {
|
||||||
|
return {} as Quest;
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
adventurers: {
|
||||||
|
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||||
|
default() {
|
||||||
|
return {} as { [key: string]: Adventurer };
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
progressPercentage: "0%",
|
||||||
|
stain: false,
|
||||||
|
drinkStain: {
|
||||||
|
exists: false,
|
||||||
|
offsetX: "0%",
|
||||||
|
offsetY: "0%",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateProgress() {
|
||||||
|
if (this.missive === undefined) return;
|
||||||
|
const progress = (this.missive.progressPoints / this.missive.maxProgress * 100).toFixed(2);
|
||||||
|
this.progressPercentage = `${progress}%`;
|
||||||
|
},
|
||||||
|
randomNumber(min: number, max: number) {
|
||||||
|
return Math.random() * (max - min) + min;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateProgress();
|
||||||
|
this.stain = Math.random() < 0.35;
|
||||||
|
this.drinkStain.exists = Math.random() < 0.15;
|
||||||
|
if (this.drinkStain.exists) {
|
||||||
|
this.drinkStain.offsetX = `${this.randomNumber(-1, 1) * 100}%`;
|
||||||
|
this.drinkStain.offsetY = `${this.randomNumber(-1, 1) * 100}%`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
missive: {
|
||||||
|
handler() {
|
||||||
|
this.updateProgress();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.missive {
|
||||||
|
width: min(100%, 14rem);
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid #000;
|
||||||
|
padding: 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.parchment {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -5;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressWrap {
|
||||||
|
width: 80%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
position: relative;
|
||||||
|
height: 1.25rem;
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
width: v-bind(progressPercentage);
|
||||||
|
background-color: rgba(0, 128, 0, 0.65);
|
||||||
|
transition: width 250ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percentage {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rewards {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.done {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
content: "✔";
|
||||||
|
font-size: 5rem;
|
||||||
|
color: green;
|
||||||
|
transform: translate(45%, -40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slots {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
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);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stain {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: contain;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: -4;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
filter: grayscale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drink-stain {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.45;
|
||||||
|
z-index: -1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 45%;
|
||||||
|
height: 35%;
|
||||||
|
filter: grayscale(0.8);
|
||||||
|
transform: translate(v-bind("drinkStain.offsetX"), v-bind("drinkStain.offsetY"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<template>
|
||||||
|
<section class="upgrades">
|
||||||
|
<h2>Upgrades</h2>
|
||||||
|
<div class="upgrade">
|
||||||
|
<span>Adventurer capacity (level {{ guild.adventurerCapacity.level }})</span>
|
||||||
|
<small>Increases the maximum amount of recruited adventurers</small>
|
||||||
|
<button
|
||||||
|
class="button metal"
|
||||||
|
v-if="guild.adventurerCapacity.nextLevelCost"
|
||||||
|
:disabled="guild.gold < guild.adventurerCapacity.nextLevelCost"
|
||||||
|
@click="upgradeAdventurerCapacity()"
|
||||||
|
>
|
||||||
|
Upgrade ({{ formatGold(guild.adventurerCapacity.nextLevelCost) }} gold)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="upgrade" v-if="guild.level >= guild.expModifier.guildLevelRequirement">
|
||||||
|
<span>Quest exp modifier (level {{ guild.expModifier.level }})</span>
|
||||||
|
<small>Increases exp from newly offered quests by 10% per level</small>
|
||||||
|
<button
|
||||||
|
class="button metal"
|
||||||
|
v-if="guild.expModifier.nextLevelCost"
|
||||||
|
:disabled="guild.gold < guild.expModifier.nextLevelCost"
|
||||||
|
@click="upgradeQuestExpModifier()"
|
||||||
|
>
|
||||||
|
Upgrade ({{ formatGold(guild.expModifier.nextLevelCost) }} gold)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {Guild} from "@/classes/Guild";
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
import {formatGold} from "@/classes/NumberMagic";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "UpgradesList",
|
||||||
|
props: {
|
||||||
|
guild: {
|
||||||
|
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;
|
||||||
|
if (this.guild.gold < this.guild.adventurerCapacity.nextLevelCost) return;
|
||||||
|
this.guild.gold -= this.guild.adventurerCapacity.nextLevelCost;
|
||||||
|
this.guild.adventurerCapacity.upgrade();
|
||||||
|
},
|
||||||
|
upgradeQuestExpModifier(): void {
|
||||||
|
if (!this.guild.expModifier) return;
|
||||||
|
if (!this.guild.expModifier.nextLevelCost) return;
|
||||||
|
if (this.guild.gold < this.guild.expModifier.nextLevelCost) return;
|
||||||
|
this.guild.gold -= this.guild.expModifier.nextLevelCost;
|
||||||
|
this.guild.expModifier.upgrade();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.upgrades {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
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;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: min(25rem, 100%);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.2rem;
|
||||||
|
small {
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
import './assets/main.scss'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import {createRouter, createWebHashHistory} from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'guild',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/quests',
|
||||||
|
name: 'quests',
|
||||||
|
component: () => import('../views/QuestView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/adventurers',
|
||||||
|
name: 'adventurers',
|
||||||
|
component: () => import('../views/AdventurerView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/technical',
|
||||||
|
name: 'technical',
|
||||||
|
component: () => import('../views/TechnicalView.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="adventurer-section">
|
||||||
|
<AdventurerDetails
|
||||||
|
:adventurer="selectedAdventurer"
|
||||||
|
v-if="selectedAdventurer !== null"
|
||||||
|
@closeButtonClicked="selectedAdventurer = null"
|
||||||
|
|
||||||
|
/>
|
||||||
|
<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()"
|
||||||
|
: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>
|
||||||
|
</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>
|
||||||
|
<small>Click an adventurer to see details about them</small>
|
||||||
|
<div class="adventurers">
|
||||||
|
<div
|
||||||
|
class="adventurer-tile"
|
||||||
|
v-for="adventurer in adventurers"
|
||||||
|
:key="adventurer.id"
|
||||||
|
@click="selectedAdventurer = adventurer"
|
||||||
|
>
|
||||||
|
<AdventurerTile class="entry" :adventurer="adventurer"/>
|
||||||
|
<b>{{ adventurer.name }}</b>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type {PropType} from "vue";
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import AdventurerTile from "@/components/AdventurerTile.vue";
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import type {Guild} from "@/classes/Guild";
|
||||||
|
import AdventurerDetails from "@/components/AdventurerDetails.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "RecruitView",
|
||||||
|
components: {AdventurerDetails, AdventurerTile},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
currentlyForHire: null as Adventurer | null,
|
||||||
|
adventurersForHire: [] as Array<Adventurer>,
|
||||||
|
selectedAdventurer: null as Adventurer | null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
guild: {
|
||||||
|
type: Object as PropType<Guild>,
|
||||||
|
default() {
|
||||||
|
return {} as Guild
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
adventurers: {
|
||||||
|
type: Object as PropType<{ [key: string]: Adventurer }>,
|
||||||
|
default() {
|
||||||
|
return {} as { [key: string]: Adventurer };
|
||||||
|
},
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
adventurerForHire: {
|
||||||
|
type: Object as PropType<Adventurer | null>,
|
||||||
|
default() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hireAdventurer(): void {
|
||||||
|
if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
|
||||||
|
this.$emit("recruitActionTaken", this.adventurerForHire);
|
||||||
|
},
|
||||||
|
dismissAdventurer() {
|
||||||
|
if (Object.keys(this.adventurers).length <= 0) return;
|
||||||
|
this.$emit("recruitActionTaken", null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
emits: ["recruitActionTaken"]
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.adventurer-section {
|
||||||
|
padding-block: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
section {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
max-width: 45rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection {
|
||||||
|
small {
|
||||||
|
font-size: 1rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventurers {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.adventurer-tile {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.entry {
|
||||||
|
height: 7rem;
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
line-height: 1;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hire-tile {
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<section class="title panel note-paper">
|
||||||
|
<h1>Guild Master</h1>
|
||||||
|
<h3>Adventurer's guild management game</h3>
|
||||||
|
<small>v{{ version }}</small>
|
||||||
|
</section>
|
||||||
|
<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
|
||||||
|
class="button metal"
|
||||||
|
:disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true"
|
||||||
|
@click="guild.upgrade()"
|
||||||
|
>
|
||||||
|
<span>Upgrade guild level </span>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
import type {PropType} from "vue";
|
||||||
|
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 {
|
||||||
|
version: version,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
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-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;
|
||||||
|
margin-block: 1rem;
|
||||||
|
color: #d52121;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<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">
|
||||||
|
import {defineComponent, type PropType} from "vue";
|
||||||
|
import AdventurerComponent from "@/components/AdventurerMiniComponent.vue";
|
||||||
|
import type {Adventurer} from "@/classes/Adventurer";
|
||||||
|
import type {Quest} from "@/classes/Quest";
|
||||||
|
import {Guild} from "@/classes/Guild";
|
||||||
|
import QuestMissive from "@/components/QuestMissive.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "QuestView",
|
||||||
|
components: {QuestMissive, AdventurerComponent},
|
||||||
|
props: {
|
||||||
|
guild: {
|
||||||
|
type: Object as PropType<Guild>,
|
||||||
|
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>,
|
||||||
|
default() {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: ['finalizeQuest', 'wipeSave', 'recruitActionTaken'],
|
||||||
|
methods: {
|
||||||
|
// This is a workaround for vue not reporting Quest as Quest in v-for
|
||||||
|
finalizeQuest(quest: any | Quest): void {
|
||||||
|
if (quest.progressPoints < quest.maxProgress) return;
|
||||||
|
this.$emit('finalizeQuest', quest)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.guild {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.missives {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.node.json",
|
||||||
|
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.config.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
base: "/"
|
||||||
|
})
|
||||||