@ -1,3 +1,31 @@ |
||||
# gw2raidplanner |
||||
|
||||
Organisateur de raid pour Guild Wars 2. |
||||
Organisateur de raid pour Guild Wars 2.# vue-project |
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. |
||||
|
||||
## Recommended IDE Setup |
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
||||
|
||||
## Customize configuration |
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/). |
||||
|
||||
## Project Setup |
||||
|
||||
```sh |
||||
npm install |
||||
``` |
||||
|
||||
### Compile and Hot-Reload for Development |
||||
|
||||
```sh |
||||
npm run dev |
||||
``` |
||||
|
||||
### Compile and Minify for Production |
||||
|
||||
```sh |
||||
npm run build |
||||
``` |
||||
|
||||
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<link rel="icon" href="/favicon.ico"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>GW2 Raid Planner</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"name": "vue-project", |
||||
"version": "0.0.0", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"bootstrap": "^5.2.2", |
||||
"sass": "^1.55.0", |
||||
"vue": "^3.2.41", |
||||
"vue-router": "^4.1.6" |
||||
}, |
||||
"devDependencies": { |
||||
"@vitejs/plugin-vue": "^3.1.2", |
||||
"vite": "^3.1.8" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,30 @@ |
||||
<script> |
||||
import Header from "./components/Header.vue" |
||||
import Container from "./components/Container.vue" |
||||
import Footer from "./components/Footer.vue" |
||||
|
||||
export default { |
||||
name: 'app', |
||||
components: { |
||||
Header, |
||||
Container, |
||||
Footer |
||||
}, |
||||
prop: { |
||||
team: Object |
||||
}, |
||||
data() { |
||||
return { |
||||
team: {} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<Header/> |
||||
|
||||
<Container :team="team" /> |
||||
|
||||
<Footer/> |
||||
</template> |
||||
@ -0,0 +1,49 @@ |
||||
// Import all of Bootstrap's CSS |
||||
@import "~bootstrap/scss/bootstrap"; |
||||
|
||||
/** |
||||
* Trick to keep footer at the bottom of the window if not enough text in the main part |
||||
* Thanks to Stephanie Eckles tutorial: https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/ |
||||
*/ |
||||
|
||||
body, #app { |
||||
min-height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
background-color: #272b2f; |
||||
} |
||||
|
||||
main, |
||||
aside { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-wrap: wrap; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
#container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
footer { |
||||
margin-top: auto; |
||||
font-size: .8rem; |
||||
} |
||||
|
||||
/** |
||||
* End of the trick |
||||
*/ |
||||
|
||||
h1 { |
||||
color: #FFCF84; |
||||
line-height: 4rem; |
||||
text-shadow: 2px 2px 4px $dark; |
||||
border-bottom: 2px solid #FFCF84; |
||||
} |
||||
|
||||
h2 { |
||||
color: #FFCF84; |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
<script> |
||||
import Sidebar from "./Sidebar.vue"; |
||||
|
||||
export default { |
||||
name: "Container", |
||||
props: ['team'], |
||||
components: { |
||||
Sidebar |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<main class="container-fluid"> |
||||
<div id="container" class="row"> |
||||
<Sidebar/> |
||||
|
||||
<div id="content" class="col-sm-10"> |
||||
<router-view :team="team" /> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
</template> |
||||
@ -0,0 +1,9 @@ |
||||
<script></script> |
||||
|
||||
<template> |
||||
<footer class="text-center bg-dark text-light small p-4"> |
||||
On an idea by <a href="https://twitch.tv/aeris22">aeris22</a><br> |
||||
Early development by <a href="https://norore.fr">Norore</a><br> |
||||
Images from <a href="guildwars2.com/">Guild Wars 2</a> game are the proprietary of <a href="https://www.arena.net/">Arena Net</a> |
||||
</footer> |
||||
</template> |
||||
@ -0,0 +1,10 @@ |
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
import router from './router.js' |
||||
import '~bootstrap/js/src/collapse.js' |
||||
|
||||
import './assets/style.scss' |
||||
|
||||
const app = createApp(App) |
||||
app.use(router) |
||||
app.mount('#app') |
||||
@ -0,0 +1,84 @@ |
||||
import { createRouter, createWebHistory } from 'vue-router' |
||||
import Home from './views/Home.vue' |
||||
import About from './views/About.vue' |
||||
import Help from './views/Help.vue' |
||||
|
||||
import ValeGuardian from './views/ValeGuardian.vue' |
||||
import SpiritWoods from './views/SpiritWoods.vue' |
||||
import Gorseval from './views/Gorseval.vue' |
||||
import Sabetha from './views/Sabetha.vue' |
||||
|
||||
import Slothasor from './views/Slothasor.vue' |
||||
import PrisonCamp from './views/PrisonCamp.vue' |
||||
import Matthias from './views/Matthias.vue' |
||||
|
||||
import Escort from './views/Escort.vue' |
||||
import KeepConstruct from './views/KeepConstruct.vue' |
||||
import TwistedCastle from './views/TwistedCastle.vue' |
||||
import Xera from './views/Xera.vue' |
||||
|
||||
import Cairn from './views/Cairn.vue' |
||||
import Mursaat from './views/MursaatOverseer.vue' |
||||
import Samarog from './views/Samarog.vue' |
||||
import Deimos from './views/Deimos.vue' |
||||
|
||||
import Desmina from './views/Desmina.vue' |
||||
import River from './views/River.vue' |
||||
import Statues from './views/Statues.vue' |
||||
import Dhuum from './views/Dhuum.vue' |
||||
|
||||
import ConjuredAmalgamate from './views/ConjuredAmalgamate.vue' |
||||
import Appraisal from './views/Appraisal.vue' |
||||
import Largos from './views/Largos.vue' |
||||
import Qadim from './views/Qadim.vue' |
||||
|
||||
import Gates from './views/Gates.vue' |
||||
import Sabir from './views/Sabir.vue' |
||||
import Adina from './views/Adina.vue' |
||||
import Peerless from './views/Peerless.vue' |
||||
|
||||
const routes = [ |
||||
{ path: '/', name: 'home', props: true, component: Home }, |
||||
{ path: '/about', name: 'about', component: About }, |
||||
{ path: '/help', name: 'help', component: Help }, |
||||
|
||||
{ path: '/vg', name: 'vg', props: true, component: ValeGuardian }, |
||||
{ path: '/spirit', name: 'spirit', props:true, component: SpiritWoods }, |
||||
{ path: '/gorseval', name: 'gorseval', props: true, component: Gorseval }, |
||||
{ path: '/sabetha', name: 'sabetha', props: true, component: Sabetha }, |
||||
|
||||
{ path: '/slothasor', name: 'slothasor', props: true, component: Slothasor }, |
||||
{ path: '/trio', name: 'trio', props: true, component: PrisonCamp }, |
||||
{ path: '/matthias', name: 'matthias', props: true, component: Matthias }, |
||||
|
||||
{ path: '/escort', name: 'escort', props: true, component: Escort }, |
||||
{ path: '/kc', name: 'kc', props: true, component: KeepConstruct }, |
||||
{ path: '/tc', name: 'tc', props: true, component: TwistedCastle }, |
||||
{ path: '/xera', name: 'xera', props: true, component: Xera }, |
||||
|
||||
{ path: '/cairn', name: 'cairn', props: true, component: Cairn }, |
||||
{ path: '/mo', name: 'mo', props: true, component: Mursaat }, |
||||
{ path: '/samarog', name: 'samarog', props: true, component: Samarog }, |
||||
{ path: '/deimos', name: 'deimos', props: true, component: Deimos }, |
||||
|
||||
{ path: '/desmina', name: 'desmina', props: true, component: Desmina }, |
||||
{ path: '/river', name: 'river', props: true, component: River }, |
||||
{ path: '/statues', name: 'statues', props: true, component: Statues }, |
||||
{ path: '/dhuum', name: 'dhuum', props: true, component: Dhuum }, |
||||
|
||||
{ path: '/amalgamate', name: 'amalgamate', props: true, component: ConjuredAmalgamate }, |
||||
{ path: '/appraisal', name: 'appraisal', props: true, component: Appraisal }, |
||||
{ path: '/largos', name: 'largos', props: true, component: Largos }, |
||||
{ path: '/qadim', name: 'qadim', props: true, component: Qadim }, |
||||
|
||||
{ path: '/gates', name: 'gates', props: true, component: Gates }, |
||||
{ path: '/sabir', name: 'sabir', props: true, component: Sabir }, |
||||
{ path: '/adina', name: 'adina', props: true, component: Adina }, |
||||
{ path: '/peerless', name: 'peerless', props: true, component: Peerless }, |
||||
] |
||||
const router = createRouter({ |
||||
history: createWebHistory(), |
||||
routes |
||||
}) |
||||
|
||||
export default router |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>About</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Cardinal Adina (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Sorting and Appraisal</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Cairn the Indomitable (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Conjured Amalgamate (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Deimos (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Soulless Horror (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Dhuum (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Siege of the Stronghold</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Gates of Ahdhashim</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Gorseval the Multifarious</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Help</h1> |
||||
</template> |
||||
@ -0,0 +1,18 @@ |
||||
<script> |
||||
export default { |
||||
name: 'Home', |
||||
props: ['team'] |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<h1>Home</h1> |
||||
|
||||
<h2>Team</h2> |
||||
|
||||
<button class="btn btn-primary">Add member</button> |
||||
|
||||
<ul> |
||||
<li v-for="member in team">{{ member.name }} {{ member.role }}</li> |
||||
</ul> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Keep Construct (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Twin Largos (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Matthias Gabrel</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Mursaat Overseer (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Qadim the Peerless (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Prison Camp</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Qadim (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>River of Souls</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Sabetha the Saboteur</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Cardinal Sabir (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Samarog (CM)</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Slothasor</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Spirit Woods</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Statues of Grenth</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Twisted Castle</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Vale Guardian</h1> |
||||
</template> |
||||
@ -0,0 +1,3 @@ |
||||
<template> |
||||
<h1>Xera</h1> |
||||
</template> |
||||
@ -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)), |
||||
'~bootstrap': fileURLToPath(new URL('node_modules/bootstrap', import.meta.url)) |
||||
} |
||||
} |
||||
}) |
||||