summaryrefslogtreecommitdiff
path: root/frontend/src/components
diff options
context:
space:
mode:
authorJoffrey BION <joffrey.bion@gmail.com>2018-07-04 21:44:10 +0200
committerJoffrey BION <joffrey.bion@gmail.com>2018-07-05 00:31:58 +0200
commit8ffe800ce6f64611be26c249cdb4dcb16b7d0c1a (patch)
treeeec90c5923693e725a7e20ddfbb5285d787cf4c9 /frontend/src/components
parentPlace current player always at the bottom (diff)
downloadseven-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.jsx2
-rw-r--r--frontend/src/components/lobby/radial-list/RadialList.jsx12
-rw-r--r--frontend/src/components/lobby/radial-list/radial-math.js14
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});
}
bgstack15