drawMap.js

const { makeMap } = require('../../fractal-noise.js')
//const {isoLines} = require('marchingsquares')

let map = makeMap()
const TILE_SIZE = 8
const SEA_LEVEL = 47

const drawMap = (ctx) => {
  map.forEach((row, i) => {
    row.forEach((x, j) => {
      ctx.fillRect(TILE_SIZE * j, TILE_SIZE * i, TILE_SIZE, TILE_SIZE)
      if (x >= 60)
	ctx.fillStyle = 'silver'
      else if (x < 60 && x >= 55)
	ctx.fillStyle = 'darkgreen'
      else if (x < 55 && x >= 50)
	ctx.fillStyle = 'green'
      else if ( x < 50 && x >= 47)
	ctx.fillStyle = 'yellow'
      else if (x < 47 && x >= 43)
	ctx.fillStyle = 'blue'
      else if (x < 43 && x >= 20)
	ctx.fillStyle = 'mediumblue'
      else
	ctx.fillStyle = 'darkblue'
      ctx.fill()
    })
  })
/*  const marching = isoLines(map, 30)
  console.log('marching :', marching)
  ctx.beginPath()
  marching.forEach(arr => {
    arr.forEach(pair => {
      ctx.moveTo(pair[0], pair[1])
    })
  })
  ctx.closePath()
   ctx.fill()*/
}

module.exports = { drawMap, TILE_SIZE, SEA_LEVEL }

other-changes.js

// in components/index
export {default as GameOLD} from './Game_OLD'

// in components/Game_OLDimport React from 'react'
import {connect} from 'react-redux'
//import {drawMap, tickMap, mapListeners} from '../script/map'
import {drawMap} from '../script/drawMap.js'
import {increaseScroll, setScrollPos, setMap, setPlayer} from '../store'
import {drawBoat, boatListener} from '../script/boats'
import {drawFish} from '../script/fish'
import {coordsToTile} from '../../utilityMethods.js'

class GameOLD extends React.Component {
  constructor() {
    super()

    this.handleResize = this.handleResize.bind(this)

    this.init = this.init.bind(this)
    this.draw = this.draw.bind(this)
    this.tick = this.tick.bind(this)
    this.update = this.update.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }

  handleResize() {
    console.log('resize')
    const {canvas} = this
    canvas.width = document.body.clientWidth
    canvas.height = document.body.clientHeight
  }
  /**
   * stuff that will only be done once
   */
  init() {
    this.handleResize()
    document.addEventListener('resize', this.handleResize, false)
//    mapListeners(this.props.incScroll)
    boatListener()
    // get player info --> get player's boats
  }

  /**
   * do all the canvas stuff
   */
  draw() {
    const ctx = this.canvas.getContext('2d')
    const {x, y} = this.props.view.pos
    ctx.clearRect(x - 1, y - 1, this.canvas.width + 1, this.canvas.height + 1)
//    drawMap(ctx, this.props.map, this.props.view, this.props.incScroll)
    drawMap(ctx)
    
    // boats
    if (this.props.boats.length) {
      this.props.boats.forEach(boat => {
        drawBoat(ctx, boat)
      })
    }
    // fishes
/*    if (this.props.fish.length) {
      this.props.fish.forEach(fish => {
        drawFish(ctx, fish)
      })
    }*/
  }

  handleClick(e) {
    // find out what you clicked on
    const tile = coordsToTile({x: e.clientX, y: e.clientY})
    // find out if there's a boat on that tile
    //    const boatTile = coordsToTile({})
  }

  /**
   * do all movement stuff
   */
  tick() {}

  /**
   * everything
   */
  update() {
    this.tick()
    this.draw()
  }

  componentDidMount() {
    this.init()
    this.draw()
  }

  componentDidUpdate() {
    this.update()
  }

  render() {
    return (
      <canvas
        id="game"
        onClick={this.handleClick}
        ref={ref => {
          this.canvas = ref
        }}
      />
    )
  }
}

/**
 * CONTAINER
 */
const mapState = state => {
  return {
    map: state.map,
    view: state.view,
    player: state.player,
    boats: state.boats,
    fish: state.fish
  }
}

const mapDispatch = dispatch => {
  return {
    incScroll: (x, y) => dispatch(increaseScroll(x, y)),
    setScroll: (x, y) => dispatch(setScrollPos(x, y)),
    setMap: board => dispatch(setMap(board)),
    setPlayer: player => dispatch(setPlayer(player))
  }
}

export default connect(mapState, mapDispatch)(GameOLD)

// in /app.js
import {Game, Home, Chat, GameOLD} from './components'

socket-index.js

const {changeName, addPlayer, addBoat} = require('../store/players')
const {setMap} = require('../store/board')
const {spawnDock, getLand, getWater} = require('../../utilityMethods.js')
const {makeMap} = require('../../fractal-noise.js')
const {TILE_SIZE} = require('../../client/script/drawMap.js')
const store = require('../store')
const Player = require('../Player')
const Boat = require('../Boat')

const Filter = require('bad-words')
const filter = new Filter({placeHolder: '🐬'})

const allPlayers = store.getState().players
const allDocks = allPlayers.reduce(
  (docks, nextPlayer) => docks.push(nextPlayer.docks),
  []
)

//init values for new player
const makePlayer = socketId => {
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)
  const x = Math.floor(Math.random() * 100)
  const y = Math.floor(Math.random() * 100)
  const newDock = spawnDock(allDocks)
  //  console.log(newDock)
  return new Player(
    socketId,
    `rgb(${r}, ${g}, ${b})`,
    [newDock], // [{x, y}]
    'Dave' + socketId
  )
}

// make new map and make sure that it's viable
// TODO: output image
let newMap = makeMap()
let landTiles = getLand(newMap)
let waterTiles = getWater(newMap)
while (
  landTiles.length > waterTiles.length ||
  landTiles.length < TILE_SIZE * 50
) {
  newMap = makeMap()
  landTiles = getLand(newMap)
  waterTiles = getWater(newMap)
}
//const mapImg = drawMap(newMap) // nope, needs ctx...

module.exports = io => {
  io.on('connection', socket => {
    console.log(`A socket connection to the server has been made: ${socket.id}`)

    /**
     * Keep pinging all clients, so that they don't disconnect mid-game
     */
    setInterval(() => {
      io.emit('ping', 'ping')
    }, 5000)
    store.dispatch(setMap(newMap))
    io.emit('send-game-state', store.getState())

    /**
     * new person has opened the webpage
     */
    socket.on('new-player', socketId => {
      const newPlayer = makePlayer(socketId)
      store.dispatch(addPlayer(newPlayer))
      socket.emit('send-game-state', store.getState())
    })

    /**
     * Person places a boat
     */
    socket.on('boat-add', boat => {
      const playerToUpdate = store
        .getState()
        .players.find(p => p.socketId === boat.socketId)

      store.dispatch(
        addBoat(boat.socketId, new Boat(playerToUpdate.color, boat.x, boat.y))
      )
      io.emit('send-game-state', store.getState())
    })

    /**
     * Change person's name after homescreen
     */
    socket.on('set-name', name => {
      store.dispatch(changeName(socket.id, name))
    })

    /**
     * Chat Stuff Below
     */
    socket.on('sending-message', msg => {
      //private msg ==> /msg john whatever: message here

      if (msg.text.startsWith('/msg')) {
        let name = msg.text.split(':')[0]
        const text = msg.text.replace(name + ':', '').replace('/msg ', '')
        name = name.replace('/msg ', '')

        console.log('"', name, '"')

        const person = store
          .getState()
          .players.filter(player => player.name === name)
        if (person.length) {
          socket.broadcast
            .to(person[0].socketId)
            .emit('new-message', {...msg, text})
        }
      } else {
        socket.broadcast.emit('new-message', msg)
      }
    })

    socket.on('disconnect', () => {
      console.log(`Connection ${socket.id} has left the building`)
    })
  })
}