Make sure you have already learnt SVG, VueJS and TS by now. If not check out the learning guides and resources.

Create a new file in src/components/gameBoards/ named GXxxxYyyy.vue where Xxxx is the Game ID and Yyyy is the variant ID that you get from the back end.

Now, either start coding everything from scratch or copy Sim Ten-To-Zero or Tic-Tac-Toe game board as the base code. If you copy the code, make sure to change the variable and class name appropriately.

Add an import statement to src/components/GameBoard.vue; import GMancalaRegular from "@/components/gameBoards/GXxxxYyyy.vue"; where GXxxxYyyy is as defined above so that Vue framework would recognize your game board component!

Each Vue file has HTML element at the very least. Include script element if you need to work with data. And, include scoped style element and i18n element for scoped styling and translation respectively.

Check out the learning guides and resources if you have any questions regarding any of the languages and frameworks used here.