assets/css/app.scss

@@ -107,6 +107,7 @@ section[role="main-content"]{
     margin: 0 0.5em 0.5em 0;
     background-color: rgba(255,255,255,0.6);
     border-radius: 3px;
+    pointer-events: none;
   }
 }
 

src/App.vue

@@ -385,16 +385,18 @@ export default {
                 toPos.x += 1.5
                 this.controls.lon = 180
                 break
-              // case 'back':
-              //   toPos.z += 4
-              //   break
+              case 'back':
+                toPos.z += 1.5
+                this.controls.lon = -90
+                break
               case 'right':
                 toPos.x -= 1.5
                 this.controls.lon = 0
                 break
-              // case 'front':
-              //   toPos.z -= 4
-              //   break
+              case 'front':
+                toPos.z -= 1.5
+                this.controls.lon = 90
+                break
             }
             // let controls = this.controls
             // let rad2deg = this.rad2deg

src/components/objects/ContentBlock.vue

@@ -102,7 +102,8 @@ export default {
       projPos: state => state.position,
       projWall: state => state.wall,
       gridsContentPlaced: state => state.gridsContentPlaced,
-      contents_size_factor: state => state.contents_size_factor
+      contents_size_factor: state => state.contents_size_factor,
+      faces_opaques: state => state.Faces_opaques
     }),
     color () {
       let color = 0x000000
@@ -148,6 +149,8 @@ export default {
       this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`
     }
 
+    // for now display only items that have img to preview
+    // TODO: what to do with items without images ?
     if (this.preview_img_url) {
       // this.size.x = this.projWall.winW * this.contents_size_factor
       // this.size.y = this.projWall.winH * this.contents_size_factor
@@ -163,63 +166,58 @@ export default {
       this.size.y = this.projWall.winH * u * this.contents_size_factor
       // console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.x}, size.y :${this.size.y}`)
 
-      // this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
-      //
-      // this.size.x = this.label_size.x + 0.2
-      // this.size.y = this.label_size.y + 0.2
-
-      // let y = 0
-      // let top = this.projPos.y + this.projSize.y / 2
-      // let floor = this.projPos.y - this.projSize.y / 2
-      // switch (this.type) {
-      //   case 'visible':
-      //     y = top * Math.random()
-      //     break
-      //   case 'context':
-      //     y = floor / 3 * Math.random()
-      //     break
-      //   case 'process':
-      //     y = floor / 3 + floor / 3 * Math.random()
-      //     break
-      //   case 'concept':
-      //     y = (floor / 3) * 2 + floor / 3 * Math.random()
-      //     break
-      // }
-      // this.position.y = y
-
-      let face = Math.random()
-      // // USES 4 FACES
-      // if (face < 0.25) {
-      //   // gauche
-      //   this.face = 'left'
-      //   this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
-      //   this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
-      //   this.rotation.y = 90
-      // } else if (face >= 0.25 && face < 0.5) {
-      //   // fond
-      //   this.face = 'back'
-      //   this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
-      //   this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
-      // } else if (face >= 0.5 && face < 0.75) {
-      //   // droite
-      //   this.face = 'right'
-      //   this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
-      //   this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
-      //   this.rotation.y = -90
-      // } else {
-      //   // face
-      //   this.face = 'front'
-      //   this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
-      //   this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
-      //   this.rotation.y = 180
-      // }
-
-      // RANDOMLY USE 2 FACES
-      if (face < 0.5) {
-        this.face = 'left'
+      if (typeof this.data.country.id !== 'undefined') {
+        console.log('this.data.country.id', this.data.country.id)
+        switch (parseInt(this.data.country.id)) {
+          case 1:
+            this.face = 'left'
+            break
+          case 2:
+            this.face = 'back'
+            break
+          case 3:
+            this.face = 'right'
+            break
+        }
       } else {
-        this.face = 'right'
+        let face = Math.random()
+        switch (this.faces_opaques) {
+          case 1:
+            this.face = 'back'
+            break
+          case 2:
+            // RANDOMLY USE 2 FACES
+            if (face < 0.5) {
+              this.face = 'left'
+            } else {
+              this.face = 'right'
+            }
+            break
+          case 3:
+            // RANDOMLY USE 3 FACES
+            if (face < 0.33) {
+              this.face = 'left'
+            } else if (face >= 0.33 && face < 0.66) {
+              this.face = 'back'
+            } else {
+              this.face = 'right'
+            }
+            break
+          case 4:
+            // RANDOMLY USE 4 FACES
+            if (face < 0.25) {
+              this.face = 'left'
+            } else if (face >= 0.25 && face < 0.5) {
+              this.face = 'back'
+            } else if (face >= 0.5 && face < 0.75) {
+              this.face = 'right'
+            } else {
+              this.face = 'front'
+            }
+            break
+        }
       }
+      console.log('face', this.face)
       // define side
       let side
       switch (this.face) {
@@ -248,7 +246,7 @@ export default {
           this.position.x = this.projPos.x - this.projSize.x / 2 + gridPos.x
           this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
           switch (this.face) {
-            case 'face':
+            case 'front':
               this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
               this.rotation.y = 180
               break

src/store/modules/project.js

@@ -443,6 +443,10 @@ export default {
               Vimeo
               Url
               categories
+              country{
+                id
+                Name
+              }
             }
             contexts(where: { Published: "true" }){
               id
@@ -454,6 +458,10 @@ export default {
               Text2
               Vimeo
               Url
+              country{
+                id
+                Name
+              }
             }
             processes(where: { Published: "true" }){
               id
@@ -465,6 +473,10 @@ export default {
               Text2
               Vimeo
               Url
+              country{
+                id
+                Name
+              }
             }
             concepts(where: { Published: "true" }){
               id