Refactor radial math stuff

3 files changed, 14 insertions, 14 deletions

diff --git a/frontend/src/components/lobby/RadialPlayerList.jsx b/frontend/src/components/lobby/RadialPlayerList.jsx
index 0a148c78..911c0d91 100644
--- a/frontend/src/components/lobby/RadialPlayerList.jsx
+++ b/frontend/src/components/lobby/RadialPlayerList.jsx
@@ -43,7 +43,7 @@ export const RadialPlayerList = ({players, owner, currentPlayer}: RadialPlayerLi
   const tableImg = <img src={roundTable} alt='Round table' style={{width: 200, height: 200}}/>;
   return <RadialList items={completeWithPlaceholders(playerItems)}
                      centerElement={tableImg}
-                     diameter={350}
+                     radius={175}
                      offsetDegrees={180}
                      itemWidth={120}
                      itemHeight={100}/>;
diff --git a/frontend/src/components/lobby/radial-list/RadialList.jsx b/frontend/src/components/lobby/radial-list/RadialList.jsx
index 95ed8d17..2b17dff2 100644
--- a/frontend/src/components/lobby/radial-list/RadialList.jsx
+++ b/frontend/src/components/lobby/radial-list/RadialList.jsx
@@ -1,27 +1,27 @@
 //@flow
 import * as React from 'react';
 import type { CartesianCoords, RadialConfig } from './radial-math';
-import { cartesianOffsets, CLOCKWISE, COUNTERCLOCKWISE } 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,
-  diameter?: number, // 240px by default
+  radius?: number, // 120px by default
   offsetDegrees?: number, // defaults to 0 = 12 o'clock
   arc?: number, // defaults to 360 (full circle)
-  clockwise?: boolean, // defaults to 360 (full circle)
+  clockwise?: boolean, // defaults to true
   itemWidth?: number,
   itemHeight?: number,
 };
 
-export const RadialList = ({items, centerElement, diameter = 240, offsetDegrees = 0, arc = 360, clockwise = true, itemWidth = 20, itemHeight = 20}: RadialListProps) => {
+export const RadialList = ({items, centerElement, radius = 120, offsetDegrees = 0, arc = 360, clockwise = true, itemWidth = 20, itemHeight = 20}: RadialListProps) => {
+  const diameter = radius * 2;
   const containerStyle = {
     width: diameter + itemWidth,
     height: diameter + itemHeight,
   };
-  const radius = diameter / 2;
   const direction = clockwise ? CLOCKWISE : COUNTERCLOCKWISE;
   const radialConfig: RadialConfig = {radius, arc, offsetDegrees, direction};
 
@@ -42,7 +42,7 @@ const RadialListItems = ({items, radialConfig}: RadialListItemsProps) => {
     width: diameter,
     height: diameter,
   };
-  const itemOffsets: Array<CartesianCoords> = cartesianOffsets(items.length, radialConfig);
+  const itemOffsets: Array<CartesianCoords> = offsetsFromCenter(items.length, radialConfig);
 
   return <ul className='radial-list absolute-center' style={ulStyle}>
     {items.map((item, i) => (<RadialListItem
diff --git a/frontend/src/components/lobby/radial-list/radial-math.js b/frontend/src/components/lobby/radial-list/radial-math.js
index 4091a270..94b87157 100644
--- a/frontend/src/components/lobby/radial-list/radial-math.js
+++ b/frontend/src/components/lobby/radial-list/radial-math.js
@@ -4,9 +4,9 @@ export type CartesianCoords = {
   x: number,
   y: number,
 }
-type CylindricalCoords = {
+type PolarCoords = {
   radius: number,
-  thetaDegrees: number,
+  angle: number,
 }
 
 const toRad = (deg) => deg * (Math.PI / 180);
@@ -14,9 +14,9 @@ const roundedProjection = (radius, theta, trigFn) => Math.round(radius * trigFn(
 const xProjection = (radius, theta) => roundedProjection(radius, theta, Math.cos);
 const yProjection = (radius, theta) => roundedProjection(radius, theta, Math.sin);
 
-const toCartesian = ({radius, thetaDegrees}: CylindricalCoords): CartesianCoords => ({
-  x: xProjection(radius, toRad(thetaDegrees)),
-  y: yProjection(radius, toRad(thetaDegrees)),
+const toCartesian = ({radius, angle}: PolarCoords): CartesianCoords => ({
+  x: xProjection(radius, toRad(angle)),
+  y: yProjection(radius, toRad(angle)),
 });
 
 export type Direction = -1 | 1;
@@ -38,7 +38,7 @@ const DEFAULT_CONFIG: RadialConfig = {
 
 const DEFAULT_START = 90; // Up
 
-export function cartesianOffsets(nbItems: number, radialConfig: RadialConfig = DEFAULT_CONFIG): Array<CartesianCoords> {
+export function offsetsFromCenter(nbItems: number, radialConfig: RadialConfig = DEFAULT_CONFIG): Array<CartesianCoords> {
   return Array.from({length: nbItems}, (v, i) => itemCartesianOffsets(i, nbItems, radialConfig));
 }
 
@@ -46,5 +46,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, thetaDegrees: itemAngle});
+  return toCartesian({radius, angle: itemAngle});
 }