diff --git a/dist/assets/index-CoFk0OHL.js b/dist/assets/index-CoFk0OHL.js
new file mode 100644
index 0000000..ef9b7fb
--- /dev/null
+++ b/dist/assets/index-CoFk0OHL.js
@@ -0,0 +1 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))o(c);new MutationObserver(c=>{for(const r of c)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&o(s)}).observe(document,{childList:!0,subtree:!0});function n(c){const r={};return c.integrity&&(r.integrity=c.integrity),c.referrerPolicy&&(r.referrerPolicy=c.referrerPolicy),c.crossOrigin==="use-credentials"?r.credentials="include":c.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function o(c){if(c.ep)return;c.ep=!0;const r=n(c);fetch(c.href,r)}})();let b=0,w=0;const L={I:{shape:[[1,1,1,1]],color:"#00f0f0"},L:{shape:[[1,0],[1,0],[1,1]],color:"#f0a000"},J:{shape:[[0,1],[0,1],[1,1]],color:"#0000f0"},T:{shape:[[1,1,1],[0,1,0]],color:"#a000f0"},O:{shape:[[1,1],[1,1]],color:"#f0f000"},S:{shape:[[0,1,1],[1,1,0]],color:"#00f000"},Z:{shape:[[1,1,0],[0,1,1]],color:"#f00000"},Single:{shape:[[1]],color:"#f0a0f0"},Plus:{shape:[[0,1,0],[1,1,1],[0,1,0]],color:"#a0a0a0"},U:{shape:[[1,0,1],[1,1,1]],color:"#f0f0a0"}};let C=0,l=null;function A(){const e=document.getElementById("game-grid"),t=5;for(let n=0;n<t*t;n++){const o=document.createElement("div");o.className="grid-cell",o.dataset.index=n,e.appendChild(o)}}function $(e,t,n){const o=document.createElement("div");o.className="tetris-piece",o.id=`piece-${e}-${Date.now()}`;const c=document.createElement("div");c.className="piece-grid";let r=JSON.parse(JSON.stringify(t.shape));const s=Math.floor(Math.random()*4);for(let a=0;a<s;a++)r=Y(r);o.dataset.shape=JSON.stringify(r),o.dataset.color=t.color,D(c,r,t.color),o.appendChild(c),n.appendChild(o),o.setAttribute("draggable",!0),o.addEventListener("dragstart",P),o.addEventListener("dragend",ee)}function D(e,t,n){e.innerHTML="",e.style.display="grid",e.style.gridTemplateRows=`repeat(${t.length}, 10px)`,e.style.gridTemplateColumns=`repeat(${t[0].length}, 10px)`,t.forEach(o=>{o.forEach(c=>{const r=document.createElement("div");if(r.className="piece-cell",c){r.style.backgroundImage='url("./bubble.png")',r.style.backgroundSize="cover";const s=S(n);r.style.filter=`hue-rotate(${s}deg)`}e.appendChild(r)})})}function S(e){const t=H(e),n=X(t.r,t.g,t.b);return Math.round(n[0]*360)}function H(e){e=e.replace(/^#/,"");const t=parseInt(e,16),n=t>>16&255,o=t>>8&255,c=t&255;return{r:n,g:o,b:c}}function X(e,t,n){e/=255,t/=255,n/=255;const o=Math.max(e,t,n),c=Math.min(e,t,n);let r,s,a=(o+c)/2;if(o===c)r=s=0;else{const i=o-c;switch(s=a>.5?i/(2-o-c):i/(o+c),o){case e:r=(t-n)/i+(t<n?6:0);break;case t:r=(n-e)/i+2;break;case n:r=(e-t)/i+4;break}r/=6}return[r,s,a]}function Y(e){return e.length,e[0].map((n,o)=>e.map(c=>c[o]).reverse())}function I(){const e=document.getElementById("tetris-bank");e.innerHTML="";const t=5;for(let n=0;n<t;n++){const o=q();$(o.key,o.piece,e)}h()}function q(){const e=Object.keys(L),t=e[Math.floor(Math.random()*e.length)];return{key:t,piece:L[t]}}function J(e){const t=document.getElementById("tetris-bank"),n=q();e.remove(),$(n.key,n.piece,t),h()}function W(){document.querySelectorAll(".tetris-piece").forEach(t=>{t.addEventListener("mousedown",P),t.addEventListener("touchstart",P,{passive:!1})}),document.addEventListener("mousemove",R),document.addEventListener("touchmove",R,{passive:!1}),document.addEventListener("mouseup",B),document.addEventListener("touchend",B)}function P(e){e.preventDefault();const t=e.target.closest(".tetris-piece");if(!t||t.classList.contains("unplaceable"))return;const n=JSON.parse(t.dataset.shape),o=t.getBoundingClientRect(),c=e.clientX||e.touches[0].clientX,r=e.clientY||e.touches[0].clientY,s=o.width/2,a=o.height/2,i=o.width/n[0].length,[f,d]=ne(n,s,a,i);l=document.createElement("div"),l.className="dragged-piece",l.style.position="fixed",l.style.pointerEvents="none",l.style.zIndex="1000",l.style.opacity="0.8";const m=document.querySelector(".grid-cell").offsetWidth;l.style.width=`${n[0].length*m}px`,l.style.height=`${n.length*m}px`;const u=document.createElement("div");u.style.display="grid",u.style.width="100%",u.style.height="100%",u.style.gridTemplateColumns=`repeat(${n[0].length}, 1fr)`,u.style.gridTemplateRows=`repeat(${n.length}, 1fr)`;const g=t.dataset.color;l.dataset.color=g,console.log("b",g),n.forEach((p,E)=>{p.forEach((T,oe)=>{const y=document.createElement("div");y.style.backgroundImage=T?'url("./bubble.png")':"transparent",y.style.backgroundSize="cover",console.log("a",g);const N=S(g);y.style.filter=`hue-rotate(${N}deg)`,u.appendChild(y)})}),l.appendChild(u),document.body.appendChild(l),O(c,r),l.dataset.shape=JSON.stringify(n),l.dataset.activeRow=f,l.dataset.activeCol=d,l.dataset.originalId=t.id,l.dataset.color=g,t.classList.add("dragging")}function R(e){if(e.preventDefault(),l){const t=e.clientX||e.touches[0].clientX,n=e.clientY||e.touches[0].clientY;b=t,w=n,document.querySelector(".grid-cell").offsetWidth,parseInt(l.dataset.activeRow||0),parseInt(l.dataset.activeCol||0),O(t,n),G(t,n)}}function B(e){if(e.preventDefault(),!l)return;const t=e.clientX||b,n=e.clientY||w,o=document.querySelector(".grid-cell").offsetWidth,c=l.dataset.originalId,r=JSON.parse(l.dataset.shape);b=0,w=0;const s=5,i=document.getElementById("game-grid-container").getBoundingClientRect();if(t<i.left||t>i.right||n<i.top||n>i.bottom){M(c),k(),v();return}const f=l.offsetWidth,d=l.offsetHeight,m=Math.floor((t-i.left-5-f/2)/o),g=Math.floor((n-i.top-5-d/2)/o)*s+m;if(x(r,g,s)){const p=l.dataset.color;F(r,g,s,p),J(document.getElementById(c))}else M(c);k(),v()}function O(e,t,n,o,c){if(l){const r=l.offsetWidth,s=l.offsetHeight,a=r/2,i=s/2;l.style.left=`${e-a}px`,l.style.top=`${t-i}px`}}function G(e,t){if(!l)return;const n=JSON.parse(l.dataset.shape),o=5,r=document.getElementById("game-grid-container").getBoundingClientRect(),s=(r.width-10)/o,a=l.offsetWidth,i=l.offsetHeight,f=Math.floor((e-r.left-5-a/2)/s),d=Math.floor((t-r.top-5-i/2)/s),m=d*o+f;if(v(),x(n,m,o)){for(let u=0;u<n.length;u++)for(let g=0;g<n[u].length;g++)if(n[u][g]){const p=(d+u)*o+(f+g),E=document.querySelector(`.grid-cell[data-index="${p}"]`);E&&E.classList.add("preview")}}}function v(){document.querySelectorAll(".grid-cell.preview").forEach(e=>{e.classList.remove("preview")})}function x(e,t,n){const o=Math.floor(t/n),c=t%n;for(let r=0;r<e.length;r++)for(let s=0;s<e[r].length;s++)if(e[r][s]){const a=o+r,i=c+s;if(a>=n||i>=n||a<0||i<0)return!1;const f=a*n+i,d=document.querySelector(`.grid-cell[data-index="${f}"]`);if(!d||d.style.backgroundImage!=="")return!1}return!0}function F(e,t,n,o){const c=Math.floor(t/n),r=t%n;for(let s=0;s<e.length;s++)for(let a=0;a<e[s].length;a++)if(e[s][a]){const i=(c+s)*n+(r+a),f=document.querySelector(`.grid-cell[data-index="${i}"]`);if(f){f.style.backgroundImage='url("./bubble.png")',f.style.backgroundSize="cover";const d=S(o);f.style.filter=`hue-rotate(${d}deg)`}}K(n),h()}function K(e){let t=[],n=[];for(let o=0;o<e;o++)U(o,e)&&t.push(o),j(o,e)&&n.push(o);t.forEach(o=>z(o,e)),n.forEach(o=>Z(o,e)),Q(t.length,n.length),h()}function U(e,t){for(let n=0;n<t;n++){const o=e*t+n;if(document.querySelector(`.grid-cell[data-index="${o}"]`).style.backgroundImage==="")return!1}return!0}function j(e,t){for(let n=0;n<t;n++){const o=n*t+e;if(document.querySelector(`.grid-cell[data-index="${o}"]`).style.backgroundImage==="")return!1}return!0}function z(e,t){for(let n=0;n<t;n++){const o=e*t+n,c=document.querySelector(`.grid-cell[data-index="${o}"]`);c.style.backgroundImage="",c.style.filter=""}}function Z(e,t){for(let n=0;n<t;n++){const o=n*t+e,c=document.querySelector(`.grid-cell[data-index="${o}"]`);c.style.backgroundImage="",c.style.filter=""}}function Q(e,t){let n=0;e>0&&t>0?n=10:n=e+t,C+=n;const o=document.getElementById("score");o?o.textContent=`Score: ${C}`:console.error("Score element not found")}function V(){document.querySelectorAll(".grid-cell").forEach(c=>{c.style.backgroundImage="",c.style.filter="",c.classList.remove("preview")}),C=0;const t=document.getElementById("score");t&&(t.textContent="Score: 0");const n=document.getElementById("tetris-bank");n.innerHTML="",I(),l&&(l.remove(),l=null),document.querySelectorAll(".tetris-piece").forEach(c=>{c.style.opacity="1"}),document.draggedPiece&&(document.draggedPiece=null),I(),h()}function _(){A(),I(),W();const e=document.createElement("div");e.id="score",e.textContent="Score: 0",document.getElementById("app").insertBefore(e,document.getElementById("game-container")),document.getElementById("reset-button").addEventListener("click",n=>{n.preventDefault(),V(),n.dataTransfer&&(n.dataTransfer.dropEffect="none",n.dataTransfer.effectAllowed="none")})}function ee(e){k(),v()}function k(){l&&(l.remove(),l=null),document.querySelectorAll(".tetris-piece").forEach(t=>{t.classList.remove("dragging")})}function te(e){for(let n=0;n<5;n++)for(let o=0;o<5;o++){const c=n*5+o;if(x(e,c,5))return!0}return!1}function h(){document.querySelectorAll(".tetris-piece").forEach(t=>{const n=JSON.parse(t.dataset.shape),o=te(n);t.classList.toggle("unplaceable",!o),t.draggable=o})}function M(e){const t=document.getElementById(e);t&&t.classList.remove("dragging")}function ne(e,t,n,o){const c=Math.floor(n/o),r=Math.floor(t/o);if(e[c]&&e[c][r])return[c,r];const s=e.length,a=e[0].length;let i=1/0,f=[0,0];for(let d=0;d<s;d++)for(let m=0;m<a;m++)if(e[d][m]){const u=Math.sqrt(Math.pow(d-c,2)+Math.pow(m-r,2));u<i&&(i=u,f=[d,m])}return f}document.addEventListener("DOMContentLoaded",_);
diff --git a/dist/assets/index-D4zFqOpg.css b/dist/assets/index-D4zFqOpg.css
new file mode 100644
index 0000000..c1a1fd8
--- /dev/null
+++ b/dist/assets/index-D4zFqOpg.css
@@ -0,0 +1 @@
+:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#game-grid-container{padding:5px;border-radius:4px}#game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:-5px}.grid-cell{aspect-ratio:1;background-color:#2a2a2a;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border-radius:4px;transition:background-color .3s;min-height:50px}.grid-cell:hover{background-color:#2a2a2a}@media (prefers-color-scheme: light){.grid-cell{background-color:#f0f0f0}.grid-cell:hover{background-color:#d0d0d0}}#game-container{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}#tetris-bank{display:flex;flex-direction:row;gap:20px}.tetris-piece{border:2px solid #646cff;border-radius:4px;cursor:grab;padding:5px;background-color:#ffffff1a;transition:transform .3s ease;transition:opacity .3s ease;touch-action:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.tetris-piece.unplaceable{opacity:.5;cursor:not-allowed}.tetris-piece.dragging{opacity:.3}.tetris-piece:active{cursor:grabbing}.piece-grid{display:grid;gap:2px}.piece-cell{width:10px;height:10px;border-radius:2px}#piece-I,#piece-L,#piece-T,#piece-O{background-color:transparent}@media (prefers-color-scheme: light){.tetris-piece{border-color:#535bf2;background-color:#0000001a}}.grid-cell.preview{outline:2px solid #00f;z-index:1;position:relative}.tetris-piece.selected{box-shadow:0 0 10px #646cff}#score{font-size:1.5em;margin-bottom:20px;font-weight:700}#reset-button{margin-top:20px;padding:10px 20px;font-size:16px;background-color:#646cff;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s}#reset-button:hover{background-color:#535bf2}@media (prefers-color-scheme: light){#reset-button{background-color:#535bf2}#reset-button:hover{background-color:#4449d0}}
diff --git a/dist/bubble.png b/dist/bubble.png
new file mode 100644
index 0000000..eb6b6ff
Binary files /dev/null and b/dist/bubble.png differ
diff --git a/dist/index.html b/dist/index.html
new file mode 100644
index 0000000..1143a6e
--- /dev/null
+++ b/dist/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>5x5 Grid Game with Tetris Pieces</title>
+    <script type="module" crossorigin src="/assets/index-CoFk0OHL.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D4zFqOpg.css">
+  </head>
+  <body>
+    <div id="app">
+      <div id="game-container">
+        <div id="game-grid-container">
+          <div id="game-grid"></div>
+        </div>
+        <div id="tetris-bank"></div>
+      </div>
+      <button id="reset-button">Reset Game</button>
+    </div>
+  </body>
+</html>
diff --git a/dist/vite.svg b/dist/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/dist/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/main.js b/main.js
index 43da637..b3fad63 100644
--- a/main.js
+++ b/main.js
@@ -134,7 +134,7 @@ function updatePieceGrid(grid, shape, color) {
       cellElement.className = 'piece-cell';
       //cellElement.style.backgroundColor = cell ? color : 'transparent';
       if (cell) {
-        cellElement.style.backgroundImage = 'url("./public/bubble.png")';
+        cellElement.style.backgroundImage = 'url("./bubble.png")';
         cellElement.style.backgroundSize = 'cover';
         const hueRotation = getHueRotationFromColor(color);
         cellElement.style.filter = `hue-rotate(${hueRotation}deg)`;
@@ -300,7 +300,7 @@ function dragStart(e) {
   shape.forEach((row, rowIndex) => {
     row.forEach((cell, colIndex) => {
       const cellElement = document.createElement('div');
-      cellElement.style.backgroundImage = cell ? 'url("./public/bubble.png")' : 'transparent';
+      cellElement.style.backgroundImage = cell ? 'url("./bubble.png")' : 'transparent';
       cellElement.style.backgroundSize = 'cover';
       console.log('a', color);
       const hueRotation = getHueRotationFromColor(color);
@@ -470,7 +470,7 @@ function placePiece(pieceShape, targetIndex, gridSize, color) {
         const cellIndex = (targetRow + row) * gridSize + (targetCol + col);
         const cell = document.querySelector(`.grid-cell[data-index="${cellIndex}"]`);
         if (cell) {
-          cell.style.backgroundImage = 'url("./public/bubble.png")';
+          cell.style.backgroundImage = 'url("./bubble.png")';
           cell.style.backgroundSize = 'cover';
           const hueRotation = getHueRotationFromColor(color);
           cell.style.filter = `hue-rotate(${hueRotation}deg)`;