diff options
-rw-r--r-- | frontend/src/components/lobby/radial-list/RadialList.tsx (renamed from frontend/src/components/lobby/radial-list/RadialList.jsx) | 13 | ||||
-rw-r--r-- | frontend/src/components/lobby/radial-list/RadialListItem.tsx (renamed from frontend/src/components/lobby/radial-list/RadialListItem.jsx) | 6 | ||||
-rw-r--r-- | frontend/src/components/lobby/radial-list/radial-math.ts (renamed from frontend/src/components/lobby/radial-list/radial-math.js) | 24 |
3 files changed, 20 insertions, 23 deletions
diff --git a/frontend/src/components/lobby/radial-list/RadialList.jsx b/frontend/src/components/lobby/radial-list/RadialList.tsx index 2b17dff2..806cdd08 100644 --- a/frontend/src/components/lobby/radial-list/RadialList.jsx +++ b/frontend/src/components/lobby/radial-list/RadialList.tsx @@ -1,13 +1,12 @@ -//@flow -import * as React from 'react'; -import type { CartesianCoords, RadialConfig } from './radial-math'; +import React, { ReactNode } from 'react'; +import { CartesianCoords, RadialConfig } from './radial-math'; import { offsetsFromCenter, CLOCKWISE, COUNTERCLOCKWISE } from './radial-math'; import './RadialList.css'; import { RadialListItem } from './RadialListItem'; type RadialListProps = { - items: Array<React.Node>, - centerElement?: React.Node, + items: Array<ReactNode>, + centerElement?: ReactNode, radius?: number, // 120px by default offsetDegrees?: number, // defaults to 0 = 12 o'clock arc?: number, // defaults to 360 (full circle) @@ -32,7 +31,7 @@ export const RadialList = ({items, centerElement, radius = 120, offsetDegrees = }; type RadialListItemsProps = { - items: Array<React.Node>, + items: Array<React.ReactNode>, radialConfig: RadialConfig, }; @@ -54,7 +53,7 @@ const RadialListItems = ({items, radialConfig}: RadialListItemsProps) => { }; type RadialListCenterProps = { - centerElement?: React.Node, + centerElement?: ReactNode, }; const RadialListCenter = ({centerElement}: RadialListCenterProps) => { diff --git a/frontend/src/components/lobby/radial-list/RadialListItem.jsx b/frontend/src/components/lobby/radial-list/RadialListItem.tsx index 1d5df7f5..19a27638 100644 --- a/frontend/src/components/lobby/radial-list/RadialListItem.jsx +++ b/frontend/src/components/lobby/radial-list/RadialListItem.tsx @@ -1,10 +1,10 @@ -//@flow import * as React from 'react'; -import type { CartesianCoords } from './radial-math'; +import { ReactNode } from 'react'; +import { CartesianCoords } from './radial-math'; import './RadialListItem.css'; type RadialListItemProps = { - item: React.Node, + item: ReactNode, offsets: CartesianCoords, }; diff --git a/frontend/src/components/lobby/radial-list/radial-math.js b/frontend/src/components/lobby/radial-list/radial-math.ts index 94b87157..f0f411f5 100644 --- a/frontend/src/components/lobby/radial-list/radial-math.js +++ b/frontend/src/components/lobby/radial-list/radial-math.ts @@ -1,34 +1,32 @@ -//@flow - export type CartesianCoords = { x: number, y: number, } type PolarCoords = { radius: number, - angle: number, + angleDeg: number, } -const toRad = (deg) => deg * (Math.PI / 180); -const roundedProjection = (radius, theta, trigFn) => Math.round(radius * trigFn(theta)); -const xProjection = (radius, theta) => roundedProjection(radius, theta, Math.cos); -const yProjection = (radius, theta) => roundedProjection(radius, theta, Math.sin); +const toRad = (deg: number) => deg * (Math.PI / 180); +const roundedProjection = (radius: number, thetaRad: number, trigFn: (angle: number) => number) => Math.round(radius * trigFn(thetaRad)); +const xProjection = (radius: number, thetaRad: number) => roundedProjection(radius, thetaRad, Math.cos); +const yProjection = (radius: number, thetaRad: number) => roundedProjection(radius, thetaRad, Math.sin); -const toCartesian = ({radius, angle}: PolarCoords): CartesianCoords => ({ - x: xProjection(radius, toRad(angle)), - y: yProjection(radius, toRad(angle)), +const toCartesian = ({radius, angleDeg}: PolarCoords): CartesianCoords => ({ + x: xProjection(radius, toRad(angleDeg)), + y: yProjection(radius, toRad(angleDeg)), }); export type Direction = -1 | 1; export const CLOCKWISE: Direction = -1; export const COUNTERCLOCKWISE: Direction = 1; -export type RadialConfig = {| +export type RadialConfig = { radius: number, arc: number, offsetDegrees: number, direction: Direction, -|} +} const DEFAULT_CONFIG: RadialConfig = { radius: 120, arc: 360, @@ -46,5 +44,5 @@ function itemCartesianOffsets(index: number, nbItems: number, {radius, arc, dire const startAngle = DEFAULT_START + direction * offsetDegrees; const angleStep = arc / nbItems; const itemAngle = startAngle + direction * angleStep * index; - return toCartesian({radius, angle: itemAngle}); + return toCartesian({radius, angleDeg: itemAngle}); } |