From baa959d35eeb9e5d903607e11a57f94e69d67cbb Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Tue, 15 Sep 2020 22:36:13 +0200
Subject: [PATCH] refactoring in progress: vuex submodules

---
 src/App.vue                        |  15 +-
 src/components/objects/Project.vue | 272 ++++---------------------
 src/store/modules/project.js       | 309 +++++++++++++++++++++++++++++
 src/store/modules/projects.js      | 174 ++++++----------
 4 files changed, 416 insertions(+), 354 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9997276..1bfe3bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,6 @@
                 v-for="(project) in projects"
                 :key="project.id"
                 :id="project.id"
-                :title="project.Titre"
               />
             </template>
 
@@ -220,14 +219,14 @@ export default {
       }
     }
   },
-  watch: {
-    projects (n, o) {
-      console.log(`watch projects new, old`, n, o)
-    }
-  },
+  // watch: {
+  //   projects (n, o) {
+  //     console.log(`watch projects new, old`, n, o)
+  //   }
+  // },
   created () {
     if (!this.projects.length) {
-      this.getProjects()
+      this.loadProjects()
     }
     this.$env3d.scene = this.myScene
     this.$env3d.renderer = this.myRenderer
@@ -255,7 +254,7 @@ export default {
   },
   methods: {
     ...mapActions({
-      getProjects: 'Projects/getProjects'
+      loadProjects: 'Projects/loadProjects'
     }),
     handleScene (scene) {
       console.log('handlescene', scene)
diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue
index 17e31c3..7f6e886 100644
--- a/src/components/objects/Project.vue
+++ b/src/components/objects/Project.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
-    <object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
-    <object3d ref="top" :obj="top_mesh" :position="top_position" />
+    <object3d ref="block3d" name="Project" :obj="walls3dObj" :position="wallsPos" />
+    <!-- <object3d ref="top" :obj="top_mesh" :position="top_position" />
     <object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
-    <object3d ref="level" :obj="level_mesh" :position="level_position" />
+    <object3d ref="level" :obj="level_mesh" :position="level_position" /> -->
     <!-- <light :obj="light" :position="building_position" /> -->
-    <mesh ref="label3d" name="Label" :position="label_position">
+    <!-- <mesh ref="label3d" name="Label" :position="label_position">
       <geometry type="Plane" :args="[label_size.x, label_size.y]" />
       <material type="MeshLambert" :options="label_opts">
         <texture :options="label_texture_opts" />
       </material>
-    </mesh>
+    </mesh> -->
     <!-- <div v-if="isOpened">
       <ContentBlock
         v-for="item in data.visibles"
@@ -57,8 +57,7 @@
 import { mapInstanceState } from '@urbn/vuex-helpers'
 
 import * as THREE from 'three'
-// import { toCSG, fromCSG } from 'three-csg'
-import { ThreeBSP } from 'three-js-csg-es6'
+// import { ThreeBSP } from 'three-js-csg-es6'
 
 import mixins from 'components/mixins'
 
@@ -77,202 +76,11 @@ export default {
     // ContentBlock
   },
   mixins: [mixins],
-  props: { id: Number, title: String },
+  props: { id: Number },
   data () {
-    console.log('Project data() : data', this.data)
-    // get size and positions from project store
-    let size = { ...this.data.size }
-    let position = { ...this.data.position }
-    let wall = { ...this.data.wall }
-    // http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
-    // console.log('ThreeBSP', ThreeBSP)
-
-    let backGeom = new THREE.BoxGeometry(size.x, size.y, wall.wallW)
-    let backMesh = new THREE.Mesh(backGeom)
-    backMesh.position.z = -0.5 * size.z
-    let backBSP = new ThreeBSP(backMesh)
-
-    let winGeom = new THREE.BoxGeometry(wall.winW, wall.winH, wall.wallW)
-    let winMesh = new THREE.Mesh(winGeom)
-    let winBSP
-    for (var i = 0; i < wall.nbrWinX; i++) {
-      for (var j = 0; j < wall.nbrWinY; j++) {
-        winMesh.position.z = -0.5 * size.z
-        winMesh.position.x = -0.5 * size.x + wall.margin + wall.winW * 0.5 + i * (wall.winW + wall.paddingX)
-        winMesh.position.y = 0.5 * size.y - wall.margin - wall.winH * 0.5 - j * (wall.winH + wall.paddingY)
-        winBSP = new ThreeBSP(winMesh)
-        backBSP = backBSP.subtract(winBSP)
-      }
-    }
-
-    // let abovewWaterH = position.y + size.y / 2
-    // let underWaterHThd = (-1 * position.y - size.y / 2) / 3
-    // let levelH = 4
-    // let levelGeom = new THREE.BoxGeometry(size.x, levelH, wallW)
-    // let levelMesh, levelBSP
-    // for (var l = 0; l < 2; l++) {
-    //   levelMesh = new THREE.Mesh(levelGeom)
-    //   levelMesh.position.z = -0.5 * size.z
-    //   levelMesh.position.y = 0.5 * size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
-    //   levelBSP = new ThreeBSP(levelMesh)
-    //   backBSP = backBSP.union(levelBSP)
-    // }
-
-    backMesh = backBSP.toMesh()
-    let faceMesh = backMesh.clone()
-    faceMesh.position.z = 0.5 * size.z
-    let faceBSP = new ThreeBSP(faceMesh)
-
-    let rightGeom = new THREE.BoxGeometry(wall.wallW, size.y, size.z)
-    let rightMesh = new THREE.Mesh(rightGeom)
-    rightMesh.position.x = 0.5 * size.x
-    // rightMesh.position.z = 0.5 * size.z
-    let rightBSP = new ThreeBSP(rightMesh)
-
-    // WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
-    // // dig windows on right
-    // let nbrWinZ = Math.floor((size.z - 2 * margin) / winW)
-    // let paddingZ = (size.z - 2 * margin - winW * nbrWinZ) / (nbrWinX - 1)
-    // winGeom = new THREE.BoxGeometry(wallW, winH, winW)
-    // for (i = 0; i < nbrWinZ; i++) {
-    //   for (j = 0; j < nbrWinY; j++) {
-    //     // right
-    //     winMesh = new THREE.Mesh(winGeom)
-    //     winMesh.position.x = 0.5 * size.x
-    //     winMesh.position.z = -0.5 * size.z + margin + winW * 0.5 + i * (winW + paddingZ)
-    //     winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
-    //     winBSP = new ThreeBSP(winMesh)
-    //     rightBSP = rightBSP.subtract(winBSP)
-    //   }
-    // }
-    // rightMesh = rightBSP.toMesh()
-
-    let leftMesh = rightMesh.clone()
-    leftMesh.position.x = -0.5 * size.x
-    // leftMesh.position.z = 0.5 * size.z
-    let leftBSP = new ThreeBSP(leftMesh)
-    //
-    // let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
-    // let topMesh = new THREE.Mesh(topGeom)
-    // // topMesh.position.y = -0.5 * size.y
-    // // let topBSP = new ThreeBSP(topMesh)
-    //
-    // let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
-    // let floorMesh = new THREE.Mesh(floorGeom)
-    // // floorMesh.position.y = 0.5 * size.y
-    // // let floorBSP = new ThreeBSP(floorMesh)
-
-    let buildingBSP = backBSP.union(rightBSP)
-    buildingBSP = buildingBSP.union(faceBSP)
-    buildingBSP = buildingBSP.union(leftBSP)
-    // buildingBSP = buildingBSP.union(topBSP)
-    // buildingBSP = buildingBSP.union(floorBSP)
-
-    // convert back to three.js mesh
-    let building = buildingBSP.toMesh()
-    console.log('building.faces', building)
-
-    // create a custom shaderMaterial to had gradian colors
-    // var uniforms = THREE.UniformsUtils.merge([
-    //   THREE.UniformsLib['lights'],
-    //   {
-    //     'topColor': { value: new THREE.Color(0xffffff) },
-    //     'groundColor': { value: new THREE.Color(0xbcd6e4) },
-    //     'bottomColor': { value: new THREE.Color(0x07223b) },
-    //     // 'bottomColor': { value: new THREE.Color(0x000000) },
-    //     // 'groundColor': { value: new THREE.Color(0xff0000) },
-    //     // 'bottomColor': { value: new THREE.Color(0x00ff00) },
-    //     lightIntensity: { type: 'f', value: 1.0 }
-    //   }
-    // ])
-    // var buildingMat = new THREE.ShaderMaterial({
-    //   uniforms: uniforms,
-    //   vertexShader: BgVertex,
-    //   fragmentShader: BuildingFragment,
-    //   side: THREE.DoubleSide,
-    //   lights: true
-    // })
-    // building.material = buildingMat
-
-    // create a classical material for building
-    // let topColor = `hsla(201, 100%, 95%, 1)`
-    let hTop = Math.round(195 + Math.random() * 10)
-    let sTop = Math.round(100)
-    let lTop = Math.round(95)
-    let hFloor = Math.round(205 + Math.random() * 10)
-    let sFloor = Math.round(40 + Math.random() * 20)
-    let lFloor = Math.round(5 + Math.random() * 15)
-    let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
-    let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
-
-    let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor))
-
-    let materialOpts = {
-      color: 0xffffff,
-      side: THREE.DoubleSide,
-      shininess: 30,
-      map: gradientTexture
-      // wireframe: true,
-      // transparent: true,
-      // opacity: 0.6
-      // renderOrder: 0
-    }
-    building.material = new THREE.MeshPhongMaterial(materialOpts)
-
-    // building.castShadow = true
-    // building.receiveShadow = true
-
-    // let buildingGeom = fromCSG(boxCSG)
-    // buildingGeom.computeVertexNormals()
-
-    // result
-    // let subtractCSG = boxMeshCSG.subtract(holeMeshCSG)
-    // let building = fromCSG(boxMeshCSG) // converting CSG back into ThreeJS object
-    //
-    let buildingPos = { ...position }
-    buildingPos.z -= 0.5 * size.z
-
-    // TOP & FLOOR
-    let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
-    let topOpts = {
-      color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
-      // side: THREE.DoubleSide,
-      shininess: 30
-    }
-    let topMat = new THREE.MeshPhongMaterial(topOpts)
-    let topMesh = new THREE.Mesh(topGeom, topMat)
-    let topPosition = { ...position }
-    topPosition.y += 0.5 * size.y
-
-    // let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
-    let floorOpts = {
-      color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
-      // side: THREE.DoubleSide,
-      shininess: 10
-    }
-    let floorMat = new THREE.MeshPhongMaterial(floorOpts)
-    let floorMesh = new THREE.Mesh(topGeom, floorMat)
-    let floorPosition = { ...position }
-    floorPosition.y -= 0.5 * size.y
-
-    // LEVELS
-    let levelGeom = new THREE.BoxGeometry(size.x, 1, size.z)
-    let levelMesh = new THREE.Mesh(levelGeom)
-    let levelBSP = new ThreeBSP(levelMesh)
-    let levelHoleGeom = new THREE.BoxGeometry(size.x - 3, 1, size.z - 3)
-    let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
-    let levelHoleBSP = new ThreeBSP(levelHoleMesh)
-    levelBSP = levelBSP.subtract(levelHoleBSP)
-    levelMesh = levelBSP.toMesh()
-    let levelOpts = {
-      color: 0xff0000,
-      shininess: 10
-    }
-    let levelMat = new THREE.MeshPhongMaterial(levelOpts)
-    levelMesh.material = levelMat
+    console.log('Project data()')
 
     return {
-      modName: null,
       block3d: null,
       // block_opts: materialOpts,
       label3d: null,
@@ -284,20 +92,20 @@ export default {
         // renderOrder: 0
       },
       // size and positions are defined in store project
-      size: size,
-      position: position,
+      // size: size,
+      // position: position,
 
       // geometry: geometry,
       // light: light,
-      building: building,
-      building_position: buildingPos,
-      top_mesh: topMesh,
-      top_position: topPosition,
-      floor_mesh: floorMesh,
-      floor_position: floorPosition,
-      level_mesh: levelMesh,
-      level_position: { ...position },
-      label_position: { x: 0, y: 0, z: 0 },
+      // building: building,
+      // building_position: buildingPos,
+      // top_mesh: topMesh,
+      // top_position: topPosition,
+      // floor_mesh: floorMesh,
+      // floor_position: floorPosition,
+      // level_mesh: levelMesh,
+      // level_position: { ...position },
+      // label_position: { x: 0, y: 0, z: 0 },
       color: 0xffffff,
       label_canvas: null,
       label_size: null,
@@ -306,30 +114,28 @@ export default {
   },
   computed: {
     ...mapInstanceState(getModuleName, {
-      storeID: state => state.id
-    }),
-    label_texture_opts () {
-      return {
-        canvas: this.label_canvas,
-        minFilter: THREE.LinearFilter,
-        wrapS: THREE.ClampToEdgeWrapping,
-        wrapT: THREE.ClampToEdgeWrapping
-      }
-    }
+      title: state => state.Titre,
+      // size: state => state.size,
+      // position: state => state.position,
+      walls3dObj: state => state.walls3dObj,
+      wallsPos: state => state.wallsPos
+    })
+    // label_texture_opts () {
+    //   return {
+    //     canvas: this.label_canvas,
+    //     minFilter: THREE.LinearFilter,
+    //     wrapS: THREE.ClampToEdgeWrapping,
+    //     wrapT: THREE.ClampToEdgeWrapping
+    //   }
+    // }
   },
   created () {
-    console.log('Project created: data', this, this.data)
-    console.log('Project created: getModuleName', getModuleName)
 
-    // TODO: create dynamic vuex module for each project
-    // this.modNameSpace = `project:${this.data.id}`
-
-    // this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
-    this.label_canvas = this.createLabelCanvas(this.storeID.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
-    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_canvas', this.label_canvas)
+    // this.label_canvas = this.createLabelCanvas(this.title.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
+    // 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_canvas', this.label_canvas)
   },
   mounted () {
     console.log('project mounted', this)
@@ -342,7 +148,7 @@ export default {
     this.block3d.userData = {
       vnode: this
     }
-    this.label3d = this.$refs.label3d.curObj
+    // this.label3d = this.$refs.label3d.curObj
 
     // light
     // console.log('project mounted', this.$env3d)
diff --git a/src/store/modules/project.js b/src/store/modules/project.js
index fc14883..a34a4f9 100644
--- a/src/store/modules/project.js
+++ b/src/store/modules/project.js
@@ -4,22 +4,331 @@
 // import qs from 'querystring'
 // import { REST } from 'api/rest-axios'
 
+import * as THREE from 'three'
+import { ThreeBSP } from 'three-js-csg-es6'
+
 export default {
   namespaced: true,
 
   // initial state
   state: {
+    obj3d: null,
+    size: { x: 0, y: 0, z: 0 },
+    position: { x: 0, y: 0, z: 0 },
+    walls3dObj: null,
+    wallsPos: null,
+    wall: {
+      wallW: 0.001,
+      // dig windows on face and back
+      winW: 2 + Math.random() * 2,
+      winH: 4 + Math.random() * 4,
+      margin: 2,
+      nbrWinX: 0,
+      paddingX: 0,
+      nbrWinY: 0,
+      paddingY: 0,
+      nbrWinZ: 0,
+      paddingZ: 0
+    },
+    grid: []
   },
 
   // getters
   getters: {
+    position: (state) => {
+      return state.position
+    },
+    size: (state) => {
+      return state.size
+    }
   },
 
   // mutations
   mutations: {
+    setSize: (state, size) => {
+      state.size = size
+    },
+    setPosition: (state, pos) => {
+      state.position = pos
+    },
+    setWalls3dObj: (state, obj) => {
+      state.walls3dObj = obj
+    },
+    setWallsPos: (state, pos) => {
+      state.wallsPos = pos
+    }
   },
 
   // actions
   actions: {
+    init ({ dispatch, commit, state, rootGetters }) {
+      console.log('Init Project module', state.id)
+      dispatch('sizingBuilding')
+      dispatch('build3dObjs')
+    },
+    sizingBuilding ({ dispatch, commit, state, rootGetters }) {
+      console.log('sizingBuilding', state.index)
+      let totalW = rootGetters['Projects/totalW']
+      console.log('totalW', totalW)
+      let margin = rootGetters['Projects/marginBetweenBuildings']
+      console.log('margin', margin)
+
+      // positioning buildings on x regarding the widths
+      // & setting up the window sizing
+      // & setting up the content grid
+      // let wall, a
+      // let grid
+
+      // X POS
+      let x
+      if (state.index === 0) {
+        // if it's the first
+        x = -1 * totalW / 2
+      } else {
+        // else get the precedent pos
+        let prevProjID = rootGetters['Projects/projectID'](state.index - 1)
+        console.log('prevProjID', prevProjID)
+        let prevProjPos = rootGetters[`project:${prevProjID}/position`]
+        console.log(`project:${prevProjID}/position.x`, prevProjPos.x)
+        let prevProjSize = rootGetters[`project:${prevProjID}/size`]
+        console.log(`project:${prevProjID}/size.x`, prevProjSize.x)
+        console.log('state.size.x', state.size.x)
+        //  prev X        + alf of prev size x + margin + half of current size x
+        x = prevProjPos.x + prevProjSize.x / 2 + margin + state.size.x / 2
+      }
+      console.log('x', x)
+      commit('setPosition', {
+        x: x,
+        y: -1 * state.size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
+        z: -10 + Math.random() * 10
+      })
+
+      // // WINDOWS
+      // // removing windows on X until padding is enough
+      // a = 0
+      // state.wall.nbrWinX = Math.floor((state.size.x - 2 * state.wall.margin) / state.wall.winW)
+      // while (state.wall.paddingX < 0.4) {
+      //   state.wall.nbrWinX -= a
+      //   state.wall.paddingX = (state.size.x - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinX) / (state.wall.nbrWinX - 1)
+      //   a++
+      // }
+      // // removing windows on Y until padding is enough
+      // a = 0
+      // state.wall.nbrWinY = Math.floor((state.size.y - 2 * state.wall.margin) / state.wall.winH)
+      // 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++
+      // }
+      // state.wall = { ...wall }
+      //
+      // // 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) {
+      //   state.wall.nbrWinZ -= a
+      //   state.wall.paddingZ = (state.size.z - 2 * state.wall.margin - state.wall.winW * state.wall.nbrWinZ) / (state.wall.nbrWinZ - 1)
+      //   a++
+      // }
+      //
+      // 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
+      //     })
+      //   }
+      // }
+      // // 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
+      // }
+      // state.grid = [ ...grid ]
+    },
+    build3dObjs ({ dispatch, commit, state, rootGetters }) {
+      // http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/
+
+      let backGeom = new THREE.BoxGeometry(state.size.x, state.size.y, state.wall.wallW)
+      let backMesh = new THREE.Mesh(backGeom)
+      backMesh.position.z = -0.5 * state.size.z
+      let backBSP = new ThreeBSP(backMesh)
+
+      // TODO: use web workers
+      // https://medium.com/techtrument/multithreading-javascript-46156179cf9a
+
+      // let winGeom = new THREE.BoxGeometry(state.wall.winW, state.wall.winH, state.wall.wallW)
+      // let winMesh = new THREE.Mesh(winGeom)
+      // let winBSP
+      // for (var i = 0; i < state.wall.nbrWinX; i++) {
+      //   for (var j = 0; j < state.wall.nbrWinY; j++) {
+      //     winMesh.position.z = -0.5 * state.size.z
+      //     winMesh.position.x = -0.5 * state.size.x + state.wall.margin + state.wall.winW * 0.5 + i * (state.wall.winW + state.wall.paddingX)
+      //     winMesh.position.y = 0.5 * state.size.y - state.wall.margin - state.wall.winH * 0.5 - j * (state.wall.winH + state.wall.paddingY)
+      //     winBSP = new ThreeBSP(winMesh)
+      //     backBSP = backBSP.subtract(winBSP)
+      //   }
+      // }
+      //
+      // // let abovewWaterH = position.y + state.size.y / 2
+      // // let underWaterHThd = (-1 * position.y - state.size.y / 2) / 3
+      // // let levelH = 4
+      // // let levelGeom = new THREE.BoxGeometry(state.size.x, levelH, wallW)
+      // // let levelMesh, levelBSP
+      // // for (var l = 0; l < 2; l++) {
+      // //   levelMesh = new THREE.Mesh(levelGeom)
+      // //   levelMesh.position.z = -0.5 * state.size.z
+      // //   levelMesh.position.y = 0.5 * state.size.y - abovewWaterH - underWaterHThd - underWaterHThd * l + levelH * 0.5
+      // //   levelBSP = new ThreeBSP(levelMesh)
+      // //   backBSP = backBSP.union(levelBSP)
+      // // }
+
+      backMesh = backBSP.toMesh()
+      let faceMesh = backMesh.clone()
+      faceMesh.position.z = 0.5 * state.size.z
+      let faceBSP = new ThreeBSP(faceMesh)
+
+      let rightGeom = new THREE.BoxGeometry(state.wall.wallW, state.size.y, state.size.z)
+      let rightMesh = new THREE.Mesh(rightGeom)
+      rightMesh.position.x = 0.5 * state.size.x
+      // rightMesh.position.z = 0.5 * state.size.z
+      let rightBSP = new ThreeBSP(rightMesh)
+
+      // // WE MAY NO NEED TO DIG WINDOWS ON SIDE WALLS
+      // // // dig windows on right
+      // // let nbrWinZ = Math.floor((state.size.z - 2 * margin) / winW)
+      // // let paddingZ = (state.size.z - 2 * margin - winW * nbrWinZ) / (nbrWinX - 1)
+      // // winGeom = new THREE.BoxGeometry(wallW, winH, winW)
+      // // for (i = 0; i < nbrWinZ; i++) {
+      // //   for (j = 0; j < nbrWinY; j++) {
+      // //     // right
+      // //     winMesh = new THREE.Mesh(winGeom)
+      // //     winMesh.position.x = 0.5 * state.size.x
+      // //     winMesh.position.z = -0.5 * state.size.z + margin + winW * 0.5 + i * (winW + paddingZ)
+      // //     winMesh.position.y = 0.5 * state.size.y - margin - winH * 0.5 - j * (winH + paddingY)
+      // //     winBSP = new ThreeBSP(winMesh)
+      // //     rightBSP = rightBSP.subtract(winBSP)
+      // //   }
+      // // }
+      // // rightMesh = rightBSP.toMesh()
+
+      let leftMesh = rightMesh.clone()
+      leftMesh.position.x = -0.5 * state.size.x
+      // leftMesh.position.z = 0.5 * state.size.z
+      let leftBSP = new ThreeBSP(leftMesh)
+
+      // // let topGeom = new THREE.BoxGeometry(state.size.x, wallW, state.size.z)
+      // // let topMesh = new THREE.Mesh(topGeom)
+      // // // topMesh.position.y = -0.5 * state.size.y
+      // // // let topBSP = new ThreeBSP(topMesh)
+      // //
+      // // let floorGeom = new THREE.BoxGeometry(state.size.x, wallW, state.size.z)
+      // // let floorMesh = new THREE.Mesh(floorGeom)
+      // // // floorMesh.position.y = 0.5 * state.size.y
+      // // // let floorBSP = new ThreeBSP(floorMesh)
+
+      let buildingBSP = backBSP.union(rightBSP)
+      buildingBSP = buildingBSP.union(faceBSP)
+      buildingBSP = buildingBSP.union(leftBSP)
+      // buildingBSP = buildingBSP.union(topBSP)
+      // buildingBSP = buildingBSP.union(floorBSP)
+
+      // convert back to three.js mesh
+      let building = buildingBSP.toMesh()
+
+      // // create a custom shaderMaterial to had gradian colors
+      // // var uniforms = THREE.UniformsUtils.merge([
+      // //   THREE.UniformsLib['lights'],
+      // //   {
+      // //     'topColor': { value: new THREE.Color(0xffffff) },
+      // //     'groundColor': { value: new THREE.Color(0xbcd6e4) },
+      // //     'bottomColor': { value: new THREE.Color(0x07223b) },
+      // //     // 'bottomColor': { value: new THREE.Color(0x000000) },
+      // //     // 'groundColor': { value: new THREE.Color(0xff0000) },
+      // //     // 'bottomColor': { value: new THREE.Color(0x00ff00) },
+      // //     lightIntensity: { type: 'f', value: 1.0 }
+      // //   }
+      // // ])
+      // // var buildingMat = new THREE.ShaderMaterial({
+      // //   uniforms: uniforms,
+      // //   vertexShader: BgVertex,
+      // //   fragmentShader: BuildingFragment,
+      // //   side: THREE.DoubleSide,
+      // //   lights: true
+      // // })
+      // // building.material = buildingMat
+
+      // // create a classical material for building
+      // // let topColor = `hsla(201, 100%, 95%, 1)`
+      // let hTop = Math.round(195 + Math.random() * 10)
+      // let sTop = Math.round(100)
+      // let lTop = Math.round(95)
+      // let hFloor = Math.round(205 + Math.random() * 10)
+      // let sFloor = Math.round(40 + Math.random() * 20)
+      // let lFloor = Math.round(5 + Math.random() * 15)
+      // let topColor = `hsla(${hTop}, ${sTop}%, ${lTop}%, 1)`
+      // let bottomColor = `hsla(${hFloor}, ${sFloor}%, ${lFloor}%, 1)`
+      //
+      // let gradientTexture = new THREE.CanvasTexture(this.createGradientCanvas(topColor, bottomColor))
+
+      let materialOpts = {
+        color: 0xffffff,
+        side: THREE.DoubleSide,
+        shininess: 30
+        // map: gradientTexture
+        // wireframe: true,
+        // transparent: true,
+        // opacity: 0.6
+        // renderOrder: 0
+      }
+      building.material = new THREE.MeshPhongMaterial(materialOpts)
+
+      commit('setWalls3dObj', building)
+
+      let buildingPos = { ...state.position, ...{ z: 0.5 * state.size.z } }
+      commit('setWallsPos', buildingPos)
+
+      // // TOP & FLOOR
+      // let topGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
+      // let topOpts = {
+      //   color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
+      //   // side: THREE.DoubleSide,
+      //   shininess: 30
+      // }
+      // let topMat = new THREE.MeshPhongMaterial(topOpts)
+      // let topMesh = new THREE.Mesh(topGeom, topMat)
+      // let topPosition = { ...position }
+      // topPosition.y += 0.5 * state.size.y
+      //
+      // // let floorGeom = new THREE.BoxGeometry(state.size.x, state.wall.wallW, state.size.z)
+      // let floorOpts = {
+      //   color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
+      //   // side: THREE.DoubleSide,
+      //   shininess: 10
+      // }
+      // let floorMat = new THREE.MeshPhongMaterial(floorOpts)
+      // let floorMesh = new THREE.Mesh(topGeom, floorMat)
+      // let floorPosition = { ...position }
+      // floorPosition.y -= 0.5 * state.size.y
+      //
+      // // LEVELS
+      // let levelGeom = new THREE.BoxGeometry(state.size.x, 1, state.size.z)
+      // let levelMesh = new THREE.Mesh(levelGeom)
+      // let levelBSP = new ThreeBSP(levelMesh)
+      // let levelHoleGeom = new THREE.BoxGeometry(state.size.x - 3, 1, state.size.z - 3)
+      // let levelHoleMesh = new THREE.Mesh(levelHoleGeom)
+      // let levelHoleBSP = new ThreeBSP(levelHoleMesh)
+      // levelBSP = levelBSP.subtract(levelHoleBSP)
+      // levelMesh = levelBSP.toMesh()
+      // let levelOpts = {
+      //   color: 0xff0000,
+      //   shininess: 10
+      // }
+      // let levelMat = new THREE.MeshPhongMaterial(levelOpts)
+      // levelMesh.material = levelMat
+    }
   }
 }
diff --git a/src/store/modules/projects.js b/src/store/modules/projects.js
index 33002c4..909f357 100644
--- a/src/store/modules/projects.js
+++ b/src/store/modules/projects.js
@@ -8,11 +8,23 @@ export default {
 
   // initial state
   state: {
-    projects: []
+    projects: [],
+    marginBetweenBuildings: 5,
+    totalW: 0
   },
 
   // getters
   getters: {
+    totalW: (state) => {
+      return state.totalW
+    },
+    marginBetweenBuildings: (state) => {
+      return state.marginBetweenBuildings
+    },
+    projectID: (state) => (index) => {
+      console.log('getter projectID index', index)
+      return state.projects[index].id
+    },
     getGridPos: (state) => (index) => {
       let popped = state.projects[index].grid.pop()
       console.log('getGridPos: popped', popped)
@@ -23,125 +35,21 @@ export default {
   // mutations
   mutations: {
     setProjects (state, projects) {
-      // record the retrieved data
+      // record the projects
       state.projects = projects
-      console.log('setProjects', this)
-      // register a new module only if doesn't exist
-      let name
-      projects.forEach((project, i) => {
-        name = `project:${project.id}`
-        if (!(this.state && this.state[name])) {
-          projectMod.state = { ...project }
-          this.registerModule(name, projectMod)
-        } else {
-          // re-use the already existing module
-          console.log(`reusing module poject:${project.id}`)
-        }
-      })
-
-      // randomly define building sizes
-      let totalW = 0
-      for (var i = 0; i < state.projects.length; i++) {
-        let w = Math.round(21 + Math.random() * 15)
-        totalW += w
-        state.projects[i].size = {
-          x: w,
-          y: Math.round(100 + Math.random() * 250),
-          z: Math.round(10 + Math.random() * 30)
-        }
-      }
-
-      // positioning buildings on x regarding the widths
-      // & setting up the window sizing
-      // & setting up the content grid
-      let margin = 5
-      totalW += margin * (state.projects.length - 1)
-      let wall, a
-      let grid
-      // fro each PROJECTS
-      for (var j = 0; j < state.projects.length; j++) {
-        // X POS
-        let x = -1 * totalW / 2// + state.projects[0].size.x / 2
-        for (var k = 0; k < j; k++) {
-          x += state.projects[k].size.x
-        }
-        x += margin * j
-        x += state.projects[j].size.x / 2
-        state.projects[j].position = {
-          x: x,
-          y: -1 * state.projects[j].size.y / 2 + 10 + Math.random() * 30, // -10 + Math.random() * this.size.y / 2
-          z: -10 + Math.random() * 10
-        }
-
-        // WINDOWS
-        wall = {
-          wallW: 0.001,
-          // dig windows on face and back
-          winW: 2 + Math.random() * 2,
-          winH: 4 + Math.random() * 4,
-          margin: 2,
-          nbrWinX: 0,
-          paddingX: 0,
-          nbrWinY: 0,
-          paddingY: 0,
-          nbrWinZ: 0,
-          paddingZ: 0
-        }
-        // removing windows on X until padding is enough
-        a = 0
-        wall.nbrWinX = Math.floor((state.projects[j].size.x - 2 * wall.margin) / wall.winW)
-        while (wall.paddingX < 0.4) {
-          wall.nbrWinX -= a
-          wall.paddingX = (state.projects[j].size.x - 2 * wall.margin - wall.winW * wall.nbrWinX) / (wall.nbrWinX - 1)
-          a++
-        }
-        // removing windows on Y until padding is enough
-        a = 0
-        wall.nbrWinY = Math.floor((state.projects[j].size.y - 2 * wall.margin) / wall.winH)
-        while (wall.paddingY < 0.4) {
-          wall.nbrWinY -= a
-          wall.paddingY = (state.projects[j].size.y - 2 * wall.margin - wall.winH * wall.nbrWinY) / (wall.nbrWinY - 1)
-          a++
-        }
-        state.projects[j].wall = { ...wall }
-
-        // CONTENTS GRID
-        a = 0
-        wall.nbrWinZ = Math.floor((state.projects[j].size.z - 2 * wall.margin) / wall.winW)
-        while (wall.paddingZ < 0.4) {
-          wall.nbrWinZ -= a
-          wall.paddingZ = (state.projects[j].size.z - 2 * wall.margin - wall.winW * wall.nbrWinZ) / (wall.nbrWinZ - 1)
-          a++
-        }
-
-        grid = []
-        for (var l = 0; l < wall.nbrWinZ * 2; l++) { // cols
-          for (var m = 0; m < wall.nbrWinY * 2; m++) { // rows
-            grid.push({
-              z: margin + wall.winW / 2 * l,
-              y: margin + wall.winH / 2 * 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
-        }
-        state.projects[j].grid = [ ...grid ]
-      }
+    },
+    increaseTotalW (state, w) {
+      state.totalW += w
     }
   },
 
   // actions
   actions: {
     // async get authors
-    getProjects ({ dispatch, commit, state }) {
+    loadProjects ({ dispatch, commit, state }) {
       // GRAPHQL
       GRAPHQL.post('', { query: `query {
-          projects {
+          projects(sort: "Weight:asc") {
             id
             Weight
             Titre
@@ -149,7 +57,7 @@ export default {
         }` })
         .then(({ data: { data: { projects } = null } }) => {
           console.log('graphql projects', projects)
-          commit('setProjects', projects)
+          dispatch('computeProjects', projects)
         })
         .catch((error) => {
           console.warn('Issue with getProjects', error)
@@ -171,8 +79,48 @@ export default {
       //     Promise.reject(error)
       //   })
     },
-    build3dBuilding ({ dispatch, commit, state }) {
+    computeProjects ({ dispatch, commit, state }, projects) {
+      console.log('computeProjects', this)
+      // register a new module only if doesn't exist
+      let name, size, w
+      // console.log('state.marginBetweenBuildings', state.marginBetweenBuildings)
+      // console.log('state.count', state.count)
+      commit('increaseTotalW', state.marginBetweenBuildings * (projects.length - 1))
+      console.log('PROJECTS state.totalW', state.totalW)
+      projects.forEach((project, i) => {
+        name = `project:${project.id}`
+        // convert to number the project id
+        projects[i].id = parseInt(projects[i].id, 10)
+        if (!(this.state && this.state[name])) {
+          // Randomly Define the size and position of each building as here we need to know the totalW (not so clean)
+          w = Math.round(21 + Math.random() * 15)
+          console.log('w', w)
+          commit('increaseTotalW', w)
+          size = {
+            x: w,
+            y: Math.round(100 + Math.random() * 250),
+            z: Math.round(10 + Math.random() * 30)
+          }
+          // convert to number the project id
+          project.id = parseInt(project.id, 10)
+          // fill the dynamic store module with data
+          // merge default sate with loaded data, with calculated size, with index
+          projectMod.state = { ...projectMod.state, ...project, size: size, index: i }
+          // register the module
+          this.registerModule(name, projectMod)
+        } else {
+          // re-use the already existing module
+          console.log(`reusing module project:${project.id}`)
+        }
+      })
 
+      // record loaded projects
+      commit('setProjects', projects)
+
+      // init each dynamic modules
+      state.projects.forEach((project, i) => {
+        dispatch(`project:${project.id}/init`, null, { root: true })
+      })
     }
   }