bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map menu 'action' is working

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-04-26 12:21:28 +02:00
parent 82731a4884
commit 72d79f8d84
4 changed files with 163 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
src/components/ConcernementMapItem.vue
View File

@ -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() {

4
src/components/ConcernementMapPopup.vue
View File

@ -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

25
src/components/MapConcernements.vue
View File

@ -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}`
});
}
}
}

16
src/stores/concernements.js
View File

@ -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;