please guys help me fish out the error in this code. for some reason the "snake[0].x" value is undefined.
here's the code below

client.js

var userform = document.getElementById('user-form');
var gamefield = document.getElementById('game-field');
var menu = document.getElementById('menu');
var loginBtn = document.getElementById('login');
var joinBtn = document.getElementById('join');
var startBtn = document.getElementById('start');
var welcomeDiv = document.getElementById('welcome-div');

var socket;
loginBtn.onclick = function () {
// display gamefield
gamefield.style.visibility = "visible";
menu.style.visibility = "visible";
// append username to array of activePlayers

// set userform display to none
userform.style.display = "none";
}

startBtn.onclick = function () {
//clear the menu div and welcome message
welcomeDiv.style.display = 'none';
menu.style.visibility = "hidden";

// display race arena
cvs.style.visibility = 'visible';
//join the game room

/* let game = */
};
socket = io.connect();
var cvs = document.getElementById('snake');
const ctx = cvs.getContext("2d";
const cvsH = cvs.clientHeight;
const cvsW = cvs.clientWidth;
const cell = 20;
//let snake = [];

//function that draws snake on canvas
function drawSnake(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * cell, y * cell, cell, cell);
//border around the snake
ctx.fillStyle = "#000";
ctx.strokeRect(x * cell, y * cell, cell, cell);
}

let direction;
//Event listener for direction
function getDirection(e) {
if (e.keyCode == 37 && direction != "right" {
direction = "left";
//left.play();
}
else if (e.keyCode == 38 && direction != "down" {
direction = "up";
//up.play();
}
else if (e.keyCode == 39 && direction != "left" {
direction = "right";
//right.play();
}
else if (e.keyCode == 40 && direction != "up" {
direction = "down";
//down.play();
}
}

//start game

function drawAll() {
//ctx.clearRect(0, 0, cvsW, cvsH);
socket.on('welcome', (data) => {
console.log('Hello ' + data.x);
//draw current player Snake
drawPlayer(data);
function drawPlayer(player) {
let snake = [];
ctx.fillStyle = player.color;
ctx.fillRect(player.x * cell, player.y * cell, cell, cell);
ctx.fillStyle = "#000"; //border around the snake
ctx.strokeRect(player.x * cell, player.y * cell, cell, cell);

//initialise snake array
var snakeCell = {
x: player.x,
y: player.y,
color: player.color
};

snake.push(snakeCell);
for (var i = 0; i < snake.length; i++) {
var posX = snake[i].x;
var posY = snake[i].y;
drawSnake(posX, posY, snake.color);
}
}
console.log(snakeCell);
});

//receive food position and draw to canvas
socket.on('DisplayFood', function (food) {
ctx.fillStyle = "#fff";
ctx.fillRect(food.x * cell, food.y * cell, cell, cell);
ctx.fillStyle = "#000"; //border around the snake
ctx.strokeRect(food.x * cell, food.y * cell, cell, cell);
var thefood = food;
});

let snakeX = snake[0].x;
let snakeY = snake[0].y;

document.addEventListener("keydown", getDirection);

//if direction is pressed, move snake correspondingly
if (direction == "left" snakeX--;
else if (direction == "up" snakeY--;
else if (direction == "right" snakeX++;
else if (direction == "down" snakeY++;

position = {
x: snakeX,
y: snakeY
}
socket.emit('keypressed', position);

snake.pop();
//if snake eats food
/* if (thisPlayer.x == theFood.x && thisPlayer.y == theFood.y) {
theFood.x = Math.floor(Math.random() * (cvsW / cell - 1) + 1);
theFood.y = Math.floor(Math.random() * (cvsH / cell - 1) + 1);
// we don't remove the tail
}
else {
//remove the tail
snake.pop();
}
*/
//ADD new Head position
socket.on('PlayerMoved', function (player) {
snake.unshift = {
x: player.x,
y: player.y,
color: player.color
}
});
}
//drawAll;
setInterval(drawAll, 500);

//////////////////////////////////////////////
server.js
//////////////////////////////////////////////

var express = require('express');

var app = express();
var port = process.env.PORT || 3000;
var server = app.listen(3000);

app.use(express.static('public'));

console.log('server is listening on *: ' + port);

var socket = require('socket.io');
var io = socket(server);

const canvasHeight = 400;
const canvasWidth = 400;
const cell = 20;

var players = [];

class newPlayer {
constructor() {
this.x = Math.floor(Math.random() * (canvasWidth / cell - 1));
this.y = Math.floor(Math.random() * (canvasWidth / cell - 1));
this.color = Color();
return { 'name': this.id, 'color': this.color, 'x': this.x, 'y': this.y };
}
}

io.sockets.on('connection', function (socket) {
var currentPlayer = new newPlayer();
console.log(currentPlayer.x);
players.push(currentPlayer);

socket.broadcast.emit('welcome', currentPlayer);
console.log('new connection: ' + socket.id);

//send food position object
if (players.length == 2) {
//food object
food = {
foodx: 1 + Math.floor(Math.random() * (canvasWidth / cell - 2) + 1),
foody: 1 + Math.floor(Math.random() * (canvasHeight / cell - 2) + 1)
}
socket.broadcast.emit('DisplayFood', food);
}
else {
//socket.broadcast.emit('DisplayFood', players[1].name);
}

/* socket.on('FoodEaten', function () {
socket.emit('nextFood', food, players);
}); */

//listen for direction
socket.on('keypressed', function (position) {
currentPlayer.x = position.x;
currentPlayer.y = position.y;
socket.broadcast.emit('PlayerMoved', currentPlayer);
});

socket.on('disconnect', function () {
players.splice(players.indexOf(currentPlayer), 1);
//console.log(players);
});
});

function Color() {
return ("green" || "blue";
}

i