Skip to content

Commit

Permalink
chore: migrated TuringSubmission to tailwindcss & changed toggle func…
Browse files Browse the repository at this point in the history 
…tionality
  • Loading branch information
@kevinjosethomas
kevinjosethomas committed Nov 2, 2024
1 parent 2712db4 commit ec0c448
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 70 deletions.
115 changes: 57 additions & 58 deletions src/components/TuringSubmission/TuringSubmission.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import classNames from 'classnames'
import { motion } from 'framer-motion'
import { useCallback, useContext, useEffect, useState } from 'react'

import { TuringControllerContext } from 'src/contexts'
import styles from './TuringSubmission.module.scss'

export const TuringSubmission: React.FC = () => {
const { game, submitGuess, getNewGame, commentController } = useContext(
Expand All @@ -22,102 +22,101 @@ export const TuringSubmission: React.FC = () => {

if (game?.result)
return (
<div className={styles.container}>
<h2>
<div className="flex flex-col gap-5 bg-background-1 p-4">
<h2 className="text-2xl">
Guess {game.result.correct ? 'correct' : 'incorrect'}, <br />
{game.result.bot} was the bot
</h2>
<div className={styles.info}>
<div className="-mt-1 flex flex-col">
<h3>
{game.result.timeControl} · {game.result.gameType}
</h3>
<div>
<p className={styles.circle}>●</p>
<div className="flex flex-row items-center gap-1">
<p className="text-lg">●</p>
{game.result.whitePlayer.title && (
<span className={styles.title}>
{game.result.whitePlayer.title}
</span>
<span className="font-bold">{game.result.whitePlayer.title}</span>
)}
{game.result.whitePlayer.name}
<span>({game.result.whitePlayer.rating})</span>
{game.result.bot === 'white' ? '🤖' : undefined}
</div>
<div>
<p className={styles.circle}>○</p>
<div className="flex flex-row items-center gap-1">
<p className="text-lg">○</p>
{game.result.blackPlayer.title && (
<span className={styles.title}>
{game.result.blackPlayer.title}
</span>
<span className="font-bold">{game.result.blackPlayer.title}</span>
)}
{game.result.blackPlayer.name}
<span>({game.result.blackPlayer.rating})</span>{' '}
{game.result.bot === 'black' ? '🤖' : undefined}
</div>
</div>
<button onClick={getNewGame}>NEXT</button>
<button
onClick={getNewGame}
className="flex w-full items-center justify-center rounded bg-engine-3 py-2 transition duration-200 hover:bg-engine-4 disabled:bg-background-3"
>
<p className="text-lg">Next</p>
</button>
</div>
)

return (
<div className={styles.container}>
<div>
<h2>Who is the bot?</h2>
<div
className={classNames(styles.group, {
[styles.selected]: selected != undefined,
})}
>
<div className="flex flex-col gap-1">
<div className="flex flex-col gap-3 p-4">
<h2 className="text-2xl font-semibold">Who is the bot?</h2>
<div className="flex flex-1 flex-row items-center justify-between">
<button
className={classNames(styles.none, styles.left, {
[styles.selected]: selected == 'white',
})}
className="m-0 flex w-1/3 flex-row justify-start bg-transparent p-0"
onClick={() => setSelected('white')}
>
White {selected == 'white' && '🤖'}
<p
className={`${selected === 'white' ? 'font-semibold text-primary' : 'text-secondary'}`}
>
White {selected == 'white' && '🤖'}
</p>
</button>
<div className={styles.switch}>
<input
type="radio"
checked={selected === 'white'}
className={styles.toggleWhite}
onClick={() => setSelected('white')}
/>
<input
type="radio"
checked={selected === null}
disabled={selected !== null}
className={styles.toggleNull}
/>
<input
type="radio"
checked={selected === 'black'}
className={styles.toggleBlack}
onClick={() => setSelected('black')}
<div
style={{
boxShadow: '0px 0px 10px 5px rgba(255,255,255,0.05)',
}}
className={`relative flex h-8 w-16 items-center rounded-full p-1 transition duration-300 ${selected === 'white' ? 'bg-white bg-opacity-80' : 'bg-black bg-opacity-60'}`}
>
<motion.div
animate={{
x: selected === null ? 16 : selected == 'white' ? 0 : 30,
}}
style={{
shadow: '0px 0px 5px 5px rgba(255,255,255,0.75)',
}}
transition={{ duration: 0.3 }}
layout="position"
className="absolute h-6 w-6 transform rounded-full bg-engine-4 shadow-md"
/>
<div className={styles.slider}></div>
</div>
<button
className={classNames(styles.none, styles.right, {
[styles.selected]: selected == 'black',
})}
className="m-0 flex w-1/3 flex-row justify-end bg-transparent p-0"
onClick={() => setSelected('black')}
>
{selected == 'black' && '🤖'} Black
<p
className={`${selected === 'black' ? 'font-semibold text-primary' : 'text-secondary'}`}
>
{selected == 'black' && '🤖'} Black
</p>
</button>
</div>
</div>
<button
onClick={handleSubmit}
disabled={!selected}
className={styles.submit}
>
Submit
</button>
<textarea
className="rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary"
placeholder="Optional justification"
value={comment}
onChange={(e) => setComment(e.target.value)}
/>
<button
onClick={handleSubmit}
disabled={!selected}
className="flex w-full items-center justify-center rounded bg-engine-3 py-2 transition duration-200 hover:bg-engine-4 disabled:bg-background-3"
>
<p className="text-lg">Submit</p>
</button>
</div>
)
}
24 changes: 12 additions & 12 deletions src/styles/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ pre {
--color-background4: #aeaeb2;
--color-background5: #8e8e93;

--color-human-accent1: #ff705b;
--color-human-accent2: #ff8270;
--color-human-accent3: #ff9080;
--color-human-accent4: #ffa193;
--color-human-accent1: #fe7f6d;
--color-human-accent2: #de6f5f;
--color-human-accent3: #bf5f52;
--color-human-accent4: #9f4f44;

--color-engine-accent1: #7fb3fc;
--color-engine-accent1: #9ac4fe;
--color-engine-accent1: #aed0ff;
--color-engine-accent1: #c6deff;
--color-engine-accent1: #abccf8;
--color-engine-accent2: #96bff6;
--color-engine-accent3: #81b3f4;
--color-engine-accent4: #5799f1;
}

.theme-dark {
Expand All @@ -49,10 +49,10 @@ pre {
--color-human-accent3: #bf5f52;
--color-human-accent4: #9f4f44;

--color-engine-accent1: #74a5e9;
--color-engine-accent2: #87ace0;
--color-engine-accent3: #95b2db;
--color-engine-accent4: #a2b6d2;
--color-engine-accent1: #76addd;
--color-engine-accent2: #5a9dd7;
--color-engine-accent3: #3f8cd0;
--color-engine-accent4: #237cc9;
}

svg {
Expand Down

0 comments on commit ec0c448

Please sign in to comment.