Integration

.github/workflows/main.yaml

@@ -1,5 +1,5 @@
-on:
-  push:
-    branch: ["main", "dev"]
+# on:
+#   push:
+#     branch: ["main", "dev"]
 
-jobs:
+# jobs:    

.prettierrc

@@ -1,10 +1,10 @@
 {
-  "semi": true,
-  "singleQuote": false,
-  "trailingComma": "none",
-  "arrowParens": "always",
-  "tabWidth": 4,
-  "useTabs": true,
-  "bracketSpacing": true,
-  "bracketSameLine": false
-}
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"arrowParens": "always",
+	"tabWidth": 2,
+	"useTabs": true,
+	"bracketSpacing": true,
+	"bracketSameLine": false
+}

frontend/app/chess/page.tsx

@@ -0,0 +1,7 @@
+import Chess from "@/components/chess";
+
+export default function ChessPage() {
+    return (
+        <Chess/>
+    )
+}

frontend/components/chess/index.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { initializeBoard, pieceSymbols } from "@/lib/utils";
+import { useState } from "react";
+
+export default function Chess() {
+
+    const [board] = useState(initializeBoard());
+    const [selectedSquare, setSelectedSquare] = useState<Array<number>| null>(null);
+
+    const handleSquareClick = (row:number, col:number) => {
+        const piece = board[row][col];
+
+        if (selectedSquare) {
+            const [fromRow, fromCol] = selectedSquare;
+            handleMakeMove(fromRow, fromCol, row, col);
+
+            setSelectedSquare(null);
+        } else {
+            if (piece) {
+                setSelectedSquare([row, col]);
+            }
+        }
+    };
+
+    const handleMakeMove = (fromRow: number, fromCol: number, toRow: number, toCol: number) => {
+        console.log(`Move from [${fromRow}, ${fromCol}] to [${toRow}, ${toCol}]`);
+    };
+
+    const handleReset = () => {
+        console.log('Reset board');
+    };
+
+
+    return (
+        <div className="min-h-screen flex items-center justify-center p-4 sm:p-6 md:p-8">
+            <div className="w-full max-w-3xl">
+                <div className="text-center mb-6 sm:mb-8 bg-blue-300 rounded p-2">
+                    <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 ribeye">                                                                                                                          
+                        Chess Board
+                    </h1>
+                </div>
+
+                <div className="aspect-square bg-blue-50 p-3 sm:p-4 md:p-6 rounded-lg shadow-2xl">
+                    <div className="w-full h-full grid grid-cols-8 gap-0 bg-white rounded-sm overflow-hidden shadow-inner">
+                        {board.map((row, rowIndex) =>
+                            row.map((piece, colIndex) => {
+                                const isLight = (rowIndex + colIndex) % 2 === 0;
+                                const fileLabel = String.fromCharCode(97 + colIndex);
+                                const rankLabel = 8 - rowIndex;
+                                const showFileLabel = rowIndex === 7;
+                                const showRankLabel = colIndex === 0;
+                                const isSelected = selectedSquare && selectedSquare[0] === rowIndex && selectedSquare[1] === colIndex;
+
+                                return (
+                                    <button
+                                        key={`${rowIndex}-${colIndex}`}
+                                        onClick={() => handleSquareClick(rowIndex, colIndex)}
+                                        className={`relative aspect-square flex flex-col items-center justify-center transition-all duration-150 cursor-pointer hover:opacity-90 ${isLight
+                                            ? 'bg-blue-200'
+                                            : 'bg-blue-500'
+                                            } ${isSelected ? 'ring-4 ring-yellow-300 ring-inset' : ''}`}
+                                    >
+                                        {piece && (
+                                            <div className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-none drop-shadow-lg ${piece.color === 'white'
+                                                ? 'text-white'
+                                                : 'text-black'
+                                                }`}>
+                                                {pieceSymbols[piece.color][piece.type]}
+                                            </div>
+                                        )}
+
+                                        {showFileLabel && (
+                                            <div className="absolute bottom-1 sm:bottom-1.5 right-1 sm:right-1.5 text-[10px] sm:text-xs font-bold text-blue-900 opacity-70">
+                                                {fileLabel}
+                                            </div>
+                                        )}
+
+                                        {showRankLabel && (
+                                            <div className="absolute top-1 sm:top-1.5 left-1 sm:left-1.5 text-[10px] sm:text-xs font-bold text-blue-900 opacity-70">
+                                                {rankLabel}
+                                            </div>
+                                        )}
+                                    </button>
+                                );
+                            })
+                        )}
+                    </div>
+                </div>
+
+                <div className="mt-6 sm:mt-8 flex justify-center gap-4">
+                    <button
+                        onClick={handleReset}
+                        className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200"
+                    >
+                        Reset
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}