fix: oracleのスマホ対応 (#16)

* fix: oracleのスマホ対応

* fix: lint

---------

Co-authored-by: nova27 <[email protected]>

Author: kokitakiguchi

frontend/app/components/oracle.tsx

@@ -65,7 +65,7 @@ const drawEllipse5 = (context: CanvasRenderingContext2D, time: number, width: nu
 const drawEllipse6 = (context: CanvasRenderingContext2D, time: number, width: number, height: number) => {
   const angle = (time * Math.PI) / 4;
 
-  const ellipseHeight = height / 3.1 + 3 * Math.cos((time % 2) * Math.PI);
+  const ellipseHeight = Math.max(height / 3.1 + 3 * Math.cos((time % 2) * Math.PI), 1);
   context.beginPath();
   setGradient(context, angle, width, height);
   context.ellipse(width / 2, height / 2, width / 2.4, ellipseHeight, angle, 0, 2 * Math.PI);
@@ -76,6 +76,7 @@ const drawBlinking = (context: CanvasRenderingContext2D, time: number, width: nu
   const intensityRadian = (time % 1) * 6 * Math.PI;
 
   let r = time % 2 < 1 ? width / 15 : width / 30 + 2 * Math.cos(intensityRadian);
+  r = Math.max(r, 1);
   let gradient = context.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, r);
   gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
   gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
@@ -86,6 +87,7 @@ const drawBlinking = (context: CanvasRenderingContext2D, time: number, width: nu
   context.fill();
 
   r = time % 2 < 1 ? width / 7.5 : width / 15 + 4 * Math.cos(intensityRadian);
+  r = Math.max(r, 1);
   gradient = context.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, r);
   gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
   gradient.addColorStop(1, "rgba(255, 255, 255, 0)");