How can I concatenate a map structure to visualize it? - php

Question

I am developing a game with maps (named channels) which are connected via warps. Each channel has an ID (int) and each warp has a channel source ID (int) and a channel target ID (int). A channel can have an infinite number of warps or no warps at all.
I built an administration app (with Zend Expressive / php and HTML) which gets the channel data from an API as JSON. This JSON is then parsed to simplified classes which include only the important data.
I tried to visualize the data in kind of a grid, to determine the border of the world.
I tried to visualize it with divs, with fixed size and ordering. Unfortunately I have no idea how to handle the variable number of neighbours. There are coordinates available where the warps are placed, but I want a more abstract view of the world. I just want every channel to be represented by a fixed size 2D cube (div with fixed width and height).
Channel class
<?php
namespace App\Entity;
class Channel
{
protected $id;
protected $neighbourIds = [];
public function parseData(array $data)
{
$this->setId($data['id']);
foreach($data['warps'] as $warp) {
$this->addNeighbourId($warp['targetChannelId']);
}
}
/**
* #return mixed
*/
public function getId()
{
return $this->id;
}
/**
* #param mixed $id
*/
public function setId($id): void
{
$this->id = $id;
}
public function addNeighbourId($neighbourId)
{
$this->neighbourIds[] = $neighbourId;
}
/**
* #return mixed
*/
public function getNeighbourIds()
{
return $this->neighbourIds;
}
/**
* #param mixed $neighbours
*/
public function setNeighbours($neighbours): void
{
$this->neighbours = $neighbours;
}
}
Sample data in channels as print_r output
Array
(
[0] => App\Entity\Channel Object
(
[id:protected] => 1
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 4
[2] => 5
[3] => 121
)
)
[1] => App\Entity\Channel Object
(
[id:protected] => 4
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[2] => App\Entity\Channel Object
(
[id:protected] => 5
[neighbourIds:protected] => Array
(
[0] => 1
)
)
[3] => App\Entity\Channel Object
(
[id:protected] => 2
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 3
[2] => 133
[3] => 138
[4] => 152
[5] => 175
[6] => 176
)
)
[4] => App\Entity\Channel Object
(
[id:protected] => 3
[neighbourIds:protected] => Array
(
[0] => 2
[1] => 126
[2] => 132
[3] => 137
)
)
[5] => App\Entity\Channel Object
(
[id:protected] => 121
[neighbourIds:protected] => Array
(
[0] => 1
[1] => 122
[2] => 139
[3] => 144
)
)
[6] => App\Entity\Channel Object
(
[id:protected] => 122
[neighbourIds:protected] => Array
(
[0] => 121
[1] => 123
[2] => 140
[3] => 145
)
)
[7] => App\Entity\Channel Object
(
[id:protected] => 123
[neighbourIds:protected] => Array
(
[0] => 122
[1] => 124
[2] => 141
[3] => 146
)
)
[8] => App\Entity\Channel Object
(
[id:protected] => 124
[neighbourIds:protected] => Array
(
[0] => 123
[1] => 125
[2] => 142
[3] => 147
)
)
[9] => App\Entity\Channel Object
(
[id:protected] => 125
[neighbourIds:protected] => Array
(
[0] => 124
[1] => 143
[2] => 148
)
)
[10] => App\Entity\Channel Object
(
[id:protected] => 126
[neighbourIds:protected] => Array
(
[0] => 3
[1] => 127
[2] => 131
[3] => 136
)
)
[11] => App\Entity\Channel Object
(
[id:protected] => 127
[neighbourIds:protected] => Array
(
[0] => 126
[1] => 128
[2] => 130
[3] => 135
)
)
[12] => App\Entity\Channel Object
(
[id:protected] => 128
[neighbourIds:protected] => Array
(
[0] => 127
[1] => 129
[2] => 134
)
)
[13] => App\Entity\Channel Object
(
[id:protected] => 129
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 128
)
)
[14] => App\Entity\Channel Object
(
[id:protected] => 130
[neighbourIds:protected] => Array
(
[0] => 129
[1] => 131
[2] => 127
)
)
[15] => App\Entity\Channel Object
(
[id:protected] => 131
[neighbourIds:protected] => Array
(
[0] => 130
[1] => 132
[2] => 126
)
)
[16] => App\Entity\Channel Object
(
[id:protected] => 132
[neighbourIds:protected] => Array
(
[0] => 131
[1] => 133
[2] => 3
)
)
[17] => App\Entity\Channel Object
(
[id:protected] => 133
[neighbourIds:protected] => Array
(
[0] => 132
[1] => 2
)
)
[18] => App\Entity\Channel Object
(
[id:protected] => 134
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 128
)
)
[19] => App\Entity\Channel Object
(
[id:protected] => 135
[neighbourIds:protected] => Array
(
[0] => 134
[1] => 136
[2] => 127
)
)
[20] => App\Entity\Channel Object
(
[id:protected] => 136
[neighbourIds:protected] => Array
(
[0] => 135
[1] => 137
[2] => 126
)
)
[21] => App\Entity\Channel Object
(
[id:protected] => 137
[neighbourIds:protected] => Array
(
[0] => 136
[1] => 138
[2] => 3
)
)
[22] => App\Entity\Channel Object
(
[id:protected] => 138
[neighbourIds:protected] => Array
(
[0] => 137
[1] => 2
)
)
[23] => App\Entity\Channel Object
(
[id:protected] => 139
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 121
)
)
[24] => App\Entity\Channel Object
(
[id:protected] => 140
[neighbourIds:protected] => Array
(
[0] => 139
[1] => 141
[2] => 122
)
)
[25] => App\Entity\Channel Object
(
[id:protected] => 141
[neighbourIds:protected] => Array
(
[0] => 140
[1] => 142
[2] => 123
)
)
[26] => App\Entity\Channel Object
(
[id:protected] => 142
[neighbourIds:protected] => Array
(
[0] => 141
[1] => 143
[2] => 124
)
)
[27] => App\Entity\Channel Object
(
[id:protected] => 143
[neighbourIds:protected] => Array
(
[0] => 142
[1] => 125
)
)
[28] => App\Entity\Channel Object
(
[id:protected] => 144
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 121
)
)
[29] => App\Entity\Channel Object
(
[id:protected] => 145
[neighbourIds:protected] => Array
(
[0] => 144
[1] => 146
[2] => 122
)
)
[30] => App\Entity\Channel Object
(
[id:protected] => 146
[neighbourIds:protected] => Array
(
[0] => 145
[1] => 147
[2] => 123
)
)
[31] => App\Entity\Channel Object
(
[id:protected] => 147
[neighbourIds:protected] => Array
(
[0] => 146
[1] => 148
[2] => 124
)
)
[32] => App\Entity\Channel Object
(
[id:protected] => 148
[neighbourIds:protected] => Array
(
[0] => 147
[1] => 125
)
)
[33] => App\Entity\Channel Object
(
[id:protected] => 152
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[34] => App\Entity\Channel Object
(
[id:protected] => 175
[neighbourIds:protected] => Array
(
[0] => 2
)
)
[35] => App\Entity\Channel Object
(
[id:protected] => 176
[neighbourIds:protected] => Array
(
[0] => 2
)
)
)
I expect kind of a grid to visualize the channels in relation, to enable administration of the data (delete, extend, etc.). My question only refers to the visualization part.