diff --git a/back/index.js b/back/index.js index c41031ece35594b9f8429bb42330b49dbf22d56e..e2e68e44187a054e0e90d6193159fd0c202179b2 100644 --- a/back/index.js +++ b/back/index.js @@ -30,7 +30,7 @@ app.use(loginChecker); // Routes app.use('/users', usersRouter); -// app.use('/characters', charactersRouter); +app.use('/characters', charactersRouter); mongoose.connect('mongodb://localhost/rolegame', err => { if (err) { diff --git a/back/routes/characters.js b/back/routes/characters.js index bf48dc3bbeba15c83d978089388ed3329b1ed005..17bf85b3fbca6398391391f4de160fb714dcc0ca 100644 --- a/back/routes/characters.js +++ b/back/routes/characters.js @@ -8,9 +8,14 @@ const router = express.Router(); const getScore = (data) => Object.keys(data).reduce((total, el) => total + costTable[data[el]], 0); +router.get('/avatars', (req, res) => { + const avatars = fs.readdirSync('../front/public/img/avatars'); + res.json({ avatars }); +}) + router.get('/', async (req, res) => { // TODO: Login required - const avatars = fs.readdirSync('media/avatars'); + Character.find({ user: req.session.user._id }, (err, characters) => { if (err) return res.status(400).json({ error: err }); return res.json(characters); diff --git a/back/views/character_summary.pug b/back/views/character_summary.pug deleted file mode 100644 index 8e8cca865ca33c2f8d3289930fc60576ca98ff57..0000000000000000000000000000000000000000 --- a/back/views/character_summary.pug +++ /dev/null @@ -1,32 +0,0 @@ -.ui.card.fluid - .content - img.right.floated.mini.image.ui(src="/media/avatars/"+character.avatar, alt="Avatar") - .header= character.name - .meta - .date Created on #{character.birthDate.toDateString()} - .ui.tiny.progress.yellow.progress(id="action-points-bar-"+character._id) - .bar - .label - span(id="action-points-value-"+character._id)= character.actionPoints - | action points - //- .content - //- .ui.label(class=character.attributes.strength<=8 ? "orange" : character.attributes.strength>=12 ? "green" : "" ) - //- | Strength - //- .detail= character.attributes.strength - //- .ui.label(class=character.attributes.constitution<=8 ? "orange" : character.attributes.constitution>=12 ? "green" : "" ) - //- | Constitution - //- .detail= character.attributes.constitution - //- .ui.label(class=character.attributes.dexterity<=8 ? "orange" : character.attributes.dexterity>=12 ? "green" : "" ) - //- | Dexterity - //- .detail= character.attributes.dexterity - //- .ui.label(class=character.attributes.intelligence<=8 ? "orange" : character.attributes.intelligence>=12 ? "green" : "" ) - //- | Intelligence - //- .detail= character.attributes.intelligence - //- .ui.label(class=character.attributes.wisdom<=8 ? "orange" : character.attributes.wisdom>=12 ? "green" : "" ) - //- | Wisdom - //- .detail= character.attributes.wisdom - //- .ui.label(class=character.attributes.charisma<=8 ? "orange" : character.attributes.charisma>=12 ? "green" : "" ) - //- | Charisma - //- .detail= character.attributes.charisma - script $('#action-points-bar-#{character._id}').progress({ total: #{maxActionPoints}, value: #{character.actionPoints}}); - script updateActionPoints('#{character._id}', #{character.actionPoints}, #{maxActionPoints}); diff --git a/back/media/avatars/boris_by_charro_art_d8eta2f-pre.jpg b/front/public/img/avatars/boris_by_charro_art_d8eta2f-pre.jpg similarity index 100% rename from back/media/avatars/boris_by_charro_art_d8eta2f-pre.jpg rename to front/public/img/avatars/boris_by_charro_art_d8eta2f-pre.jpg diff --git a/back/media/avatars/drake_by_charro_art_d8eta33-pre.jpg b/front/public/img/avatars/drake_by_charro_art_d8eta33-pre.jpg similarity index 100% rename from back/media/avatars/drake_by_charro_art_d8eta33-pre.jpg rename to front/public/img/avatars/drake_by_charro_art_d8eta33-pre.jpg diff --git a/back/media/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg b/front/public/img/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg similarity index 100% rename from back/media/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg rename to front/public/img/avatars/fazzlemare_by_charro_art_d8etbfa-pre.jpg diff --git a/back/media/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg b/front/public/img/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg similarity index 100% rename from back/media/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg rename to front/public/img/avatars/mortimer_by_charro_art_d8eta4a-pre.jpg diff --git a/back/media/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg b/front/public/img/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg similarity index 100% rename from back/media/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg rename to front/public/img/avatars/scarlet_by_charro_art_d8eta4q-pre.jpg diff --git a/back/media/avatars/tobias_by_charro_art_d8eta17-pre.jpg b/front/public/img/avatars/tobias_by_charro_art_d8eta17-pre.jpg similarity index 100% rename from back/media/avatars/tobias_by_charro_art_d8eta17-pre.jpg rename to front/public/img/avatars/tobias_by_charro_art_d8eta17-pre.jpg diff --git a/back/media/avatars/warren_by_charro_art_d8eta25-pre.jpg b/front/public/img/avatars/warren_by_charro_art_d8eta25-pre.jpg similarity index 100% rename from back/media/avatars/warren_by_charro_art_d8eta25-pre.jpg rename to front/public/img/avatars/warren_by_charro_art_d8eta25-pre.jpg diff --git a/front/public/index.html b/front/public/index.html index 35239811aa290bb59e428c968efb3c5e1fcd110f..10302b52ef3eb1fa17bc2ee536f818c6ab11b0c3 100644 --- a/front/public/index.html +++ b/front/public/index.html @@ -5,7 +5,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> - <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css"> <title>front</title> </head> <body> diff --git a/front/src/components/CharacterItem.vue b/front/src/components/CharacterItem.vue new file mode 100644 index 0000000000000000000000000000000000000000..5d3ccc927bff82e56038ffcfcf4e9a31c56b56b2 --- /dev/null +++ b/front/src/components/CharacterItem.vue @@ -0,0 +1,24 @@ +<template lang="pug"> + sui-card(class="fluid") + sui-card-content + sui-image(floated="right", size="mini", :src="`avatars/${character.avatar}`") + sui-card-header {{ character.name }} + sui-card-meta Created on {{ character.birthDate }} + sui-progress(size="tiny", color="yellow", :label="`${character.actionPoints} action points`", :percent="character.actionPoints/480*100") +</template> + +<script> +export default { + name: "CharacterItem", + props: ['character'], + data() { + return { + } + } + // TODO: Update action points +} +</script> + +<style scoped> + +</style> diff --git a/front/src/router.js b/front/src/router.js index 6089a002bebfb4645d7aeae0e05979c6d353ed47..9a623cf6d9c5c1cc25d82f8e1dff791397a10d12 100644 --- a/front/src/router.js +++ b/front/src/router.js @@ -1,6 +1,7 @@ import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; +import Characters from "./views/Characters.vue"; Vue.use(Router); @@ -12,6 +13,11 @@ export default new Router({ path: "/", name: "home", component: Home + }, + { + path: "/characters", + name: "characters", + component: Characters } ] }); diff --git a/front/src/views/Characters.vue b/front/src/views/Characters.vue new file mode 100644 index 0000000000000000000000000000000000000000..687c5cae40aa1766972278a418cc341aaa1c9d8b --- /dev/null +++ b/front/src/views/Characters.vue @@ -0,0 +1,81 @@ +<template lang="pug"> + div + sui-card-group + CharacterItem(v-for="character in characters", :key="character._id", :character="character") + sui-container(text-align="center") + sui-button(color="teal", basic, icon="add", @click="creationModal=true") Create character + + sui-modal(v-model="creationModal") + sui-modal-header Create a new character + sui-modal-content(image) + sui-image(size="medium", :src="`avatars/${newCharacter.avatar}`") + sui-modal-description + sui-form(@submit.prevent="") + sui-header Details + sui-form-fields + sui-form-field + sui-input(type="text", v-model="newCharacter.name", placeholder="name") + sui-form-field + sui-dropdown(placeholder="Avatar", selection, :options="avatars", v-model="newCharacter.avatar") + sui-header Attributes: {{ availablePoints }} points remaning + sui-grid + sui-grid-column(:width="8", v-for="attribute in attributes" :key="attribute") + sui-segment + sui-statistic(horizontal) + sui-statistic-value {{ newCharacter.attributes[attribute] }} + sui-statistic-label {{ attribute }} + sui-button(color="orange", circular, floated="left", icon="minus") + sui-button(color="teal", circular, floated="right", icon="add") + sui-progress(attached, bottom, :percent="newCharacter.attributes[attribute]/20*100") + sui-modal-actions + sui-button(color="orange", basic, icon="close", @click="creationModal=false") Cancel + sui-button(color="grey", basic, icon="redo", @click="resetCharacter") Reset + sui-button(color="teal", basic, icon="check") Create +</template> + +<script> +import http from "@/http"; +import CharacterItem from "@/components/CharacterItem.vue"; +export default { + name: "Characters", + components: { + CharacterItem + }, + data() { + return { + characters: [{ + _id: "13F3V34GBB", + avatar: "boris_by_charro_art_d8eta2f-pre.jpg", + name: "Kagamino", + birthDate: "01-01-1998", + actionPoints: 400 + }], + creationModal: false, + newCharacter: { attributes: { } }, + avatars: [], + attributes: ['strength', 'constitution', 'dexterity', 'intelligence', 'wisdom', 'charisma'], + availablePoints: 15 + } + }, + created() { + this.attributes.forEach(attribute => { + this.newCharacter.attributes[attribute] = 10 + }); + http() + .get('http://localhost:3000/characters/avatars') + .then(res => this.avatars = res.data.avatars.map(avatar => ({ text: avatar, value: avatar }))) + }, + methods: { + resetCharacter() { + this.characters = { attributes: { } }; + this.attributes.forEach(attribute => { + this.newCharacter.attributes[attribute] = 10 + }); + } + } +} +</script> + +<style scoped> + +</style> diff --git a/front/src/views/Home.vue b/front/src/views/Home.vue index c048ee965b20b83451a0472ff7ffdb80f1f4a71a..8270dfb73599207a26edf046525e7c78e40cc7a0 100644 --- a/front/src/views/Home.vue +++ b/front/src/views/Home.vue @@ -1,6 +1,5 @@ <template lang="pug"> - .home - sui-image(src="img/wallpaper.jpg") + sui-image(src="img/wallpaper.jpg") </template> <script>