diff --git a/src/App.js b/src/App.js
index fa574b7c..e981c5a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';
import Home from './components/Home';
import Board from './components/Board';
+import Thread from './components/Thread';
import { createGlobalStyle } from 'styled-components';
export const BoardContext = React.createContext();
@@ -47,7 +48,10 @@ export default function App() {
@@ -279,10 +283,10 @@ const Board = ({ setBodyStyle }) => { 2 weeks ago - No. - {`0000000${counter}`} + No. + {`0000000${counter}`} - ▶ + ▶{reply.content} diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx new file mode 100644 index 00000000..93fe6061 --- /dev/null +++ b/src/components/Thread.jsx @@ -0,0 +1,213 @@ +import React, { useState, useEffect, useContext } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import { Container, NavBar, Header, Break, PostForm, TopBar } from './styles/Board.styled'; +import { ReplyFormTable, ReplyFormLink } from './styles/Thread.styled'; +import { BoardContext } from '../App'; +import ImageBanner from './ImageBanner'; + +const Thread = ({ setBodyStyle }) => { + const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress } = useContext(BoardContext); + const [selectedStyle, setSelectedStyle] = useState("Yotsuba"); + const [showReplyFormLink, setShowReplyFormLink] = useState(true); + const [showReplyForm, setShowReplyForm] = useState(false); + + const navigate = useNavigate(); + + useEffect(() => { + let didCancel = false; + fetch( + "https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json", + { cache: "no-cache" } + ) + .then((res) => res.json()) + .then(res => { + if (!didCancel) { + setDefaultSubplebbits(res); + } + }); + return () => { + didCancel = true; + }; + }, []); + + const handleVoidClick = () => {} + + const handleClick = (title, address) => { + setSelectedTitle(title); + setSelectedAddress(address); + }; + + const handleClickHelp = () => { + alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan."); + }; + + const handleClickForm = () => { + setShowReplyFormLink(false); + setShowReplyForm(true); + navigate('/board/thread/post-reply'); + }; + + const handleStyleChange = (event) => { + switch (event.target.value) { + case "Yotsuba": + setBodyStyle({ + background: "#ffe url(/fade.png) top repeat-x", + color: "maroon", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba"); + break; + + case "Yotsuba B": + setBodyStyle({ + background: "#eef2ff url(/fade-blue.png) top center repeat-x", + color: "#000", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba B"); + break; + + case "Futaba": + setBodyStyle({ + background: "#ffe", + color: "maroon", + fontFamily: "times new roman, serif" + }); + setSelectedStyle("Futaba"); + break; + + case "Burichan": + setBodyStyle({ + background: "#eef2ff", + color: "#000", + fontFamily: "times new roman, serif" + }); + setSelectedStyle("Burichan"); + break; + + case "Tomorrow": + setBodyStyle({ + background: "#1d1f21 none", + color: "#c5c8c6", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Tomorrow"); + break; + + case "Photon": + setBodyStyle({ + background: "#eee none", + color: "#333", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Photon"); + break; + + default: + setBodyStyle({ + background: "#ffe url(/fade.png) top repeat-x", + color: "maroon", + fontFamily: "Arial, Helvetica, sans-serif" + }); + setSelectedStyle("Yotsuba"); + } + } + + return ( ++ + ); +} + +export default Thread; \ No newline at end of file diff --git a/src/components/styles/Board.styled.jsx b/src/components/styles/Board.styled.jsx index 26810956..1d0578c0 100644 --- a/src/components/styles/Board.styled.jsx +++ b/src/components/styles/Board.styled.jsx @@ -699,7 +699,9 @@ export const PostFormTable = styled.table` margin: 0; margin-right: 2px; padding: 2px 4px 3px; - border: 1px solid #aaa; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; outline: none; font-family: arial, helvetica, sans-serif; font-size: 10pt; @@ -710,13 +712,16 @@ export const PostFormTable = styled.table` margin-bottom: -3px; outline: none; border-radius: none; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; } #t-root { position: relative; overflow: hidden; box-sizing: border-box; - background: #eee; + background: #2d2d2d; border: 1px solid #777; margin: 2px 0; width: 300px; @@ -749,6 +754,10 @@ export const PostFormTable = styled.table` height: 80px; margin-top: 2px; position: relative; + } + + #post-button, button { + filter: brightness(80%); }`; case 'Photon': diff --git a/src/components/styles/Thread.styled.jsx b/src/components/styles/Thread.styled.jsx new file mode 100644 index 00000000..c8568e1f --- /dev/null +++ b/src/components/styles/Thread.styled.jsx @@ -0,0 +1,471 @@ +import styled from 'styled-components'; + +export const ReplyFormLink = styled.div` + display: ${props => (props.showReplyFormLink ? 'block' : 'none')}; +`; + +export const ReplyFormTable = styled.table` + display: ${props => (props.showReplyForm ? 'table' : 'none')}; + width: 418px; + border-spacing: 1px; + margin-left: auto; + margin-right: auto; + + ${({ selectedStyle }) => { + switch (selectedStyle) { + case 'Yotsuba': + return `tbody > tr > td:first-child { + background-color: #ea8; + color: #800; + font-weight: 700; + border: 1px solid #800; + padding: 0 5px; + font-size: 10pt; + } + + td { + padding: 0; + font-size: 10pt; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #eee; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + }`; + + case 'Yotsuba B': + return `tbody > tr > td:first-child { + background-color: #98e; + color: #000; + font-weight: 700; + border: 1px solid #000; + padding: 0 5px; + font-size: 10pt; + } + + td { + padding: 0; + font-size: 10pt; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #eee; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + }`; + + case 'Futaba': + return `tbody > tr > td:first-child { + background-color: #ea8; + color: #800; + font-weight: 700; + padding: 0; + } + + td { + padding: 0; + font-size: 12pt; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #eee; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + }`; + + case 'Burichan': + return `tbody > tr > td:first-child { + background-color: #98e; + color: #000; + font-weight: 700; + padding: 0; + font-size: 12pt; + } + + td { + padding: 0; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #eee; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + }`; + + case 'Tomorrow': + return `tbody > tr > td:first-child { + background-color: #282a2e; + color: #c5c8c6; + font-weight: 700; + border: 1px solid #111; + padding: 0 5px; + font-size: 10pt; + } + + td { + padding: 0; + font-size: 10pt; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + border: 1px solid #000; + background-color: #282a2e; + color: #c5c8c6; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #2d2d2d; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + } + + #post-button, button { + filter: brightness(80%); + }`; + + case 'Photon': + return `tbody > tr > td:first-child { + background-color: #ddd; + color: #333; + font-weight: 700; + border: 1px solid #ccc; + padding: 0 5px; + font-size: 10pt; + } + + td { + padding: 0; + font-size: 10pt; + } + + tbody > tr > td > input[type="text"] { + width: 244px; + } + + input[type="text"], input[type="password"] > tbody textarea { + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + } + + textarea { + width: 292px; + margin-bottom: -3px; + outline: none; + border-radius: none; + } + + #t-root { + position: relative; + overflow: hidden; + box-sizing: border-box; + background: #eee; + border: 1px solid #777; + margin: 2px 0; + width: 300px; + } + + #t-resp { + width: 254px; + box-sizing: border-box; + text-transform: uppercase; + font-size: 11px; + height: 18px; + margin: 0px; + padding: 0px 2px; + font-family: monospace; + vertical-align: middle; + -webkit-appearance: none; + } + + #t-help { + font-size: 11px; + padding: 0; + width: 20px; + box-sizing: border-box; + margin: 0px 0px 0px 6px; + vertical-align: middle; + height: 18px; + } + + #t-cnt { + height: 80px; + margin-top: 2px; + position: relative; + }`; + } + }} +`; \ No newline at end of file+ <> + {defaultSubplebbits.map(subplebbit => ( + + [ + handleClick(subplebbit.title, subplebbit.address)} + >{subplebbit.title} + ] + + ))} + [ + handleStyleChange({target: {value: "Yotsuba"}} + )}>Home] + + > + ++ <> + +++ <> ++ {selectedTitle}+p/{selectedAddress}+ > + > ++ + ++ [ + Post a Reply + ] + ++ + ++ +Name ++ + + ++ +Comment ++ + ++ +Verification ++ ++ + +++ + ++ + ++ +Embed File ++ + ++ + + +
+ + Style: + + + +
+