diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.tsx | 14 | ||||
| -rw-r--r-- | src/main.tsx | 3 | ||||
| -rw-r--r-- | src/pages/ChooseArt.tsx | 45 | ||||
| -rw-r--r-- | src/pages/Paint.tsx | 11 | ||||
| -rw-r--r-- | src/styles/colors.css | 119 | ||||
| -rw-r--r-- | src/styles/styles.css | 140 |
6 files changed, 329 insertions, 3 deletions
diff --git a/src/App.tsx b/src/App.tsx index 8666e34..3623384 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,13 @@ +import { useState } from "react"; +import { ChooseArt } from "./pages/ChooseArt"; +import { Paint } from "./pages/Paint"; + export const App: React.FC = () => { - return <div> - hello - </div> + const [chosenArt, setChosenArt] = useState<undefined | string>(undefined); + + if (chosenArt === undefined) { + return <ChooseArt artSubmissionCallback={setChosenArt} /> + } + + return <Paint art={chosenArt} /> } diff --git a/src/main.tsx b/src/main.tsx index 65bf1da..32ff2d4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,9 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; +import '@/styles/colors.css'; +import '@/styles/styles.css'; + import { App } from '@/App'; createRoot(document.getElementById('root')!).render( diff --git a/src/pages/ChooseArt.tsx b/src/pages/ChooseArt.tsx new file mode 100644 index 0000000..fab6d79 --- /dev/null +++ b/src/pages/ChooseArt.tsx @@ -0,0 +1,45 @@ +import type React from 'react'; +import { useEffect, useRef, useState } from 'react'; + +export interface ChooseArtProps { + artSubmissionCallback: (art: string) => void; +} + +export const ChooseArt: React.FC<ChooseArtProps> = ({ + artSubmissionCallback, +}) => { + const [art, setArt] = useState(''); + const promptRef = useRef<HTMLTextAreaElement>(null); + + useEffect(() => { + if (!promptRef.current) { + return; + } + // Automatically focus the textarea when the component mounts + promptRef.current.focus(); + }, [promptRef]); + + const handleSubmit = () => { + if (!art.trim()) { + return; + } + artSubmissionCallback(art); + }; + + return ( + <div> + <textarea + ref={promptRef} + value={art} + onChange={(e) => setArt(e.target.value)} + placeholder='paste your ascii art here...' + rows={15} + cols={80} + /> + <div className={"maybe-visible " + (art.trim() ? "visible" : "invisible")}> + <hr /> + <button onClick={handleSubmit}>color!</button> + </div> + </div> + ); +}; diff --git a/src/pages/Paint.tsx b/src/pages/Paint.tsx new file mode 100644 index 0000000..5284b26 --- /dev/null +++ b/src/pages/Paint.tsx @@ -0,0 +1,11 @@ +import { useState } from 'react'; + +export interface ChooseArtProps { + art: string; +} + +export const Paint: React.FC<ChooseArtProps> = ({ art: initArt }) => { + const [art, setArt] = useState<string>(initArt); + + return <div>{art}</div>; +}; diff --git a/src/styles/colors.css b/src/styles/colors.css new file mode 100644 index 0000000..6d568ea --- /dev/null +++ b/src/styles/colors.css @@ -0,0 +1,119 @@ +:root { + --background: #282828; + --background-body: #282828da; + --foreground: #ebdbb2; + --regular0: #282828; + --regular1: #cc241d; + --regular2: #98971a; + --regular3: #d79921; + --regular4: #458588; + --regular5: #b16286; + --regular6: #689d6a; + --regular7: #a89984; + --bright0: #928374; + --bright1: #fb4934; + --bright2: #b8bb26; + --bright3: #fabd2f; + --bright4: #83a598; + --bright5: #d3869b; + --bright6: #8ec07c; + --bright7: #ebdbb2; +} + +.regular0 { + color: var(--regular0); +} +.regular1 { + color: var(--regular1); +} +.regular2 { + color: var(--regular2); +} +.regular3 { + color: var(--regular3); +} +.regular4 { + color: var(--regular4); +} +.regular5 { + color: var(--regular5); +} +.regular6 { + color: var(--regular6); +} +.regular7 { + color: var(--regular7); +} +.bright0 { + color: var(--bright0); +} +.bright1 { + color: var(--bright1); +} +.bright2 { + color: var(--bright2); +} +.bright3 { + color: var(--bright3); +} +.bright4 { + color: var(--bright4); +} +.bright5 { + color: var(--bright5); +} +.bright6 { + color: var(--bright6); +} +.bright7 { + color: var(--bright7); +} + +.regular0-bg { + background-color: var(--regular0); +} +.regular1-bg { + background-color: var(--regular1); +} +.regular2-bg { + background-color: var(--regular2); +} +.regular3-bg { + background-color: var(--regular3); +} +.regular4-bg { + background-color: var(--regular4); +} +.regular5-bg { + background-color: var(--regular5); +} +.regular6-bg { + background-color: var(--regular6); +} +.regular7-bg { + background-color: var(--regular7); +} +.bright0-bg { + background-color: var(--bright0); +} +.bright1-bg { + background-color: var(--bright1); +} +.bright2-bg { + background-color: var(--bright2); +} +.bright3-bg { + background-color: var(--bright3); +} +.bright4-bg { + background-color: var(--bright4); +} +.bright5-bg { + background-color: var(--bright5); +} +.bright6-bg { + background-color: var(--bright6); +} +.bright7-bg { + background-color: var(--bright7); +} diff --git a/src/styles/styles.css b/src/styles/styles.css new file mode 100644 index 0000000..1bf4663 --- /dev/null +++ b/src/styles/styles.css @@ -0,0 +1,140 @@ +@font-face { + font-family: 'fantasque'; + src: url('/fonts/fantasque.woff'); +} + +:root { + --content-padding: 2rem; + --border-radius: 10px; + + --font: 'fantasque'; + --font-fallback: monospace; +} + +/* <global> */ +* { + cursor: url('/img/cursor/regular.png'), auto !important; + color: var(--foreground); + font-family: var(--font), var(--font-fallback); + + box-sizing: border-box; + margin: 0; + padding: 0; +} +/* </global> */ + +/* <layout> */ +html { + display: flex; + justify-content: center; + min-height: 100vh; + padding: var(--content-padding); + + background-image: url('/img/background.jpg'); + background-repeat: repeat; +} + +body { + display: grid; + grid-template-rows: auto 1fr auto; + + padding: var(--content-padding); + padding-left: auto; + border-radius: var(--border-radius); + min-height: calc(100vh - 2 * var(--content-padding)); + + width: 100%; + max-width: 1200px; + background-color: var(--background-body); + backdrop-filter: blur(16px); +} + +main { + height: 100%; + overflow-y: scroll; +} +/* </layout> */ + +/* <typography> */ +h1 { + font-size: 3rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.45rem; +} +hr { + margin: 1rem; + border: 0; + height: 1px; + background-image: linear-gradient( + to right, + rgba(0, 0, 0, 0.1), + var(--foreground), + rgba(0, 0, 0, 0.1) + ); +} +a { + color: var(--regular6); +} +/* </typography> */ + +/* <footer> */ +.blinkies { + display: flex; + justify-content: left; + flex-wrap: wrap; + gap: 10px 10px; +} +/* </footer> */ + +/* <form> */ +textarea { + height: 30rem; + border: 3px solid var(--regular3); + padding: 1rem; + border-radius: 4px; + background: none; + resize: vertical; +} +textarea:hover { + cursor: url('/img/cursor/hover.png'), auto !important; +} +*:focus { + border-color: var(--regular6); + outline: none; + transition: border-color 0.5s; +} +/* </form> */ + +/* <visibility> */ +.maybe-visible { + transition: opacity 0.5s; +} + +.visible { + opacity: 1; +} + +.invisible { + opacity: 0; +} +/* </visibility> */ + +/* <buttons> */ +button { + background: none; + display: block; + border: 3px solid var(--regular3); + border-radius: 4px; + width: 100%; + padding: 8px; +} +button:hover { + cursor: url('/img/cursor/hover.png'), auto !important; + border: 3px solid var(--regular6); + transition: border-color 0.2s; +} +/* </buttons> */ |