Skip to content

Commit

Permalink
Adds feat to show player status.
Browse files Browse the repository at this point in the history
  • Loading branch information
mntone committed Jun 25, 2024
1 parent 8944aea commit cdfae07
Show file tree
Hide file tree
Showing 32 changed files with 496 additions and 86 deletions.
1 change: 1 addition & 0 deletions public/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Anzeigedauer für Overlay",
"Dialog.advanced.displayDurationUnit": "Sek.",
"Dialog.advanced.otherOptions": "Weitere Optionen",
"Dialog.advanced.playerStatus": "Spielerstatus anzeigen",
"Dialog.advanced.reduceAnimations": "Animationen reduzieren",
"Dialog.advanced.colorLock": "Farbhilfe",

Expand Down
1 change: 1 addition & 0 deletions public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Display Duration for Overlay",
"Dialog.advanced.displayDurationUnit": "sec",
"Dialog.advanced.otherOptions": "Other Options",
"Dialog.advanced.playerStatus": "Show Player Status",
"Dialog.advanced.reduceAnimations": "Reduce Animations",
"Dialog.advanced.colorLock": "Color Lock",

Expand Down
1 change: 1 addition & 0 deletions public/locales/es-419.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Duración de visualización para la superposición",
"Dialog.advanced.displayDurationUnit": "seg",
"Dialog.advanced.otherOptions": "Otras opciones",
"Dialog.advanced.playerStatus": "Mostrar estado de los jugadores",
"Dialog.advanced.reduceAnimations": "Reducir animaciones",
"Dialog.advanced.colorLock": "Ayuda de colores",

Expand Down
1 change: 1 addition & 0 deletions public/locales/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Duración de visualización para la superposición",
"Dialog.advanced.displayDurationUnit": "seg",
"Dialog.advanced.otherOptions": "Otras opciones",
"Dialog.advanced.playerStatus": "Mostrar estado de los jugadores",
"Dialog.advanced.reduceAnimations": "Reducir animaciones",
"Dialog.advanced.colorLock": "Ayuda de colores",

Expand Down
1 change: 1 addition & 0 deletions public/locales/fr-CA.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Durée d'affichage pour la superposition",
"Dialog.advanced.displayDurationUnit": "sec",
"Dialog.advanced.otherOptions": "Autres options",
"Dialog.advanced.playerStatus": "Afficher le statut des joueurs",
"Dialog.advanced.reduceAnimations": "Réduire les animations",
"Dialog.advanced.colorLock": "Verrou couleurs",

Expand Down
1 change: 1 addition & 0 deletions public/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Durée d'affichage pour la superposition",
"Dialog.advanced.displayDurationUnit": "sec",
"Dialog.advanced.otherOptions": "Autres options",
"Dialog.advanced.playerStatus": "Afficher le statut des joueurs",
"Dialog.advanced.reduceAnimations": "Réduire les animations",
"Dialog.advanced.colorLock": "Verrou couleurs",

Expand Down
1 change: 1 addition & 0 deletions public/locales/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Durata di visualizzazione per la sovrapposizione",
"Dialog.advanced.displayDurationUnit": "sec",
"Dialog.advanced.otherOptions": "Altre opzioni",
"Dialog.advanced.playerStatus": "Mostra stato dei giocatori",
"Dialog.advanced.reduceAnimations": "Riduci le animazioni",
"Dialog.advanced.colorLock": "Aiuto colore",

Expand Down
1 change: 1 addition & 0 deletions public/locales/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "オーバーレイの表示時間",
"Dialog.advanced.displayDurationUnit": "",
"Dialog.advanced.otherOptions": "その他のオプション",
"Dialog.advanced.playerStatus": "プレイヤー状況を表示する",
"Dialog.advanced.reduceAnimations": "アニメーションを減らす",
"Dialog.advanced.colorLock": "色覚サポート",

Expand Down
1 change: 1 addition & 0 deletions public/locales/ko.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "오버레이 표시 시간",
"Dialog.advanced.displayDurationUnit": "",
"Dialog.advanced.otherOptions": "기타 옵션",
"Dialog.advanced.playerStatus": "플레이어 상태 표시",
"Dialog.advanced.reduceAnimations": "애니메이션 줄이기",
"Dialog.advanced.colorLock": "색각 서포트",

Expand Down
1 change: 1 addition & 0 deletions public/locales/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Weergaveduur voor overlay",
"Dialog.advanced.displayDurationUnit": "sec",
"Dialog.advanced.otherOptions": "Andere Opties",
"Dialog.advanced.playerStatus": "Toon spelersstatus",
"Dialog.advanced.reduceAnimations": "Animaties verminderen",
"Dialog.advanced.colorLock": "Vaste kleuren",

Expand Down
1 change: 1 addition & 0 deletions public/locales/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "Время отображения наложения",
"Dialog.advanced.displayDurationUnit": "сек",
"Dialog.advanced.otherOptions": "Другие варианты",
"Dialog.advanced.playerStatus": "Показать статус игроков",
"Dialog.advanced.reduceAnimations": "Уменьшить анимации",
"Dialog.advanced.colorLock": "Ограничение цветов",

Expand Down
1 change: 1 addition & 0 deletions public/locales/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "叠加显示时长",
"Dialog.advanced.displayDurationUnit": "",
"Dialog.advanced.otherOptions": "其他选项",
"Dialog.advanced.playerStatus": "显示玩家状态",
"Dialog.advanced.reduceAnimations": "减少动画",
"Dialog.advanced.colorLock": "色彩辅助辨识",

Expand Down
1 change: 1 addition & 0 deletions public/locales/zh-TW.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"Dialog.advanced.displayDuration": "疊加顯示時長",
"Dialog.advanced.displayDurationUnit": "",
"Dialog.advanced.otherOptions": "其他選項",
"Dialog.advanced.playerStatus": "顯示玩家狀態",
"Dialog.advanced.reduceAnimations": "減少動畫",
"Dialog.advanced.colorLock": "色彩辨識輔助",

Expand Down
2 changes: 1 addition & 1 deletion src/modules/core/components/EggGraph/YAxis.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface YAxisProps {
}

const amountLabelProps: TickLabelProps<ScaleInput<ScaleLinear<number, number, never>>> = Object.freeze({
dx: '-.25em',
dx: -4,
dy: '.4em',
fontFamily: undefined,
fontSize: undefined,
Expand Down
35 changes: 26 additions & 9 deletions src/modules/core/components/EggGraph/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,21 @@ import { curveLinear } from '@visx/curve'
import { scaleLinear } from '@visx/scale'
import { LinePath } from '@visx/shape'

import { getSvgProps, type GraphLayoutProps } from '@/core/models/graph'
import { getSvgProps, type GraphRootProps } from '@/core/models/graph'
import { forceLast } from '@/core/utils/collection'
import type { ShakeDefaultWave, ShakeTelemetry } from '@/telemetry/models/data'

import PlayerStatus, { PlayerStatusGraphHeight } from '../PlayerStatus'

import HLine from './HLine'
import Header from './Header'
import XAxis from './XAxis'
import YAxis from './YAxis'
import EggGraphMessages from './messages'

export interface EggGraphProps extends GraphLayoutProps {
export interface EggGraphProps extends GraphRootProps {
readonly colorLock?: boolean
readonly status?: boolean
readonly telemetry?: Readonly<ShakeTelemetry>
readonly wave?: Readonly<ShakeDefaultWave>
}
Expand All @@ -27,10 +30,12 @@ const EggGraph = function (props: EggGraphProps) {
const {
marginTop: y,
marginLeft: x,
marginRight,
width,
height,

colorLock,
status: statusVisible,
telemetry,
wave: waveData,
} = props
Expand All @@ -40,8 +45,9 @@ const EggGraph = function (props: EggGraphProps) {

const intl = useIntl()

const offsetY = statusVisible ? PlayerStatusGraphHeight + 16 : 0
const svgProps = getSvgProps(props)
const transform = `translate(${x},${y})`
const transform = `translate(${x},${y + offsetY})`

const lastUpdate = forceLast(waveData.updates)
const status = waveData.quota <= lastUpdate.amount
Expand All @@ -52,11 +58,12 @@ const EggGraph = function (props: EggGraphProps) {
? false
: undefined
const maxY = Math.max(5 * Math.ceil(0.2 * waveData.quota), lastUpdate.amount)
const graphHeight = height - offsetY
const amountScale = useMemo(() => scaleLinear<number>({
domain: [maxY, 0],
range: [0, height],
range: [0, graphHeight],
nice: true,
}), [height, maxY])
}), [graphHeight, maxY])
const countScale = useMemo(() => scaleLinear<number>({
domain: [100, 0],
range: [0, width],
Expand All @@ -75,19 +82,29 @@ const EggGraph = function (props: EggGraphProps) {
/>

<svg {...svgProps}>
<PlayerStatus
marginTop={y}
marginLeft={x}
marginRight={marginRight}
width={width}
data={waveData}
scale={countScale}
visible={statusVisible}
/>

<rect
className='EggGraph-background'
x={x}
y={y}
y={y + offsetY}
width={width}
height={height}
height={graphHeight}
/>

<YAxis
x={x}
y={y}
y={y + offsetY}
width={width}
height={height}
height={graphHeight}
scale={amountScale}
/>
<XAxis
Expand Down
27 changes: 23 additions & 4 deletions src/modules/core/components/EggGraph/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
align-items: baseline;
gap: .25em;

margin: .25em 1.25em 0;
margin: .25em .75em 0 1.25em;
line-height: 2.5em;
color: #FFF;
}
Expand Down Expand Up @@ -110,14 +110,17 @@
.EggGraph-axis {
font-size: .8em;
}
.EggGraph-axis line {
.EggGraph-axis line,
.EggGraph-axis-line {
stroke: #808080;
stroke-width: 2px;
}
.EggGraph-axis text {
.EggGraph-axis text,
.EggGraph-axis-text {
fill: #CCC;
}
.EggGraph-axis-y text {
.EggGraph-axis-y text,
.EggGraph-axis-y-text {
text-anchor: end;
}

Expand Down Expand Up @@ -146,3 +149,19 @@
stroke-opacity: .25;
stroke-width: 7.5px;
}

/* Player Item */
.EggGraph-player-item-alive {
stroke: var(--ink);
stroke-width: 3px;
}
.EggGraph-player-item-alive-bg {
stroke: var(--ink);
stroke-linecap: round;
stroke-opacity: .25;
stroke-width: 7.5px;
}
.EggGraph-player-item-gegg {
stroke: var(--ink--neutral);
stroke-width: 3px;
}
65 changes: 65 additions & 0 deletions src/modules/core/components/PlayerStatus/PlayerStatusItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { memo } from 'react'

import { ScaleLinear } from 'd3-scale'

import { ShakePlayerWave } from '@/telemetry/models/data'

const strokeWidth = 3

export interface PlayerStatusItemProps {
readonly y: number
readonly start: number
readonly player: ShakePlayerWave
readonly scale: ScaleLinear<number, number, never>
}

const PlayerStatusItem = function ({ y, start, player, scale }: PlayerStatusItemProps) {
return (
<g transform={`translate(0,${y})`}>
<line
className='EggGraph-axis-line'
strokeLinecap='square'
x2={-4}
/>
<text
className='EggGraph-axis-text EggGraph-axis-y-text EggGraph-player-name'
x={-4}
dx={-4}
dy='.4em'
>
#
{player.index + 1}
</text>
{player.alives.map(function (alive) {
return (
<g key={alive[0]}>
<line
className='EggGraph-player-item-alive-bg'
x1={scale(100 + start - alive[0])}
x2={scale(100 + start - alive[1])}
/>
<line
className='EggGraph-player-item-alive'
x1={scale(100 + start - alive[0])}
x2={scale(100 + start - alive[1])}
/>
</g>
)
})}
{player.geggs.map(function (gegg) {
return (
<line
key={gegg[0]}
className='EggGraph-player-item-gegg'
x1={scale(100 + start - gegg[0])}
x2={scale(100 + start - gegg[1])}
y1={-strokeWidth}
y2={-strokeWidth}
/>
)
})}
</g>
)
}

export default memo(PlayerStatusItem)
55 changes: 55 additions & 0 deletions src/modules/core/components/PlayerStatus/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { ScaleLinear } from 'd3-scale'

import { ShakeDefaultWave } from '@/telemetry/models/data'

import { GraphLayoutProps } from '../../models/graph'

import PlayerStatusItem from './PlayerStatusItem'

// Spacing between player status item and golden egg graph
const playerStatusItemHeight = 20
const playerStatusItemHeightHalf = 0.5 * playerStatusItemHeight

export const PlayerStatusGraphHeight = 4 * playerStatusItemHeight

interface PlayerStatusProps extends Omit<GraphLayoutProps, 'height'> {
readonly data: Readonly<ShakeDefaultWave>
readonly scale: ScaleLinear<number, number, never>
readonly visible?: boolean
}

const PlayerStatus = function (props: PlayerStatusProps) {
const {
marginTop: y,
marginLeft: x,
width,

data,
scale,
visible,
} = props

return visible && (
<g transform={`translate(${x},${y})`}>
<rect
className='EggGraph-background'
width={width}
height={PlayerStatusGraphHeight}
/>
<line className='EggGraph-axis-line' y2={PlayerStatusGraphHeight} />
{data.players.map(function (p, i) {
return (
<PlayerStatusItem
key={i}
y={playerStatusItemHeightHalf + playerStatusItemHeight * i}
start={data.startTimestamp}
player={p}
scale={scale}
/>
)
})}
</g>
)
}

export default PlayerStatus
Loading

0 comments on commit cdfae07

Please sign in to comment.