diff --git a/src/App.vue b/src/App.vue index f8a4f92..97b8132 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,6 +14,7 @@ import ConcernementMapItem from '@components/ConcernementMapItem.vue' export default { created () { this.loadConcernements() + this.loadContentTypeDefinition(); }, mounted () { console.log('APP onMounted') @@ -26,6 +27,7 @@ export default { }, methods: { ...mapActions(ConcernementsStore,['loadConcernements']), + ...mapActions(ConcernementsStore,['loadContentTypeDefinition']), ...mapActions(UserStore,['checkUser']) }, components: { diff --git a/src/assets/common.scss b/src/assets/common.scss index b52607d..3f638b2 100644 --- a/src/assets/common.scss +++ b/src/assets/common.scss @@ -3,8 +3,8 @@ $pad_btn: 0.5em; @mixin btn() { padding: math.div($pad_btn,2) $pad_btn; - border-radius: 5px; - background-color: $btns_back; + // border-radius: 5px; + // background-color: $btns_back; cursor: pointer; line-height: 1.5; } \ No newline at end of file diff --git a/src/assets/main.scss b/src/assets/main.scss index 8442585..511a9d9 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -10,7 +10,8 @@ body{ background-color: $back; font-family: 'public_sans'; - font-weight: 400; + font-weight: 300; + font-size: 16px; } #app{ @@ -77,7 +78,29 @@ body{ box-sizing: border-box; width:450px; height: 100%; - padding: 1rem; + padding: 5rem 1rem 1rem; + overflow-y: auto; + overflow-x: hidden; + header, section{ + padding:0 0 2em 0; + } + label{ + display: block; + font-weight: 100; + font-size: 0.882em; + padding: 0 0 1em 0; + } + header{ + h2{ + font-weight: 400; + font-size: 1.512em; + } + } + section>div{ + font-size: 1em; + font-weight: 300; + } + } } diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index b4be018..c9e1ca7 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -104,8 +104,7 @@ export default { this.ctx = this.canvasMap.ctx // define init position of the item - this.pos.x = this.ray/2 + Math.random()*(this.canvas.width - this.ray) - this.pos.y = this.ray/2 + Math.random()*(this.canvas.height - this.ray) + this.pos = this.getRandomPos(); // MATTER // create the matter body and add it to the engine @@ -147,6 +146,12 @@ export default { Matter.Events.on(this.matterEngine, "beforeUpdate", this.onBeforeEngineUpdate) Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); }, + getRandomPos(){ + return { + x: this.ray/2 + Math.random()*(this.canvas.width - this.ray), + y: this.ray/2 + Math.random()*(this.canvas.height - this.ray) + }; + }, parsePoints (){ // converts data (menace/maintien, actuel/future, prise) into atcual position x,y for (let i = 0; i < this.entites.length; i++) { @@ -187,7 +192,7 @@ export default { getSalientPoints () { // debugger // console.log(this.entites); - let arc = 360/12; + let arc = 360/10; // loop through arcs for (let i = 0; i <= 360/arc; i++) { // loop through entities to find the farest on the arc @@ -197,8 +202,8 @@ export default { let entite = this.entites[j]; if(arc*i <= entite.display.alpha && entite.display.alpha <= arc*i+arc) { // if entity is in arc - if (entite.display.ray > max_r) { - // if entity is farest from precedent one + if (entite.display.ray > max_r) { // && entite.display.ray > this.ray/2 // and farest from minimu + // if entity is farest from precedent one max_r = entite.display.ray; farest = entite; } @@ -277,6 +282,14 @@ export default { } }, onAfterEngineUpdate (event) { + // respawn element if outside screen + if(this.pos.x < 0 + || this.pos.x > this.canvas.width + || this.pos.y < 0 + || this.pos.y > this.canvas.height){ + this.pos = this.getRandomPos() + Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); + } this.draw() }, draw() { diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 7124266..c15b5ca 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -86,10 +86,13 @@ export default { let wall_w = 100; Matter.Composite.add(this.world, [ // walls - Matter.Bodies.rectangle(canvas_w/2, -wall_w/2, canvas_w, wall_w, { isStatic: true }), // top - Matter.Bodies.rectangle(canvas_w/2, canvas_h+wall_w/2, canvas_w, wall_w, { isStatic: true }), // bottom - Matter.Bodies.rectangle(-wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // left - Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }) // right + Matter.Bodies.rectangle(canvas_w/2, -wall_w/2, canvas_w, wall_w, { isStatic: true }), // top + Matter.Bodies.rectangle(canvas_w/2, canvas_h+wall_w/2, canvas_w, wall_w, { isStatic: true }), // bottom + Matter.Bodies.rectangle(-wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // left + Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // right + // make the items never goes under menus + Matter.Bodies.rectangle(550, canvas_h-15, 900, 30, { isStatic: true }), // menu bottom + Matter.Bodies.rectangle(550, 15, 900, 30, { isStatic: true }) // menu top ]); // add mouse control diff --git a/src/stores/concernements.js b/src/stores/concernements.js index 65ff139..b9fcb49 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -1,4 +1,6 @@ import { defineStore } from 'pinia' +// import REST from '@api/rest-axios' +// import JSONAPI from '@api/json-axios' import { print } from 'graphql/language/printer' import gql from 'graphql-tag' @@ -9,13 +11,15 @@ import GQL from '@api/graphql-axios' // import JSONAPI from '@api/json-axios' import ConcernementFields from '@api/gql/concernement.fragment.gql' +// import EntityFields from '@api/gql/entitydef.fragment.gql' export const ConcernementsStore = defineStore({ id: 'concernements', state: () => ({ concernements: [], concernementsByID: {}, - opened: false + opened: false, + ct_concernement: {} }), getters: { @@ -46,6 +50,30 @@ export const ConcernementsStore = defineStore({ }) }) }, + loadContentTypeDefinition () { + const body = { + query: ` + query EntityDef($type: String!, $bundle: String!){ + entitydef(type: $type, bundle: $bundle) { + fields { + type + field_name + label + description + } + } + }`, + variables: { type: 'node', bundle: 'concernement' } + } + GQL.post('', body) + .then(({ data: { data: { entitydef }}}) => { + console.log('loadContentTypeDefinition entitydef', entitydef); + entitydef.fields.forEach(field => { + this.ct_concernement[field.field_name] = field; + }); + }) + + }, openCloseConcernement (id, state) { // console.log('openCloseConcernement', id, state); this.concernementsByID[id].opened = state; diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue index f532c79..01e587a 100644 --- a/src/views/Concernement.vue +++ b/src/views/Concernement.vue @@ -12,7 +12,8 @@ export default { // } // }, computed: { - ...mapState(ConcernementsStore,['opened']) + ...mapState(ConcernementsStore,['opened']), + ...mapState(ConcernementsStore,['ct_concernement']) }, created () { // console.log("Concernement view created, id", this.opened.id); @@ -29,9 +30,18 @@ export default {