diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 48c1df5..e1aae68 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -110,7 +110,7 @@ export default { handler (n, o) { console.log('watch map_mode', o, n); if (n === 'terraindevie') { - this.applyCheckForces(); + this.applyShuffleForces(); } }, deep: true @@ -383,7 +383,7 @@ export default { } ); }, - applyCheckForces() { + applyShuffleForces() { 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 @@ -411,29 +411,41 @@ export default { this.pos = this.body.position; if (this.opened) { - this.drawBoussole(); + switch (this.map_mode) { + case 'terraindevie': + this.drawBoussole(); + break; + case 'puissancedagir': + this.drawPuissanceagir(); + break; + } } // contours - this.drawContour(); + if (!this.opened + || (this.opened && this.map_mode !== "puissancedagir")) { + this.drawContour(); + } 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"; + 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(); } - this.ctx.fill(); } } } 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(){ var r = 20 * this.scale; // ray var dr = r/2; // demi ray