Skip to content

Commit

Permalink
chore: continued migration to tailwindcss
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinjosethomas
kevinjosethomas committed Nov 4, 2024
1 parent 5729d97 commit d328cc3
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 198 deletions.
2 changes: 1 addition & 1 deletion src/components/Feedback/Feedback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const Feedback: React.FC<Props> = ({
}, [game.targetIndex, setCurrentIndex])

return (
<div className="flex w-screen flex-1 flex-col justify-between gap-2 bg-background-1 p-3 md:w-auto md:gap-0 md:p-5">
<div className="flex w-screen flex-1 flex-col justify-between gap-2 rounded-sm bg-background-1 p-3 md:w-auto md:gap-0 md:p-5">
<div>
<Markdown>{content.trim()}</Markdown>
</div>
Expand Down
67 changes: 11 additions & 56 deletions src/components/MovesContainer/MovesContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import classNames from 'classnames'
import { Tooltip } from 'react-tooltip'
import { useCallback, useContext, useMemo } from 'react'

import { CheckIcon } from '../Icons/icons'
import styles from './MovesContainer.module.scss'
import { AnalyzedGame, BaseGame, Move, Termination } from 'src/types'
import { GameControllerContext, WindowSizeContext } from 'src/contexts'

Expand All @@ -14,7 +12,6 @@ interface Props {
setCurrentMove?: (move: [string, string] | null) => void
highlightIndices?: number[]
mobile?: boolean
control?: boolean
termination?: Termination
}

Expand All @@ -23,7 +20,6 @@ export const MovesContainer: React.FC<Props> = ({
setCurrentMove,
highlightIndices,
mobile = false,
control = false,
termination,
}: Props) => {
const controller = useContext(GameControllerContext)
Expand Down Expand Up @@ -61,24 +57,8 @@ export const MovesContainer: React.FC<Props> = ({
[highlightIndices],
)

// const scroll = useCallback(
// (ref: HTMLDivElement) => {
// if (!ref) return
// const selected =
// parseInt(ref.dataset.index ?? '', 10) == controller.currentIndex
// if (selected && ref != null) {
// ref.scrollIntoView({
// behavior: 'smooth',
// block: 'start',
// inline: 'center',
// })
// }
// },
// [controller.currentIndex],
// )

const container = (
<div className={classNames(styles.container, { [styles.mobile]: mobile })}>
<div className="red-scrollbar flex h-64 flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full">
<Tooltip id="check" />
{moves.map(([white, black], index) => {
const prevMoveIndex = index * 2
Expand Down Expand Up @@ -107,29 +87,24 @@ export const MovesContainer: React.FC<Props> = ({
}

return (
<div key={index} className={styles.move}>
<span>{index + 1}</span>
<div key={index} className="flex w-full flex-row">
<span className="flex w-1/6 items-center justify-center bg-background-2 py-1 text-sm text-secondary">
{index + 1}
</span>
<div
onClick={() => {
if (setCurrentMove) setCurrentMove(null)
controller.setCurrentIndex(index * 2 + 1)
}}
data-index={index * 2 + 1}
className={classNames([
{
'flex flex-row items-center justify-between': true,
[styles.selected]: controller.currentIndex === index * 2 + 1,
[styles.highlighted]: highlightSet.has(index * 2 + 1),
},
])}
// ref={scroll}
className={`flex flex-1 cursor-pointer flex-row items-center justify-between px-2 hover:bg-background-2 ${controller.currentIndex === index * 2 + 1 && 'bg-engine-3/90'} ${highlightSet.has(index * 2 + 1) && 'bg-human-3/80'}`}
>
{white?.san ?? white?.lastMove?.join(' ')}
{predictedWhite && (
<i
data-tooltip-id="check"
data-tooltip-content="Maia predicted this move"
className={styles.checked}
className="*:h-4 *:w-4 *:fill-human-2"
>
{CheckIcon}
</i>
Expand All @@ -141,21 +116,14 @@ export const MovesContainer: React.FC<Props> = ({
if (black) controller.setCurrentIndex(index * 2 + 2)
}}
data-index={index * 2 + 2}
className={classNames([
{
'flex flex-row items-center justify-between': true,
[styles.selected]: controller.currentIndex === index * 2 + 2,
[styles.highlighted]: highlightSet.has(index * 2 + 2),
},
])}
// ref={scroll}
className={`flex flex-1 cursor-pointer flex-row items-center justify-between px-2 hover:bg-background-2 ${controller.currentIndex === index * 2 + 2 && 'bg-engine-3/90'} ${highlightSet.has(index * 2 + 2) && 'bg-human-3/80'}`}
>
{black?.san ?? black?.lastMove?.join(' ')}
{predictedBlack && (
<i
data-tooltip-id="check"
data-tooltip-content="Maia predicted this move"
className={styles.checked}
className="*:h-4 *:w-4 *:fill-human-2"
>
{CheckIcon}
</i>
Expand All @@ -164,9 +132,9 @@ export const MovesContainer: React.FC<Props> = ({
</div>
)
})}
{termination && !control && !isMobile && (
{termination && !isMobile && (
<div
className={styles.termination}
className="cursor-pointer rounded-sm border border-primary/10 bg-background-1/90 p-5 text-center opacity-90"
onClick={() => setCurrentIndex(plyCount - 1)}
>
{termination.result}
Expand All @@ -179,18 +147,5 @@ export const MovesContainer: React.FC<Props> = ({
</div>
)

if (control)
return (
<div className={styles.control}>
<button onClick={getPrevious} disabled={!hasPrevious}>
&#8249;
</button>
{container}
<button onClick={getNext} disabled={!hasNext}>
&#8250;
</button>
</div>
)

return container
}
21 changes: 11 additions & 10 deletions src/components/PositionEvaluationContainer/PositionEvaluationContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React from 'react'
import { PositionEvaluation } from 'src/types'

import styles from './PositionEvaluationContainer.module.scss'

interface Props {
positionEvaluation?: PositionEvaluation
moveEvaluation: { maia: number; stockfish?: number } | null
Expand All @@ -12,17 +10,20 @@ export const PositionEvaluationContainer: React.FC<Props> = ({
moveEvaluation,
}: Props) => {
return (
<div className={styles.container}>
<div className={styles.evaluations}>
<div className={styles.evaluation}>
<span>Maia eval:</span>{' '}
<span className={styles.maia} key={moveEvaluation?.maia}>
<div className="flex flex-col gap-0.5">
<div className="flex flex-row gap-1">
<div className="flex flex-1 items-center justify-between rounded-sm bg-background-1 p-2 text-lg">
<span className="text-sm text-secondary">Maia eval:</span>{' '}
<span className="text-sm text-human-2" key={moveEvaluation?.maia}>
{moveEvaluation ? moveEvaluation.maia.toFixed(3) : '-'}
</span>
</div>
<div className={styles.evaluation}>
<span>SF eval:</span>{' '}
<span className={styles.sf} key={moveEvaluation?.stockfish}>
<div className="flex flex-1 items-center justify-between rounded-sm bg-background-1 p-2 text-lg">
<span className="text-sm text-secondary">SF eval:</span>{' '}
<span
className="text-sm text-engine-3"
key={moveEvaluation?.stockfish}
>
{moveEvaluation?.stockfish
? moveEvaluation.stockfish.toFixed(3)
: '-'}
Expand Down
Loading

0 comments on commit d328cc3

Please sign in to comment.