Search code examples
vue.jsflexboxnuxt.jsvuetify.jsstyling

Using Vuetify to create a dynamic game board?

I have written some code for a Nuxt component that takes a chess PGN and translates it into a series of png images on the app. The code looks like this:

<template>
<v-container fluid class="gamePanel-wrapper">
  <v-row no-gutters>
    <div v-for="col in Array(8).keys()" :key="col.key">
      <div v-for="row in Array(8).keys()" :key="row.key">
        <img :src="getTile(row,col)" class="tileImage">
      </div>
    </div>
  </v-row>
  <v-row>
    <v-col align="center">
      <h3>Turn Information Goes Here</h3>
    </v-col>
  </v-row>
</v-container>
</template>

And the output looks like this:

Chess Output

I have a few questions about how I can get this game board looking like how I want:

  1. How can I use Vuetify to arrange the tiles of the game board so that they are flush with each other in all directions and have no gaps? I will be using the nuxt-image module to change the size of the tiles depending on the display breakpoint so it needs to be able to react to that.
  2. I can't seem to center the whole board by putting justify="center" into the v-row. How would I go about centering this game board horizontally in the parent container?
  3. I have some frames that I need to put on the outside 4 edges of the board. How do I lock them into place so that they're always flush with the rest of the game board? I think this isn't a problem with the top and bottom frames but how would I lock the vertical frames into place?

Thanks in advance.

Solution

    1. No gaps should be there. Look at this codesandbox, I used your markup, and there are no gaps between tiles. Check your ".gamePanel-wrapper" or "tileImage" classes if there are no css rules that causes this. Or, reproduce the problem in the provided sandbox, and post it here.

    2. Also, it is working in the sandbox, although for 3. I changed the orientation to column and used align="center".

    3. I don't quite get what you mean by "flush with the board" and "lock", but I presume is something like the grey areas in the example. If not, please explain.