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

- [API] Segregated API files, Implemented spells-list, component that calls the API

Browse Source
This commit is contained in:
Alexis
2020-04-06 16:39:55 +02:00
parent 37f4913d3e
commit 042c205ce4
11 changed files with 169 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/api/api.js Normal file
View File

@@ -0,0 +1,7 @@
import axios from "axios"
const url = "http://localhost:2814/api"
export default axios.create({
baseURL: url
})

11
client/api/repositories.js Normal file
View File

@@ -0,0 +1,11 @@
import spellsRepository from './spellsRepository'
// List of possible repositories
const repositories = {
spells: spellsRepository
}
// Usage : RepositoryFactoryInstance.get('reponame');
export const RepositoryFactory = {
get: name => repositories[name]
}

14
client/api/spellsRepository.js Normal file
View File

@@ -0,0 +1,14 @@
import api from './api'
// URL for spells
const resource = "/spells"
// CRUD methods for spells
export default {
getSpells() {
return api.get(`${resource}`)
},
getSpell(id) {
return api.get(`${resource}?id=${id}`)
},
}

36
client/src/assets/images/logo-dark.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 34" style="enable-background:new 0 0 32 34;" xml:space="preserve">
<style type="text/css">
.st0{fill:#000;}
.st1{fill:#599EF4;}
</style>
<g id="layer_cog">
<path class="st0" d="M31.6,16L29,15.5h0c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.3-0.2-0.4-0.3c-0.3-1.3-0.8-2.5-1.5-3.6
c-0.1-0.2-0.1-0.4,0-0.5c0.5-0.8,1.1-1.6,1.6-2.5c0.2-0.2,0.2-0.6-0.1-0.8c-0.7-0.7-1.4-1.4-2-2c-0.2-0.2-0.5-0.2-0.7,0l-0.9,0.6
l-1.8,1.1c-1.2,0.8-0.6,3.2,0,3.8c0.8,0.8,1.5,1.8,2,2.8c0.5,1,0.7,2.1,0.8,3.2c0,0.2,0,0.4,0,0.5s0,0.1,0,0.1c0,0.5,0,1.1-0.1,1.7
c-0.2,1.2-0.6,2.4-1.2,3.4c-0.6,1.1-1.5,2-2.5,2.8c-1.7,1.3-3.8,2-5.9,2l0,0c-2.1,0-4.2-0.7-5.9-2c-1-0.8-1.8-1.7-2.5-2.8
c-0.6-1-1.1-2.2-1.2-3.4c-0.1-0.5-0.1-1.1-0.1-1.7c0,0,0-0.1,0-0.1s0-0.3,0.1-0.5c0.2-2.3,1.2-4.4,2.8-6c0.6-0.6,1.2-3,0-3.8
L7.3,6.2L6.4,5.6c-0.2-0.2-0.5-0.2-0.7,0c-0.7,0.7-1.3,1.4-2,2C3.5,7.8,3.5,8.2,3.7,8.4c0.5,0.8,1.1,1.6,1.6,2.5
c0.1,0.2,0.1,0.4,0,0.5c-0.7,1.1-1.2,2.3-1.5,3.6c0,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0.1-0.4,0.1H3L0.4,16C0.2,16,0,16.3,0,16.5v2.9
C0,19.7,0.2,20,0.4,20l1.6,0.3l1.4,0.3c0.1,0,0.3,0.1,0.3,0.3c0.3,1.3,0.8,2.5,1.5,3.6c0.1,0.2,0.1,0.4,0,0.5
C4.8,25.7,4.4,26.3,4,27l-0.4,0.6c-0.2,0.2-0.1,0.6,0.1,0.7c0.7,0.7,1.4,1.4,2.1,2.1c0.1,0.1,0.2,0.2,0.3,0.1
c0.1,0,0.3-0.1,0.4-0.2C6.7,30.2,7,30,7.2,29.9L9,28.7c0.1-0.1,0.3-0.1,0.4,0c1.1,0.7,2.4,1.2,3.6,1.5c0.2,0,0.3,0.2,0.3,0.4
c0.2,1,0.4,2,0.6,3c0,0.3,0.3,0.4,0.5,0.4h2.9c0.3,0,0.5-0.2,0.5-0.4c0.2-1,0.4-2,0.6-3c0-0.2,0.2-0.3,0.3-0.4
c1.3-0.3,2.5-0.8,3.6-1.5c0.1-0.1,0.3-0.1,0.4,0l1.8,1.2c0.2,0.2,0.5,0.3,0.7,0.5c0.1,0.1,0.3,0.1,0.4,0.2c0.1,0,0.3,0,0.4-0.1
c0.7-0.7,1.4-1.4,2.1-2.1c0.2-0.2,0.3-0.5,0.1-0.7L28,26.9c-0.4-0.6-0.8-1.3-1.2-1.9c-0.1-0.2-0.1-0.4,0-0.5
c0.7-1.1,1.2-2.4,1.5-3.6c0-0.1,0.1-0.2,0.3-0.3l1.4-0.3l1.6-0.3c0.3,0,0.4-0.3,0.4-0.5v-2.9C32,16.3,31.8,16,31.6,16z"/>
</g>
<g id="layer_flame">
<path class="st1" d="M16.5,23.4c0.6-0.9,0.9-2.1,0.6-3.2c-0.1-0.7-0.4-1.4-0.9-1.9c0.1,0.4,0.1,0.8,0.2,1.2c0,0.3,0,0.6-0.1,0.9
c-0.2,0.5-0.7,0.7-1.1,0.5c-0.1-0.1-0.2-0.1-0.3-0.3c-0.3-0.4-0.5-0.9-0.4-1.5c0-0.4,0.1-0.7,0.2-1.2c-0.1,0.1-0.3,0.1-0.4,0.2
c-0.9,0.7-1.4,1.7-1.5,2.9c-0.1,1.5,0.2,3,1,4.3l0.1,0.2c-0.1,0-0.1,0-0.2-0.1c-2.8-1.2-4.6-4.1-4.5-7.3c0-1.3,0.4-2.6,1-3.7
c0.6-0.7,1.1-1.5,1.5-2.4c0.2-0.6,0.4-1.3,0.5-2c0-0.2,0-0.4,0.1-0.6c0.3,0.6,0.5,1.3,0.6,2c0.1,0.7,0,1.5-0.2,2.2
c0.4-0.3,0.8-0.7,1.1-1.1c0.6-0.9,0.9-2,1-3c0-0.8,0-1.5,0-2.3c0-0.8,0.1-1.5,0.2-2.3c0.3-1.6,1.5-2.9,2.9-3.3h0.1c0,0,0,0,0,0.1
c-0.6,1.4-0.6,3,0,4.4c0.7,1.5,1.5,3,2.3,4.5c0.8,1.5,1.3,2.1,2,3.5c0.4,1.1,0.7,2.3,0.7,3.5c0,2-0.8,3.9-2.3,5.1
c-0.3,0.2-0.6,0.5-0.9,0.6l0.1-0.3c0.5-1.3,0.6-2.7,0.3-4c-0.2-0.7-0.4-1.3-0.8-1.9c-0.3-0.5-0.6-0.9-0.9-1.4
c-0.3-0.5-0.5-1.1-0.6-1.7c0-0.5,0-0.9,0-1.4c-0.1,0.1-0.2,0.3-0.3,0.5c-0.5,0.9-0.6,1.9-0.3,2.9c0.2,0.7,0.5,1.5,0.7,2.2
c0.2,0.7,0.4,1.4,0.4,2.1C18.4,21.7,17.7,22.8,16.5,23.4L16.5,23.4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

36
client/src/assets/images/logo-light.svg Normal file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 34" style="enable-background:new 0 0 32 34;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#599EF4;}
</style>
<g id="layer_cog">
<path class="st0" d="M31.6,16L29,15.5h0c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.3-0.2-0.4-0.3c-0.3-1.3-0.8-2.5-1.5-3.6
c-0.1-0.2-0.1-0.4,0-0.5c0.5-0.8,1.1-1.6,1.6-2.5c0.2-0.2,0.2-0.6-0.1-0.8c-0.7-0.7-1.4-1.4-2-2c-0.2-0.2-0.5-0.2-0.7,0l-0.9,0.6
l-1.8,1.1c-1.2,0.8-0.6,3.2,0,3.8c0.8,0.8,1.5,1.8,2,2.8c0.5,1,0.7,2.1,0.8,3.2c0,0.2,0,0.4,0,0.5s0,0.1,0,0.1c0,0.5,0,1.1-0.1,1.7
c-0.2,1.2-0.6,2.4-1.2,3.4c-0.6,1.1-1.5,2-2.5,2.8c-1.7,1.3-3.8,2-5.9,2l0,0c-2.1,0-4.2-0.7-5.9-2c-1-0.8-1.8-1.7-2.5-2.8
c-0.6-1-1.1-2.2-1.2-3.4c-0.1-0.5-0.1-1.1-0.1-1.7c0,0,0-0.1,0-0.1s0-0.3,0.1-0.5c0.2-2.3,1.2-4.4,2.8-6c0.6-0.6,1.2-3,0-3.8
L7.3,6.2L6.4,5.6c-0.2-0.2-0.5-0.2-0.7,0c-0.7,0.7-1.3,1.4-2,2C3.5,7.8,3.5,8.2,3.7,8.4c0.5,0.8,1.1,1.6,1.6,2.5
c0.1,0.2,0.1,0.4,0,0.5c-0.7,1.1-1.2,2.3-1.5,3.6c0,0.2-0.2,0.3-0.4,0.3c-0.1,0-0.3,0.1-0.4,0.1H3L0.4,16C0.2,16,0,16.3,0,16.5v2.9
C0,19.7,0.2,20,0.4,20l1.6,0.3l1.4,0.3c0.1,0,0.3,0.1,0.3,0.3c0.3,1.3,0.8,2.5,1.5,3.6c0.1,0.2,0.1,0.4,0,0.5
C4.8,25.7,4.4,26.3,4,27l-0.4,0.6c-0.2,0.2-0.1,0.6,0.1,0.7c0.7,0.7,1.4,1.4,2.1,2.1c0.1,0.1,0.2,0.2,0.3,0.1
c0.1,0,0.3-0.1,0.4-0.2C6.7,30.2,7,30,7.2,29.9L9,28.7c0.1-0.1,0.3-0.1,0.4,0c1.1,0.7,2.4,1.2,3.6,1.5c0.2,0,0.3,0.2,0.3,0.4
c0.2,1,0.4,2,0.6,3c0,0.3,0.3,0.4,0.5,0.4h2.9c0.3,0,0.5-0.2,0.5-0.4c0.2-1,0.4-2,0.6-3c0-0.2,0.2-0.3,0.3-0.4
c1.3-0.3,2.5-0.8,3.6-1.5c0.1-0.1,0.3-0.1,0.4,0l1.8,1.2c0.2,0.2,0.5,0.3,0.7,0.5c0.1,0.1,0.3,0.1,0.4,0.2c0.1,0,0.3,0,0.4-0.1
c0.7-0.7,1.4-1.4,2.1-2.1c0.2-0.2,0.3-0.5,0.1-0.7L28,26.9c-0.4-0.6-0.8-1.3-1.2-1.9c-0.1-0.2-0.1-0.4,0-0.5
c0.7-1.1,1.2-2.4,1.5-3.6c0-0.1,0.1-0.2,0.3-0.3l1.4-0.3l1.6-0.3c0.3,0,0.4-0.3,0.4-0.5v-2.9C32,16.3,31.8,16,31.6,16z"/>
</g>
<g id="layer_flame">
<path class="st1" d="M16.5,23.4c0.6-0.9,0.9-2.1,0.6-3.2c-0.1-0.7-0.4-1.4-0.9-1.9c0.1,0.4,0.1,0.8,0.2,1.2c0,0.3,0,0.6-0.1,0.9
c-0.2,0.5-0.7,0.7-1.1,0.5c-0.1-0.1-0.2-0.1-0.3-0.3c-0.3-0.4-0.5-0.9-0.4-1.5c0-0.4,0.1-0.7,0.2-1.2c-0.1,0.1-0.3,0.1-0.4,0.2
c-0.9,0.7-1.4,1.7-1.5,2.9c-0.1,1.5,0.2,3,1,4.3l0.1,0.2c-0.1,0-0.1,0-0.2-0.1c-2.8-1.2-4.6-4.1-4.5-7.3c0-1.3,0.4-2.6,1-3.7
c0.6-0.7,1.1-1.5,1.5-2.4c0.2-0.6,0.4-1.3,0.5-2c0-0.2,0-0.4,0.1-0.6c0.3,0.6,0.5,1.3,0.6,2c0.1,0.7,0,1.5-0.2,2.2
c0.4-0.3,0.8-0.7,1.1-1.1c0.6-0.9,0.9-2,1-3c0-0.8,0-1.5,0-2.3c0-0.8,0.1-1.5,0.2-2.3c0.3-1.6,1.5-2.9,2.9-3.3h0.1c0,0,0,0,0,0.1
c-0.6,1.4-0.6,3,0,4.4c0.7,1.5,1.5,3,2.3,4.5c0.8,1.5,1.3,2.1,2,3.5c0.4,1.1,0.7,2.3,0.7,3.5c0,2-0.8,3.9-2.3,5.1
c-0.3,0.2-0.6,0.5-0.9,0.6l0.1-0.3c0.5-1.3,0.6-2.7,0.3-4c-0.2-0.7-0.4-1.3-0.8-1.9c-0.3-0.5-0.6-0.9-0.9-1.4
c-0.3-0.5-0.5-1.1-0.6-1.7c0-0.5,0-0.9,0-1.4c-0.1,0.1-0.2,0.3-0.3,0.5c-0.5,0.9-0.6,1.9-0.3,2.9c0.2,0.7,0.5,1.5,0.7,2.2
c0.2,0.7,0.4,1.4,0.4,2.1C18.4,21.7,17.7,22.8,16.5,23.4L16.5,23.4z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
client/src/assets/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

8
client/src/components/spells/spell-card.vue
View File

@@ -63,11 +63,11 @@ export default {
name: 'spell-card',
props: {
name: String,
description: Array,
level: String,
description: String,
level: Number,
schools: Array,
ingredients: String,
charge: String,
ingredients: Array,
charge: Number,
cost: String,
variables: Array,
},

47
client/src/components/spells/spells-list.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="spells-list">
<spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
</div>
</template>
<script>
// Components
import spellcard from "./spell-card"
// API
import { RepositoryFactory } from "../../../api/repositories"
const spellsRepository = RepositoryFactory.get('spells')
export default {
name: 'spellslist',
components: {
'spell-card': spellcard,
},
data() {
return {
loading: false,
spells: []
}
},
created() {
this.computeSpells()
},
methods: {
async fetchSpells() {
const { data } = await spellsRepository.getSpells()
return data
},
async computeSpells() {
this.loading = true
const displaySpells = await this.fetchSpells();
this.loading = false
this.spells = displaySpells.splice(0,10)
}
}
}
</script>
<style>
</style>

27
client/src/pages/spells.vue
View File

@@ -1,34 +1,19 @@
<template>
<div class="spells-page">
<v-for v-for="(spell, index) in spells" :key="index">
<spell-card v-bind="spell"/>
</v-for>
<spell-list/>
</div>
</template>
<script>
import axios from 'axios';
import spellcard from "../components/spells/spell-card";
// Components
import spellslist from "../components/spells/spells-list"
export default {
name: 'spells',
components: {
'spell-card': spellcard,
},
data() {
return {
spells: []
}
},
mounted() {
axios({ method: "GET", "url": "http://localhost:2814/api/spells"})
.then(result => {
this.spells = result.data.spells;
console.log(result)
}, error => {
console.log(error)
})
},
'spell-list': spellslist,
}
}
</script>

10
index.js
View File

@@ -2,8 +2,9 @@
// MODULES
const express = require('express')
const cors = require('cors')
const cors = require('cors') // module to format the json response
// Creates instances of database connections
const connection = require('./database/connection')
const db = connection.db
@@ -13,11 +14,14 @@ const port = 2814
// Import routes
const routes = require('./routes')
// Builds app
// Builds app w/ express
let app = express()
app.use(cors())
const server = app.listen( port, () => { console.log(`App listening on port ${port}`)} )
// Serves
const server = app.listen( port, () => {console.log(`App listening on port ${port}`)})
// Routing
app.use('/api/spells', routes.spells)
// On process kill with SIGINT

2
routes/spells.js
View File

@@ -92,7 +92,7 @@ router
getSpells(req.query)
.then(v => {
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({spells : v}))
res.end(JSON.stringify(v))
})
.catch(err => {
console.log(err)