summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-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});
}
bgstack15