better wall display

src/components/objects/ContentBlock.vue

@@ -31,7 +31,7 @@
         z:deg2rad(rotation.z)
       }"
     >
-      <geometry type="Plane" :args="[img_size.x, img_size.y]" />
+      <geometry type="Plane" :args="[img_size.width, img_size.height]" />
       <material type="MeshLambert" :options="img_opts">
         <texture :options="img_texture_opts" />
       </material>
@@ -103,7 +103,8 @@ export default {
       projWall: state => state.wall,
       gridsContentPlaced: state => state.gridsContentPlaced,
       contents_size_factor: state => state.contents_size_factor,
-      faces_opaques: state => state.Faces_opaques
+      faces_opaques: state => state.Faces_opaques,
+      gridCel: state => state.gridCel
     }),
     color () {
       let color = 0x000000
@@ -147,36 +148,41 @@ export default {
       this.preview_img_url = this.data.Vimeo.thumbnail_url_with_play_button
     } else if (this.data.Media && this.data.Media.length) {
       this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`
+    } else if (this.data.Images && this.data.Images.length) {
+      this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Images[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
+      // this.size.width = this.projWall.winW * this.contents_size_factor
+      // this.size.height = this.projWall.winH * this.contents_size_factor
 
-      // get the right size depending on screen
-      let u
-      if (window.innerWidth > window.innerHeight) {
-        u = window.innerHeight / window.innerWidth
-      } else {
-        u = window.innerWidth / window.innerHeight
-      }
-      this.size.x = this.projWall.winW * this.contents_size_factor
-      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}`)
+      // // get the right size depending on screen
+      // let u
+      // if (window.innerWidth > window.innerHeight) {
+      //   u = window.innerHeight / window.innerWidth
+      // } else {
+      //   u = window.innerWidth / window.innerHeight
+      // }
+      // this.size.width = this.projWall.winW * this.contents_size_factor
+      // this.size.height = this.projWall.winH * u * this.contents_size_factor
+      this.size.width = this.gridCel.width
+      this.size.height = this.gridCel.height
+      // console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.width}, size.y :${this.size.height}`)
 
-      if (typeof this.data.country.id !== 'undefined') {
-        console.log('this.data.country.id', this.data.country.id)
+      if (typeof this.data.country !== 'undefined' &&
+        typeof this.data.country.id !== 'undefined') {
+        // console.log('this.data.country.id', parseInt(this.data.country.id))
         switch (parseInt(this.data.country.id)) {
           case 1:
-            this.face = 'left'
+            this.face = 'right'
             break
           case 2:
             this.face = 'back'
             break
           case 3:
-            this.face = 'right'
+            this.face = 'left'
             break
         }
       } else {
@@ -217,7 +223,8 @@ export default {
             break
         }
       }
-      console.log('face', this.face)
+      // this.face = 'left'
+      // console.log('face', this.face)
       // define side
       let side
       switch (this.face) {
@@ -240,38 +247,11 @@ export default {
       }
       // rotation and position
       let gridPos = this.gridsContentPlaced[side][this.face][this.type][this.id]
-      console.log('gridPos', gridPos)
-      switch (side) {
-        case 'x':
-          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 'front':
-              this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
-              this.rotation.y = 180
-              break
-            case 'back':
-              this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
-              this.rotation.y = 0
-              break
-          }
-          break
-        case 'z':
-          this.position.z = this.projPos.z - this.projSize.z / 2 + gridPos.z
-          this.position.y = this.projPos.y - this.projSize.y / 2 + gridPos.y
-          switch (this.face) {
-            case 'left':
-              this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
-              this.rotation.y = 90
-              break
-            case 'right':
-              this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
-              this.rotation.y = -90
-              break
-          }
-          break
-      }
-
+      // console.log('gridPos', gridPos)
+      this.position.x = gridPos.x
+      this.position.z = gridPos.z
+      this.position.y = gridPos.y
+      this.rotation.y = gridPos.ry
       // console.log(this.data.Media[0].url)
       // create image object with a promise (async img loading)
       this.createImgCanvas(this.preview_img_url)
@@ -282,49 +262,36 @@ export default {
           // and fit the width and height to the screen
           let f
           if (canvas.width >= canvas.height) {
-            f = this.size.x / canvas.width
-            this.img_size.x = canvas.width * f - this.img_padding * 2
-            this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2
+            f = this.size.width / canvas.width
+            this.img_size.width = canvas.width * f - this.img_padding * 2
+            this.img_size.height = canvas.height * f - this.img_padding * 2
           } else {
-            f = this.size.y / canvas.height
-            this.img_size.y = canvas.height * f - this.img_padding * 2
-            this.img_size.x = this.size.x = canvas.width * f - this.img_padding * 2
+            f = this.size.height / canvas.height
+            this.img_size.height = canvas.height * f - this.img_padding * 2
+            this.img_size.width = canvas.width * f - this.img_padding * 2
           }
-          console.log(`size.x :${this.size.x}, size.y :${this.size.y}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
+          // console.log(`size.x :${this.size.width}, size.y :${this.size.height}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.width: ${this.img_size.width}, img_size.height: ${this.img_size.height}`)
 
-          this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
-          switch (this.face) {
-            case 'left':
-              this.img_position.z = this.position.z + this.size.x / 2 - this.img_size.x / 2
-              this.img_position.x = this.position.x
-              break
-            case 'back':
-              this.img_position.x = this.position.x - this.size.x / 2 + this.img_size.x / 2
-              this.img_position.z = this.position.z
-              break
-            case 'right':
-              this.img_position.z = this.position.z - this.size.x / 2 + this.img_size.x / 2
+          this.img_position.y = this.position.y
+          switch (side) {
+            case 'z':
+              this.img_position.z = this.position.z + this.size.width / 2
               this.img_position.x = this.position.x
               break
-            case 'front':
-              this.img_position.x = this.position.x + this.size.x / 2 - this.img_size.x / 2
+            case 'x':
+              this.img_position.x = this.position.x + this.size.width / 2
               this.img_position.z = this.position.z
               break
           }
           this.img_canvas = canvas
           this.curObj.needsUpdate()
-          // this.imgObj = this.$refs.img3d.curObj
-          // // record self references
-          // this.imgObj.userData = {
-          //   vnode: this
-          // }
         })
         .catch(function () {
           console.warn('CATCH img load ERROR')
         })
     }
     // this.img_position = { ...this.position }
-    // this.img_position.y -= this.size.y
+    // this.img_position.y -= this.size.height
   },
   mounted () {
     // this.block3d = this.$refs.block3d.curObj

src/components/objects/Project.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
+    <!-- <object3d v-if="debug" ref="gridDebug3d" name="griddebug" :obj="gridBebug3dObj" :position="wallsPos" /> -->
     <object3d ref="top" :obj="top3dObj" :position="topPos" />
     <object3d ref="floor" :obj="floor3dObj" :position="floorPos" />
     <object3d ref="levels" :obj="levels3dObj" :position="levelsPos" />
@@ -105,7 +106,7 @@ export default {
   mixins: [mixins],
   props: { id: Number },
   data () {
-    console.log('Project data()')
+    // console.log('Project data()')
     return {
       isOpened: false,
       block3d: null,
@@ -126,6 +127,7 @@ export default {
   },
   computed: {
     ...mapInstanceState(getModuleName, {
+      debug: state => state.debug,
       title: state => state.Titre,
       size: state => state.size,
       position: state => state.position,
@@ -138,6 +140,7 @@ export default {
       floorPos: state => state.floorPos,
       levels3dObj: state => state.levels3dObj,
       levelsPos: state => state.levelsPos,
+      // gridBebug3dObj: state => state.gridBebug3dObj,
       contents: state => state.contents,
       activeLevel: state => state.activeLevel
     }),
@@ -167,7 +170,7 @@ export default {
     this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
     this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
     this.label_position.z = this.position.z + this.size.z / 2 + 0.5
-    console.log('this.label_position', this.label_position)
+    // console.log('this.label_position', this.label_position)
   },
   mounted () {
     console.log('project mounted', this)

src/store/modules/project.js

@@ -16,6 +16,7 @@ export default {
 
   // initial state
   state: {
+    debug: true,
     obj3d: null,
     size: { x: 0, y: 0, z: 0 },
     position: { x: 0, y: 0, z: 0 },
@@ -33,7 +34,8 @@ export default {
       wallW: 0.001,
       // dig windows on face and back
       winW: 2 + Math.random() * 2,
-      winH: 4 + Math.random() * 4,
+      // winH: 4 + Math.random() * 4,
+      winH: 0,
       margin: 2,
       nbrWinX: 0,
       paddingX: 0,
@@ -46,7 +48,12 @@ export default {
     contents_size_factor: 1, // factor to get the contents (grid) size proportional to windows
     contentTypes: ['visible', 'context', 'process', 'concept'],
     grids: null,
+    gridCel: {
+      width: 6,
+      height: 4.5
+    },
     gridsContentPlaced: {},
+    // gridBebug3dObj: null,
     activeLevel: 'visibles'
   },
 
@@ -91,8 +98,9 @@ export default {
     setLevelsPos: (state, pos) => { state.levelsPos = pos },
     setContents: (state, contents) => { state.contents = contents },
     setGrids: (state, grids) => { state.grids = grids },
+    // setDebugGrids3dObj: (state, obj) => { state.gridBebug3dObj = obj },
     shiftGrid: (state, c) => {
-      console.log('shiftGrid c:', c)
+      // console.log('shiftGrid c:', c)
       let side
       switch (c.face) {
         case 'back':
@@ -104,7 +112,7 @@ export default {
           side = 'z'
           break
       }
-      let p = state.grids[side][c.face][c.type].shift()
+      let p = state.grids[side][c.face][c.type].pop()
       if (!state.gridsContentPlaced[side]) {
         state.gridsContentPlaced[side] = {}
       }
@@ -176,15 +184,15 @@ export default {
         a++
       }
       a = 0
-      state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
+      // state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
+      state.wall.nbrWinY = 4 * 10
+      state.wall.winH = (state.size.y - 2 * state.wall.margin) / state.wall.nbrWinY
       // removing windows on Y until padding is enough
       while (state.wall.paddingY < 0.4) {
         state.wall.nbrWinY -= a
         state.wall.paddingY = (state.size.y - 2 * state.wall.margin - state.wall.winH * state.wall.nbrWinY) / (state.wall.nbrWinY - 1)
-        a++
+        a += 4
       }
-
-      // CONTENTS GRID
       a = 0
       state.wall.nbrWinZ = Math.floor((state.size.z - 2 * state.wall.margin) / state.wall.winW)
       while (state.wall.paddingZ < 0.4) {
@@ -193,30 +201,42 @@ export default {
         a++
       }
 
+      // CONTENTS GRID
       // create grids for right/left & face/back
       let grids = {
         x: { front: {}, back: {} },
         z: { left: {}, right: {} }
       }
       // console.log('grids', grids)
-      let grid, rows, cols, t, cel
+      let grid, rows, cols, t, cel, paddingH
       // console.log('Object.keys(grids)', Object.keys(grids))
-      Object.keys(grids).map(function (side) {
-        // console.log('GRID side:', side)
+      // Object.keys(grids).map(function (side) {
+      Object.keys(grids).forEach(side => {
+        // console.log('# GRID side:', side)
+        // create one grid for each face x & z
+        // will then clone both for each face front/back or left/right)
         grid = {}
         // calculate cols nbr regarding the face orientation
         switch (side) {
           case 'z':
-            cols = state.wall.nbrWinZ / state.contents_size_factor
+            // cols = state.wall.nbrWinZ / state.contents_size_factor
+            cols = Math.floor(state.size.z / state.gridCel.width)
+            // compute padding to centering the grid horizontaly
+            paddingH = (state.size.z - cols * state.gridCel.width) / 2
             break
           case 'x':
-            cols = state.wall.nbrWinX / state.contents_size_factor
+            // cols = state.wall.nbrWinX / state.contents_size_factor
+            cols = Math.floor(state.size.x / state.gridCel.width)
+            // compute padding to centering the grid horizontaly
+            paddingH = (state.size.x - cols * state.gridCel.width) / 2
             break
         }
         // calculate rows
-        rows = state.wall.nbrWinY / state.contents_size_factor
+        // rows = state.wall.nbrWinY / state.contents_size_factor
+        rows = Math.floor(state.size.y / state.gridCel.height)
+
         // dispatch grid rows on to 4 levels (t)
-        for (var m = 0; m < rows; m++) { // rows
+        for (var m = rows - 1; m > 0; m--) { // rows
           if (m > rows / 4 * 3 + 1) {
             t = state.contentTypes[0]
           } else if (m > rows / 4 * 2 + 1) {
@@ -229,35 +249,86 @@ export default {
           // create level if not exists
           if (!grid[t]) {
             grid[t] = []
+            // skip the first level's row as we will display wall title
+            continue
           }
           // create cols for each rows
-          for (var l = 0; l < cols; l++) { // cols
-            cel = { y: margin + state.wall.winH * state.contents_size_factor * m }
+          for (var l = cols - 1; l >= 0; l--) { // cols
+            // cel = { y: margin + state.wall.winH * state.contents_size_factor * m }
+            cel = { y: state.position.y - state.size.y / 2 + state.gridCel.height * m }
             switch (side) {
               case 'z':
-                cel.z = margin + state.wall.winW * state.contents_size_factor * l
+                // cel.z = margin + state.wall.winW * state.contents_size_factor * l
+                cel.z = state.position.z - state.size.z / 2 + paddingH + state.gridCel.width * l
                 break
               case 'x':
-                cel.x = margin + state.wall.winW * state.contents_size_factor * l
+                // cel.x = margin + state.wall.winW * state.contents_size_factor * l
+                cel.x = state.position.x - state.size.x / 2 + paddingH + state.gridCel.width * l
                 break
             }
             grid[t].push(cel)
           }
         }
         // console.log('grid', grid)
-        // clown and shuffle the grids (one by face)
-        // console.log('Object.keys(grids[side])', Object.keys(grids[side]))
-        Object.keys(grids[side]).map(function (face) {
-          for (var i = 0; i < state.contentTypes.length; i++) {
-            for (let n = grid[state.contentTypes[i]].length - 1; n > 0; n--) {
-              const o = Math.floor(Math.random() * n)
-              const temp = grid[state.contentTypes[i]][n]
-              grid[state.contentTypes[i]][n] = grid[state.contentTypes[i]][o]
-              grid[state.contentTypes[i]][o] = temp
-            }
+
+        // apply grid for each face of each side
+        // Object.keys(grids[side]).map(function (face) {
+        Object.keys(grids[side]).forEach(face => {
+          // console.log('## GRID face:', face)
+          // // shuffling the grid
+          // for (var i = 0; i < state.contentTypes.length; i++) {
+          //   for (let n = grid[state.contentTypes[i]].length - 1; n > 0; n--) {
+          //     const o = Math.floor(Math.random() * n)
+          //     const temp = grid[state.contentTypes[i]][n]
+          //     grid[state.contentTypes[i]][n] = grid[state.contentTypes[i]][o]
+          //     grid[state.contentTypes[i]][o] = temp
+          //   }
+          // }
+          // // console.log('shuffeld grid', grid)
+
+          // cloning the grid for each face
+          // grids[side][face] = { ...grid } this is not working as it is not deep copy
+          grids[side][face] = JSON.parse(JSON.stringify(grid))
+
+          // comput common values
+          let x, z, ry
+          switch (face) {
+            case 'front': // side x
+              z = state.position.z + state.size.z / 2 - 0.1
+              ry = 180
+              break
+            case 'back': // side x
+              z = state.position.z - state.size.z / 2 + 0.1
+              ry = 0
+              break
+            case 'left': // side z
+              x = state.position.x - state.size.x / 2 + 0.1
+              ry = 90
+              break
+            case 'right': // side z
+              x = state.position.x + state.size.x / 2 - 0.1
+              ry = -90
+              break
           }
-          // console.log('shuffeld grid', grid)
-          grids[side][face] = { ...grid }
+
+          // loop through levels
+          // apply common values
+          // Object.keys(grids[side][face]).map(function (level) {
+          Object.keys(grids[side][face]).forEach(level => {
+            // console.log(`${side} ${face} ${level} x: ${x}, z: ${z}, ry: ${ry}`)
+            // loop through all cels of the level
+            for (var i = 0; i < grids[side][face][level].length; i++) {
+              grids[side][face][level][i].ry = ry
+              switch (side) {
+                case 'z':
+                  grids[side][face][level][i].x = x
+                  break
+                case 'x':
+                  grids[side][face][level][i].z = z
+                  break
+              }
+            }
+          })
         })
       })
       commit('setGrids', grids)
@@ -392,16 +463,32 @@ export default {
       let levelsPos = { ...state.position }
       commit('setLevelsPos', levelsPos)
 
-      // // repère
-      // let repGeom = new THREE.BoxGeometry(1, 1, 1)
-      // let repMesh = new THREE.Mesh(repGeom)
-      // let repOpts = {
-      //   color: 0x0000ff,
-      //   shininess: 30
+      // // DEBUG GRID
+      // if (state.debug) {
+      //   let celDebugGeom = new THREE.BoxGeometry(1, 1, 0.01)
+      //   let celDebugMesh = new THREE.Mesh(celDebugGeom)
+      //   let gridsDebugGeom = new THREE.Geometry()
+      //   Object.keys(state.grids).map(function (side) {
+      //     Object.keys(state.grids[side]).map(function (face) {
+      //       Object.keys(state.grids[side][face]).map(function (level) {
+      //         state.grids[side][face][level].forEach((item, i) => {
+      //           // console.log(`grid ${side} ${face} ${level} ${i}`, item)
+      //           celDebugMesh.position.y = state.grids[side][face][level][i].y
+      //           celDebugMesh.position.x = state.grids[side][face][level][i].x
+      //           celDebugMesh.position.z = state.grids[side][face][level][i].z
+      //           celDebugMesh.rotation.y = state.grids[side][face][level][i].ry
+      //           gridsDebugGeom.mergeMesh(celDebugMesh)
+      //         })
+      //       })
+      //     })
+      //   })
+      //   let gridsDebugOpts = {
+      //     color: 0xff0000
+      //   }
+      //   let gridsDebugMat = new THREE.MeshPhongMaterial(gridsDebugOpts)
+      //   let gridsDebugMesh = new THREE.Mesh(gridsDebugGeom, gridsDebugMat)
+      //   commit('setDebugGrids3dObj', gridsDebugMesh)
       // }
-      // repMesh.material = new THREE.MeshPhongMaterial(repOpts)
-      // repMesh.position = { ...state.position, ...{ y: 0 } }
-      // commit('setRep3dObj', levelsMesh)
     },
     getContents ({ dispatch, commit, state }) {
       return new Promise((resolve, reject) => {
@@ -496,7 +583,7 @@ export default {
       return Promise.all(Object.keys(contents).map(function (key) {
         return Promise.all(contents[key].map(function (content) {
           if (content.Vimeo) {
-            console.log('Vimeo', content.Vimeo)
+            // console.log('Vimeo', content.Vimeo)
             // GET https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/286898202&width=480&height=360
             let params = {
               url: content.Vimeo,
@@ -507,7 +594,7 @@ export default {
             let q = qs.stringify(params)
             return VIMEO.get('?' + q, {})
               .then(({ data }) => {
-                console.log('Vimeo data', data)
+                // console.log('Vimeo data', data)
                 content.Vimeo = data// thumbnail_url_with_play_button
                 return content
               })
@@ -519,7 +606,7 @@ export default {
           }
         })).then((cts) => {
           // return an object with the right key (visible, etc, ...)
-          console.log(`${key} cts`, cts)
+          // console.log(`${key} cts`, cts)
           let o = {}
           o[key] = cts
           return o

src/store/modules/projects.js

@@ -59,21 +59,6 @@ export default {
           console.warn('Issue with loadProjects', error)
           Promise.reject(error)
         })
-
-      // REST
-      // let params = {
-      //   _sort: `weight:ASC`
-      // }
-      // let q = qs.stringify(params)
-      // REST.get(`projects?` + q, {})
-      //   .then(({ data }) => {
-      //     console.log('projects getProjects REST: data', data)
-      //     commit('setProjects', data)
-      //   })
-      //   .catch((error) => {
-      //     console.warn('Issue with getProjects', error)
-      //     Promise.reject(error)
-      //   })
     },
     computeProjects ({ dispatch, commit, state }, projects) {
       console.log('computeProjects', this)
@@ -95,7 +80,7 @@ export default {
           size = {
             x: w,
             y: Math.round(110 + Math.random() * 100),
-            z: Math.round(10 + Math.random() * 30)
+            z: Math.round(21 + Math.random() * 20)
           }
           // convert to number the project id
           project.id = parseInt(project.id, 10)