diff --git a/dist/assets/index-BK0mKVml.js b/dist/assets/index-BK0mKVml.js deleted file mode 100644 index 61b16f6..0000000 --- a/dist/assets/index-BK0mKVml.js +++ /dev/null @@ -1 +0,0 @@ -(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))n(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"&&n(s)}).observe(document,{childList:!0,subtree:!0});function o(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 n(c){if(c.ep)return;c.ep=!0;const r=o(c);fetch(c.href,r)}})();document.body.addEventListener("touchstart",e=>{console.log("touchstart",e),console.log("target",e.target)},{passive:!1});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 o=0;o{n.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(o);r.style.filter=`hue-rotate(${s}deg)`}e.appendChild(r)})})}function S(e){const t=H(e),o=X(t.r,t.g,t.b);return Math.round(o[0]*360)}function H(e){e=e.replace(/^#/,"");const t=parseInt(e,16),o=t>>16&255,n=t>>8&255,c=t&255;return{r:o,g:n,b:c}}function X(e,t,o){e/=255,t/=255,o/=255;const n=Math.max(e,t,o),c=Math.min(e,t,o);let r,s,a=(n+c)/2;if(n===c)r=s=0;else{const i=n-c;switch(s=a>.5?i/(2-n-c):i/(n+c),n){case e:r=(t-o)/i+(te.map(c=>c[n]).reverse())}function I(){const e=document.getElementById("tetris-bank");e.innerHTML="";const t=5;for(let o=0;o{t.addEventListener("mousedown",v),t.addEventListener("touchstart",v)}),document.addEventListener("mousemove",x),document.addEventListener("touchmove",x),document.addEventListener("mouseup",R),document.addEventListener("touchend",R)}function v(e){console.log("dragStart",e),e.preventDefault();const t=e.target.closest(".tetris-piece");if(!t||t.classList.contains("unplaceable"))return;console.log("pieceElement",t);const o=JSON.parse(t.dataset.shape),n=t.getBoundingClientRect(),c=e.clientX||e.touches[0].clientX,r=e.clientY||e.touches[0].clientY,s=n.width/2,a=n.height/2,i=n.width/o[0].length,[f,d]=te(o,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=`${o[0].length*m}px`,l.style.height=`${o.length*m}px`;const u=document.createElement("div");u.style.display="grid",u.style.width="100%",u.style.height="100%",u.style.gridTemplateColumns=`repeat(${o[0].length}, 1fr)`,u.style.gridTemplateRows=`repeat(${o.length}, 1fr)`;const g=t.dataset.color;l.dataset.color=g,console.log("b",g),o.forEach((h,E)=>{h.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(o),l.dataset.activeRow=f,l.dataset.activeCol=d,l.dataset.originalId=t.id,l.dataset.color=g,t.classList.add("dragging")}function x(e){if(console.log("drag",e),e.preventDefault(),l){const t=e.clientX||e.touches[0].clientX,o=e.clientY||e.touches[0].clientY;b=t,w=o,document.querySelector(".grid-cell").offsetWidth,parseInt(l.dataset.activeRow||0),parseInt(l.dataset.activeCol||0),O(t,o),G(t,o)}}function R(e){if(console.log("drop",e),e.preventDefault(),!l)return;const t=e.clientX||b,o=e.clientY||w,n=document.querySelector(".grid-cell").offsetWidth,c=l.dataset.originalId,r=JSON.parse(l.dataset.shape);b=null,w=null;const s=5,i=document.getElementById("game-grid-container").getBoundingClientRect();if(ti.right||oi.bottom){M(c),B(),P();return}const f=l.offsetWidth,d=l.offsetHeight,m=Math.floor((t-i.left-5-f/2)/n),g=Math.floor((o-i.top-5-d/2)/n)*s+m;if(k(r,g,s)){const h=l.dataset.color;F(r,g,s,h),J(document.getElementById(c))}else M(c);B(),P()}function O(e,t,o,n,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 o=JSON.parse(l.dataset.shape),n=5,r=document.getElementById("game-grid-container").getBoundingClientRect(),s=(r.width-10)/n,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*n+f;if(P(),k(o,m,n)){for(let u=0;u{e.classList.remove("preview")})}function k(e,t,o){const n=Math.floor(t/o),c=t%o;for(let r=0;r=o||i>=o||a<0||i<0)return!1;const f=a*o+i,d=document.querySelector(`.grid-cell[data-index="${f}"]`);if(!d||d.style.backgroundImage!=="")return!1}return!0}function F(e,t,o,n){const c=Math.floor(t/o),r=t%o;for(let s=0;sz(n,e)),o.forEach(n=>Z(n,e)),Q(t.length,o.length),p()}function U(e,t){for(let o=0;o0&&t>0?o=10:o=e+t,C+=o;const n=document.getElementById("score");n?n.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 o=document.getElementById("tetris-bank");o.innerHTML="",I(),l&&(l.remove(),l=null),document.querySelectorAll(".tetris-piece").forEach(c=>{c.style.opacity="1"}),document.draggedPiece&&(document.draggedPiece=null),I(),p()}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",o=>{o.preventDefault(),V(),o.dataTransfer&&(o.dataTransfer.dropEffect="none",o.dataTransfer.effectAllowed="none")})}function B(){l&&(l.remove(),l=null),document.querySelectorAll(".tetris-piece").forEach(t=>{t.classList.remove("dragging")})}function ee(e){for(let o=0;o<5;o++)for(let n=0;n<5;n++){const c=o*5+n;if(k(e,c,5))return!0}return!1}function p(){document.querySelectorAll(".tetris-piece").forEach(t=>{const o=JSON.parse(t.dataset.shape),n=ee(o);t.classList.toggle("unplaceable",!n),t.draggable=n})}function M(e){const t=document.getElementById(e);t&&t.classList.remove("dragging")}function te(e,t,o,n){const c=Math.floor(o/n),r=Math.floor(t/n);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{for(const r of c)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function o(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 n(c){if(c.ep)return;c.ep=!0;const r=o(c);fetch(c.href,r)}})();let b=0,w=0;const x={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 o=0;o{n.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=k(o);r.style.filter=`hue-rotate(${s}deg)`}e.appendChild(r)})})}function k(e){const t=H(e),o=X(t.r,t.g,t.b);return Math.round(o[0]*360)}function H(e){e=e.replace(/^#/,"");const t=parseInt(e,16),o=t>>16&255,n=t>>8&255,c=t&255;return{r:o,g:n,b:c}}function X(e,t,o){e/=255,t/=255,o/=255;const n=Math.max(e,t,o),c=Math.min(e,t,o);let r,s,a=(n+c)/2;if(n===c)r=s=0;else{const i=n-c;switch(s=a>.5?i/(2-n-c):i/(n+c),n){case e:r=(t-o)/i+(te.map(c=>c[n]).reverse())}function I(){const e=document.getElementById("tetris-bank");e.innerHTML="";const t=5;for(let o=0;o{t.addEventListener("mousedown",v),t.addEventListener("touchstart",v)}),document.addEventListener("mousemove",L),document.addEventListener("touchmove",L),document.addEventListener("mouseup",R),document.addEventListener("touchend",R)}function v(e){console.log("dragStart",e),e.preventDefault();const t=e.target.closest(".tetris-piece");if(!t||t.classList.contains("unplaceable"))return;console.log("pieceElement",t);const o=JSON.parse(t.dataset.shape),n=t.getBoundingClientRect(),c=e.clientX||e.touches[0].clientX,r=e.clientY||e.touches[0].clientY,s=n.width/2,a=n.height/2,i=n.width/o[0].length,[f,d]=te(o,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=`${o[0].length*m}px`,l.style.height=`${o.length*m}px`;const u=document.createElement("div");u.style.display="grid",u.style.width="100%",u.style.height="100%",u.style.gridTemplateColumns=`repeat(${o[0].length}, 1fr)`,u.style.gridTemplateRows=`repeat(${o.length}, 1fr)`;const g=t.dataset.color;l.dataset.color=g,console.log("b",g),o.forEach((p,E)=>{p.forEach((q,oe)=>{const y=document.createElement("div");y.style.backgroundImage=q?'url("./bubble.png")':"transparent",y.style.backgroundSize="cover",console.log("a",g);const N=k(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(o),l.dataset.activeRow=f,l.dataset.activeCol=d,l.dataset.originalId=t.id,l.dataset.color=g,t.classList.add("dragging")}function L(e){if(console.log("drag",e),e.preventDefault(),l){const t=e.clientX||e.touches[0].clientX,o=e.clientY||e.touches[0].clientY;b=t,w=o,document.querySelector(".grid-cell").offsetWidth,parseInt(l.dataset.activeRow||0),parseInt(l.dataset.activeCol||0),O(t,o),G(t,o)}}function R(e){if(console.log("drop",e.target),e.target.nodeName==="BUTTON"||(e.preventDefault(),!l))return;const t=e.clientX||b,o=e.clientY||w,n=document.querySelector(".grid-cell").offsetWidth,c=l.dataset.originalId,r=JSON.parse(l.dataset.shape);b=null,w=null;const s=5,i=document.getElementById("game-grid-container").getBoundingClientRect();if(ti.right||oi.bottom){M(c),B(),P();return}const f=l.offsetWidth,d=l.offsetHeight,m=Math.floor((t-i.left-5-f/2)/n),g=Math.floor((o-i.top-5-d/2)/n)*s+m;if(S(r,g,s)){const p=l.dataset.color;U(r,g,s,p),J(document.getElementById(c))}else M(c);B(),P()}function O(e,t,o,n,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 o=JSON.parse(l.dataset.shape),n=5,r=document.getElementById("game-grid-container").getBoundingClientRect(),s=(r.width-10)/n,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*n+f;if(P(),S(o,m,n)){for(let u=0;u{e.classList.remove("preview")})}function S(e,t,o){const n=Math.floor(t/o),c=t%o;for(let r=0;r=o||i>=o||a<0||i<0)return!1;const f=a*o+i,d=document.querySelector(`.grid-cell[data-index="${f}"]`);if(!d||d.style.backgroundImage!=="")return!1}return!0}function U(e,t,o,n){const c=Math.floor(t/o),r=t%o;for(let s=0;sz(n,e)),o.forEach(n=>Z(n,e)),Q(t.length,o.length),h()}function K(e,t){for(let o=0;o0&&t>0?o=10:o=e+t,C+=o;const n=document.getElementById("score");n?n.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 o=document.getElementById("tetris-bank");o.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",o=>{console.log("click"),o.preventDefault(),V(),o.dataTransfer&&(o.dataTransfer.dropEffect="none",o.dataTransfer.effectAllowed="none")})}function B(){l&&(l.remove(),l=null),document.querySelectorAll(".tetris-piece").forEach(t=>{t.classList.remove("dragging")})}function ee(e){for(let o=0;o<5;o++)for(let n=0;n<5;n++){const c=o*5+n;if(S(e,c,5))return!0}return!1}function h(){document.querySelectorAll(".tetris-piece").forEach(t=>{const o=JSON.parse(t.dataset.shape),n=ee(o);t.classList.toggle("unplaceable",!n),t.draggable=n})}function M(e){const t=document.getElementById(e);t&&t.classList.remove("dragging")}function te(e,t,o,n){const c=Math.floor(o/n),r=Math.floor(t/n);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 5x5 Grid Game with Tetris Pieces - - + +
diff --git a/main.js b/main.js index 4cffb83..a2305a4 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,5 @@ -document.body.addEventListener('touchstart', (e) => { - console.log('touchstart', e) - console.log('target', e.target) -}, { passive: false }); let lastTouchX = 0; let lastTouchY = 0; @@ -123,8 +119,6 @@ function renderTetrisPiece(key, piece, container) { container.appendChild(pieceElement); pieceElement.setAttribute('draggable', true); - //pieceElement.addEventListener('dragstart', dragStart); - //pieceElement.addEventListener('dragend', dragEnd); pieceElement.addEventListener('mousedown', dragStart); pieceElement.addEventListener('touchstart', dragStart); } @@ -343,7 +337,8 @@ function drag(e) { function drop(e) { - console.log('drop', e) + console.log('drop', e.target) + if (e.target.nodeName === 'BUTTON') return; e.preventDefault(); if (!draggedPiece) return; @@ -644,6 +639,7 @@ function initGame() { // Add reset button functionality const resetButton = document.getElementById('reset-button'); resetButton.addEventListener('click', (e) => { + console.log('click') e.preventDefault(); resetGame(); // Cancel any ongoing drag operation diff --git a/style.css b/style.css index 18e905a..d960288 100644 --- a/style.css +++ b/style.css @@ -28,6 +28,10 @@ body { place-items: center; min-width: 320px; min-height: 100vh; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; user-select: none; }