drawlines.js

{
init: function(){
        // console.warn("this way, it will be possible to have mismatched boards for the two players with stones hanging off the invisible edge. should be getting this from other player, along with other room info, but putting that off for now. :/")
        // hoverXY = (gameState.iAm === "Wte" ? [-1,9] : [19,9]); // let's try hanging them off the center side instead of corner, where it can be hard to see.
        resetHoverStone() // untested, but should be fine; it says reset, but same code as initial set
        //Code for goban shape
        if (!this.data.boardSize) {
            console.warn("no lines, skipping init for a tick")
            return
        }

        stoneRepoSetup(gameState.boardSize);
        
        let object = this.el.object3D;

        if (window.injectedModel) {
            this.el = window.injectedModel;
            gobanEl = this.el
        }
        else {
            gobanEl = this.el;
            console.log('init board', this.data)
            console.log(gameState.boardSize, this.data.boardSize)
            this.data.boardSize = this.data.boardSize || gameState.boardSize; // this sets the property when white initializes it, so that NAF will frack it. For other uses, it will already be set, and they won't overwrite it.
            let boardSize = this.data.boardSize; // gameState.boardSize is what white sets on init; this.data.boardSize is what other plays get via NAF
            console.log(boardSize)

            // board dimensions calc
            width = (boardSize + 1) * xlinedist; // absolute dimensions
            depth = (boardSize + 1) * zlinedist;

            height = .2; // just something I picked that looks roughly right

            var data = this.data;
            this.geometry = new THREE.BoxBufferGeometry(width, height, depth);
            this.material = new THREE.MeshStandardMaterial({color: data.color});
            this.mesh = new THREE.Mesh(this.geometry, this.material);
            object.add(this.mesh);
            this.el.setObject3D('mesh', this.mesh);

            this.CreateLines(object, width, height, depth, boardSize);
            this.addVoiceTokenAndStands();
        }

        this.addGobanListeners();
    },


    CreateLines(object, width, height, depth, numberOfLines) {
        console.log("create lines", numberOfLines)
        // see https://aframe.io/docs/1.0.0/components/line.html
        
        let lineMaterial = new THREE.LineBasicMaterial({color: "#000000"});
    
        for (let i = 0; i < numberOfLines; i++) {
            //Possible way to do this without creating news instance of geometry?
            //Creates multiple geometries this way...
            //Figure out BufferGeometry
            let xlineGeometry = new THREE.BufferGeometry();
            let zlineGeometry = new THREE.BufferGeometry();
            let xpoints = new Float32Array(6);
            let zpoints = new Float32Array(6);
    
            // seems like start and end positions given for each line
            xpoints = [-(width/2 - xlinedist)+(xlinedist*i),
                        height/2 + 0.0002,
                        (depth/2 - zlinedist),
                        -(width/2 - xlinedist)+(xlinedist*i),
                        height/2 + 0.0002,
                        -(depth/2 - zlinedist)];
            
            zpoints = [-(width/2 - xlinedist),
                        height/2 + 0.0002,
                        (depth/2 - zlinedist)-(zlinedist*i),
                        (width/2 - xlinedist),
                        height/2 + 0.0002,
                        (depth/2 - zlinedist)-(zlinedist*i)];
            
    
            xlineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(xpoints, 3));
            let xline = new THREE.Line(xlineGeometry, lineMaterial);
            
            zlineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(zpoints, 3));
            let zline = new THREE.Line(zlineGeometry, lineMaterial);
            
            // console.log(xline, zline)
            object.add(xline);
            object.add(zline); 
            this.el.setObject3D('mesh', this.mesh);
            this.el.setObject3D('mesh', this.mesh);
        }
    },
}