From 672af09e513e55dce99dbfc0f44a0ee30b437d9c Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Mon, 14 Sep 2020 15:56:44 +0200
Subject: [PATCH] first draft of contents grid placing

---
 src/components/objects/ContentBlock.vue | 94 ++++++++++++++++---------
 src/components/objects/Project.vue      | 57 +++++----------
 src/store/modules/projects.js           | 73 ++++++++++++++++++-
 3 files changed, 149 insertions(+), 75 deletions(-)

diff --git a/src/components/objects/ContentBlock.vue b/src/components/objects/ContentBlock.vue
index 4dc1576..5551536 100644
--- a/src/components/objects/ContentBlock.vue
+++ b/src/components/objects/ContentBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-  <!-- <object3d ref="block3d" name="Content" :position="position"> -->
+    <!-- <object3d ref="block3d" name="Content" :position="position"> -->
     <!-- <mesh ref="block3d" name="ContentBlock" :position="position">
       <geometry type="Box" :args="[size.x, size.y, size.z]" />
       <material type="MeshLambert" :color="color" :options="opts" />
@@ -43,14 +43,16 @@
 <script>
 import * as THREE from 'three'
 import mixins from 'components/mixins'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   name: 'ContentBlock',
   mixins: [mixins],
-  props: { prtPosition: Object, prtSize: Object, type: String, data: Object },
+  props: { prtPosition: Object, prtSize: Object, prtIndex: Number, type: String, data: Object },
   data: () => ({
     // block3d: null,
-    size: { x: 4, y: 8 },
+    project: null,
+    size: { x: 0, y: 0 },
     position: { x: 0, y: 0, z: 0 },
     rotation: { x: 0, y: 0, z: 0 },
     // opts: {
@@ -84,6 +86,12 @@ export default {
     face: null
   }),
   computed: {
+    ...mapState({
+      projects: state => state.Projects.projects
+    }),
+    ...mapGetters({
+      getGridPos: 'Projects/getGridPos'
+    }),
     color () {
       let color = 0x000000
       switch (this.type) {
@@ -119,6 +127,9 @@ export default {
     }
   },
   created () {
+    this.project = this.projects[this.prtIndex]
+    this.size.x = this.project.wall.winW / 2
+    this.size.y = this.project.wall.winY / 2
     // console.log('ContentBlock created', this.data)
     // let txtcolor = '#000000'
     // switch (this.type) {
@@ -139,26 +150,27 @@ export default {
     // this.size.x = this.label_size.x + 0.2
     // this.size.y = this.label_size.y + 0.2
 
-    let y = 0
-    let top = this.prtPosition.y + this.prtSize.y / 2
-    let floor = this.prtPosition.y - this.prtSize.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 y = 0
+    // let top = this.prtPosition.y + this.prtSize.y / 2
+    // let floor = this.prtPosition.y - this.prtSize.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()
+    // let face = Math.random()
+    // // USES 4 FACES
     // if (face < 0.25) {
     //   // gauche
     //   this.face = 'left'
@@ -183,19 +195,31 @@ export default {
     //   this.position.x = this.prtPosition.x - this.prtSize.x / 2 + this.size.x / 2 + Math.random() * (this.prtSize.x - this.size.x / 2)
     //   this.rotation.y = 180
     // }
-    if (face < 0.5) {
-      // gauche
-      this.face = 'left'
-      this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
-      this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
-      this.rotation.y = 90
-    } else {
-      // droite
-      this.face = 'right'
-      this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
-      this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
-      this.rotation.y = -90
-    }
+
+    // // USES 2 FACES
+    // if (face < 0.5) {
+    //   // gauche
+    //   this.face = 'left'
+    //   this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
+    //   this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+    //   this.rotation.y = 90
+    // } else {
+    //   // droite
+    //   this.face = 'right'
+    //   this.position.x = this.prtPosition.x + this.prtSize.x / 2 - 0.1
+    //   this.position.z = this.prtPosition.z - this.prtSize.z / 2 + this.size.x / 2 + Math.random() * (this.prtSize.z - this.size.x / 2)
+    //   this.rotation.y = -90
+    // }
+
+    // With GRID
+    this.face = 'left'
+    this.position.x = this.prtPosition.x - this.prtSize.x / 2 + 0.1
+    let pos = this.getGridPos(this.prtIndex)
+    console.log('pos', pos)
+    this.position.z = this.prtPosition.z - this.prtSize.z / 2 + pos.z
+    this.position.y = this.prtPosition.y - this.prtSize.y / 2 + pos.y
+    this.rotation.y = 90
+
     // 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
diff --git a/src/components/objects/Project.vue b/src/components/objects/Project.vue
index 94c66f0..d1d7ddb 100644
--- a/src/components/objects/Project.vue
+++ b/src/components/objects/Project.vue
@@ -16,6 +16,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="visible"
         :data="item"
         />
@@ -24,6 +25,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="context"
         :data="item"
         />
@@ -32,6 +34,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="process"
         :data="item"
         />
@@ -40,6 +43,7 @@
         :key="item.id"
         :prtPosition="position"
         :prtSize="size"
+        :prtIndex="index"
         type="concept"
         :data="item"
         />
@@ -71,49 +75,23 @@ export default {
     // 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 wallW = 0.001
-
-    let backGeom = new THREE.BoxGeometry(size.x, size.y, wallW)
+    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)
 
-    // dig windows on face and back
-    let winW = 2 + Math.random() * 2
-    let winH = 4 + Math.random() * 4
-    let margin = 2
-    let nbrWinX = 0
-    let paddingX = 0
-    let a = 0
-    // removing windows until padding is enough
-    while (paddingX < 0.4) {
-      nbrWinX = Math.floor((size.x - 2 * margin) / winW) - a
-      paddingX = (size.x - 2 * margin - winW * nbrWinX) / (nbrWinX - 1)
-      a++
-    }
-    // console.log('paddingX', paddingX)
-    let nbrWinY = 0
-    let paddingY = 0
-    a = 0
-    // removing windows until padding is enough
-    while (paddingY < 0.4) {
-      nbrWinY = Math.floor((size.y - 2 * margin) / winH) - a
-      paddingY = (size.y - 2 * margin - winH * nbrWinY) / (nbrWinY - 1)
-      a++
-    }
-    let winGeom = new THREE.BoxGeometry(winW, winH, wallW)
-    let winMesh, winBSP
-    for (var i = 0; i < nbrWinX; i++) {
-      for (var j = 0; j < nbrWinY; j++) {
-        // back
-        winMesh = new THREE.Mesh(winGeom)
+    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 + margin + winW * 0.5 + i * (winW + paddingX)
-        winMesh.position.y = 0.5 * size.y - margin - winH * 0.5 - j * (winH + paddingY)
+        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)
       }
@@ -137,7 +115,7 @@ export default {
     faceMesh.position.z = 0.5 * size.z
     let faceBSP = new ThreeBSP(faceMesh)
 
-    let rightGeom = new THREE.BoxGeometry(wallW, size.y, size.z)
+    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
@@ -216,10 +194,11 @@ export default {
     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,
@@ -249,7 +228,7 @@ export default {
     // var sun = new THREE.DirectionalLight(0xfcfcf9, 2)
     // sun.position.set(-150, 200, 110)
 
-    let topGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let topGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
     let topOpts = {
       color: new THREE.Color(`hsl(${hTop}, ${sTop}%, ${lTop}%)`),
       // side: THREE.DoubleSide,
@@ -260,7 +239,7 @@ export default {
     let topPosition = { ...position }
     topPosition.y += 0.5 * size.y
 
-    let floorGeom = new THREE.BoxGeometry(size.x, wallW, size.z)
+    let floorGeom = new THREE.BoxGeometry(size.x, wall.wallW, size.z)
     let floorOpts = {
       color: new THREE.Color(`hsl(${hFloor}, ${sFloor}%, ${lFloor}%)`),
       // side: THREE.DoubleSide,
diff --git a/src/store/modules/projects.js b/src/store/modules/projects.js
index 54db340..1f79250 100644
--- a/src/store/modules/projects.js
+++ b/src/store/modules/projects.js
@@ -9,7 +9,13 @@ export default {
   },
 
   // getters
-  getters: {},
+  getters: {
+    getGridPos: (state) => (index) => {
+      let popped = state.projects[index].grid.pop()
+      console.log('getGridPos: popped', popped)
+      return popped
+    }
+  },
 
   // mutations
   mutations: {
@@ -30,9 +36,15 @@ export default {
       }
 
       // 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
@@ -44,6 +56,65 @@ export default {
           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 ]
       }
     }
   },