diff --git a/src/api/gql/concernement.fragment.gql b/src/api/gql/concernement.fragment.gql index 3ba529e..3820785 100644 --- a/src/api/gql/concernement.fragment.gql +++ b/src/api/gql/concernement.fragment.gql @@ -32,4 +32,18 @@ fragment ConcernementFields on Concernement { } } } + besoins { + author + description + id + index + reponses { + author + avec + id + ou + qui + quoi + } + } } diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 585f035..48c1df5 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -105,6 +105,15 @@ export default { } }, deep: true + }, + map_mode: { + handler (n, o) { + console.log('watch map_mode', o, n); + if (n === 'terraindevie') { + this.applyCheckForces(); + } + }, + deep: true } }, methods: { @@ -336,17 +345,18 @@ export default { if (this.tween) { this.tween.update(); } - if (this.map_mode === 'action'){ - this.applyActionForces(); + if (this.map_mode === 'action' || this.map_mode === 'puissancedagir'){ + this.applyFocusForces(); + // TODO apply a little force to check the map when returning to terrain de vie } Matter.Body.setAngle(this.body, 0); Matter.Body.setAngularSpeed(this.body, 0); }, - applyActionForces(){ + applyFocusForces(){ // map_mode action - var dist, dir, x_force, ori_pos; + var dist, dir, ori_pos; var x_force = 0; - if(!this.concernement.has_agissantes) { + if(!this.isFocused()) { // does not has actions -> take a side // apply a force in direction of one side or an other depending of the start position // the force is exponentialy proportional to the distance from the side @@ -360,6 +370,7 @@ export default { dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y} x_force = Math.pow(dist/800,10) * dir; + this.body.frictionAir = 0.05; } // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir @@ -372,6 +383,14 @@ export default { } ); }, + applyCheckForces() { + var dist, dir, x_velocity; + dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre + dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side + x_velocity = Math.pow(dist/650,10) * dir; + + Matter.Body.setVelocity(this.body, {x: x_velocity, y: 0}); + }, onAfterEngineUpdate (event) { // respawn element if outside screen if(this.pos.x < 0 @@ -417,26 +436,94 @@ export default { this.ctx.fill(); } } - } - // map mode action - else if (this.concernement.has_agissantes && this.map_mode === "action") { - for (let i = 0; i < this.body.parts.length; i++) { - if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) { - let part = this.body.parts[i]; - this.ctx.beginPath(); - this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false); - // console.log(part.id, this.opened_entite_id); - if (part.id === this.opened_entite_id) { - this.ctx.fillStyle = "#F00"; - } else { - this.ctx.fillStyle = "#000"; + } else { + // map mode action + // if not opened and has_agissantes draw only entites agissantes + if (this.concernement.has_agissantes && this.map_mode === "action") { + for (let i = 0; i < this.body.parts.length; i++) { + if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) { + let part = this.body.parts[i]; + this.ctx.beginPath(); + this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false); + // console.log(part.id, this.opened_entite_id); + if (part.id === this.opened_entite_id) { + this.ctx.fillStyle = "#F00"; + } else { + this.ctx.fillStyle = "#000"; + } + this.ctx.fill(); } - this.ctx.fill(); } } + + // puissance d'agir + // if not opened and has_puissancedagir draw the puissance d'agir icone + else if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") { + this.drawPuissanceagirIcon(); + } + } + + }, + drawPuissanceagirIcon(){ + var r = 20 * this.scale; // ray + var dr = r/2; // demi ray + var d = r*2; // diameter + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = `#000`; + this.ctx.arc(this.pos.x, this.pos.y, r, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = `#000`; + this.ctx.arc(this.pos.x, this.pos.y, dr, 0, 2 * Math.PI, false); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = `#000`; + this.ctx.fillStyle = '#000'; + this.ctx.arc(this.pos.x, this.pos.y, 2*this.scale, 0, 2 * Math.PI, false); + this.ctx.fill(); + this.ctx.stroke(); + // axes + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = `#000`; + // vertical + // this.ctx.moveTo(this.pos.x, this.pos.y - r); + // this.ctx.lineTo(this.pos.x , this.pos.y - dr); + // this.ctx.moveTo(this.pos.x, this.pos.y + r); + // this.ctx.lineTo(this.pos.x , this.pos.y + dr); + this.ctx.moveTo(this.pos.x, this.pos.y - r); + this.ctx.lineTo(this.pos.x , this.pos.y + r); + + // horizontal + // this.ctx.moveTo(this.pos.x - r, this.pos.y); + // this.ctx.lineTo(this.pos.x - dr, this.pos.y); + // this.ctx.moveTo(this.pos.x + r, this.pos.y); + // this.ctx.lineTo(this.pos.x + dr, this.pos.y); + this.ctx.moveTo(this.pos.x - r, this.pos.y); + this.ctx.lineTo(this.pos.x + r, this.pos.y); + + // diagonale + // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg + // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9 + // radians = degrees * (pi/180) + // degrees = radians * (180/pi) + var m = Math.sin(45*(Math.PI/180)) * r; + // console.log('m', m); + this.ctx.moveTo(this.pos.x + m, this.pos.y + m); + this.ctx.lineTo(this.pos.x - m, this.pos.y - m); + // + this.ctx.moveTo(this.pos.x - m, this.pos.y + m); + this.ctx.lineTo(this.pos.x + m, this.pos.y - m); + + this.ctx.stroke(); }, drawBoussole(){ // BOUSSOLE @@ -496,7 +583,7 @@ export default { drawContour(){ if (this.salientPoints.length > 3) { var fillStyle; - if (this.map_mode === "action" && !this.concernement.has_agissantes){ + if (!this.isFocused()){ fillStyle = "rgba(255,255,255,0.3)"; }else{ fillStyle = "rgba(255,255,255,0.8)" @@ -513,6 +600,11 @@ export default { this.ctx.fill(); this.ctx.stroke(); } + }, + isFocused(){ + return this.map_mode === 'terraindevie' + || (this.map_mode === 'action' && this.concernement.has_agissantes) + || (this.map_mode === 'puissancedagir' && this.concernement.has_puissancedagir); } }, render() { diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 8028bd2..f76317d 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -76,6 +76,9 @@ export default { this.engine = Matter.Engine.create(engineOptions); this.engine.gravity.scale = 0; this.world = this.engine.world; + + // check map_mode + console.log('mapconcernements created', this.$root); }, mounted() { this.canvasMap.canvas = this.$refs['canvas-map']; @@ -255,21 +258,21 @@ export default {