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

+ Moved client to subfolder and added db communication

Browse Source
This commit is contained in:
Alexis
2020-03-20 21:05:28 +01:00
parent c08e07f7b6
commit ef9e98641a
24 changed files with 13069 additions and 12559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
}

12563
client/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

63
client/package.json Normal file
View File

@@ -0,0 +1,63 @@
{
"name": "spellsaurus_client",
"version": "1.0.0",
"description": "The client interface of spellsaurus",
"keywords": [
"rpg",
"dev",
"spells",
"roleplay",
"website",
"database"
],
"author": "AlexisNP",
"license": "ISC",
"bugs": {
"url": "https://github.com/AlexisNP/spellsaurus/issues"
},
"homepage": "https://github.com/AlexisNP/spellsaurus#readme",
"private": true,
"repository": {
"type": "git",
"url": "git+https://github.com/AlexisNP/spellsaurus.git"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"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": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

BIN
client/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
client/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<title>Spellsaurus</title>
</head>
<body>
<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="srs"></div>
<!-- built files will be auto injected -->
</body>
</html>

31
client/src/app.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div id="srs">
<navigation/>
<router-view/>
</div>
</template>
<script>
import navbar from "./components/global/navbar/navbar";
export default {
name: 'app',
components: {
'navigation': navbar
}
}
</script>
<style lang="scss">
#srs {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

0
client/src/assets/scss/_fonts.scss Normal file
View File

55
client/src/assets/scss/_global.scss Normal file
View File

@@ -0,0 +1,55 @@
@import '_variables';
@import '_mixins';
@import '_fonts';
// RESETS
html {
box-sizing: border-box;
font-size: $font-size-root;
-ms-overflow-style: scrollbar;
height: 100%;
-webkit-overflow-scrolling: touch;
line-height: 1.15;
color: $primary--base;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html *,
html *::before,
html *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
outline: none;
}
@at-root {
@-ms-viewport { width: device-width; }
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style-type: none;
}
var {
font-style: normal;
}
// BUTTONS
// MISC.
hr {
border: none;
border-top-style: solid;
border-top-width: 1px;
border-top-color: rgba($black, .25);
}

0
client/src/assets/scss/_mixins.scss Normal file
View File

24
client/src/assets/scss/_variables.scss Normal file
View File

@@ -0,0 +1,24 @@
//// COLOURS
// Global colours
$white: #FFF;
$black: #000;
$primary--base: #2c3e50;
$primary--blue: #599EF4;
$secondary--blue: #355F91;
$valid: #6AC47B;
$warning: #F7A758;
$alert: #F44E4E;
// Spell colours
$spell-card--innerborder: #f5ebd8;
// FONT FAMILY
$font-family: 'Overpass', sans-serif;
$font-size-root: 15px !default;
$font-size-base: 1.2rem !default;
$line-height-base: 1.3 !default;

72
client/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>

208
client/src/components/spells/spell-card.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<article class="spell-card" v-bind:class="{ active: isFlipped }" @click="toggleCard">
<div class="content">
<header>
<h3>{{ name }}</h3>
</header>
<section class="casting-header">
<div class="casting-infos">
<div class="type">
<div class="level">
<div class="label">
<span>LV.</span>
<br>
<span>MIN</span>
</div>
<var>{{ level }}</var>
</div>
<ul class="schools">
<li v-for="(school, index) in schools" :key="index">
{{ school }}
</li>
</ul>
</div>
<div class="cost">
<span class="label">Malus</span>
<var>{{ cost }}</var>
</div>
<div class="charge">
<span class="label">Charge</span>
<var>{{ charge }}</var>
</div>
</div>
<div class="casting-ingredients">
<p class="title">Nécessite</p>
<p class="content">
{{ ingredients }}
</p>
</div>
</section>
<hr>
<section class="spell-description">
<p v-for="(line, index) of description" :key="index">
{{ line }}
</p>
</section>
<hr>
<footer v-if="variables">
<div class="label">Variables</div>
<div class="variables">
<div v-for="(variable, index) in variables" :key="index" class="xyz">
<span>{{ variable.name }}</span>
<var>{{ variable.description }}</var>
</div>
</div>
</footer>
</div>
</article>
</template>
<script>
export default {
name: 'spell-card',
props: {
name: String,
description: Array,
level: String,
schools: Array,
ingredients: String,
charge: String,
cost: String,
variables: Array,
},
data() {
return {
isFlipped: false,
}
},
methods: {
toggleCard: async function() {
this.isFlipped = !this.isFlipped;
}
},
}
</script>
<style lang="scss">
.spell-card {
max-width: 35rem;
padding: .5rem;
margin: .5rem auto .5rem;
background: $spell-card--innerborder;
border: solid 1px rgba($primary--base, .5);
border-radius: .5rem;
box-shadow: .0 .0 .75rem rgba($primary--base, .25);
> .content {
max-width: 35rem;
height: 100%;
padding: .75rem;
background: $white;
header {
h3 {
padding: .5rem;
text-align: center;
color: $white;
text-transform: uppercase;
background: $black;
}
}
.casting-header {
display: flex;
> * {
width: 50%;
}
.casting-infos {
margin: .75rem 0;
padding-right: .75rem;
border-right: 1px solid rgba($black, .25);
.type {
margin-bottom: .5rem;
display: flex;
> * {
width: 50%;
}
.level {
.label {
margin-right: .25rem;
display: inline-block;
}
var {
display: inline-block;
font-size: 2.3em;
}
}
}
.cost, .charge {
font-size: 0.9rem;
> * {
vertical-align: middle;
}
.label {
display: inline-block;
width: 30%;
text-transform: uppercase;
}
var {
display: inline-block;
}
}
}
.casting-ingredients {
margin: .75rem 0;
padding-left: .75rem;
.title {
margin-bottom: .25rem;
font-size: .9rem;
font-weight: bold;
text-transform: uppercase;
}
.content {
padding-top: 1rem;
font-size: .85rem;
text-align: justify;
text-align-last: center;
}
}
}
.spell-description {
padding: .75rem 0;
font-size: .85rem;
p {
&:not(:last-of-type) {
margin-bottom: .5rem;
}
}
}
footer {
padding: .75rem 0 0;
display: flex;
align-items: center;
.label {
margin-right: 1rem;
}
.variables {
.xyz {
span {
font-size: 1.1rem;
font-weight: bold;
margin-right: 1rem;
}
}
}
}
}
}
</style>

20
client/src/main.js Normal file
View File

@@ -0,0 +1,20 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import routes from './routes'
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')

18
client/src/models/Spell.ts Normal file
View File

@@ -0,0 +1,18 @@
class Spell {
private id: number
private name: string
private description: string
private cost: number
private charge: number
private schools: Array<string>
private ingredients: Array<string>
private variables: Array<string>
constructor(id: number) {
this.id = id
}
}
export default Spell;

15
client/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>

42
client/src/pages/spells.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="spells-page">
<v-for v-for="(spell, index) in spells" :key="index">
<spell-card v-bind="spell"/>
</v-for>
</div>
</template>
<script>
import spellcard from "../components/spells/spell-card";
export default {
name: 'spells',
components: {
'spell-card': spellcard,
},
data() {
return {
spells: [
{
name: 'Soleil Pourri',
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.`],
schools: ['Lumomancie', 'Nécromancie'],
level: '-30',
charge: '2',
ingredients: 'Volonté, Geste',
cost: '-90',
variables: [{
name: 'x',
description: 'lol',
}]
}
]
}
}
}
</script>
<style>
</style>

21
client/src/routes.js Normal file
View File

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

14
client/vue.config.js Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/scss/_global.scss";
@import "@/assets/scss/_variables.scss";
@import "@/assets/scss/_mixins.scss";
@import "@/assets/scss/_fonts.scss";
`
}
}
}
};