function MainComponent() { React.useEffect(()=>{ const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const socket = window.io(); const pixelSize = 10; let isDrawing = false; let currentColor = "#000000"; let drawHistory = []; const drawLimit = 10; const timeFrame = 5 * 60 * 1000; const drawCountInfo = document.getElementById('drawCountInfo'); const resetTimerInfo = document.getElementById('resetTimerInfo'); function drawGrid() { ctx.strokeStyle = "#e0e0e0"; for(let x = 0; x <= canvas.width; x += pixelSize){ ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for(let y = 0; y <= canvas.height; y += pixelSize){ ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } } function drawPixel(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize); } function drawInitialCanvasState(initialState) { initialState.forEach((pixel)=>{ drawPixel(pixel.x, pixel.y, pixel.color); }); } function updateDrawCount() { const remainingDraws = drawLimit - drawHistory.length; drawCountInfo.textContent = `残り描画回数: ${remainingDraws}`; } function updateResetTimer() { const nextReset = timeFrame - (Date.now() - (drawHistory[0] || 0)); const minutes = Math.floor(nextReset / 60000); const seconds = Math.floor(nextReset % 60000 / 1000); resetTimerInfo.textContent = `リセットまでの時間: ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; } canvas.addEventListener('mousedown', (e)=>{ if (checkDrawLimit()) { isDrawing = true; const x = Math.floor(e.offsetX / pixelSize); const y = Math.floor(e.offsetY / pixelSize); drawPixel(x, y, currentColor); socket.emit('draw', { x, y, color: currentColor }); recordDraw(); updateDrawCount(); updateResetTimer(); } else { showNotification(); } }); canvas.addEventListener('mousemove', (e)=>{ if (isDrawing) { const x = Math.floor(e.offsetX / pixelSize); const y = Math.floor(e.offsetY / pixelSize); drawPixel(x, y, currentColor); socket.emit('draw', { x, y, color: currentColor }); recordDraw(); updateDrawCount(); updateResetTimer(); } }); canvas.addEventListener('mouseup', ()=>{ isDrawing = false; }); canvas.addEventListener('mouseleave', ()=>{ isDrawing = false; }); canvas.addEventListener('touchstart', (e)=>{ if (checkDrawLimit()) { isDrawing = true; const touch = e.touches[0]; const x = Math.floor((touch.clientX - canvas.offsetLeft) / pixelSize); const y = Math.floor((touch.clientY - canvas.offsetTop) / pixelSize); drawPixel(x, y, currentColor); socket.emit('draw', { x, y, color: currentColor }); recordDraw(); updateDrawCount(); updateResetTimer(); e.preventDefault(); } else { showNotification(); } }); canvas.addEventListener('touchmove', (e)=>{ if (isDrawing) { const touch = e.touches[0]; const x = Math.floor((touch.clientX - canvas.offsetLeft) / pixelSize); const y = Math.floor((touch.clientY - canvas.offsetTop) / pixelSize); drawPixel(x, y, currentColor); socket.emit('draw', { x, y, color: currentColor }); recordDraw(); updateDrawCount(); updateResetTimer(); } e.preventDefault(); }); canvas.addEventListener('touchend', ()=>{ isDrawing = false; }); document.getElementById('colorPicker').addEventListener('input', (e)=>{ currentColor = e.target.value; }); socket.on('draw', (data)=>{ drawPixel(data.x, data.y, data.color); }); socket.on('initialCanvasState', (initialState)=>{ drawInitialCanvasState(initialState.canvasState); drawHistory = initialState.drawHistory; updateDrawCount(); updateResetTimer(); }); socket.on('drawLimitExceeded', ()=>{ showNotification(); }); drawGrid(); function checkDrawLimit() { const currentTime = Date.now(); drawHistory = drawHistory.filter((timestamp)=>currentTime - timestamp <= timeFrame); return drawHistory.length < drawLimit; } function recordDraw() { drawHistory.push(Date.now()); } function showNotification() { const notification = document.getElementById('notification'); notification.style.display = 'block'; setTimeout(()=>{ notification.style.display = 'none'; }, 3000); } setInterval(updateResetTimer, 1000); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 167, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center items-center canvas-container", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { id: "canvas", width: "800", height: "400", className: "border border-black bg-white", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col ml-5 sidebar", __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-5 color-picker", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", id: "colorPicker", defaultValue: "#000000", className: "w-[50px] h-[50px] border-none p-0", name: "colorPicker", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-2 info", id: "drawCountInfo", name: "drawCountInfo", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "残り描画回数: 10"), /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-2 info", id: "resetTimerInfo", name: "resetTimerInfo", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "リセットまでの時間: 5:00")), /*#__PURE__*/ React.createElement("div", { className: "notification absolute top-2 left-2 bg-[rgba(255,0,0,0.8)] text-white p-2 rounded hidden", id: "notification", __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, "You have exceeded the draw limit!"))); }