DEV Community: Saba beigi

🎮 Building a Classic Breakout Game in Godot — Step by Step

Saba beigi — Sat, 25 Oct 2025 09:31:11 +0000

In this post, we’ll learn how to build a Breakout-style 2D game using the Godot Engine.

You can find the complete source code here:

🔗 Brick-Break on GitHub

🧱 What We’ll Build

A simple yet addictive arcade game where you control a paddle, bounce a ball, and destroy rows of bricks.

By the end, you’ll have a working Breakout clone and understand how to use:

Godot scenes & nodes
GDScript for movement & collision
Signals for communication between objects
Game reset & score tracking

⚙️ Project Setup

Install Godot Engine

Download the latest stable version from godotengine.org.
Clone the Repository

   git clone https://github.com/sababg/Brick-Break.git
   cd Brick-Break

Open in Godot
Launch Godot and open the Brick-Break folder as a project.
Run the Game!
Press F5 or click the ▶️ Play button to start.
Move the paddle using ← / → arrow keys.

🧩 Game Structure
Here’s a quick overview of the folder layout:

Brick-Break/
├─ Scenes/
│   ├─ Main.tscn
│   ├─ Level.tscn
│   └─ UI.tscn
├─ Scripts/
│   ├─ Paddle.gd
│   ├─ Ball.gd
│   └─ Brick.gd
├─ Assets/
│   └─ (images, textures, sounds)
└─ project.godot

Each script corresponds to one of the key game elements.
🕹️ Paddle Movement
The paddle script handles user input and movement limits:

extends Node2D

@export var speed := 500

func _process(delta):
    var direction = Input.get_action_strength("ui_right") - Input.get_action_strength("ui_left")
    position.x += direction * speed * delta
    position.x = clamp(position.x, 0, get_viewport_rect().size.x)

This ensures smooth paddle control and prevents it from going off screen.

⚽ Ball Physics
The ball uses a velocity vector that updates every frame:

extends Area2D

var velocity = Vector2(200, -200)

func _process(delta):
    position += velocity * delta

func _on_body_entered(body):
    if body.name == "Paddle":
        velocity.y *= -1
    elif body.name == "Brick":
        body.queue_free()
        velocity.y *= -1

Each collision reverses the ball’s Y-axis velocity and removes bricks on contact.

🧱 Bricks & Level Design

Each brick is a small StaticBody2D or Area2D with its own script for destruction.
Bricks are placed inside the Level.tscn scene to form patterns.
You can quickly duplicate rows and change their positions to create different levels.

🧮 Score & UI
The UI.tscn scene manages the score and remaining lives using labels.
When the ball hits a brick, it emits a signal to update the score display.
Example signal connection:

signal brick_destroyed

func _on_brick_destroyed():
    score += 1
    $ScoreLabel.text = "Score: %d" % score

🔄 Resetting the Game
If the ball falls below the screen, a game-over or reset is triggered:

func _process(delta):
    if position.y > get_viewport_rect().size.y:
        get_tree().reload_current_scene()

Simple but effective!

🚀 Try Expanding It

Once you have the core mechanics working, experiment with:

🧩 Power-ups (larger paddle, multi-ball)
💥 Explosive or multi-hit bricks
🎵 Sound effects & background music
🌈 Animated sprites or color themes
🌐 Exporting to Web (Itch.io or GitHub Pages)

💡 Lessons Learned

While developing Brick-Break, I learned to:
Use Godot’s scene hierarchy effectively
Handle object collisions via signals
Keep gameplay loops small and modular
Debug physics-based movement visually This small project is a great way to learn Godot’s foundations — and the results are surprisingly satisfying

🧱 Final Thoughts
Brick-Break is a fully playable Breakout clone that demonstrates:

Smooth gameplay using simple GDScript logic
A clean, reusable scene architecture
How to integrate UI, physics, and level design in Godot 🕹️ Play it, tweak it, and build on it — that’s how the best ideas start. 👉 Check it out on GitHub →

🏷️ Tags
#godot #gamedev #tutorial #gdscript #indiegame #breakout

🧩 “How to Build a Reusable Accordion Table Component in React — Step-by-Step with TanStack Table & MUI”

Saba beigi — Sat, 18 Oct 2025 01:26:26 +0000

When it comes to presenting hierarchical data in a structured and interactive way, combining accordion layouts with data tables can be an elegant solution. Recently, I built a reusable AccordionTable component using React, TanStack Table (React Table v8), and Material UI (MUI) — and I’d like to walk you through how it works.

🎯 The Goal

I wanted a flexible table component that:
Displays summary rows that can be expanded to show child rows.
Supports skeleton loading states while fetching data.
Has consistent column widths across parent and child tables.
Uses MUI’s clean UI for styling and accessibility. This pattern works great for reports like balance sheets, financial statements, or nested datasets where each parent row represents a summarized entity.

⚙️ Core Technologies

React + TypeScript for component logic and type safety.
TanStack Table v8 for data modeling and rendering flexibility.
Material UI (MUI) for layout, styling, and accordion behavior.

🧱 Component Overview

export default function AccordionTable<T extends { id?: string; children?: any[] }>({
  data,
  columns,
  skeleton,
}: AccordionTableProps<T>) { ... }

The component accepts:

data: an array of objects (each can optionally include children).
columns: TanStack column definitions.
skeleton: optional loading configuration (show and rows). It then renders a table where each row is wrapped inside an accordion. When expanded, it displays a nested ChildTable for the row’s children.

🧩 Handling Nested Data
To handle the child rows, I created a small reusable component:

function ChildTable({ rows, columns, columnWidths }: {
  rows: T[];
  columns: ColumnDef<T>[];
  columnWidths: string[];
}) {
  const childTable = useReactTable({
    data: rows,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <Table size="small">
      <TableBody>
        {childTable.getRowModel().rows.map((childRow) => (
          <TableRow key={childRow.id}>
            {childRow.getVisibleCells().map((cell, i) => (
              <TableCell key={cell.id} sx={{ width: columnWidths[i] }}>
                <Typography variant="bodyMdRegular" sx={{ color: "#696563" }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </Typography>
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

This nested table keeps the same column structure as the main one and aligns neatly using predefined columnWidths.

🎨 Accordion Layout with MUI
Each main row becomes an MUI Accordion, with summary and details sections:

<Accordion>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    {/* Summary cells */}
  </AccordionSummary>
  <AccordionDetails>
    {/* Nested ChildTable */}
  </AccordionDetails>
</Accordion>

The summary displays the top-level values (like category totals).
The details section renders the child rows (like subcategories). This approach keeps the UI compact and interactive while maintaining clarity.

💀 Skeleton Loading State
Before data loads, the component renders a lightweight placeholder using MUI’s :

{showSkeleton &&
  Array.from({ length: skeleton.rows }).map((_, index) => (
    <TableRow key={index}>
      {Array.from({ length: table.getAllColumns().length }).map((_, colIndex) => (
        <TableCell key={colIndex}><Skeleton /></TableCell>
      ))}
    </TableRow>
  ))}

This improves perceived performance and maintains layout consistency during loading.

🧠 Key Learnings

TanStack Table’s flexRender() makes it easy to render custom cell components.
MUI Accordion integrates smoothly with table rows if you manage borders and padding carefully.
Consistent column widths are crucial — define them in constants and reuse across parent and child tables.

🚀 Final Thoughts

The AccordionTable component combines the power of data tables with the clarity of hierarchical UI patterns. It’s especially useful for complex data structures like:

Financial reports (Balance Sheet, P&L, etc.)
Nested analytics results
Hierarchical user or asset data This approach keeps things modular, scalable, and visually clear while maintaining accessibility and responsiveness.

👉 Check it out on GitHub →

react-webcam + TypeScript

Saba beigi — Mon, 06 Feb 2023 16:38:42 +0000

react-webcam allows you to implement camera shooting functionality in your React app.

Click [Start] in the above demo to start the camera. If you are asked for camera shooting permission, please allow it. (We do not send the captured data to the outside)

Then the image captured by the camera is displayed. Also, [Exit] on the upper left is the end of camera shooting, and [Capture] on the lower left is the button to capture the captured image.

Then the image captured by the camera is displayed. Also, [Exit] on the upper left is the button to end the camera shooting, and [Capture] on the lower left is the button to capture the captured video.

When capturing, the capture of the captured video was displayed.

import { useRef, useState, useCallback } from "react";
import Webcam from "react-webcam";
import "./styles.css";

const videoConstraints = {
  width: 720,
  height: 360,
  facingMode: "user"
};

export const App = () => {
  const [isCaptureEnable, setCaptureEnable] = useState<boolean>(false);
  const webcamRef = useRef<Webcam>(null);
  const [url, setUrl] = useState<string | null>(null);
  const capture = useCallback(() => {
    const imageSrc = webcamRef.current?.getScreenshot();
    if (imageSrc) {
      setUrl(imageSrc);
    }
  }, [webcamRef]);

  return (
    <>
      <header>
        <h1>camera app</h1>
      </header>
      {isCaptureEnable || (
        <button onClick={() => setCaptureEnable(true)}>start</button>
      )}
      {isCaptureEnable && (
        <>
          <div>
            <button onClick={() => setCaptureEnable(false)}>end </button>
          </div>
          <div>
            <Webcam
              audio={false}
              width={540}
              height={360}
              ref={webcamRef}
              screenshotFormat="image/jpeg"
              videoConstraints={videoConstraints}
            />
          </div>
          <button onClick={capture}>capture</button>
        </>
      )}
      {url && (
        <>
          <div>
            <button
              onClick={() => {
                setUrl(null);
              }}
            >
              delete
            </button>
          </div>
          <div>
            <img src={url} alt="Screenshot" />
          </div>
        </>
      )}
    </>
  );
};

getScreenshot():You can use the Webcam imported by import Webcam from "react-webcam" for the type of still image data acquired by
getScreenshot():The still image data obtained by can be displayed on the screen by specifying it as it is in the src property.

Custom wheel of prize with canvas

Saba beigi — Mon, 26 Sep 2022 21:47:19 +0000

we wanna make a custom wheel of prize with canvas. First we make a jsx component, and copy below codes to that:

import React, { useEffect, useState } from "react";
import "./index.css";

const WheelComponent = ({
    segments,
    segColors,
    winningSegment,
    onFinished,
    onRotate,
    onRotatefinish,
    primaryColor,
    primaryColoraround,
    contrastColor,
    buttonText,
    isOnlyOnce = true,
    size = 290,
    upDuration = 1000,
    downDuration = 100,
    fontFamily = "proxima-nova",
    width = 100,
    height = 100
}) => {
    let currentSegment = "";
    let isStarted = false;
    const [isFinished, setFinished] = useState(false);
    let timerHandle = 0;
    const timerDelay = segments.length;
    let angleCurrent = 0;
    let angleDelta = 0;
    let canvasContext = null;
    let maxSpeed = Math.PI / `${segments.length}`;
    const upTime = segments.length * upDuration;
    const downTime = segments.length * downDuration;
    let spinStart = 0;
    let frames = 0;
    const centerX = 300;
    const centerY = 300;
    useEffect(() => {
        document.getElementById("RootNode").onclick = function () { spin() }
        document.getElementById("RootNodeRes").onclick = function () { spin() }
        wheelInit();
        setTimeout(() => {
            window.scrollTo(0, 1);
        }, 0);
    }, []);
    const wheelInit = () => {
        initCanvas();
        wheelDraw();

    };

    const initCanvas = () => {
        let canvas = document.getElementById("canvas");
        if (navigator.appVersion.indexOf("MSIE") !== -1) {
            canvas = document.createElement("canvas");
            canvas.setAttribute("width", width);
            canvas.setAttribute("height", height);
            canvas.setAttribute("id", "canvas");
            document.getElementById("wheel").appendChild(canvas);
        }
        // canvas.addEventListener("click", spin, false);
        canvasContext = canvas.getContext("2d");
    };

    const spin = () => {
        isStarted = true;
        if (timerHandle === 0) {
            spinStart = new Date().getTime();
            maxSpeed = Math.PI / segments.length;
            frames = 0;
            timerHandle = setInterval(onTimerTick, timerDelay);
        }
    };
    const onTimerTick = () => {
        frames++;
        draw();
        const duration = new Date().getTime() - spinStart;
        let progress = 0;
        let finished = false;
        if (duration < upTime) {
            progress = duration / upTime;
            angleDelta = maxSpeed * Math.sin((progress * Math.PI) / 2);

        } else {
            if (winningSegment) {
                if (currentSegment === winningSegment && frames > segments.length) {
                    progress = duration / upTime;
                    angleDelta =
                        maxSpeed * Math.sin((progress * Math.PI) / 2 + Math.PI / 2);
                    progress = 1;
                } else {
                    progress = duration / downTime;
                    angleDelta =
                        maxSpeed * Math.sin((progress * Math.PI) / 2 + Math.PI / 2);
                }
            } else {
                progress = duration / downTime;
                if (progress >= 0.8) {
                    angleDelta =
                        maxSpeed / 1.2 * Math.sin((progress * Math.PI) / 2 + Math.PI / 2);
                } else if (progress >= 0.98) {
                    angleDelta =
                        maxSpeed / 2 * Math.sin((progress * Math.PI) / 2 + Math.PI / 2);
                } else
                    angleDelta =
                        maxSpeed * Math.sin((progress * Math.PI) / 2 + Math.PI / 2);
            }
            if (progress >= 1) finished = true;
        }

        angleCurrent += angleDelta;
        while (angleCurrent >= Math.PI * 2) angleCurrent -= Math.PI * 2;
        if (finished) {
            setFinished(true);
            onFinished(currentSegment);
            clearInterval(timerHandle);
            timerHandle = 0;
            angleDelta = 0;
        }
    };

    const wheelDraw = () => {
        clear();
        drawWheel();
        drawNeedle();
    };

    const draw = () => {
        clear();
        drawWheel();
        drawNeedle();
    };

    const drawSegment = (key, lastAngle, angle) => {
        const ctx = canvasContext;
        const value = segments[key];
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, size, lastAngle, angle, false);
        ctx.lineTo(centerX, centerY);
        ctx.closePath();
        ctx.fillStyle = segColors[key];
        ctx.fill();
        ctx.stroke();
        ctx.save();
        ctx.translate(centerX, centerY);
        ctx.rotate((lastAngle + angle) / 2);
        ctx.fillStyle = contrastColor || "white";
        ctx.font = "bold 1em " + fontFamily;
        ctx.fillText(value.substr(0, 21), size / 2 + 20, 0);
        ctx.restore();
    };

    const drawWheel = () => {
        const ctx = canvasContext;
        let lastAngle = angleCurrent;
        const len = segments.length;
        const PI2 = Math.PI * 2;
        ctx.lineWidth = 1;
        ctx.strokeStyle = primaryColor || "black";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.font = "1em " + fontFamily;
        for (let i = 1; i <= len; i++) {
            const angle = PI2 * (i / len) + angleCurrent;
            drawSegment(i - 1, lastAngle, angle);
            lastAngle = angle;
        }

        // Draw a center circle
        ctx.beginPath();
        ctx.arc(centerX, centerY, 40, 0, PI2, false);
        ctx.closePath();
        ctx.fillStyle = primaryColor || "black";
        ctx.lineWidth = 5;
        ctx.strokeStyle = contrastColor || "white";
        ctx.fill();
        ctx.font = "bold 2em " + fontFamily;
        ctx.fillStyle = contrastColor || "white";
        ctx.textAlign = "center";
        ctx.fillText(buttonText || "Spin", centerX, centerY + 3);
        ctx.stroke();

        // Draw outer circle
        ctx.beginPath();
        ctx.arc(centerX, centerY, size, 0, PI2, false);
        ctx.closePath();
        ctx.lineWidth = 25;
        ctx.strokeStyle = primaryColoraround || "white";
        ctx.stroke();
    };

    const drawNeedle = () => {
        const ctx = canvasContext;
        ctx.lineWidth = 1;
        ctx.strokeStyle = contrastColor || "white";
        ctx.fileStyle = contrastColor || "white";
        ctx.beginPath();
        ctx.moveTo(centerX + 10, centerY - 40);
        ctx.lineTo(centerX - 10, centerY - 40);
        ctx.lineTo(centerX, centerY - 60);
        ctx.closePath();
        ctx.fill();
        const change = angleCurrent + Math.PI / 2;
        let i =
            segments.length -
            Math.floor((change / (Math.PI * 2)) * segments.length) -
            1;
        if (i < 0) i = i + segments.length;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "transparent";
        ctx.font = "bold 1.5em " + fontFamily;
        currentSegment = segments[i];
        isStarted &&
            ctx.fillText(currentSegment, centerX + 10, centerY + size + 50);

    };
    const clear = () => {
        const ctx = canvasContext;
        ctx.clearRect(0, 0, 1000, 800);
    };
    return (
        <div id="wheel">
            <canvas
                id="canvas"
                width="600"
                height="600"
                style={{
                    pointerEvents: isFinished && isOnlyOnce ? "none" : "auto"
                }}
            />
        </div>
    );
};
export default WheelComponent;

then we use this component where we wanted like this:

function Wheel() {
  const segments = ["Happy", "Angry", "Sad", "Frustration", "Emptyness"];
  const segColors = [
    "#EE4040",
    "#F0CF50",
    "#815CD1",
    "#3DA5E0",
    "#FF9000",
  ];
  const onFinished = (winner) => {
   console.log(winner);
  };

  return (
    <div id="wheelCircle">
      <WheelComponent
        segments={segments}
        segColors={segColors}
        winningSegment=""
        onFinished={(winner) => onFinished(winner)}
        primaryColor="black"
        primaryColoraround="#ffffffb4"
        contrastColor="white"
        buttonText="Spin"
        isOnlyOnce={false}
        size={190}
        upDuration={50}
        downDuration={2000}
      />
    </div>
  );
}

export default Wheel;

you can customize your wheel with changes in your canvas codes.

See the following codesandbox for a demo:

change Mouse color with scroll with javascript

Saba beigi — Tue, 19 Jul 2022 09:42:57 +0000

in last post we made a custom mouse, in this mouse we wanna change that mouse color when we scroll our mouse.
first we should listen to our mouse to find out when the scroll is done, then we choose a color from our color list:

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll}) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          left:  clientX ,
          top:  clientY ,
          color: color,
        }}
      >
        <defs>
          <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="5%" stopColor={color} />
            <stop offset="95%" stopColor={color1} />
          </linearGradient>
        </defs>

        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={!scroll ? "url('#myGradient')" : color1}
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

import { MouseContext } from "./context/mouse-context";
import { useContext, useEffect, useState } from "react";
import CursorContextProvider from "./context/CursorContextProvider";
import Cursor from "./hooks/Cursor";
import useMousePosition from "./hooks/useMousePosition";
import SleepMode from "./component/SleepMode/SleepMode";

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);

function App(props) {
  const { cursorType, cursorChangeHandler } = useContext(MouseContext);
  const [color, setColor] = useState([
    "#000000",
    "#3C6487",
    "#9682B4",
    "#A06E8C",
    "#A01E64",
    "#CD5078",
    "#D78CAA",
    "#6EB996",
    "#1E7850",
    "#3C6487",
    "#000000",
  ]);

  const [color1, setColor1] = useState(color[0]);
  const [color2, setColor2] = useState(color[0]);
  const [scroll, setScroll] = useState(false);
  const [scrolltop, setScrolltop] = useState("false");
  const [id, setId] = useState(0);
  const [up, setUp] = useState(0);
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight,
    width: window.innerWidth,
  });
  const { clientX, clientY } = useMousePosition();


  let myTimeout = null;
  let myTimeout1 = null;
  function myStopFunction() {
    if (up >= 0) {
      if (id < color.length - 1) {
        setColor2(color[id + 1]);
        setColor1(color[id + 1]);
      } else {
        setColor2(color[color.length - 1]);
        setColor1(color[color.length - 1]);
      }
    } else {
      if (id !== 0) {
        setColor2(color[id - 1]);
        setColor1(color[id - 1]);
      } else {
        setColor2(color[0]);
        setColor1(color[0]);
      }
    }

    setScroll(true);
    setLeftnumbermax(id);
    setScrolltop("false");
  }




  useEffect(() => {
    setColor2(color[0]);
  }, []);
  useEffect(() => {
    if (leftnumber !== 0) {
      if (leftnumber % 2 !== 0) {
        if (
          leftnumber < color.length &&
          id < color.length - 1 &&
          leftnumbermax < color.length - 1
        ) {
          setId(id + 1);
          setColor1(color[id + 1]);
          setColor2(color[id + 1]);
        } else {
          if (id > 0) {
            setId(id - 1);
            setColor1(color[id - 1]);
            setColor2(color[id - 1]);
          } else {
            setId(0);
            setLeftnumbermax(0);
            setColor1(color[0]);
            setColor2(color[0]);
          }
        }
      }
    } else {
      setId(0);
      setColor1(color[0]);
      setColor2(color[0]);
    }
  }, [leftnumber]);

  window.addEventListener("wheel", (event) => {
    if (myTimeout) clearTimeout(myTimeout);
    setScroll(false);
    setLeftnumbermax(id);
    setScrolltop("true");
    const delta = Math.sign(event.deltaY);
    setUp(delta);
    if (id < color.length - 1 && delta > 0) {
      setColor1(color[id]);
      setColor2(color[id + 1]);
    } else {
      if (id === color.length - 1 && delta > 0) {
        setColor1(color[color.length - 1]);
        setColor2(color[color.length - 1]);
      } else if (id < color.length - 1 && delta < 0) {
        if (id !== 0) {
          setColor1(color[id]);
          setColor2(color[id - 1]);
        } else {
          setColor1(color[0]);
          setColor2(color[0]);
        }
      }
    }
    if (delta > 0) {
      if (id < color.length - 1) {
        setId(id + 1);
        setLeftnumbermax(id + 1);
      } else {
        setId(0);
        setLeftnumbermax(0);
      }
    } else if (delta < 0) {
      if (id > 0) {
        setId(id - 1);
        setLeftnumbermax(id - 1);
      } else {
        setId(color.length - 1);
        setLeftnumbermax(color.length - 1);
      }
    }
    myTimeout = setTimeout(myStopFunction, 1000);
  });

  return (
    <div
      className="App"
      style={{
        height: dimensions.height - 1,
        width: dimensions.width - 0.5,
        background: 
           !scroll
            ? `linear-gradient(180deg, ${color1}, ${color2})`
            : color2,
      }}
      onMouseDown={handleDown}
      onMouseUp={handleLeave}
      // onmousemove={handleMove}
    >

        <CursorContextProvider>
          <Cursor
            color={color1}
            color1={color2}
            scroll={scroll}
            left={left}
            right={right}
            drag={drag}
            pos={pos}
          />
          {props.children}
          <div
            className="Center_Circle"
            style={{
              background:
                 !scroll
                ? `linear-gradient(180deg, ${color1}, ${color2})`
                : color2,
              position: "fixed" ,
              left:  "50%",
              top: "50%",
              transform: "translate(-50%, -50%)",

            }}
          ></div>
        </CursorContextProvider>
    </div>
  );
}

export default App;

custom Mouse with javascript

Saba beigi — Tue, 19 Jul 2022 08:00:28 +0000

here we wanna make a custom mouse with javascript, first step is to make a context for mouse:

import React, { createContext, useState } from "react";

export const CursorContext = createContext();

const CursorContextProvider = (props) => {
  const [cursor, setCursor] = useState({ active: false });

  return (
    <CursorContext.Provider value={[cursor, setCursor]}>
      {props.children}
    </CursorContext.Provider>
  );
};

export default CursorContextProvider;

then we make a component for our mouse shape:

import React from "react";
import useMousePosition from "./useMousePosition";
const Cursor = ({ color, color1, scroll, left, right, drag, pos }) => {
  const { clientX, clientY } = useMousePosition();

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 9999,
        pointerEvents: "none",
      }}
    >
      <svg
        width={500}
        height={500}
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          position: "absolute",
          transform: "translate(-50%, -50%)",
          color: '#000',
        }}
      >
        <circle
          cx="25"
          cy="25"
          r="7.5"
          fill={ "#000"  }
          id="cursor"
        />
      </svg>
    </div>
  );
};
export default Cursor;

then we use them in a component

        <CursorContextProvider>
          <Cursor
          />
          {props.children}
         <div>
           mouse shape
        </div>
        </CursorContextProvider>

custom Modal with javascript

Saba beigi — Tue, 19 Jul 2022 06:16:35 +0000

we want to open a modal then open another one inside the first one and close the higher modal with click in outside of the modal.
first we make a component for modal:

import React from "react";

function Modal(props) {
  const divStyle = {
    display: props.displayModal ? "block" : "none",
  };
  function closeModal(e) {
    e.stopPropagation();
    props.closeModal();
  }

  return (
    <div className="modal" onClick={closeModal} style={divStyle}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <span className="close" onClick={closeModal}>
          &times;
        </span>

        {props.children}
      </div>
    </div>
  );
}

export default Modal;

then we use this component where we need it

import React, { useState } from "react";
import "./App.css";
import Modal from "./Modal";

function App() {
  const [modal, setModal] = useState(false);
  const [modal1, setModal1] = useState(false);
  const selectModal = (info = "") => {
    setModal((perv) => !perv);
  };


  return (
    <div className="App">
      <p onClick={() => selectModal("Modal A")}>Open Modal A</p>
      <Modal displayModal={modal} closeModal={selectModal}>
        <div>modal1</div>
        <div onClick={() => setModal1("modal a1")}>Open second modal</div>
        <Modal displayModal={modal1} closeModal={setModal1}>
          <div>modal2</div>

          <div>Second modal</div>
        </Modal>
      </Modal>
    </div>
  );
}

export default App;

Text Portrait

Saba beigi — Tue, 19 Jul 2022 05:46:53 +0000

<div class="wrapper">
  <div class="portrait">

  </div
</div>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wrapper {
  height: 100vh;
  background: #000;
  /*This part is important for centering*/
  display: grid;
  place-items: center;
}

.portrait {
  font-size: 10px;
  line-height: 10px;
  background: url('https://markodenic.com/wp-content/themes/blog/images/marko.png') fixed center no-repeat;
  background-size: contain;
}

/* This part is important for the feature itself */
.portrait {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.1);
}

Gradient Borders

Saba beigi — Tue, 19 Jul 2022 05:42:36 +0000

Create gradient borders with the border-image property:

border:4px solid;
border-image: linear-gradient(135deg,#FF0000 0%,... #FF00AB 100%)1;

<div class="stripe-1"></div>
<div class="stripe-1 blue-stripe-1"></div>
<div class="stripe-2"></div>
<div class="stripe-2 blue-stripe-2"></div>
<div class="stripe-1 stripe-3"></div>
<div class="stripe-1 stripe-3 blue-stripe-3"></div>
<div class="stripe-2 stripe-4"></div>
<div class="stripe-2 stripe-4 blue-stripe-4"></div>

body{background-color:#283470;}
.stripe-1{
    position:absolute;
    top: 10px;
    left: 10px;
    height: 10px;
    width: 98%;
    background: -webkit-linear-gradient(left,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
    background: linear-gradient(90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-1{
  background: -webkit-linear-gradient(left,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(90deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  top:20px;
  height:5px;
}

.stripe-2{
    position:absolute;
    top:10px;
    left:10px;
    height: 98%;
    width: 10px;
    background: -webkit-linear-gradient(top,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
    background: linear-gradient(180deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-2{
  gradient(top,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(180deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  left:20px;
  width:5px;
}

.stripe-3{
  top:auto;
  bottom:10px;
  right:10px;
  left:auto;
  background: -webkit-linear-gradient(right,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
  background: linear-gradient(-90deg,rgba(58, 32, 92,1),rgba(58, 32, 92,.0));
}
.blue-stripe-3{
  background: -webkit-linear-gradient(right,#17E1E3,rgba(58, 32, 92,.0));
  background: linear-gradient(-90deg,#17E1E3,rgba(58, 32, 92,.0));
  z-index:-1;
  bottom:20px;
  height:5px;
}

.stripe-4{
  top:auto;
  bottom:10px;
  right:10px;
  left:auto;
  background: -webkit-linear-gradient(bottom,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
  background: linear-gradient(-180deg,rgba(58, 32, 92,.0),rgba(58, 32, 92,1));
}
.blue-stripe-4{
  gradient(bottom,rgba(58, 32, 92,.0),#17E1E3);
  background: linear-gradient(-180deg,rgba(58, 32,92,.0),#17E1E3);
  z-index:-1;
  right:20px;
  width:5px;
}

Bar Chart using D3.js

Saba beigi — Wed, 18 May 2022 04:28:16 +0000

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
f you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from Skypack:

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

const div = d3.selectAll("div");

</script>

For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

const div = d3.selectAll("div");

</script>

You can also use the standalone D3 microlibraries. For example, d3-selection:

<script type="module">

import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

const div = selectAll("div");

</script>

first create 3 folder with namse: index.html, index.css,index.js
then open index.html and write this codes:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Learn D3.js</title>
    </head>
    <body>
        <h1>Bar Chart using D3.js</h1>

        <svg class="bar-chart"></svg>

        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

then open index.css and copy this codes:

.bar-chart {
    background-color: #C7D9D9;
    }

.bar {
     fill: #115D8C;
     }

and finally copy this codes in index.js:

 // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);


var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - d 
    })
    .attr("height", function(d) { 
        return d; 
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0]; 
        return "translate("+ translate +")";
    });

the result will be this:

what if the dataset number were so small?
we have a very tiny bar chart with is look like a liner chart.in this position we should use scale:

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([0, svgHeight]);
var barChart = svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("y", function (d) {
    return svgHeight - yScale(d);
  })
  .attr("height", function (d) {
    return yScale(d);
  })

javascript
for bar chart axis, d3 give us 4 metod:
d3.axisTop()
d3.axisRight()
d3.axisBottom()
d3.axisLeft()

// javascript

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300;

var svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight);

var xScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgWidth]);

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([svgHeight, 0]);

var x_axis = d3.axisBottom().scale(xScale);

var y_axis = d3.axisLeft().scale(yScale);

svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);

var xAxisTranslate = svgHeight - 20;

svg
  .append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis);

and the result will be:

odd or even large number with react window instead of web worker

Saba beigi — Wed, 09 Mar 2022 20:18:22 +0000

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks.

It reduces the amount of work (and time) required to render the initial view and to process updates.
It reduces the memory footprint by avoiding over-allocation of DOM nodes
First write input with ant design:

import PropTypes from "prop-types";
import React from "react";
import { Input as InputBase } from "antd";
import { Controller, useController } from "react-hook-form";
import classNames from "classnames";

const Input = ({
  name,
  value,
  message,
  control,
  register,
  classes,
  label,
  absolute,
  ...rest
}) => {
  const {
    field,
    fieldState: { error },
  } = useController({
    name,
    control,
    rules: register,
    defaultValue: value,
  });
  return (
    <div
      className={classNames("input", {
        input__absolute: absolute,
      })}
    >
      {label ? <label className="input__label">{label} :</label> : null}
      <InputBase
        className={classNames("input__field", [classes], {
          input__error: error,
        })}
        {...field}
        {...rest}
      />
      {error && <span className="input__message">{error.message}</span>}
    </div>
  );
};

Input.propTypes = {
  classes: PropTypes.any,
  control: PropTypes.any,
  errors: PropTypes.any,
  label: PropTypes.string,
  message: PropTypes.string,
  name: PropTypes.string,
  register: PropTypes.any,
  value: PropTypes.any,
};
export default Input;

then make button component

import PropTypes from "prop-types";
import React from "react";
import { Button as ButtonBase } from "antd";
import classNames from "classnames";

const Button = ({
  type,
  classes,
  large,
  success,
  disabled,
  children,
  ...rest
}) => {
  return (
    <ButtonBase
      type={type}
      className={classNames(`button button__${type}`, [classes], {
        large: large,
        success: success,
        disabled: disabled,
      })}
      disabled={disabled}
      {...rest}
    >
      {children}
    </ButtonBase>
  );
};
Button.defaultProps = {
  type: "default",
  large: false,
  success: false,
  disabled: false,
};

Button.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.string,
  large: PropTypes.bool,
  ico: PropTypes.bool,
  success: PropTypes.bool,
  disabled: PropTypes.bool,
  type: PropTypes.oneOfType(
    [PropTypes.oneOf(["primary", "default", "text", "gradient"])],
    PropTypes.string.isRequired
  ),
};
export default Button;

then use these codes to take data from the user:

      <form onSubmit={handleSubmit(onSubmit)} className="Home__formBox">
        <Input
          label="عدد"
          register={{
            required: {
              value: true,
              message: "Enter the number",
            },
          }}
          type="number"
          name="data"
          control={control}
        />
        <Button
          type="primary"
          classes="MasterSignUp__btn"
          htmlType="submit"
          disabled={loading ? true : false}
        >
          {loading ? "sending..." : "send"}
        </Button>
      </form>

then write shape component to check if the number is odd or even, show circle or square


import React, { useEffect, useState } from "react";
import { FixedSizeGrid as Grid } from "react-window";
import InfiniteLoader from "react-window-infinite-loader";

const Shapes = ({ loadMore, number }) => {
  const Row = ({ index, style }) => (
    <div className={"circles"} style={style}></div>
  );
  const Row1 = ({ index, style }) => (
    <div className={"squares"} style={style}></div>
  );
  const [type, setType] = useState("");
  useEffect(() => {
    if (number % 2 == 0) {
      setType(true); //even
    } else {
      setType(false); //odd
    }
  }, [number]);
  const LOADING = 1;
  const LOADED = 2;
  let itemStatusMap = {};
  const isItemLoaded = (index) => !!itemStatusMap[index];
  const loadMoreItems = (startIndex, stopIndex) => {
    for (let index = startIndex; index <= stopIndex; index++) {
      itemStatusMap[index] = LOADING;
    }
    return new Promise((resolve) =>
      setTimeout(() => {
        for (let index = startIndex; index <= stopIndex; index++) {
          itemStatusMap[index] = LOADED;
        }
        resolve();
      }, 2500)
    );
  };
  return (
    <InfiniteLoader
      isItemLoaded={(index) => index < number}
      itemCount={number}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <Grid
          columnCount={number / 10}
          columnWidth={40}
          rowCount={number}
          rowHeight={25}
          height={800}
          width={800}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={ref}
          className="Shapes"
        >
          {type ? Row : Row1}
        </Grid>
      )}
    </InfiniteLoader>
  );
};

export default Shapes;

then update the home page with this component:

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import Input from "./Input";
import Button from "./Button";
import Shapes from "./Shapes";

function Index() {
  const [loading, setLoading] = useState(false);
  const [number, setNumber] = useState(0);
  const {
    handleSubmit,
    control,
    register,
    reset,
    formState: { errors, isSubmitted },
  } = useForm();
  const onSubmit = (data) => {
    // setLoading(true);
    setNumber(data.data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} className="Home__formBox">
        <Input
          label="number"
          register={{
            required: {
              value: true,
              message: "enter number",
            },
          }}
          type="number"
          name="data"
          control={control}
        />
        <Button
          type="primary"
          classes="MasterSignUp__btn"
          htmlType="submit"
          disabled={loading ? true : false}
        >
          {loading ? "sending..." : "send"}
        </Button>
      </form>
      <Shapes number={number} setLoading={setLoading} />
    </div>
  );
}

export default Index;

CSS Only Accordion

Saba beigi — Sun, 06 Feb 2022 22:33:56 +0000

Accordions don't even need to have fancy JavaScript plugins. Surely we can do it simply in Vanilla JavaScript, but sometimes it's best to even look at other solutions.

Today we will look into doing a CSS-only accordion with the input hack.
There are multiple ways of doing it with CSS. But today, we will look into just the input hack.For the HTML part we are going to use the following:

<div class="accordion">
  <input type="checkbox" id="tab1" />
  <label class="accordion-label" for="tab1">Item 1</label>
  <div class="accordion-content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
  </div>
</div>

This will generate one accordion for us. As you can see, we use a checkbox and a label. The label will be our accordion title
CSS for the Accordion:

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion {
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
.accordion-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  cursor: pointer;
  background: #333;
  color: #fff;
}
.accordion-content {
  max-height: 0;
  padding: 0 1em;
  background: white;
  transition: all 0.35s;
}
input:checked ~ .accordion-content {
  max-height: 100vh;
  padding: 1em;
}

Let's loop through this in more detail step by step:
input { position: absolute; opacity: 0; z-index: -1; }
We don't need the input visible, so we give it a postion: absolute; and z-index: -1 to hide it. We set the opacity: 0 so it's not visible to the user.
.accordion { margin: 10px; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); }
For the main accordion styling, we do some simple styling.

We set a margin of 10px to give it some space. Then we make the corners rounded with border-radius: 5px;. Then we also set the overflow: hidden to not make the accordion content show before clicking the label. Lastly, we set a nice box-shadow to give it a clean effect.
.accordion-label { display: flex; padding: 1em; font-weight: bold; cursor: pointer; background: #333; color: #fff; }
The label we give a display: flex to make full width. Then we add some padding, make the font bold, add a cursor: pointer, and add some color to make it pop.
.accordion-content { max-height: 0; padding: 0 1em; background: white; transition: all 0.35s; }
We set the content div to have a max-height: 0 give it a small padding, and add a transition to make it animated once it opens.
input:checked ~ .accordion-content { max-height: 100vh; padding: 1em; }
No for the magic, once the input is checked we set the max-height: 100vh (100% of the viewport) and add the overall padding to the content div.

The ~ is a general sibling selector it will select a sibling that follows the first one.

See the following Codepen for a demo:

Or see this example a bit more styled and more options: