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

concernement popup on mouse over, better boussole, misc

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-04-14 13:27:34 +02:00
parent 6e6fc74e1c
commit 6b1d2680bd
5 changed files with 159 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/main.scss
View File

@ -10,6 +10,7 @@
body{
background-color: $back;
font-family: 'public_sans';
font-weight: 400;
}
#app{
@ -74,7 +75,7 @@ body{
section.concernement{
background-color: rgba(255, 255, 255, 0.9);
box-sizing: border-box;
width:30em;
width:450px;
height: 100%;
padding: 1rem;
}
@ -88,6 +89,7 @@ body{
padding: 1em;
h1{
font-size: 1em;
font-weight: 400;
}
}
}

101
src/components/ConcernementMapItem.vue
View File

@ -219,9 +219,13 @@ export default {
this.tween.stop();
}
if (open) {
// opening
// opening tweening
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y})
.to({s: 5,x: 500, y: 500}, 800)
.to({
s: 7,
x: (this.canvas.width - 450) / 2,
y: this.canvas.height / 2
}, 800)
.onUpdate((obj) => {
// https://github.com/liabru/matter-js/issues/986#issuecomment-812488873
// revert to the original size (by reverting the previous scale)
@ -279,47 +283,90 @@ export default {
// }
this.pos = this.body.position;
// exterieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = this.concernement.opened ? "#ff0000" : "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray*this.scale, 0, 2 * Math.PI, false);
this.ctx.stroke();
if (this.opened) {
// BOUSSOLE
// exterieur circle
this.ctx.beginPath();
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.stroke();
// interieur circle
this.ctx.beginPath();
this.ctx.lineWidth = 0.5;
this.ctx.strokeStyle = "#888";
this.ctx.arc(this.pos.x, this.pos.y, this.ray/2*this.scale, 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 + (8*this.scale));
this.ctx.lineTo(this.pos.x, this.pos.y - this.ray*this.scale);
this.ctx.lineTo(this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale + (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 = "#fff";
// 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();
}
// 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.4)";
this.ctx.moveTo(this.pos.x+this.salientPoints[0].pos.x*this.scale, this.pos.y+this.salientPoints[0].pos.y*this.scale)
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, this.pos.y+this.salientPoints[j].pos.y*this.scale)
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, this.pos.y+this.salientPoints[0].pos.y*this.scale)
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();
}
// place all entities points
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, 2, 0, 2 * Math.PI, false);
this.ctx.fillStyle = "#F00";
this.ctx.fill();
if (this.opened) {
// place all entities points
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, 2, 0, 2 * Math.PI, false);
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);

49
src/components/ConcernementMapPopup.vue Normal file
View File

@ -0,0 +1,49 @@
<script>
// import { RouterLink, RouterView } from 'vue-router'
import { mapState, mapActions } from 'pinia'
// import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'
export default {
name: 'concernementMapPopup',
props: ['id'],
data() {
return {
dom: null,
concernement: null
}
},
created () {
this.concernement = this.concernementsByID[this.id];
},
mounted () {
// console.log('APP onMounted')
this.dom = this.$refs['concernement-map-popup'];
window.addEventListener('mousemove', this.onMousemove);
},
computed: {
...mapState(ConcernementsStore,['concernements']),
...mapState(ConcernementsStore,['concernementsByID'])
},
methods: {
onMousemove(e){
// console.log('popup mousemove', e, this.dom);
this.dom.style.left = `${e.clientX + 5}px`;
this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
}
},
components: {
}
}
</script>
<template>
<div id="concernement-map-popup" ref="concernement-map-popup">
<h1>{{ concernement.title }}</h1>
</div>
</template>
<style lang="scss" scoped>
</style>

35
src/components/MapConcernements.vue
View File

@ -30,6 +30,8 @@ Matter.use(MatterAttractors);
import { mapState, mapActions } from 'pinia'
import { ConcernementsStore } from '@/stores/concernements'
import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
export default {
data() {
return {
@ -43,7 +45,8 @@ export default {
engine: null,
world: null,
// render: null,
mouse: null
mouse: null,
concernementpopupid: null
}
},
provide() {
@ -55,7 +58,8 @@ export default {
}
},
computed: {
...mapState(ConcernementsStore,['concernements'])
...mapState(ConcernementsStore,['concernements']),
...mapState(ConcernementsStore,['concernementsByID'])
},
created() {
// MATTER
@ -91,6 +95,7 @@ export default {
// add mouse control
// https://github.com/liabru/matter-js/issues/491#issuecomment-331329404
this.mouse = Matter.Mouse.create(this.canvasMap.canvas);
this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove)
this.canvasMap.canvas.addEventListener('click', this.onClick)
this.animate()
@ -103,6 +108,20 @@ export default {
Matter.Engine.update(this.engine, 1)
window.requestAnimationFrame(this.animate);
},
onMouseMove (e) {
// check concernement item mouse over
const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
// console.log('mousemove query', query);
if (query.length) {
if (typeof this.concernementsByID[query[0].id] !== "undefined" && !this.concernementsByID[query[0].id].opened) {
this.concernementpopupid = query[0].id;
} else {
this.concernementpopupid = null;
}
}else{
this.concernementpopupid = null;
}
},
onClick (e) {
console.log('onClick', this, e);
// get the clicked element from matter
@ -114,15 +133,21 @@ export default {
// console.log('body id:', elmt.id);
clickedIDs.push(elmt.id);
});
// open/close all concernements
this.concernements.forEach((concernement, index) => {
this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
});
// if no concernement opened retrun to home (closing concernement contents opened)
if (!clickedIDs.length) {
this.$router.push({name: 'home'});
}
}
},
beforeUpdate () {
},
components: {
MapBackground
MapBackground,
ConcernementMapPopup
}
}
@ -161,6 +186,10 @@ export default {
</li>
</ul>
</nav>
<ConcernementMapPopup
v-if="concernementpopupid"
:id="concernementpopupid"
/>
</template>
<style lang="css" scoped>

2
src/views/Concernement.vue
View File

@ -31,7 +31,7 @@ export default {
<section class="concernement">
<h2>{{ opened.title }}</h2>
<div v-html="opened.description"/>
<div v-html="opened.caillou"/>
<div v-html="opened.caillou "/>
</section>
</template>