displayed besoins & reponses on puissance d'gair
This commit is contained in:
parent
a325ddfe22
commit
9b2490228f
@ -427,59 +427,24 @@ export default {
|
||||
this.drawContour();
|
||||
}
|
||||
|
||||
if (this.opened) {
|
||||
// place all entities points
|
||||
// OR using entitées matter bodies
|
||||
if (this.map_mode !== 'puissancedagir') {
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
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);
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
} 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// puissance d'agir
|
||||
// map mode 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") {
|
||||
if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") {
|
||||
if (!this.opened) {
|
||||
this.drawPuissanceagirIcon();
|
||||
} else {
|
||||
this.drawBesoins()
|
||||
}
|
||||
}
|
||||
|
||||
if (this.map_mode !== 'puissancedagir') {
|
||||
this.drawEntites()
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
drawPuissanceagir(){
|
||||
|
||||
|
||||
for (let i = 1; i < 6; i++) {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.lineWidth = 0.5;
|
||||
@ -493,14 +458,14 @@ export default {
|
||||
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;
|
||||
let 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;
|
||||
let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
|
||||
let 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);
|
||||
@ -518,6 +483,7 @@ export default {
|
||||
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
|
||||
this.ctx.fill();
|
||||
this.ctx.stroke()
|
||||
this.ctx.closePath();
|
||||
},
|
||||
drawPuissanceagirIcon(){
|
||||
var r = 20 * this.scale; // ray
|
||||
@ -579,6 +545,102 @@ export default {
|
||||
|
||||
this.ctx.stroke();
|
||||
},
|
||||
drawEntites(){
|
||||
// IF OPENED
|
||||
if (this.opened) {
|
||||
// place all entities points
|
||||
// OR using entitées matter bodies
|
||||
for (let i = 0; i < this.body.parts.length; i++) {
|
||||
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);
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
// IF CLOSED
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
drawBesoins(){
|
||||
let res_fields = ['qui','quoi','ou','avec'];
|
||||
for (let i = 0; i < this.concernement.besoins.length; i++) {
|
||||
// TODO make besoins and reponses interactives
|
||||
let r = (this.ray * this.scale)/5; // unit ray
|
||||
let arc = (360 / 16); // unit arc
|
||||
let br = r - r/2; // besoin ray
|
||||
let a = arc * i + arc/2; // angle
|
||||
let x = Math.cos(a*(Math.PI/180)) * br;
|
||||
let y = Math.sin(a*(Math.PI/180)) * br;
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.fillStyle = "#000";
|
||||
// this.ctx.arc(this.pos.x + x, this.pos.y + y, 2, 0, 2 * Math.PI, false);
|
||||
this.drawDiamond(this.pos.x + x, this.pos.y + y, 4);
|
||||
this.ctx.fill();
|
||||
|
||||
// loop through reponses
|
||||
for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
|
||||
// loop through fields qui, quoi, où, avec
|
||||
for (let f = 0; f < res_fields.length; f++) {
|
||||
if(this.concernement.besoins[i].reponses[j][res_fields[f]]){
|
||||
let rr = this.ray * this.scale - r*f - r/2; // reponse field ray
|
||||
let rx = Math.cos(a*(Math.PI/180)) * rr;
|
||||
let ry = Math.sin(a*(Math.PI/180)) * rr;
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.fillStyle = "#eee";
|
||||
this.ctx.strokeStyle = "#000";
|
||||
this.ctx.lineWidth = 1;
|
||||
// this.ctx.arc(this.pos.x + rx, this.pos.y + ry, 2*(f+1), 0, 2 * Math.PI, false);
|
||||
this.drawDiamond(this.pos.x + rx, this.pos.y + ry, 5);
|
||||
this.ctx.fill();
|
||||
this.ctx.stroke();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
drawDiamond(x,y,r){
|
||||
this.ctx.moveTo(x, y - r);
|
||||
this.ctx.lineTo(x + r, y);
|
||||
this.ctx.lineTo(x, y + r);
|
||||
this.ctx.lineTo(x - r, y);
|
||||
this.ctx.lineTo(x, y - r);
|
||||
},
|
||||
drawBoussole(){
|
||||
// BOUSSOLE
|
||||
// exterieur circle
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user