diff options
author | Joffrey BION <joffrey.bion@gmail.com> | 2018-07-04 21:44:10 +0200 |
---|---|---|
committer | Joffrey BION <joffrey.bion@gmail.com> | 2018-07-05 00:31:58 +0200 |
commit | 8ffe800ce6f64611be26c249cdb4dcb16b7d0c1a (patch) | |
tree | eec90c5923693e725a7e20ddfbb5285d787cf4c9 /frontend/src/components | |
parent | Place current player always at the bottom (diff) | |
download | seven-wonders-8ffe800ce6f64611be26c249cdb4dcb16b7d0c1a.tar.gz seven-wonders-8ffe800ce6f64611be26c249cdb4dcb16b7d0c1a.tar.bz2 seven-wonders-8ffe800ce6f64611be26c249cdb4dcb16b7d0c1a.zip |
Refactor radial math stuff
Diffstat (limited to 'frontend/src/components')
-rw-r--r-- | frontend/src/components/lobby/RadialPlayerList.jsx | 2 | ||||
-rw-r--r-- | frontend/src/components/lobby/radial-list/RadialList.jsx | 12 | ||||
-rw-r--r-- | frontend/src/components/lobby/radial-list/radial-math.js | 14 |
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}); } |