grid for contents in 3 levels ok

src/store/modules/project.js

@@ -38,7 +38,9 @@ export default {
       paddingZ: 0
     },
     contents: {},
-    grid: [],
+    contents_size_factor: 2, // factor to get the contents (grid) size proportional to windows
+    contentTypes: ['visible', 'context', 'process', 'concept'],
+    grid: { visible: [], context: [], process: [], concept: [] },
     gridContentPlaced: {}
   },
 
@@ -80,8 +82,9 @@ export default {
     setTopColor: (state, col) => { state.topColor = col },
     setFloorColor: (state, col) => { state.floorColor = col },
     setContents: (state, contents) => { state.contents = contents },
+    setGrid: (state, grid) => { state.grid = grid },
     shiftGrid: (state, c) => {
-      let p = state.grid.shift()
+      let p = state.grid[c.type].shift()
       if (!state.gridContentPlaced[c.type]) {
         state.gridContentPlaced[c.type] = {}
       }
@@ -161,23 +164,43 @@ export default {
         a++
       }
 
-      let grid = []
-      for (var l = 0; l < state.wall.nbrWinZ * 2; l++) { // cols
-        for (var m = 0; m < state.wall.nbrWinY * 2; m++) { // rows
-          grid.push({
-            z: margin + state.wall.winW / 2 * l,
-            y: margin + state.wall.winH / 2 * m
+      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) {
+          t = state.contentTypes[0]
+        } else if (m > rows / 4 * 2) {
+          t = state.contentTypes[1]
+        } else if (m > rows / 4) {
+          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
           })
         }
       }
-      // shuffle the grid
-      for (let n = grid.length - 1; n > 0; n--) {
-        const o = Math.floor(Math.random() * n)
-        const temp = grid[n]
-        grid[n] = grid[o]
-        grid[o] = temp
+      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
+        }
       }
-      state.grid = [ ...grid ]
+      console.log('shuffeld grid', grid)
+      commit('setGrid', grid)
+      console.log('state.grid', state.grid)
     },
     build3dObjs ({ dispatch, commit, state, getters, rootGetters }) {
       console.log('build3dObjs')
@@ -307,10 +330,9 @@ export default {
     },
     loadContents ({ dispatch, commit, state }) {
       console.log('loadContents')
-      // (where: { Published: "true" })
       GRAPHQL.post('', { query: `query {
           project(id: "${state.id}") {
-            visibles{
+            visibles(where: { Published: "true" }){
               id
               Name
               Media {
@@ -322,7 +344,7 @@ export default {
               Url
               categories
             }
-            contexts{
+            contexts(where: { Published: "true" }){
               id
               Name
               Images {
@@ -333,7 +355,7 @@ export default {
               Vimeo
               Url
             }
-            processes{
+            processes(where: { Published: "true" }){
               id
               Name
               Media {
@@ -344,7 +366,7 @@ export default {
               Vimeo
               Url
             }
-            concepts{
+            concepts(where: { Published: "true" }){
               id
               Name
               Images {