diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 6c5bb0e..56d0f0b 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -145,7 +145,8 @@ export default { parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, { item_type: 'entite', id: this.entites[i].entite.id, - cid: this.concernement.id, + cid: this.concernement.id, + agissante: this.entites[i].entite.agissante, isSensor: true })) } @@ -158,7 +159,7 @@ export default { frictionAir: 0, // mass: Math.pow(3, this.entites.length), mass: 10, - restitution: 0.4, + restitution: 0.1, collisionFilter: { group: -1 }, @@ -345,101 +346,60 @@ export default { this.pos = this.getRandomPos() Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); } + // map_mode action + if (this.map_mode === 'action'){ + var dist, dir, x_force, ori_pos; + var x_force = 0; + if(!this.concernement.has_agissantes) { + // 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 + dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side + dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side + ori_pos = {x:this.canvas.width/2, y:this.canvas.height/2}; + x_force = Math.pow(dist/700,10) * dir; + }else{ + // has action, get to the centre + 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 + ori_pos = dir < 0 ? {x:this.canvas.width, y:this.canvas.height/2} : {x:0, y:this.canvas.height/2} + x_force = Math.pow(dist/800,10) * dir; + } + // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir + Matter.Body.applyForce( + this.body, + ori_pos, + { + x: x_force, + y: 0 + } + ); + } + Matter.Body.setAngle(this.body, 0); + Matter.Body.setAngularSpeed(this.body, 0); this.draw() }, draw() { if (!this.ctx) return; + // record the position from the main matter body this.pos = this.body.position; if (this.opened) { - // BOUSSOLE - // exterieur circle - this.ctx.beginPath(); - this.ctx.lineWidth = 2; - this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`; - // external circle is %8 less than max ray = (*0.92) - this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // interieur circle - this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false); - // this.ctx.stroke(); - - // axes - // vertical - this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale); - // horizontal - this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y); - this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y); - // this.ctx.stroke(); - - // fleches - // haute - this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)); - this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92); - this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)); - // milieu - this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)); - this.ctx.lineTo(this.pos.x, this.pos.y); - this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)); - - this.ctx.stroke(); - - // MOINS - PLUS - this.ctx.beginPath(); - this.ctx.lineWidth = 8; - this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;; - // PLUS - // horizontal - this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); - // vertical - this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)); - this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)); - - // MOINS - // horizontal - this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); - this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); - // vertical - - this.ctx.stroke(); + this.drawBoussole(); } // contours - if (this.salientPoints.length > 3) { - - this.ctx.beginPath(); - this.ctx.lineWidth = 1; - this.ctx.strokeStyle = "#000"; - this.ctx.fillStyle = "rgba(255,255,255,0.8)"; - this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) - for (let j = 1; j < this.salientPoints.length; j++) { - this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15) - } - this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) - this.ctx.fill(); - this.ctx.stroke(); - } + this.drawContour(); if (this.opened) { // place all entities points - // using entities array - // for (let i = 0; i < this.entites.length; i++) { - // let entite = this.entites[i]; - // // console.log('entite', entite); - // this.ctx.beginPath(); - // this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false); - // this.ctx.strokeStyle = "#F00"; - // this.ctx.stroke(); - // } - // OR using entitées matter bodies for (let i = 0; i < this.body.parts.length; i++) { - if (this.body.parts[i].item_type === 'entite') { + if (this.body.parts[i].item_type === 'entite' + // draw only entite agissante if map mode is action + && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) { let part = this.body.parts[i]; this.ctx.beginPath(); this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false); @@ -453,14 +413,101 @@ export default { } } } + // 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"; + } + this.ctx.fill(); + } + } + } - // // concernement id @center - // this.ctx.beginPath(); - // // this.ctx.arc(this.pos.x, this.pos.y, 4, 0, 2 * Math.PI, false); - // this.ctx.fillStyle = "#000"; - // this.ctx.fillText(this.concernement.id, this.pos.x, this.pos.y) - // this.ctx.fill(); + }, + drawBoussole(){ + // BOUSSOLE + // exterieur circle + this.ctx.beginPath(); + this.ctx.lineWidth = 2; + this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`; + // external circle is %8 less than max ray = (*0.92) + this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale*0.92, 0, 2 * Math.PI, false); + // this.ctx.stroke(); + + // interieur circle + this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 0, 2 * Math.PI, false); + // this.ctx.stroke(); + + // axes + // vertical + this.ctx.moveTo(this.pos.x, this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x, this.pos.y + this.ray*this.scale); + // horizontal + this.ctx.moveTo(this.pos.x - this.ray*this.scale, this.pos.y); + this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y); + // this.ctx.stroke(); + + // fleches + // haute + this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)); + this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale*0.92); + this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)); + // milieu + this.ctx.moveTo(this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)); + this.ctx.lineTo(this.pos.x, this.pos.y); + this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)); + + this.ctx.stroke(); + + // MOINS - PLUS + this.ctx.beginPath(); + this.ctx.lineWidth = 8; + this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;; + // PLUS + // horizontal + this.ctx.moveTo(this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); + // vertical + this.ctx.moveTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)); + this.ctx.lineTo(this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)); + + // MOINS + // horizontal + this.ctx.moveTo(this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale); + this.ctx.lineTo(this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale); + // vertical + + this.ctx.stroke(); + }, + drawContour(){ + if (this.salientPoints.length > 3) { + var fillStyle; + if (this.map_mode === "action" && !this.concernement.has_agissantes){ + fillStyle = "rgba(255,255,255,0.3)"; + }else{ + fillStyle = "rgba(255,255,255,0.8)" + } + this.ctx.beginPath(); + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = "#000"; + this.ctx.fillStyle = fillStyle; + this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) + for (let j = 1; j < this.salientPoints.length; j++) { + this.ctx.lineTo(this.pos.x+this.salientPoints[j].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[j].pos.y*this.scale*1.15) + } + this.ctx.lineTo(this.pos.x+this.salientPoints[0].pos.x*this.scale*1.15, this.pos.y+this.salientPoints[0].pos.y*this.scale*1.15) + this.ctx.fill(); + this.ctx.stroke(); + } } }, render() { diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue index 9edda0a..b83c75b 100644 --- a/src/components/ConcernementMapPopup.vue +++ b/src/components/ConcernementMapPopup.vue @@ -21,7 +21,7 @@ export default { if (this.infos.type === 'concernement') { this.concernement = this.concernementsByID[this.infos.id]; } else { - this.entite = this.allEntitesById[this.infos.id].entite; + this.entite = this.allEntitesById[this.infos.id]; } }, mounted () { @@ -40,7 +40,7 @@ export default { if (n.type === 'concernement') { this.concernement = this.concernementsByID[n.id]; } else { - this.entite = this.allEntitesById[n.id].entite; + this.entite = this.allEntitesById[n.id]; } }, deep: true diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 8e044e1..8028bd2 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -183,8 +183,12 @@ export default { if (query.length) { // open/close all concernements this.openCloseConcernements(query[0].id) - // push route - this.$router.push({name: 'concernement', params: {id: query[0].id}}); + // push route (keep the hash for map_mode) + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: query[0].id} + }); } } @@ -200,16 +204,27 @@ export default { }); if (clickedEntityBodies.length) { // we have clicked on an entite - this.$router.push({name: 'concernement', params: {id: this.opened.id, eid: clickedEntityBodies[0].id}}); + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: this.opened.id, eid: clickedEntityBodies[0].id} + }); } else { // otherwise we close the entite and come back to the concernement - this.$router.push({name: 'concernement', params: {id: this.opened.id}}); + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: this.opened.id} + }); } } else { // if no concernement opened retrun to home (closing concernement contents opened) // and reset the opened state in concernement store this.resetConcernementOpened(); - this.$router.push({name: 'home'}); + this.$router.push({ + name: 'home', + hash: `#${this.map_mode}` + }); } } } diff --git a/src/stores/concernements.js b/src/stores/concernements.js index 3b56468..acb3bc5 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -52,17 +52,17 @@ export const ConcernementsStore = defineStore({ this.concernements = []; allconcernements.forEach(concernement => { concernement.entites_byid = {}; + concernement.entitesagissantes_byid = {}; + concernement.has_agissantes = false; concernement.entites.forEach(entite => { concernement.entites_byid[entite.entite.id] = entite; - // record a flat list of all entités of all concernement for map-popup - if (typeof this.allEntitesById[entite.entite.id] === "undefined") { - this.allEntitesById[entite.entite.id] = { - entite: entite, - concernements: [concernement] - }; - } else { - this.allEntitesById[entite.entite.id].concernements.push(concernement); + // record entite agissante + if (entite.entite.agissante) { + concernement.entitesagissantes_byid[entite.entite.id] = entite; + concernement.has_agissantes = true; } + // record a flat list of all entités of all concernement for map-popup + this.allEntitesById[entite.entite.id] = entite; }); this.concernements.push(concernement); this.concernementsByID[concernement.id] = concernement;