Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove inputs - dependencies object #2

Open
wants to merge 1 commit into
base: tha-big-refactor
Choose a base branch
from
+44 −45
Open

remove inputs - dependencies object #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 44 additions & 45 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,93 +17,92 @@ const honeyCanvas = (() => {
}
return grid
})()
const drawHive = (hive) => {// This will mirror the hive.
const drawHive = ({hive}) => {// This will mirror the hive.
const elements = []
const root = document.querySelector('#hive')
const padding = paddingNum
const size = sizeNum

// IF ADDCLASS DOES NOT GET PASSED AN ELEMENT IT WILL BE A COOL DRAWING PLATFORM.
const addClass = ({input: {target: element, className}, dependencies:{indexOf} }) => { // external functions: global:indexOf
const addClass = ({element, className}) => { // external functions: global:indexOf
if (element.className.indexOf(className) === -1) {
element.className += (' ' + className)
}
}

const removeClass = ({ inputs, dependencies }) => { // external functions: global: split, filter, join
element=inputs.target;
className=inputs.value;
const removeClass = ({target, value}) => { // external functions: global: split, filter, join
element=target;
className=value;
element.className = element.className.split(' ').filter(x => x !== className).join(' ') }
const getElementFromCoords = ({input: coords, dependencies}) => { // external functions: non global: elements, done,

const getElementFromCoords = ({x, y, elements}) => { // external functions: non global: elements, done,
// console.log(coords, dependencies)
const row = dependencies.elements[coords.y]
if (row) { const element = row[coords.x]; return element }
const row = elements[y]
if (row) { const element = row[x]; return element }
}
const getIntAttr = ({input: {element, attr}}) => { return parseInt(element.getAttribute(attr)) } // external functions: done, global functions parseInt, getAttribute

const getCoordsFromElement = ({input: element, dependencies: getIntAttr}) => { // external functions: non global: getIntAttr
const columnIndex = getIntAttr({input: {element: element, attr: 'data-columnIndex'}});
const rowIndex = getIntAttr({input: {element: element, attr: 'data-rowIndex'}})
const getIntAttr = ({element, attr}) => { return parseInt(element.getAttribute(attr)) } // external functions: done, global functions parseInt, getAttribute

const getCoordsFromElement = ({ target, getIntAttr }) => { // external functions: non global: getIntAttr
const element = target;
const columnIndex = getIntAttr({element: element, attr: 'data-columnIndex'});
const rowIndex = getIntAttr({element: element, attr: 'data-rowIndex'})
return { x: columnIndex, y: rowIndex } }

const getAdjacentCells = ({input: {coords}, dependencies: {getElementFromCoords}}) => { // external functions: non global: getElementFromCoords, global: filter
const getAdjacentCells = ({coords, getElementFromCoords}) => { // external functions: non global: getElementFromCoords, global: filter
const x = coords.x; const y = coords.y; const n = y - 1;
const s = y + 1; const wx = x - 1; const ex = x + 1;
const ny = x % 2 === 1 ? y : n; const sy = x % 2 === 1 ? s : y;
// console.log(elements) // global value.
return [
getElementFromCoords({ input: { x: x, y: n }, dependencies: {elements} }), // N
getElementFromCoords({ input: { x: x, y: s }, dependencies: {elements} }), // S
getElementFromCoords({ input: { x: wx, y: ny }, dependencies: {elements} }), // NW
getElementFromCoords({ input: { x: ex, y: ny }, dependencies: {elements} }), // NE
getElementFromCoords({ input: { x: wx, y: sy }, dependencies: {elements} }), // SW
getElementFromCoords({ input: { x: ex, y: sy }, dependencies: {elements} }), // SE
getElementFromCoords({ x: x, y: n , elements: elements }), // N
getElementFromCoords({ x: x, y: s , elements: elements }), // S
getElementFromCoords({ x: wx, y: ny , elements: elements }), // NW
getElementFromCoords({ x: ex, y: ny , elements: elements }), // NE
getElementFromCoords({ x: wx, y: sy , elements: elements }), // SW
getElementFromCoords({ x: ex, y: sy , elements: elements }), // SE
].filter(x => !!x)
}
const handleCellMouseOver = (event) => { // external functions: getCoordsFromElement, getAdjacentCells, addClass
const target = event.target;
const coords = getCoordsFromElement({ input: target, dependencies: getIntAttr })
addClass( {input: { target:target, className:'hover'}, dependencies: {indexOf:'test'}} )

const adjacentCells = getAdjacentCells({ input: {coords: coords}, dependencies: {getElementFromCoords: getElementFromCoords} })
const handleCellMouseOver = ({target}) => { // external functions: getCoordsFromElement, getAdjacentCells, addClass
const coords = getCoordsFromElement({ target, getIntAttr })
addClass({ element:target, className:'hover'})

const adjacentCells = getAdjacentCells({coords: coords, getElementFromCoords})
adjacentCells.forEach(cell => {
addClass( {input: { target:cell, className:'adjacent'}, dependencies: {indexOf:'test'}} )
addClass({ element:cell, className:'adjacent' })
})
}
const handleCellMouseOut = (event) => { // external functions: removeClass, getCoordsFromElement, getAdjacentCells
const target = event.target
const coords = getCoordsFromElement({ input: target, dependencies: getIntAttr })
const handleCellMouseOut = ({target}) => { // external functions: removeClass, getCoordsFromElement, getAdjacentCells
const coords = getCoordsFromElement({ target, getIntAttr })

removeClass({ inputs: {target: target, value:'hover'}, dependencies: 'test'})
const adjacentCells = getAdjacentCells({ input: {coords: coords}, dependencies: {getElementFromCoords: getElementFromCoords} })
removeClass({ target: target, value:'hover'})
const adjacentCells = getAdjacentCells({coords: coords, getElementFromCoords})
adjacentCells.forEach(cell => {
removeClass({ inputs: {target: cell, value:'adjacent'},dependencies: 'test'})
removeClass({target: cell, value:'adjacent'})
})
}
const cellFactory = ({inputs, dependencies}) => { // external functions: handleCellMouseOver, handleCellMouseOut
const cellFactory = ({filled, columnIndex, rowIndex, handleCellMouseOver, handleCellMouseOut }) => { // external functions: handleCellMouseOver, handleCellMouseOut
// console.log(inputs)
let {filled, columnIndex, rowIndex} = inputs

const div = document.createElement('div')
const className = 'cell' + (filled ? ' filled' : '')
div.className = className
if (filled) {
div.addEventListener('mouseover', dependencies.handleCellMouseOver)
div.addEventListener('mouseout', dependencies.handleCellMouseOut)
div.addEventListener('mouseover', handleCellMouseOver)
div.addEventListener('mouseout', handleCellMouseOut)
}
div.setAttribute('data-columnIndex', columnIndex)
div.setAttribute('data-rowIndex', rowIndex)
return div
}

const penToPaper = (({inputs, dependencies}) => {
let {size, padding, root, elements} = inputs;
let {hive, cellFactory} = dependencies;
const penToPaper = (({size, padding, root, elements, hive, cellFactory}) => {
hive.forEach((row, rowIndex) => {
const elementRow = []
row.forEach((value, columnIndex) => {
const cell = cellFactory({
inputs: { filled:value, columnIndex:columnIndex, rowIndex:rowIndex},
dependencies: { handleCellMouseOver, handleCellMouseOut }
filled:value, columnIndex:columnIndex, rowIndex:rowIndex,
handleCellMouseOver, handleCellMouseOut
})
const x = (columnIndex * 3 / 4 * size) + padding * columnIndex
const y = (rowIndex * size + (columnIndex % 2 === 1 ? (1 / 2 * size) : 0)) + padding * rowIndex
Expand All @@ -117,8 +116,8 @@ const honeyCanvas = (() => {
})

penToPaper({
inputs: {size: size, padding: padding, root:root, elements:elements},
dependencies: {hive: hive, cellFactory: cellFactory}
size: size, padding: padding, root:root, elements:elements,
hive: hive, cellFactory: cellFactory
})
}
return {
Expand All @@ -130,7 +129,7 @@ const honeyCanvas = (() => {
function init(preset) {
let p = playground(preset);
let hivey = p.hive;
p.drawHive(hivey);
p.drawHive({hive:hivey});
}

return {
Expand Down