{"index.html":"\n\n\n\n \n \n Algorithm Builder\n \n \n\n\n\n

Object Builder

Use the grid to create a work of art!

\n\n

Pieces Used

\n 0 / 25\n

\n\n

Shapes

\n Square\n

\n\n

\n Circle\n

\n\n

Colors

\n\n

\n \n

\n\n

Drag shapes to the grid • Use arrow keys to navigate • Press\n 'S' for square, 'C' for circle • Press same key again to remove pieces

\n\n \n\n\n","script.js":"class AlgorithmBuilder {\n constructor() {\n this.grid = [];\n this.pieceCount = 0;\n this.maxPieces = 25;\n this.selectedColor = '#FF6B6B';\n this.gridSize = 8;\n this.cellSize = 40;\n this.currentRow = 0;\n this.currentCol = 0;\n\n this.initializeGrid();\n this.setupEventListeners();\n this.updateUI();\n this.updateSelectedCell();\n }\n\n initializeGrid() {\n const gridElement = document.getElementById('grid');\n this.grid = Array(this.gridSize).fill().map(() => Array(this.gridSize).fill(null));\n\n // Create grid cells\n for (let row = 0; row < this.gridSize; row++) {\n for (let col = 0; col < this.gridSize; col++) {\n const cell = document.createElement('div');\n cell.className = 'grid-cell';\n cell.dataset.row = row;\n cell.dataset.col = col;\n gridElement.appendChild(cell);\n }\n }\n }\n\n setupEventListeners() {\n // Shape dragging\n document.querySelectorAll('.shape-item').forEach(item => {\n item.addEventListener('mousedown', (e) => this.startDrag(e, item));\n });\n\n // Color selection\n document.querySelectorAll('.color-item').forEach(item => {\n item.addEventListener('click', (e) => this.selectColor(e, item));\n });\n\n // Clear grid button\n document.getElementById('clear-grid').addEventListener('click', () => this.clearGrid());\n\n // Grid drop handling\n const gridElement = document.getElementById('grid');\n gridElement.addEventListener('dragover', (e) => this.handleDragOver(e));\n gridElement.addEventListener('drop', (e) => this.handleDrop(e));\n\n\n\n // Prevent default drag behavior on images\n document.addEventListener('dragstart', (e) => {\n if (e.target.tagName === 'IMG') {\n e.preventDefault();\n }\n });\n\n // Keyboard navigation\n document.addEventListener('keydown', (e) => this.handleKeyPress(e));\n }\n\n startDrag(e, shapeItem) {\n if (this.pieceCount >= this.maxPieces) return;\n\n e.preventDefault();\n\n const shapeType = shapeItem.dataset.shape;\n const rect = shapeItem.getBoundingClientRect();\n\n // Create drag preview\n const preview = this.createDragPreview(shapeType);\n document.body.appendChild(preview);\n\n const offsetX = e.clientX - rect.left;\n const offsetY = e.clientY - rect.top;\n\n // Position preview\n preview.style.left = (e.clientX - offsetX) + 'px';\n preview.style.top = (e.clientY - offsetY) + 'px';\n\n const handleMouseMove = (e) => {\n preview.style.left = (e.clientX - offsetX) + 'px';\n preview.style.top = (e.clientY - offsetY) + 'px';\n\n // Highlight grid cell\n this.highlightGridCell(e.clientX, e.clientY);\n };\n\n const handleMouseUp = (e) => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n\n // Try to place piece\n this.tryPlacePiece(e.clientX, e.clientY, shapeType);\n\n // Clean up\n if (preview.parentNode) {\n document.body.removeChild(preview);\n }\n this.clearHighlights();\n };\n\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n }\n\n createDragPreview(shapeType) {\n const preview = document.createElement('div');\n preview.className = `drag-preview shape ${shapeType}`;\n preview.style.width = this.cellSize + 'px';\n preview.style.height = this.cellSize + 'px';\n preview.style.backgroundColor = this.selectedColor;\n\n if (shapeType === 'circle') {\n preview.style.borderRadius = '50%';\n }\n\n return preview;\n }\n\n highlightGridCell(x, y) {\n this.clearHighlights();\n\n const gridElement = document.getElementById('grid');\n const gridRect = gridElement.getBoundingClientRect();\n\n if (x >= gridRect.left && x <= gridRect.right &&\n y >= gridRect.top && y <= gridRect.bottom) {\n\n const col = Math.floor((x - gridRect.left - 10) / (this.cellSize + 1));\n const row = Math.floor((y - gridRect.top - 10) / (this.cellSize + 1));\n\n if (row >= 0 && row < this.gridSize && col >= 0 && col < this.gridSize) {\n const cell = gridElement.children[row * this.gridSize + col];\n if (cell && !this.grid[row][col]) {\n cell.classList.add('highlight');\n }\n }\n }\n }\n\n clearHighlights() {\n document.querySelectorAll('.grid-cell.highlight').forEach(cell => {\n cell.classList.remove('highlight');\n });\n }\n\n tryPlacePiece(x, y, shapeType) {\n const gridElement = document.getElementById('grid');\n const gridRect = gridElement.getBoundingClientRect();\n\n if (x >= gridRect.left && x <= gridRect.right &&\n y >= gridRect.top && y <= gridRect.bottom) {\n\n const col = Math.floor((x - gridRect.left - 10) / (this.cellSize + 1));\n const row = Math.floor((y - gridRect.top - 10) / (this.cellSize + 1));\n\n if (row >= 0 && row < this.gridSize && col >= 0 && col < this.gridSize) {\n this.placePiece(row, col, shapeType);\n }\n }\n }\n\n placePiece(row, col, shapeType) {\n if (this.grid[row][col] || this.pieceCount >= this.maxPieces) return;\n\n const pieceData = {\n type: shapeType,\n color: this.selectedColor,\n id: Date.now() + Math.random()\n };\n\n this.grid[row][col] = pieceData;\n this.pieceCount++;\n\n // Create visual piece\n const gridElement = document.getElementById('grid');\n const cell = gridElement.children[row * this.gridSize + col];\n\n const piece = document.createElement('div');\n piece.className = `placed-piece ${shapeType}`;\n piece.dataset.pieceId = pieceData.id;\n piece.style.backgroundColor = this.selectedColor;\n\n if (shapeType === 'circle') {\n piece.style.borderRadius = '50%';\n }\n\n cell.appendChild(piece);\n cell.classList.add('occupied');\n\n this.updateUI();\n }\n\n\n\n removePiece(row, col) {\n if (!this.grid[row][col]) return;\n\n this.grid[row][col] = null;\n this.pieceCount--;\n\n const gridElement = document.getElementById('grid');\n const cell = gridElement.children[row * this.gridSize + col];\n\n // Remove visual piece\n const piece = cell.querySelector('.placed-piece');\n if (piece) {\n cell.removeChild(piece);\n }\n\n cell.classList.remove('occupied');\n\n this.updateUI();\n }\n\n selectColor(e, colorItem) {\n // Remove active class from all colors\n document.querySelectorAll('.color-item').forEach(item => {\n item.classList.remove('active');\n });\n\n // Add active class to selected color\n colorItem.classList.add('active');\n this.selectedColor = colorItem.dataset.color;\n\n // Update shape previews\n this.updateShapePreviews();\n }\n\n updateShapePreviews() {\n document.querySelectorAll('.shape').forEach(shape => {\n shape.style.backgroundColor = this.selectedColor;\n });\n }\n\n clearGrid() {\n if (confirm('Are you sure you want to clear the entire grid?')) {\n this.grid = Array(this.gridSize).fill().map(() => Array(this.gridSize).fill(null));\n this.pieceCount = 0;\n\n // Clear visual grid\n const gridElement = document.getElementById('grid');\n gridElement.querySelectorAll('.grid-cell').forEach(cell => {\n const piece = cell.querySelector('.placed-piece');\n if (piece) {\n cell.removeChild(piece);\n }\n cell.classList.remove('occupied');\n });\n\n this.updateUI();\n }\n }\n\n updateUI() {\n // Update piece counter\n document.getElementById('piece-count').textContent = this.pieceCount;\n\n // Enable/disable palette based on piece count\n const isAtLimit = this.pieceCount >= this.maxPieces;\n\n document.querySelectorAll('.shape-item').forEach(item => {\n item.classList.toggle('disabled', isAtLimit);\n });\n\n document.querySelectorAll('.color-item').forEach(item => {\n item.classList.toggle('disabled', isAtLimit);\n });\n\n // Update counter color\n const counterDisplay = document.querySelector('.counter-display');\n if (isAtLimit) {\n counterDisplay.style.color = '#e74c3c';\n counterDisplay.style.borderColor = '#e74c3c';\n } else {\n counterDisplay.style.color = '#27A9E1';\n counterDisplay.style.borderColor = '#27A9E1';\n }\n }\n\n handleKeyPress(e) {\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n this.currentRow = Math.max(0, this.currentRow - 1);\n this.updateSelectedCell();\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.currentRow = Math.min(this.gridSize - 1, this.currentRow + 1);\n this.updateSelectedCell();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n this.currentCol = Math.max(0, this.currentCol - 1);\n this.updateSelectedCell();\n break;\n case 'ArrowRight':\n e.preventDefault();\n this.currentCol = Math.min(this.gridSize - 1, this.currentCol + 1);\n this.updateSelectedCell();\n break;\n case 's':\n case 'S':\n e.preventDefault();\n this.togglePiece(this.currentRow, this.currentCol, 'square');\n break;\n case 'c':\n case 'C':\n e.preventDefault();\n this.togglePiece(this.currentRow, this.currentCol, 'circle');\n break;\n }\n }\n\n togglePiece(row, col, shapeType) {\n const currentPiece = this.grid[row][col];\n \n if (currentPiece && currentPiece.type === shapeType) {\n // Remove the piece if it's the same type\n this.removePiece(row, col);\n } else if (!currentPiece && this.pieceCount < this.maxPieces) {\n // Place the piece if cell is empty and we haven't reached the limit\n this.placePiece(row, col, shapeType);\n }\n }\n\n updateSelectedCell() {\n // Remove previous selection\n document.querySelectorAll('.grid-cell.selected').forEach(cell => {\n cell.classList.remove('selected');\n });\n\n // Add selection to current cell\n const gridElement = document.getElementById('grid');\n const cell = gridElement.children[this.currentRow * this.gridSize + this.currentCol];\n if (cell) {\n cell.classList.add('selected');\n }\n }\n\n // Drag and drop handlers (for future enhancement)\n handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n }\n\n handleDrop(e) {\n e.preventDefault();\n // Handle drop logic here if needed\n }\n}\n\n// Initialize the application when the page loads\ndocument.addEventListener('DOMContentLoaded', () => {\n new AlgorithmBuilder();\n});","styles.css":"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #F4F8FC;\n color: #28384A;\n line-height: 1.6;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nheader {\n text-align: center;\n margin-bottom: 30px;\n padding: 20px;\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(40, 56, 74, 0.1);\n}\n\nheader h1 {\n color: #28384A;\n font-size: 2.5rem;\n margin-bottom: 10px;\n}\n\nheader h1 i {\n color: #27A9E1;\n margin-right: 10px;\n}\n\nheader p {\n font-size: 1.1rem;\n color: #666;\n}\n\n.main-content {\n display: grid;\n grid-template-columns: 300px 1fr;\n gap: 30px;\n align-items: start;\n}\n\n.left-panel {\n background: white;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(40, 56, 74, 0.1);\n position: sticky;\n top: 20px;\n}\n\n.left-panel h3 {\n color: #28384A;\n margin-bottom: 15px;\n font-size: 1.2rem;\n border-bottom: 2px solid #27A9E1;\n padding-bottom: 8px;\n}\n\n.piece-counter {\n margin-bottom: 25px;\n}\n\n.counter-display {\n font-size: 1.5rem;\n font-weight: bold;\n color: #27A9E1;\n text-align: center;\n padding: 15px;\n background: #F4F8FC;\n border-radius: 8px;\n border: 2px solid #27A9E1;\n}\n\n.shape-palette {\n margin-bottom: 25px;\n}\n\n.shapes {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.shape-item {\n display: flex;\n align-items: center;\n gap: 15px;\n padding: 12px;\n border: 2px solid transparent;\n border-radius: 8px;\n cursor: grab;\n transition: all 0.3s ease;\n}\n\n.shape-item:hover {\n background: #F4F8FC;\n border-color: #27A9E1;\n}\n\n.shape-item:active {\n cursor: grabbing;\n}\n\n.shape-item.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.shape {\n width: 30px;\n height: 30px;\n}\n\n.shape.square {\n background: #2A88B4;\n}\n\n\n\n.shape.circle {\n background: #2A88B4;\n border-radius: 50%;\n}\n\n.color-palette {\n margin-bottom: 25px;\n}\n\n.colors {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.color-item {\n width: 40px;\n height: 40px;\n border-radius: 8px;\n cursor: pointer;\n border: 3px solid transparent;\n transition: all 0.3s ease;\n}\n\n.color-item:hover {\n transform: scale(1.1);\n border-color: #28384A;\n}\n\n.color-item.active {\n border-color: #28384A;\n box-shadow: 0 0 0 2px #27A9E1;\n}\n\n.color-item.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.controls {\n margin-top: 20px;\n}\n\n.btn {\n padding: 12px 20px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: bold;\n transition: all 0.3s ease;\n width: 100%;\n}\n\n.btn-danger {\n background: #2A88B4;\n color: white;\n}\n\n.btn-danger:hover {\n background: #c0392b;\n transform: translateY(-2px);\n}\n\n.workspace {\n background: white;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(40, 56, 74, 0.1);\n}\n\n.grid-container {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(8, 40px);\n grid-template-rows: repeat(8, 40px);\n gap: 1px;\n background: #28384A;\n border: 2px solid #28384A;\n border-radius: 8px;\n padding: 10px;\n}\n\n.grid-cell {\n background: #F4F8FC;\n border: 1px dashed #ccc;\n position: relative;\n transition: background-color 0.2s ease;\n}\n\n.grid-cell.highlight {\n background: #27A9E1;\n opacity: 0.3;\n}\n\n.grid-cell.selected {\n background: #27A9E1;\n opacity: 0.7;\n border: 2px solid #1E8BC3;\n}\n\n.grid-cell.occupied {\n border: none;\n}\n\n.placed-piece {\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n}\n\n.placed-piece.square {\n /* Square shape handled by div itself */\n}\n\n\n\n.placed-piece.circle {\n border-radius: 50%;\n}\n\n.instructions {\n text-align: center;\n color: #666;\n font-style: italic;\n}\n\n.instructions i {\n color: #27A9E1;\n margin-right: 5px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .main-content {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n \n .left-panel {\n position: static;\n order: 2;\n }\n \n .workspace {\n order: 1;\n }\n \n .grid {\n grid-template-columns: repeat(8, 35px);\n grid-template-rows: repeat(8, 35px);\n }\n \n header h1 {\n font-size: 2rem;\n }\n \n .colors {\n justify-content: center;\n }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 10px;\n }\n \n .grid {\n grid-template-columns: repeat(8, 30px);\n grid-template-rows: repeat(8, 30px);\n padding: 5px;\n }\n \n .left-panel {\n padding: 20px;\n }\n \n .workspace {\n padding: 20px;\n }\n}\n\n/* Drag and Drop Styles */\n.dragging {\n opacity: 0.5;\n transform: rotate(5deg);\n z-index: 1000;\n}\n\n.drag-preview {\n position: fixed;\n pointer-events: none;\n z-index: 1001;\n opacity: 0.8;\n transform: scale(1.1);\n}"}