From c1f8159af5adec8fb0ef9204c552835dc12fb484 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:02:23 +0000 Subject: [PATCH 1/7] 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 40396128e2096d294c56a64732daca4092fd5c4c 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:02:23 +0000 Subject: [PATCH 2/7] 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 d6546fd6ae2fa41724e8b927559b44eda66e369a 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:02:25 +0000 Subject: [PATCH 3/7] 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 5378fdc493d8367f6fe036fbde837df72d800279 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:02:26 +0000 Subject: [PATCH 4/7] 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 4cfca5f4476725e453263ea3ee50c2e8972efcf6 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:02:28 +0000 Subject: [PATCH 5/7] 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 589b63d3fd89badfe8283215b0bea78987edac50 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:02:29 +0000 Subject: [PATCH 6/7] 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'; - } -} From edb25a52763010d1a0f154c338242111c1c32448 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:03:14 +0000 Subject: [PATCH 7/7] feat: Updated src/timer/index.ts --- src/timer/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/timer/index.ts b/src/timer/index.ts index d248dd2..2e39b3c 100644 --- a/src/timer/index.ts +++ b/src/timer/index.ts @@ -1,8 +1,8 @@ import { Unit } from '../_common/type'; import { unitToMillis } from '../_common/util'; -import BackBoard from './backboard'; -import Dial from './dial'; -import Numbers from './numbers'; +import BackBoard from './BackBoard'; +import Dial from './Dial'; +import Numbers from './Numbers'; interface TimerParams { x: number;