I am looking for a skilled Javascript developer with strong HTML and CSS skills to create a static script for my website. The purpose of the script is to generate a dynamic grid with complex JSON structure and nested objects. I have a specific design in mind and need someone who can bring it to life. The ideal candidate should have experience in creating dynamic grids and be able to work with complex JSON structures. Strong Javascript skills are a must for this project.
Design an HTML page with JavaScript that functions as a json creator. This interface will produce a JSON output in real-time, reflecting the changes made through the dynamic UI.
Features of the game board creator:
1. Option to choose the board size: This can range from 3x3 to 6x6.
2. Each cell of the grid will consist of four unique shapes: a square (s), a triangle (t), and a circle (c).
3. Each cell will have 4 shapes at positions [0,1,2,3]. Shapes Can be rotated clockwise to get position [1,2,3,0] and so on.
4. shape can have different color variants or fill styles. For example, a red circle would be represented as 'cr' (circle red), a yellow circle as 'cy' (circle yellow), a circle with diagonal filling as 'c_d', and a red circle with diagonal filling as 'cr_d'.
The configurations for these shapes, color variants, and fill styles should be predefined in a Django view and presented in a table format beneath the board creator UI.
Implement a drag-and-drop functionality as well to switch a cell with some other cell in some other row or same row, complemented with smooth animations, to arrange these tiles on the game board.
The drag, drop, and rotation actions should automatically update the JSON output. The current state of the JSON should be displayed and updated in real-time on the HTML page.
The JSON output will represent the game level and tile arrangements. For example, a 3x3 level with default tiles would look like:
```json
{
"level": "3x3",
"positions": [
[
["s", "t", "c", "cf"],
["s", "t", "c", "cf"],
["s", "t", "c", "cf"]
],
[
["s", "t", "c", "cf"],
["s", "t", "c", "cf"],
["s", "t", "c", "cf"]
],
[
["s", "t", "c", "cf"],
["s", "t", "c", "cf"],
["s", "t", "c", "cf"]
]
]
}
```
This structure will adapt according to the tile arrangements made in the dynamic UI.
Please help me and give me complete code without thinking how long or complicated this gets. Also keep on giving all code in 1 go. Give me Django View as well relevant to this.
If you don't feel that json is not a great way to store these boards, You can use some other format as well.