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

integrated puissance d'agir on the map level 0

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-05-16 16:55:28 +02:00
parent dafa36f29c
commit fa9bc54d2a
4 changed files with 142 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/gql/concernement.fragment.gql
View File

@ -32,4 +32,18 @@ fragment ConcernementFields on Concernement {
}
}
}
besoins {
author
description
id
index
reponses {
author
avec
id
ou
qui
quoi
}
}
}

132
src/components/ConcernementMapItem.vue
View File

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

21
src/components/MapConcernements.vue
View File

@ -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 {
<li>
<a href="#terraindevie" @click="setMapMode('terraindevie')">terrain de vie</a>
</li>
<li>
<a href="#proximite" @click="setMapMode('proximite')">proximité</a>
</li>
<li>
<a href="#superposition" @click="setMapMode('superposition')">superposition</a>
</li>
<!-- <li>
<a href="#puissancedagir" @click="setMapMode('puissancedagir')">puissance d'agir</a>
<a href="#proximite" @click="setMapMode('proximite')">proximité</a>
</li> -->
<!-- <li>
<a href="#superposition" @click="setMapMode('superposition')">superposition</a>
</li> -->
<li>
<a href="#puissancedagir" @click="setMapMode('puissancedagir')">puissance d'agir</a>
</li>
<li>
<a href="#action" @click="setMapMode('action')">action</a>
</li>
<!-- <li>
<li>
<a href="#doleancer" @click="setMapMode('doleancer')">doléancer</a>
</li> -->
</li>
</ul>
</nav>
<ConcernementMapPopup

4
src/stores/concernements.js
View File

@ -69,6 +69,10 @@ export const ConcernementsStore = defineStore({
concernement.entites.push(entite); // fill the entites array with visible entite only
}
});
// puissance d'agir
concernement.has_puissancedagir = concernement.besoins.length ? true : false;
// common
this.concernements.push(concernement);
this.concernementsByID[concernement.id] = concernement;
});