I’ve been trying to make a simple grid system with pawns (chess-like) for my dungeons and dragons sessions using jquery sortable. I am using laravel with blade for a project.
So in the code below, (which was given to me by another question) it creates a grid of certain area on which the player can freely move the pawns. I made it so an ajax request can save each of the pawn’s coordinates to a database in the form of 0,1 or 3,4 etc.
Generally everything works but the problem is that I cannot programmatically set the position of each pawn. This is used not only to keep the positions after page refresh but it is used to be able to make the pawn positions visible to other people using the website.
So here is the code I got so far:
let gridSize = 7,
//characters array is empty usually because it gets all the pawn infos from the db
characters = [ {"id" : "1" , "name" : "Test", "hp" : "112"}
];
$('.grid')
.css(`grid-template-columns`, `repeat(${gridSize}, 4rem)`)
.html([...Array(gridSize**2)].map(() => '<div class="cell"></div>').join(''));
$('.characters')
.html(characters.map((character) =>
`<div class="character"><div class="stats" id ='${character.id}'><p>${character.name}</p><p>hp: ${character.hp}</p></div></div>`).join(``))
.add('.grid .cell')
.sortable({
connectWith: '.characters, .grid .cell',
cursor: 'grabbing',
receive: (e, ui) => {
if(ui.item.parent().hasClass('cell')) {
let $cell = $(e.target),
$character = ui.item,
$characters = $cell.find('.character').not($character),
coords = [$cell.index() % gridSize, Math.floor($cell.index() / gridSize)];
coords = coords.toString();
let characterId = $character.find('.stats').attr('id');
updateCharacterPosition(characterId, coords)//writes the new pawn's position to the db
}
}
});
function updateCharacterPosition(characterId, coords) {
$.ajax({
url: "/coords/" + characterId,
method: 'PATCH',
data: {
_token: $('meta[name="csrf-token"]').attr('content'),
newcoords: coords
},
success: function(response) {
console.log('Character position updated successfully');
},
error: function(xhr, status, error) {
//It will error because the controller is not present.
}
});
} .grid{
border: 2px solid gray;
display: grid;
width: fit-content;}
.grid .cell{
align-items: center;
aspect-ratio: 1 / 1;
border: 1px solid lightgray;
display: flex;
justify-content: center;
overflow: visible;}
.grid .cell:has(.character):hover{
border-width: 2px;
box-sizing: border-box;}
.characters{
border: 2px solid gray;
display: flex;
gap: 1rem;
margin-top: 1rem;
min-height: 3rem;
min-width: 6rem;
padding: 1rem;
width: fit-content;}
.character{
align-items: end;
background-color: #000000;
border-radius: 50%;
color: #ffffff;
display: flex;
height: 3rem;
justify-content: center;
text-align: center;
width: 3rem;}
.character .stats{
background-color: inherit;
padding: 4px;}
.character p{
font-size: .66rem;
margin: 0;
white-space: nowrap;}<div class="grid"></div>
<div class="characters"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
2
Answers
If you’re trying to make it so the pawn stays in their coords upon refreshing, you can use
To set the local storage, and then you can use
to get it from the local storage, and to convert it back into an int, you can do
First, let’s see the example:
Now, the explanation:
Here, the
.html()specifies what needs to be in the HTML and we pass a text to it. The text is generated by the creation of an array of the size ofgridSize * gridSizeand mapping each element to the HTML template we want. Ifjis to be at the column of 3 and the row of 2 (you can use custom, dynamic values loaded from the database), then we put in the inner template. Otherwise we don’t. Once we generated each template for the array, we join them into a string and pass this string as a raw HTML to thehtml()function.