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

drawing puissance d'agir 'boussole'

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-05-16 17:49:23 +02:00
parent fa9bc54d2a
commit a325ddfe22
1 changed files with 71 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/ConcernementMapItem.vue
View File

@ -110,7 +110,7 @@ export default {
handler (n, o) { handler (n, o) {
console.log('watch map_mode', o, n); console.log('watch map_mode', o, n);
if (n === 'terraindevie') { if (n === 'terraindevie') {
this.applyCheckForces(); this.applyShuffleForces();
} }
}, },
deep: true deep: true
@ -383,7 +383,7 @@ export default {
} }
); );
}, },
applyCheckForces() { applyShuffleForces() {
var dist, dir, x_velocity; var dist, dir, x_velocity;
dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction 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 dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
@ -411,29 +411,41 @@ export default {
this.pos = this.body.position; this.pos = this.body.position;
if (this.opened) { if (this.opened) {
this.drawBoussole(); switch (this.map_mode) {
case 'terraindevie':
this.drawBoussole();
break;
case 'puissancedagir':
this.drawPuissanceagir();
break;
}
} }
// contours // contours
this.drawContour(); if (!this.opened
|| (this.opened && this.map_mode !== "puissancedagir")) {
this.drawContour();
}
if (this.opened) { if (this.opened) {
// place all entities points // place all entities points
// OR using entitées matter bodies // OR using entitées matter bodies
for (let i = 0; i < this.body.parts.length; i++) { if (this.map_mode !== 'puissancedagir') {
if (this.body.parts[i].item_type === 'entite' for (let i = 0; i < this.body.parts.length; i++) {
// draw only entite agissante if map mode is action if (this.body.parts[i].item_type === 'entite'
&& ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) { // draw only entite agissante if map mode is action
let part = this.body.parts[i]; && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) {
this.ctx.beginPath(); let part = this.body.parts[i];
this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false); this.ctx.beginPath();
// console.log(part.id, this.opened_entite_id); this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
if (part.id === this.opened_entite_id) { // console.log(part.id, this.opened_entite_id);
this.ctx.fillStyle = "#F00"; if (part.id === this.opened_entite_id) {
} else { this.ctx.fillStyle = "#F00";
this.ctx.fillStyle = "#000"; } else {
this.ctx.fillStyle = "#000";
}
this.ctx.fill();
} }
this.ctx.fill();
} }
} }
} else { } else {
@ -465,6 +477,48 @@ export default {
} }
}, },
drawPuissanceagir(){
for (let i = 1; i < 6; i++) {
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = `rgba(255,255,255,1)`;
this.ctx.arc(this.pos.x, this.pos.y, ((this.ray*this.scale)/5)*i, 0, 2 * Math.PI, false);
this.ctx.stroke();
}
this.ctx.beginPath();
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = `rgba(255,255,255,1)`;
this.ctx.setLineDash([5,5]);
for (let j = 0; j < 4; j++) {
var a = (90 / 4) * j;
// 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 x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
var y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
// console.log('m', m);
this.ctx.moveTo(this.pos.x + x, this.pos.y + y);
this.ctx.lineTo(this.pos.x - x, this.pos.y - y);
//
this.ctx.moveTo(this.pos.x - y, this.pos.y + x);
this.ctx.lineTo(this.pos.x + y, this.pos.y - x);
}
this.ctx.stroke();
this.ctx.setLineDash([]);
this.ctx.beginPath();
this.ctx.fillStyle = `rgba(255,255,255,0.6)`;
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = `#fff`;
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
this.ctx.fill();
this.ctx.stroke()
},
drawPuissanceagirIcon(){ drawPuissanceagirIcon(){
var r = 20 * this.scale; // ray var r = 20 * this.scale; // ray
var dr = r/2; // demi ray var dr = r/2; // demi ray