refactored grid placement, now up to 4 faces available

src/components/objects/ContentBlock.vue

@@ -101,7 +101,7 @@ export default {
       projSize: state => state.size,
       projPos: state => state.position,
       projWall: state => state.wall,
-      gridContentPlaced: state => state.gridContentPlaced,
+      gridsContentPlaced: state => state.gridsContentPlaced,
       contents_size_factor: state => state.contents_size_factor
     }),
     color () {
@@ -214,39 +214,65 @@ export default {
       //   this.rotation.y = 180
       // }
 
-      // // USES 2 FACES
+      // RANDOMLY USE 2 FACES
       if (face < 0.5) {
-        // 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 {
-        // 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
       }
-
-      // With GRID
-      // this.face = 'left'
-      // this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
-      // this.rotation.y = 90
-      if (typeof this.gridContentPlaced[this.type] === 'undefined' ||
-        typeof this.gridContentPlaced[this.type][this.id] === 'undefined') {
+      // define side
+      let side
+      switch (this.face) {
+        case 'back':
+        case 'front':
+          side = 'x'
+          break
+        case 'left':
+        case 'right':
+          side = 'z'
+          break
+      }
+      // Get GRID's CEL
+      if (typeof this.gridsContentPlaced[side] === 'undefined' ||
+        typeof this.gridsContentPlaced[side][this.face] === 'undefined' ||
+        typeof this.gridsContentPlaced[side][this.face][this.type] === 'undefined' ||
+        typeof this.gridsContentPlaced[side][this.face][this.type][this.id] === 'undefined') {
         // First shift grid place (will transfer it from free places to occupied places)
-        this.shiftGrid({ type: this.type, id: this.id })
+        this.shiftGrid({ face: this.face, type: this.type, id: this.id })
+      }
+      // 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 'face':
+              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
       }
-      // Then get the right place for the current content
-      let pos = this.gridContentPlaced[this.type][this.id]
-      console.log('pos', pos)
-      this.position.z = this.projPos.z - this.projSize.z / 2 + pos.z
-      this.position.y = this.projPos.y - this.projSize.y / 2 + pos.y
-
-      // this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
-      // this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
-      // this.label_position.z = this.position.z + this.size.z / 2 + 0.01
 
       // console.log(this.data.Media[0].url)
       // create image object with a promise (async img loading)

src/store/modules/project.js

@@ -45,8 +45,8 @@ export default {
     contents: {},
     contents_size_factor: 1, // factor to get the contents (grid) size proportional to windows
     contentTypes: ['visible', 'context', 'process', 'concept'],
-    grid: { visible: [], context: [], process: [], concept: [] },
-    gridContentPlaced: {},
+    grids: null,
+    gridsContentPlaced: {},
     activeLevel: 'visibles'
   },
 
@@ -90,13 +90,31 @@ export default {
     setLevels3dObj: (state, obj) => { state.levels3dObj = obj },
     setLevelsPos: (state, pos) => { state.levelsPos = pos },
     setContents: (state, contents) => { state.contents = contents },
-    setGrid: (state, grid) => { state.grid = grid },
+    setGrids: (state, grids) => { state.grids = grids },
     shiftGrid: (state, c) => {
-      let p = state.grid[c.type].shift()
-      if (!state.gridContentPlaced[c.type]) {
-        state.gridContentPlaced[c.type] = {}
+      console.log('shiftGrid c:', c)
+      let side
+      switch (c.face) {
+        case 'back':
+        case 'front':
+          side = 'x'
+          break
+        case 'left':
+        case 'right':
+          side = 'z'
+          break
       }
-      state.gridContentPlaced[c.type][c.id] = p
+      let p = state.grids[side][c.face][c.type].shift()
+      if (!state.gridsContentPlaced[side]) {
+        state.gridsContentPlaced[side] = {}
+      }
+      if (!state.gridsContentPlaced[side][c.face]) {
+        state.gridsContentPlaced[side][c.face] = {}
+      }
+      if (!state.gridsContentPlaced[side][c.face][c.type]) {
+        state.gridsContentPlaced[side][c.face][c.type] = {}
+      }
+      state.gridsContentPlaced[side][c.face][c.type][c.id] = p
     },
     setActiveLevel: (state, l) => {
       state.activeLevel = l
@@ -175,43 +193,75 @@ export default {
         a++
       }
 
-      let grid = {}
-      let rows = state.wall.nbrWinY / state.contents_size_factor
-      let cols = state.wall.nbrWinZ / state.contents_size_factor
-      let t
-      for (var m = 0; m < rows; m++) { // rows
-        if (m > rows / 4 * 3 + 1) {
-          t = state.contentTypes[0]
-        } else if (m > rows / 4 * 2 + 1) {
-          t = state.contentTypes[1]
-        } else if (m > rows / 4 + 1) {
-          t = state.contentTypes[2]
-        } else {
-          t = state.contentTypes[3]
-        }
-        if (!grid[t]) {
-          grid[t] = []
-        }
-        for (var l = 0; l < cols; l++) { // cols
-          grid[t].push({
-            z: margin + state.wall.winW * state.contents_size_factor * l,
-            y: margin + state.wall.winH * state.contents_size_factor * m
-          })
-        }
+      // create grids for right/left & face/back
+      let grids = {
+        x: { front: {}, back: {} },
+        z: { left: {}, right: {} }
       }
-      console.log('grid', grid)
-      // shuffle the grids
-      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('grids', grids)
+      let grid, rows, cols, t, cel
+      // console.log('Object.keys(grids)', Object.keys(grids))
+      Object.keys(grids).map(function (side) {
+        // console.log('GRID side:', side)
+        grid = {}
+        // calculate cols nbr regarding the face orientation
+        switch (side) {
+          case 'z':
+            cols = state.wall.nbrWinZ / state.contents_size_factor
+            break
+          case 'x':
+            cols = state.wall.nbrWinX / state.contents_size_factor
+            break
         }
-      }
-      console.log('shuffeld grid', grid)
-      commit('setGrid', grid)
-      console.log('state.grid', state.grid)
+        // calculate rows
+        rows = state.wall.nbrWinY / state.contents_size_factor
+        // dispatch grid rows on to 4 levels (t)
+        for (var m = 0; m < rows; m++) { // rows
+          if (m > rows / 4 * 3 + 1) {
+            t = state.contentTypes[0]
+          } else if (m > rows / 4 * 2 + 1) {
+            t = state.contentTypes[1]
+          } else if (m > rows / 4 + 1) {
+            t = state.contentTypes[2]
+          } else {
+            t = state.contentTypes[3]
+          }
+          // create level if not exists
+          if (!grid[t]) {
+            grid[t] = []
+          }
+          // create cols for each rows
+          for (var l = 0; l < cols; l++) { // cols
+            cel = { y: margin + state.wall.winH * state.contents_size_factor * m }
+            switch (side) {
+              case 'z':
+                cel.z = margin + state.wall.winW * state.contents_size_factor * l
+                break
+              case 'x':
+                cel.x = margin + state.wall.winW * state.contents_size_factor * 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
+            }
+          }
+          // console.log('shuffeld grid', grid)
+          grids[side][face] = { ...grid }
+        })
+      })
+      commit('setGrids', grids)
+      console.log('state.grids', state.grids)
     },
     build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
       console.log('build3dObjs')

src/store/modules/projects.js

@@ -40,7 +40,7 @@ export default {
 
   // actions
   actions: {
-    // async get authors
+    // async load projects
     loadProjects ({ dispatch, commit, state }) {
       // GRAPHQL
       GRAPHQL.post('', { query: `query {
@@ -56,7 +56,7 @@ export default {
           dispatch('computeProjects', projects)
         })
         .catch((error) => {
-          console.warn('Issue with getProjects', error)
+          console.warn('Issue with loadProjects', error)
           Promise.reject(error)
         })