getLayer,
	getShade,
	getSketch,
} from 'shared-utils/painterState'
import { TextureData } from 'tvs-painter'
import { makeClear } from 'tvs-painter/dist/utils/context'
import { plane } from 'tvs-painter/dist/utils/geometry/plane'
import { events, gl, painter, state, State } from './context'
import frag from './shaders/geo-frag.glsl'
import vert from './shaders/geo-vert.glsl'
import lightFrag from './shaders/light-frag.glsl'

// Forms

const geometry = plane(10, 10, 0, 0)
const planeForm = getForm(painter, 'plane').update(geometry)

// Shades

const geoShade = getShade(painter, 'geo').update({
	frag,
	vert,
})

// Textures

const texture = getFrame(painter, 'tex').update({ texture: {} })

const img = new Image()
img.onload = () => {
	texture.update({

import box from 'geo-3d-box'
import { getForm } from 'shared-utils/painterState'
import { plane } from 'tvs-painter/dist/utils/geometry/plane'
import { convertStackGLGeometry } from 'tvs-painter/dist/utils/stackgl'
import { painter } from './context'

export const planeSize = {
	width: 10,
	height: 10,
}

export const planeForm = getForm(painter, 'plane').update(
	plane(planeSize.width, planeSize.height, 5, 5),
)

const size = [10, 14, 2]
const segments = [5, 7, 1]

export const boxForm = getForm(painter, 'box').update(
	convertStackGLGeometry(box({ size, segments })),
)

	height: bufferSize,
	bufferStructure: [
		{
			flipY: true,
			wrap: 'REPEAT',
		},
	],
})

// ===== scene =====

const planMat = mat4.fromTranslation(mat4.create(), [0, 0, -3])
const rotation = 0.001
const projection = mat4.perspective(mat4.create(), 45, 1, 0.01, 10)

const form = getForm(painter, 'plane').update(plane(2, 2))

const shade = getShade(painter, 'plane').update({
	vert: planeVert,
	frag: planeFrag,
})

export const sketch = getSketch(painter, 'plane').update({
	form,
	shade,
	uniforms: {
		projection,
		transform: () => mat4.rotateY(planMat, planMat, rotation),
		tex: () => automaton.image(),
	},
	drawSettings: {

	const count = boxSliceCount
	const bk = quad
	const rt = extrudeRight([0, 0, 20], right(bk))
	const ft = extrudeRight([-20, 0, 0], right(rt))
	const lf = extrudeRight([0, 0, -20], right(ft))
	return [
		makeSideSegments(bk, count),
		makeSideSegments(rt, count),
		makeSideSegments(ft, count),
		makeSideSegments(lf, count),
	]
})()

export const faceNormals = box.map(q => normal(q[1]))

export const wallsForm = getForm(painter, 'wallsForm').update(
	convertStackGLGeometry({
		position: flatten(flatten(box)),
		// color: flatten(b.map((side) => flatten(side.map((slice) => flatten(slice.map((q) => (q as any[]).map(() => pickRandom(c)))))))),
		color: flatten(
			box.map((side, i) =>
				flatten(
					side.map((slice, j) =>
						slice.map(() => colors[i * boxSliceCount + j]),
					),
				),
			),
		),
		normal: flatten(
			box.map((side, i) => flatten(side).map(() => faceNormals[i])),
		),

import { nodes, triples } from './nodes'
import blendFrag from './shaders/compose.frag'
import pointFrag from './shaders/point.frag'
import pointVert from './shaders/point.vert'
import sideFrag from './shaders/side.frag'

// ===== shaders =====

const pointsShade = getShade(painter, 'point').update({
	vert: pointVert,
	frag: pointFrag,
})

// ===== geometries =====

const pointsForm = getForm(painter, 'points').update({
	drawType: 'POINTS',
	attribs: {
		position: {
			buffer: new Float32Array(flatten(nodes)),
			storeType: 'DYNAMIC',
		},
	},
	itemCount: nodes.length,
})

// ===== objects =====

const pointsSketch = getSketch(painter, 'points').update({
	form: pointsForm,
	shade: pointsShade,

import { getForm } from 'shared-utils/painterState'
import { intToFloat } from 'tvs-libs/dist/graphics/colors'
import { add, mul, normalize, sub } from 'tvs-libs/dist/math/vectors'
import { flatten, mapcat } from 'tvs-libs/dist/utils/sequence'
import { painter } from './context'
import { connections, nameSpaceCount, nodes } from './nodes'

export const pointsForm = getForm(painter, 'points')
export const lineForm = getForm(painter, 'lines')

const lineWidth = 3

export function updateGeometries() {
	pointsForm.update({
		drawType: 'POINTS',
		attribs: {
			position: {
				buffer: new Float32Array(mapcat(n => n.pos, nodes)),
				storeType: 'DYNAMIC',
			},
			color: {
				buffer: new Float32Array(
					mapcat(
						n =>
							intToFloat([
								(n.ns / nameSpaceCount) * 255,
								((n.ns / nameSpaceCount + 1 / 3) * 255) % 255,
								((n.ns / nameSpaceCount + 2 / 3) * 255) % 255,
							]),
						nodes,
					),

// ===== Settings =====

painter.updateDrawSettings({
	clearColor: [1, 1, 1, 1],
	enable: [gl.DEPTH_TEST, gl.CULL_FACE],
})

// ===== shaders =====

const shade = getShade(painter, 'shade').update({ frag, vert })

// ===== geometries =====

const tileSize = state.tiles.tileSize
const form = getForm(painter, 'form').update(plane(tileSize, tileSize, 3, 3))

// ===== textures =====

const textures: { [id: string]: Frame } = {}

// ===== objects =====

export const tiles = getSketch(painter, 'tiles')

addSystem<State>('render', (e, s) => {
	switch (e) {
		case events.ON_IMAGES_LOADED:
			each((img, key) => {
				textures[key] = getFrame(painter, key).update({
					texture: {