Karan-Palan

Comparison: SVG vs Div for Bricks

SVG

Pros:

1. Scalability: SVGs are vector graphics and can be scaled to any size without loss of quality, making them ideal for shapes and custom graphics.
2. Shapes and Paths: SVGs natively support complex shapes and paths, making it easier to create custom brick shapes.
3. Styling and Animations: SVGs can be styled and animated using CSS and JavaScript, providing a wide range of visual effects.
4. Integration with HTML: SVG elements can contain other HTML elements like buttons, labels, etc.

Karan-Palan

Conventional Commit Messages

See how a minor change to your commit message style can make a difference.

Tip

Have a look at git-conventional-commits , a CLI util to ensure these conventions and generate verion and changelogs

Commit Message Formats

Default

Karan-Palan

#![cfg_attr(not(feature = "std"), no_std)]

#[ink::contract]
mod real_estate {
    use ink::storage::Mapping;

    #[ink(storage)]
    pub struct RealEstate {
        avg_block_time: u8,
        decimals: u8,

Karan-Palan

---

Tech Stack Overview

1. Metamask:

Metamask is a browser extension that serves as a digital wallet for interacting with the Ethereum blockchain and decentralized applications (DApps). It allows users to manage their Ethereum accounts, securely store private keys, and seamlessly interact with Ethereum-based services and applications directly from their web browsers.

Karan-Palan

Before Brick Connection:

1. Workflow/State Diagram:

   • Initial State: Each brick exists independently on the workspace with its own properties and coordinates.
   • User Interaction: When a user attempts to connect two bricks, the system validates the connection based on compatibility rules and available connection points.
   • Connection Validation: The system checks if the connection is allowed based on the types of bricks being connected (instruction or argument), their compatibility, and any other constraints defined in the application logic.
   • Shadow Brick State: During the connection process, a "shadow" representation of the brick being moved is displayed to provide visual feedback to the user without affecting the actual workspace state.
   • Feedback to User: If the connection is valid, visual cues such as highlighting or snapping indicate that the connection is possible. Otherwise, the system prevents the connection and provides feedback to the user.

2. **Brick Connecti

Karan-Palan

1. Type Definitions:

   • TBrickKind: Specifies whether a brick is an instruction or an argument.
   • TBrickType: Specifies the type of a brick, such as data, expression, statement, or block.
   • TBrickArgDataType: Specifies the data type returned by an argument brick.
   • TBrickExtent: Defines the bounding box dimensions of a brick.
   • TBrickCoords: Defines the position coordinates of a brick.
   • TBrickColor: Defines the color property of a brick.

2. Interfaces:

• IBrickStyle: Defines the style properties of a generic brick, including background color, foreground color, outline, and scale.

Karan-Palan

// Import the Quadtree implementation
import CollisionSpaceQuadtree from './CollisionSpaceQuadtree';

// Initialize Quadtree instance
const collisionSpace = new CollisionSpaceQuadtree(CONTAINER_SIZE_X, CONTAINER_SIZE_Y);

// Add bricks to Quadtree
const addBrickToCollisionSpace = (brickData) => {
  const { id, x, y, width, height } = brickData;
  collisionSpace.addObjects([{ id, x, y, width, height }]);

Karan-Palan

import React, { useState, useEffect } from 'react';
import ProjectBuilder from 'musicblocks-v4-builder-framework';

const BuilderWrapper: React.FC = () => {
  const [builderInstance, setBuilderInstance] = useState<ProjectBuilder | null>(null);

  useEffect(() => {
    // Initialize the Project Builder instance
    const builderInstance = new ProjectBuilder();

Karan-Palan

Some edge cases related to collision detection and possible solutions:

• Overlapping Objects: When objects are initially placed in overlapping positions, collision detection may fail to detect the initial collision state. Solution: Implement an initial collision check or resolution step to handle overlapping objects upon initialization.
• Fast-Moving Objects: High-speed or fast-moving objects may skip collision detection checks between frames, resulting in tunneling or missed collisions. Solution: Implement continuous collision detection (CCD) techniques to detect collisions along the object's path or interpolate positions between frames for accurate detection.
• Large Number of Objects: Performance degradation may occur when handling a large number of objects or complex scenes, leading to slow simulation or frame drops. Solution: Implement spatial partitioning techniques like quadtree to efficiently partition the space and reduce the number of collision checks.
• **Dynamic Object Den

Karan-Palan

import React, { useEffect, useRef, useState } from 'react';
import { CollisionSpaceBrute, CollisionSpaceQuadTree } from '@/collision';

type CollisionDemoProps = {
  // Props, if any
};

const CollisionDemo: React.FC<CollisionDemoProps> = () => {
  // State variables for object properties and collision detection
  const [objects, setObjects] = useState<{ id: string; x: number; y: number }[]>([]);