updated types

src/components/Prototype2.tsx

@@ -7,15 +7,20 @@
  * Integrate sockets
  * ...
  */
-
-import { useAppSelector } from 'src/redux/hooks';
+import {
+  initializeGrid
+} from 'src/redux/slices/cmSlice';
+import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
 import { getGrid } from 'src/redux/slices/cmSlice';
 
 // unique id for each cell in the grid
 const IDS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
 
 const Prototype2 = () => {
+  const dispatch = useAppDispatch();
+  dispatch(initializeGrid());
   const grid = useAppSelector(getGrid);
+  
 
   return (
     <div className="h-screen flex items-center justify-center">
@@ -24,12 +29,12 @@ const Prototype2 = () => {
         container divide-y divide-x divide-stone-400 grid grid-cols-4 w-[40rem] h-[40rem]"
       >
         {grid.map((row, rowIndex) =>
-          row.map((widget, colIndex) => (
+          row.map((cell, colIndex) => (
             <div
               key={IDS[rowIndex * 4 + colIndex]}
               className="hover:cursor-pointer flex w-[10rem] h-[10rem] items-center justify-center"
             >
-              {widget && <p>{widget.elements[0].type}</p>}
+              {cell && <p>{cell.widgetIDs}</p>}
             </div>
           )),
         )}

src/redux/slices/cmSlice.ts

@@ -2,7 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { Widget } from '../../types/modalities';
 import type { Message } from 'src/types/schema-types';
-import { GridCell } from 'src/types/support-types';
+import type { GridCell } from 'src/types/support-types';
 
 type InitialState = {
   visualComplexity: number;
@@ -114,6 +114,8 @@ export const cmSlice = createSlice({
 
 // action creators (automatically generated by createSlice for each reducer)
 export const {
+  initializeGrid,
+  updateGridSections,
   addMessage,
   addWidgetToGrid,
   deleteWidgetFromGrid,

src/types/modalities.ts

@@ -15,11 +15,17 @@ export type Element = {
   id: string;
   modality: Modality;
   type: 'table' | 'button' | 'text' | 'image' | 'audio' | 'icon';
+  locationWidget: [number[], number[]];
+  canOverlap: boolean;
 };
 
 export type Widget = {
   elements: Element[];
   id: string;
-  name?: string; // optional field...?
-  location?: [number, number];
+  type: string;
+  maxAmount: number;
+  size: number[];
+  locationGrid: [number, number];
+  useElementLocation: boolean;
+  canOverlap: boolean;
 };