refactored grid placement, now up to 4 faces available
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user