Joururi/spellsaurus
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ Added app router and index/spell pages

Browse Source
This commit is contained in:
Alexis
2020-03-12 19:03:28 +01:00
parent 28a2bf7090
commit d7a432527b
13 changed files with 205 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -1746,9 +1746,9 @@
}
},
"acorn": {
"version": "6.4.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
"integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
"integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
"dev": true
},
"acorn-jsx": {
@@ -11859,6 +11859,12 @@
}
}
},
"vue-router": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
"integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==",
"dev": true
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

1
package.json
View File

@@ -39,6 +39,7 @@
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {

2
public/index.html
View File

@@ -11,7 +11,7 @@
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="srs"></div>
<!-- built files will be auto injected -->
</body>
</html>

26
src/app.vue
View File

@@ -1,38 +1,28 @@
<template>
<div id="app">
<div id="srs">
<navbar></navbar>
<spellcard
v-bind:name="'Soleil Pourri'"
v-bind:description="[`Le lanceur projette un petit astre vert jusqu’à 20m autour de lui. L’astre brûle l’air environnant, nécrosant rapidement les formes de vies dans un rayon de 100m.`, `Toutes les créatures dans la portée de l’astre (sauf le lanceur) doivent réussir un jet de CON avec un malus de -30. Si elles échouent, elles subissent 3D20 dégâts radiants et 2D20 dégâts nécrotiques. Elles perdent également 1D10 PV max.`]"
v-bind:schools="['Lumomancie', 'Nécromancie']"
v-bind:level="'30'"
v-bind:charge="'2'"
v-bind:ingredients="`Volonté, Geste`"
v-bind:cost="'-90'"
v-bind:variables="[{name: 'x', description: 'lol'}]"
/>
<navigation/>
<router-view/>
</div>
</template>
<script>
import spellcard from './components/spells/spell-card.vue'
import navbar from "./components/global/navbar.vue";
import navbar from "./components/global/navbar/navbar";
export default {
name: 'app',
components: {
spellcard,
navbar
'navigation': navbar
}
}
</script>
<style lang="scss">
#app {
#srs {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

2
src/assets/scss/_global.scss
View File

@@ -10,7 +10,7 @@ html {
height: 100%;
-webkit-overflow-scrolling: touch;
line-height: 1.15;
color: $dark-gray;
color: $primary--base;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

16
src/assets/scss/_variables.scss
View File

@@ -1,12 +1,20 @@
// COLOURS
//// COLOURS
// Global colours
$white: #FFF;
$black: #000;
$dark-gray: #222;
$primary--base: #2c3e50;
$primary--blue: #599EF4;
$secondary--blue: #355F91;
$dark-blue: #2c3e50;
$card-border-inner: #f5ebd8;
$valid: #6AC47B;
$warning: #F7A758;
$alert: #F44E4E;
// Spell colours
$spell-card--innerborder: #f5ebd8;
// FONT FAMILY
$font-family: 'Overpass', sans-serif;

32
src/components/global/navbar.vue
View File

@@ -1,32 +0,0 @@
<template>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Sorts</a></li>
<li><a href="#">Personnages</a></li>
</ul>
</nav>
</template>
<script>
export default {
}
</script>
<style lang="scss">
nav {
padding: 1.5rem 2.5rem;
font-size: .9rem;
color: $white;
background: $black;
text-transform: uppercase;
box-shadow: 0 0 .5rem rgba($black, .75);
ul {
display: flex;
li {
margin-right: 2.5rem;
}
}
}
</style>

72
src/components/global/navbar/navbar.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<nav>
<ul v-if="links.length != 0">
<li v-for="(link, index) in links" :key="index">
<router-link v-bind:to="link.url">{{ link.text }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
name: 'navbar',
data() {
return {
links: [
{
id: 0,
text: 'Accueil',
url: '/',
},
{
id: 1,
text: 'Sortilèges',
url: '/spells',
},
]
}
}
}
</script>
<style lang="scss">
nav {
padding-left: 2rem;
font-size: .9rem;
color: $black;
background: $white;
text-transform: uppercase;
// box-shadow: 0 0 .5rem rgba($black, .75);
ul {
display: flex;
li {
a {
position: relative;
margin-right: 1rem;
padding: 1.5rem;
display: block;
&:after {
position: absolute;
display: block;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 3px;
content: '';
background: $black;
transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&:hover {
&:after {
width: 80%;
transition: width .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
}
}
}
}
</style>

30
src/components/spells/spell-card.vue
View File

@@ -1,5 +1,5 @@
<template>
<article class="spell-card">
<article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
<div class="content">
<header>
<h3>{{ name }}</h3>
@@ -16,7 +16,7 @@
<var>{{ level }}</var>
</div>
<ul class="schools">
<li v-for="school of schools" :key="school">
<li v-for="(school, index) in schools" :key="index">
{{ school }}
</li>
</ul>
@@ -39,7 +39,7 @@
</section>
<hr>
<section class="spell-description">
<p v-for="line of description" :key="line">
<p v-for="(line, index) of description" :key="index">
{{ line }}
</p>
</section>
@@ -47,7 +47,7 @@
<footer v-if="variables">
<div class="label">Variables</div>
<div class="variables">
<div v-for="variable in variables" :key="variable" class="xyz">
<div v-for="(variable, index) in variables" :key="index" class="xyz">
<span>{{ variable.name }}</span>
<var>{{ variable.description }}</var>
</div>
@@ -58,8 +58,9 @@
</template>
<script>
export default {
name: "spell-card",
name: 'spell-card',
props: {
name: String,
description: Array,
@@ -69,8 +70,19 @@ export default {
charge: String,
cost: String,
variables: Array,
}
},
data() {
return {
isFlipped: false,
}
},
methods: {
toggleCard: async function() {
this.isFlipped = !this.isFlipped;
}
},
}
</script>
<style lang="scss">
@@ -79,10 +91,10 @@ export default {
max-width: 35rem;
padding: .5rem;
margin: .5rem auto .5rem;
background: $card-border-inner;
border: solid 1px rgba($dark-blue, .5);
background: $spell-card--innerborder;
border: solid 1px rgba($primary--base, .5);
border-radius: .5rem;
box-shadow: .0 .0 .75rem rgba($dark-blue, .25);
box-shadow: .0 .0 .75rem rgba($primary--base, .25);
> .content {
max-width: 35rem;

20
src/main.js
View File

@@ -1,8 +1,20 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
Vue.config.productionTip = false
import routes from './routes'
new Vue({
render: h => h(App),
}).$mount('#app')
Vue.config.productionTip = false
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes,
});
const app = new Vue({
render: h => h(App),
router
})
app.$mount('#srs')

15
src/pages/index.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="home-page">
<p>This is the home page</p>
</div>
</template>
<script>
export default {
name: 'index',
}
</script>
<style>
</style>

31
src/pages/spells.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div class="spells-page">
<spell-card
v-bind:name="'Soleil Pourri'"
v-bind:description="[`Le lanceur projette un petit astre vert jusqu’à 20m autour de lui. L’astre brûle l’air environnant, nécrosant rapidement les formes de vies dans un rayon de 100m.`, `Toutes les créatures dans la portée de l’astre (sauf le lanceur) doivent réussir un jet de CON avec un malus de -30. Si elles échouent, elles subissent 3D20 dégâts radiants et 2D20 dégâts nécrotiques. Elles perdent également 1D10 PV max.`]"
v-bind:schools="['Lumomancie', 'Nécromancie']"
v-bind:level="'30'"
v-bind:charge="'2'"
v-bind:ingredients="`Volonté, Geste`"
v-bind:cost="'-90'"
v-bind:variables="[{name: 'x', description: 'lol'}]"
/>
</div>
</template>
<script>
import spellcard from "../components/spells/spell-card";
export default {
name: 'spells',
components: {
'spell-card': spellcard,
}
}
</script>
<style>
</style>

18
src/routes.js Normal file
View File

@@ -0,0 +1,18 @@
// App router
// Pages
import index from "./pages/index";
import spells from "./pages/spells";
// Routes
const routes = [
{
path: '/', component: index,
},
{
path: '/spells', component: spells,
}
];
export default routes;