From a3e4e5ecffba70cf8a72c63eb9f44cc9a923d1e4 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:14 +0000 Subject: [PATCH 1/6] Renamed src/timer/backboard.ts to src/timer/Backboard.ts --- src/timer/Backboard.ts | 44 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/timer/Backboard.ts diff --git a/src/timer/Backboard.ts b/src/timer/Backboard.ts new file mode 100644 index 0000000..e2b6ffb --- /dev/null +++ b/src/timer/Backboard.ts @@ -0,0 +1,44 @@ +import { degreeToRadian } from '../_common/util'; + +export default class BackBoard { + private x: number; + private y: number; + private radius: number; + private color: string; + + constructor(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + + this.radius = radius; + this.color = '#e31936'; + } + + draw(ctx: CanvasRenderingContext2D, possession: number) { + ctx.save(); + + const startAngle = degreeToRadian(270); + const endAngle = startAngle - degreeToRadian(360 * possession); + + ctx.beginPath(); + ctx.moveTo(this.x, this.y); + + // Draw Circle by possession + if (possession < 1) { + ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, true); + } else { + ctx.arc(this.x, this.y, this.radius, 0, degreeToRadian(360)); + } + + ctx.fillStyle = this.color; + ctx.fill(); + + ctx.restore(); + } + + resize(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + this.radius = radius; + } +} From 1c029e73e1d399c3ab34138343cb5dd3447f5bff Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:14 +0000 Subject: [PATCH 2/6] Deleted src/timer/backboard.ts --- src/timer/backboard.ts | 44 ------------------------------------------ 1 file changed, 44 deletions(-) delete mode 100644 src/timer/backboard.ts diff --git a/src/timer/backboard.ts b/src/timer/backboard.ts deleted file mode 100644 index e2b6ffb..0000000 --- a/src/timer/backboard.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { degreeToRadian } from '../_common/util'; - -export default class BackBoard { - private x: number; - private y: number; - private radius: number; - private color: string; - - constructor(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - - this.radius = radius; - this.color = '#e31936'; - } - - draw(ctx: CanvasRenderingContext2D, possession: number) { - ctx.save(); - - const startAngle = degreeToRadian(270); - const endAngle = startAngle - degreeToRadian(360 * possession); - - ctx.beginPath(); - ctx.moveTo(this.x, this.y); - - // Draw Circle by possession - if (possession < 1) { - ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, true); - } else { - ctx.arc(this.x, this.y, this.radius, 0, degreeToRadian(360)); - } - - ctx.fillStyle = this.color; - ctx.fill(); - - ctx.restore(); - } - - resize(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - this.radius = radius; - } -} From 29c651b66e7b56c0052f57ee8ef2d8908e081b71 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:17 +0000 Subject: [PATCH 3/6] Renamed src/timer/dial.ts to src/timer/Dial.ts --- src/timer/Dial.ts | 67 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/timer/Dial.ts diff --git a/src/timer/Dial.ts b/src/timer/Dial.ts new file mode 100644 index 0000000..ea5bbc7 --- /dev/null +++ b/src/timer/Dial.ts @@ -0,0 +1,67 @@ +import { degreeToRadian } from '../_common/util'; + +export default class Dial { + static PIN_WIDTH_MULTIPLE = 0.7; + static PIN_LENGTH_MULTIPLE = 2.575; + + private x: number; + private y: number; + private radius: number; + private color: string; + private pinWidth: number; + private pinLength: number; + + constructor(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + + this.radius = radius; + this.color = '#e8e8e8'; + + this.pinWidth = radius * Dial.PIN_WIDTH_MULTIPLE; + this.pinLength = radius * Dial.PIN_LENGTH_MULTIPLE; + } + + draw(ctx: CanvasRenderingContext2D, possession: number) { + ctx.save(); + const angle = degreeToRadian(180) - degreeToRadian(360 * possession); + + ctx.beginPath(); + + ctx.arc(this.x, this.y, this.radius, 0, degreeToRadian(360)); + this.drawPin(ctx, angle); + + // Style + ctx.fillStyle = this.color; + ctx.shadowColor = 'rgba(0,0,0,0.5)'; + ctx.shadowOffsetY = 5; + ctx.shadowBlur = 8; + + ctx.fill(); + + ctx.restore(); + } + + drawPin(ctx: CanvasRenderingContext2D, angle: number) { + ctx.moveTo(this.x, this.y); + + const pinLength = this.pinLength - this.pinWidth / 2; + + ctx.save(); + ctx.translate(this.x, this.y); + ctx.rotate(angle); + ctx.translate(-this.x, -this.y); + ctx.rect(this.x - this.pinWidth / 2, this.y, this.pinWidth, pinLength); + ctx.arc(this.x, this.y + pinLength, this.pinWidth / 2, 0, Math.PI); + ctx.restore(); + } + + resize(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + this.radius = radius; + + this.pinWidth = radius * Dial.PIN_WIDTH_MULTIPLE; + this.pinLength = radius * Dial.PIN_LENGTH_MULTIPLE; + } +} From 087f9f8f9aa751bb685f58128dbdc4ba1473b5d8 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:17 +0000 Subject: [PATCH 4/6] Deleted src/timer/dial.ts --- src/timer/dial.ts | 67 ----------------------------------------------- 1 file changed, 67 deletions(-) delete mode 100644 src/timer/dial.ts diff --git a/src/timer/dial.ts b/src/timer/dial.ts deleted file mode 100644 index ea5bbc7..0000000 --- a/src/timer/dial.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { degreeToRadian } from '../_common/util'; - -export default class Dial { - static PIN_WIDTH_MULTIPLE = 0.7; - static PIN_LENGTH_MULTIPLE = 2.575; - - private x: number; - private y: number; - private radius: number; - private color: string; - private pinWidth: number; - private pinLength: number; - - constructor(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - - this.radius = radius; - this.color = '#e8e8e8'; - - this.pinWidth = radius * Dial.PIN_WIDTH_MULTIPLE; - this.pinLength = radius * Dial.PIN_LENGTH_MULTIPLE; - } - - draw(ctx: CanvasRenderingContext2D, possession: number) { - ctx.save(); - const angle = degreeToRadian(180) - degreeToRadian(360 * possession); - - ctx.beginPath(); - - ctx.arc(this.x, this.y, this.radius, 0, degreeToRadian(360)); - this.drawPin(ctx, angle); - - // Style - ctx.fillStyle = this.color; - ctx.shadowColor = 'rgba(0,0,0,0.5)'; - ctx.shadowOffsetY = 5; - ctx.shadowBlur = 8; - - ctx.fill(); - - ctx.restore(); - } - - drawPin(ctx: CanvasRenderingContext2D, angle: number) { - ctx.moveTo(this.x, this.y); - - const pinLength = this.pinLength - this.pinWidth / 2; - - ctx.save(); - ctx.translate(this.x, this.y); - ctx.rotate(angle); - ctx.translate(-this.x, -this.y); - ctx.rect(this.x - this.pinWidth / 2, this.y, this.pinWidth, pinLength); - ctx.arc(this.x, this.y + pinLength, this.pinWidth / 2, 0, Math.PI); - ctx.restore(); - } - - resize(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - this.radius = radius; - - this.pinWidth = radius * Dial.PIN_WIDTH_MULTIPLE; - this.pinLength = radius * Dial.PIN_LENGTH_MULTIPLE; - } -} From 18252d9103a9c9535f8968d2a27dba3749f41b90 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:20 +0000 Subject: [PATCH 5/6] Renamed src/timer/numbers.ts to src/timer/Numbers.ts --- src/timer/Numbers.ts | 90 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/timer/Numbers.ts diff --git a/src/timer/Numbers.ts b/src/timer/Numbers.ts new file mode 100644 index 0000000..024250a --- /dev/null +++ b/src/timer/Numbers.ts @@ -0,0 +1,90 @@ +export default class Numbers { + private x: number; + private y: number; + private radius: number; + private font: string; + private color: string; + + constructor(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + + this.radius = radius; + this.font = 'bold ' + this.radius * 0.1246 + 'px Nanum Gothic'; + + this.color = '#333'; + } + + draw(ctx: CanvasRenderingContext2D, maxNum = 60, step = 5) { + ctx.save(); + ctx.font = this.font; + ctx.textBaseline = 'middle'; + ctx.textAlign = 'center'; + + for (var n = 0; n < maxNum; n++) { + var theta = (n / maxNum) * (Math.PI * 2) + 1.5 * Math.PI; + var x = -this.radius * 1.15 * Math.cos(theta); + var y = this.radius * 1.15 * Math.sin(theta); + + let isStepNumber = n % step === 0; + + if (isStepNumber) { + ctx.fillText(n.toString(), this.x + x, this.y + y); + } + + ctx.save(); + + ctx.translate(this.x, this.y); + ctx.rotate(theta); + + let lineLength = this.radius * 0.025; + let lineWidth = lineLength * 0.2; + ctx.fillStyle = '#999'; + + if (isStepNumber) { + ctx.fillStyle = this.color; + lineLength = this.radius * 0.05; + lineWidth = lineLength * 0.3; + } + + lineLength -= lineWidth; // Subtraction for border radius + + ctx.beginPath(); + ctx.arc( + this.radius + lineLength / 2, + 0, + lineWidth / 2, + -0.5 * Math.PI, + 0.5 * Math.PI, + ); + ctx.rect( + this.radius - lineLength / 2, + -lineWidth / 2, + lineLength, + lineWidth, + ); + ctx.moveTo(this.radius - lineLength / 2, 0); + ctx.arc( + this.radius - lineLength / 2, + 0, + lineWidth / 2, + 0.5 * Math.PI, + 1.5 * Math.PI, + ); + ctx.fill(); + ctx.translate(-this.x, -this.y); + + ctx.restore(); + } + + ctx.restore(); + } + + resize(x: number, y: number, radius: number) { + this.x = x; + this.y = y; + + this.radius = radius; + this.font = 'bold ' + this.radius * 0.1246 + 'px Nanum Gothic'; + } +} From b915e388fb878805cb01d27315ae40dd129cdf17 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Fri, 29 Sep 2023 08:00:20 +0000 Subject: [PATCH 6/6] Deleted src/timer/numbers.ts --- src/timer/numbers.ts | 90 -------------------------------------------- 1 file changed, 90 deletions(-) delete mode 100644 src/timer/numbers.ts diff --git a/src/timer/numbers.ts b/src/timer/numbers.ts deleted file mode 100644 index 024250a..0000000 --- a/src/timer/numbers.ts +++ /dev/null @@ -1,90 +0,0 @@ -export default class Numbers { - private x: number; - private y: number; - private radius: number; - private font: string; - private color: string; - - constructor(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - - this.radius = radius; - this.font = 'bold ' + this.radius * 0.1246 + 'px Nanum Gothic'; - - this.color = '#333'; - } - - draw(ctx: CanvasRenderingContext2D, maxNum = 60, step = 5) { - ctx.save(); - ctx.font = this.font; - ctx.textBaseline = 'middle'; - ctx.textAlign = 'center'; - - for (var n = 0; n < maxNum; n++) { - var theta = (n / maxNum) * (Math.PI * 2) + 1.5 * Math.PI; - var x = -this.radius * 1.15 * Math.cos(theta); - var y = this.radius * 1.15 * Math.sin(theta); - - let isStepNumber = n % step === 0; - - if (isStepNumber) { - ctx.fillText(n.toString(), this.x + x, this.y + y); - } - - ctx.save(); - - ctx.translate(this.x, this.y); - ctx.rotate(theta); - - let lineLength = this.radius * 0.025; - let lineWidth = lineLength * 0.2; - ctx.fillStyle = '#999'; - - if (isStepNumber) { - ctx.fillStyle = this.color; - lineLength = this.radius * 0.05; - lineWidth = lineLength * 0.3; - } - - lineLength -= lineWidth; // Subtraction for border radius - - ctx.beginPath(); - ctx.arc( - this.radius + lineLength / 2, - 0, - lineWidth / 2, - -0.5 * Math.PI, - 0.5 * Math.PI, - ); - ctx.rect( - this.radius - lineLength / 2, - -lineWidth / 2, - lineLength, - lineWidth, - ); - ctx.moveTo(this.radius - lineLength / 2, 0); - ctx.arc( - this.radius - lineLength / 2, - 0, - lineWidth / 2, - 0.5 * Math.PI, - 1.5 * Math.PI, - ); - ctx.fill(); - ctx.translate(-this.x, -this.y); - - ctx.restore(); - } - - ctx.restore(); - } - - resize(x: number, y: number, radius: number) { - this.x = x; - this.y = y; - - this.radius = radius; - this.font = 'bold ' + this.radius * 0.1246 + 'px Nanum Gothic'; - } -}