diff --git a/README.md b/README.md
index c0541f9..ce89c09 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,7 @@
-# Getting Started with Create React App
+# Prittee
+
+Prittee is an unofficial, experimental alternate front end for Pithee, the site Jacksfilms recent launched. I made Prittee because I noticed some small UI/UX issues I thought could be fixed to improve the user experience of the site (most notably, the time it takes to load more posts after voting for one).
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Prittee has some limitations due to it being an unofficial site, such as the fact that you can only be logged in for an hour at a time, so I don't expect this to replace the official Pithee site for people's pith-ing needs. This was mostly made as an exercise for me.
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+The site is made in React, using React Router v6.
\ No newline at end of file
diff --git a/image-1.png b/image-1.png
new file mode 100644
index 0000000..fa3bfd8
Binary files /dev/null and b/image-1.png differ
diff --git a/image-2.png b/image-2.png
new file mode 100644
index 0000000..80c2c39
Binary files /dev/null and b/image-2.png differ
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..eaca7ac
Binary files /dev/null and b/image.png differ
diff --git a/package.json b/package.json
index 21334cf..224e890 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,17 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@emotion/react": "^11.11.4",
+ "@emotion/styled": "^11.11.5",
+ "@mui/icons-material": "^5.15.14",
+ "@mui/lab": "^5.0.0-alpha.169",
+ "@mui/material": "^5.15.14",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"
},
@@ -34,5 +40,10 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.4.19",
+ "postcss": "^8.4.38",
+ "tailwindcss": "^3.4.3"
}
}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777c..3ff6943 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index aa069f2..46ebb19 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,11 +3,11 @@
React App
+ Prittee - A Pithee Client
You need to enable JavaScript to run this app.
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a..04aca44 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..1ce45ac 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Prittee",
+ "name": "An unofficial front end for Pithee",
"icons": [
{
"src": "favicon.ico",
diff --git a/src/App.css b/src/App.css
index 74b5e05..1914e7d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,21 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
+#winnerPostAuthor {
+ font-size: 14px;
}
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+.prevent-select {
+ -webkit-user-select: none; /* Safari */
+ -ms-user-select: none; /* IE 10 and IE 11 */
+ user-select: none; /* Standard syntax */
}
-.App-link {
- color: #61dafb;
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+ display: none;
}
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..cba860e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,29 @@
-import logo from './logo.svg';
import './App.css';
+import { Box, Container } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import Header from './Components/Header';
+import Footer from './Components/Footer';
+
+// TODO:
+// - Leaderboard past #25 (pagination)
function App() {
return (
-
+
+
+
+
+
+
);
}
diff --git a/src/Components/Countdown.jsx b/src/Components/Countdown.jsx
new file mode 100644
index 0000000..29ece95
--- /dev/null
+++ b/src/Components/Countdown.jsx
@@ -0,0 +1,38 @@
+import { Box } from "@mui/material";
+import { useState, useEffect } from "react";
+
+export default function Countdown({ until, onEnd }) {
+
+ const t1 = new Date()
+ const t2 = new Date(until) // 10 minutes after win time
+ const msUntil = (t2.getTime()+10*60000) - t1.getTime();
+ const secondsUntil = Math.floor(msUntil / 1000)
+ const [seconds, setSeconds] = useState(secondsUntil)
+ useEffect(() => {
+ var interval = setInterval(() => {
+ setSeconds(s => s-1)
+ if (seconds < 1) {
+ clearInterval(interval)
+ onEnd()
+ }
+ }, 1000);
+ return function cleanup() {
+ clearInterval(interval);
+ };
+ }, [seconds])
+
+ const formatTime = (time) => {
+ if (time <= 0) {
+ return '0:00'
+ }
+ let m = Math.floor(time / 60)
+ let s = time - (m * 60)
+ let lead = s < 10 ? '0' : ''
+ return `${m}:${lead+s}`
+ }
+ return (
+
+ {formatTime(seconds)}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..059c3f8
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,10 @@
+import { Container, Box } from "@mui/material";
+
+export default function Footer() {
+ return (
+
+ View the source on GitHub
+ Report a bug
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
new file mode 100644
index 0000000..ec2e0d0
--- /dev/null
+++ b/src/Components/Header.jsx
@@ -0,0 +1,29 @@
+import { Box, Container } from "@mui/material"
+import { NavLink } from "react-router-dom";
+import { AccountBoxOutlined, PostAdd, LeaderboardOutlined } from '@mui/icons-material';
+import { useNavigate } from "react-router-dom";
+
+export default function Header() {
+
+ const navigate = useNavigate()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/Leaderboard.jsx b/src/Components/Leaderboard.jsx
new file mode 100644
index 0000000..6247369
--- /dev/null
+++ b/src/Components/Leaderboard.jsx
@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+
+export default function Leaderboard({ users }) {
+ let i = 0
+ return (
+
+ {users.map((user) => {
+ i++
+ return (
+
+
+ {i}.
+
+ {user.player_name}
+ {user.total_points}
+
+ )})}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/LeaderboardSkeleton.jsx b/src/Components/LeaderboardSkeleton.jsx
new file mode 100644
index 0000000..9f95abc
--- /dev/null
+++ b/src/Components/LeaderboardSkeleton.jsx
@@ -0,0 +1,9 @@
+import { LinearProgress, Box } from "@mui/material";
+
+export default function LeaderboardSkeleton() {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/Post.jsx b/src/Components/Post.jsx
new file mode 100644
index 0000000..24f92c7
--- /dev/null
+++ b/src/Components/Post.jsx
@@ -0,0 +1,58 @@
+import { Box } from "@mui/material";
+import { LinearProgress } from '@mui/material'
+import { Key, Star } from "@mui/icons-material";
+
+export default function Post({ text, tier, index, id, onClick }) {
+ const renderStars = () => {
+ const arr = []
+ for (let i = 0; i < tier; i++) {
+ arr.push(
+
+
+ )
+ } else {
+ return (
+ onClick({post_text: text, index: index, tier: tier, id: id})}>
+
+ {renderStars()}
+
+ {text}
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/Components/PostGrid.jsx b/src/Components/PostGrid.jsx
new file mode 100644
index 0000000..dbad3b6
--- /dev/null
+++ b/src/Components/PostGrid.jsx
@@ -0,0 +1,164 @@
+import { Grid } from '@mui/material';
+import Post from './Post';
+import { declareVictor, fetchPosts, pushPostScore } from '../utils'
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Queue from '../queue'
+import { getFullContestants, lenContestants, rmContestant } from '../contestants';
+
+const postsSkeleton = [
+ {
+ post_text: '',
+ index: 0,
+ id: '1',
+ tier: 0,
+ },
+ {
+ post_text: '',
+ index: 1,
+ id: '2',
+ tier: 0,
+ },
+ {
+ post_text: '',
+ index: 2,
+ id: '3',
+ tier: 0,
+ },
+ {
+ post_text: '',
+ index: 3,
+ id: '4',
+ tier: 0,
+ },
+]
+
+const PostQueue = new Queue()
+
+export default function PostGrid() {
+ const navigate = useNavigate()
+ const [selected, setSelected] = useState(null)
+ const [posts, setPosts] = useState(postsSkeleton)
+ const [loading, setLoading] = useState(false)
+
+ // every time data state changes i.e. every time a user clicks on post,
+ // update posts with their selection
+ // note: this also will load the initial posts
+ useEffect(()=> {
+ //
+ // rebuild post array with kept post
+ // render new array
+ updatePosts(selected)
+ }, [selected])
+
+ // handler passed to Post children to let us know when one has been selected
+ const selectPost = (post) => {
+ post.tier += 1
+ if (post.tier == 4) { // triggers on a showdown winner
+ declareVictor(post)
+ setSelected(null)
+ // return early because we already handled selecting a showdown winner
+ return
+ }
+ // one of these if statements will trigger when a
+ // post has reached the end of its ranking,
+ // or if it has reached max-tier respectively
+ if (selected != null && post.id != selected.id && selected.tier != 3) {
+ pushPostScore(selected)
+ }
+ if (post.tier == 3){
+ pushPostScore(post)
+ }
+ // triggers when it's time for a showdown
+ if (lenContestants() >= 4) {
+ setPosts(getFullContestants())
+ // return early so as to not trigger the updatePosts logic and
+ // instead render the showdown
+ return
+ }
+ setSelected(post)
+ }
+
+ // handles updating the post state
+ const refreshPosts = (keep) => {
+ // this line prevents trying to refresh posts on mount, when
+ // no posts have actually been loaded yet
+ if (PostQueue.size() < 4) { return }
+ const arr = []
+ for (var i = 0; i < 4; i++) {
+ if (keep != null && keep.index == i && keep.tier < 3) {
+ arr.push(keep)
+ } else {
+ let p = PostQueue.pop()
+ arr.push(
+ {
+ post_text: p.post_text,
+ index: i,
+ id: p.post_id,
+ tier: 0,
+ }
+ )
+ }
+ }
+ setPosts(arr)
+ }
+
+ // handles refilling the queue when needed, then calls refreshPosts
+ const updatePosts = (keep) => {
+ console.log(`loading: ${loading}`)
+ // if the queue is really low, we want to stop the user from making any more
+ // selections to let the queue reload
+ if (PostQueue.size() <= 4) {
+ if (loading) {
+ console.log('user is clicking too fast!')
+ // if we are already loading in new posts and the user
+ // is basically spam clicking, just return right away to
+ // prevent it from requesting more posts
+ return
+ }
+ setLoading(true)
+ console.log('loading last-second posts...')
+ fetchPosts().then((r) => {
+ if (r == null) {
+ } else {
+ r.forEach(npost => {
+ PostQueue.push(npost)
+ });
+ refreshPosts(keep)
+ setLoading(false)
+ }
+ })
+ } else if (PostQueue.size() <= 11 && !loading) {
+ // somewhat low queue -> fetch more posts in the background
+ setLoading(true)
+ console.log('loading more posts...')
+ fetchPosts().then((r) => {
+ if (r == null) {
+ alert("Your token has expired. Please re-enter your information to keep using Prittee.")
+ navigate('/login')
+ } else {
+ r.forEach(npost => {
+ PostQueue.push(npost)
+ });
+ setLoading(false)
+ }
+ })
+ refreshPosts(keep)
+ } else {
+ // full queue -> keep going as normal
+ refreshPosts(keep)
+ }
+ }
+
+ return (
+
+ {posts.map((p) => {
+ return(
+
+
+
+ )})}
+
+ )
+}
+
diff --git a/src/Components/PreviousWinner.jsx b/src/Components/PreviousWinner.jsx
new file mode 100644
index 0000000..7709fcd
--- /dev/null
+++ b/src/Components/PreviousWinner.jsx
@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+
+export default function PreviousWinner({ post }) {
+ let dateString = new Date(post.won_at).toLocaleString()
+ return (
+
+ {post.post_text}
+ by {post.player_name}
+ Won: {dateString}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/UserPost.jsx b/src/Components/UserPost.jsx
new file mode 100644
index 0000000..6eda737
--- /dev/null
+++ b/src/Components/UserPost.jsx
@@ -0,0 +1,14 @@
+import { Box } from "@mui/material";
+
+export default function UserPost({ post }) {
+ let dateString = new Date(post.created_at).toLocaleString()
+ return (
+
+ {post.post_text}
+ Points: {post.points}
+ Posted: {dateString}
+ {/* I actually don't know if won_at is the right key because i haven't won yet LOL */}
+ {post.won_at ? Posted: {dateString} : <>}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/WinArchive.jsx b/src/Components/WinArchive.jsx
new file mode 100644
index 0000000..3eb433d
--- /dev/null
+++ b/src/Components/WinArchive.jsx
@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import PreviousWinner from "./PreviousWinner";
+
+export default function WinArchive({ data }) {
+ return(
+
+ {data.map((post) => )}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Pages/CreatePost.jsx b/src/Pages/CreatePost.jsx
new file mode 100644
index 0000000..120da40
--- /dev/null
+++ b/src/Pages/CreatePost.jsx
@@ -0,0 +1,33 @@
+import { TextField } from '@mui/material'
+import Box from '@mui/material/Box'
+import LoadingButton from '@mui/lab/LoadingButton'
+import { useState } from 'react'
+import { insertPost } from '../utils'
+import { useNavigate } from 'react-router-dom'
+
+export default function CreatePost() {
+ const [text, setText] = useState('')
+ const [loading, setLoading] = useState(false)
+ const navigate = useNavigate()
+
+ const submitHandler = () => {
+ if (text.length > 80) {
+ return
+ }
+ setLoading(true)
+ insertPost(text)
+ .then(() => {
+ navigate('/')
+ setLoading(false)
+ })
+ }
+ return (
+
+ 80 ? 'error' : 'primary'} label="Make a post" multiline rows={3} margin='normal' onChange={(e) => setText(e.target.value)}/>
+ 80 ? 'text-red-400' : 'text-neutral-300'}>{text.length}/80
+ Submit
+
+ )
+}
+
+//i saw a bank that offered "24 hour service" and I thought "it takes that long??"
\ No newline at end of file
diff --git a/src/Pages/Index.jsx b/src/Pages/Index.jsx
new file mode 100644
index 0000000..f1fff9f
--- /dev/null
+++ b/src/Pages/Index.jsx
@@ -0,0 +1,52 @@
+import { Box } from '@mui/material';
+import PostGrid from '../Components/PostGrid'
+import { useLoaderData } from 'react-router-dom';
+import Countdown from '../Components/Countdown';
+import { useState } from 'react';
+import { loadCurrentWinner } from '../utils';
+import WinArchive from '../Components/WinArchive';
+
+export default function Index({ cw, wa }) {
+
+ const data = useLoaderData()
+ const [winArchive, setWinArchive] = useState(data[0])
+ const [currentWinner, setCurrentWinner] = useState(data[1][0]) // why is the current winner api response an array??
+ const [winnerTime, setWinnerTime] = useState(new Date(currentWinner.won_at)) // why is the current winner api response an array??
+ const [showWinArchive, setShowWinArchive] = useState(false)
+
+ const reloadWinner = async () => {
+ console.log('loading new winner')
+ loadCurrentWinner().then(r => {
+ setCurrentWinner(r[0])
+ setWinnerTime(new Date(currentWinner.won_at))
+ })
+ }
+
+ const toggleWinArchive = () => {
+ setShowWinArchive(s => !s)
+ }
+ return (
+ <>
+ toggleWinArchive()}>
+ {currentWinner.post_text}
+ by {currentWinner.player_name}
+
+
+
+ {showWinArchive ?
+
+ )
+}
\ No newline at end of file
diff --git a/src/Pages/LeaderboardPage.jsx b/src/Pages/LeaderboardPage.jsx
new file mode 100644
index 0000000..77d0be9
--- /dev/null
+++ b/src/Pages/LeaderboardPage.jsx
@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import { useLoaderData, Await } from "react-router-dom";
+import React from "react";
+import Leaderboard from "../Components/Leaderboard";
+import LeaderboardSkeleton from "../Components/LeaderboardSkeleton";
+
+export default function LeaderboardPage() {
+ const { data } = useLoaderData()
+ return (
+
+ {(users) =>
+
+ )
+}
\ No newline at end of file
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
new file mode 100644
index 0000000..fe348c1
--- /dev/null
+++ b/src/Pages/Login.jsx
@@ -0,0 +1,69 @@
+import TextField from '@mui/material/TextField'
+import LoadingButton from '@mui/lab/LoadingButton'
+import Box from '@mui/material/Box'
+import { Container } from '@mui/material'
+import Link from '@mui/material/Link'
+import { useState } from 'react'
+import { useNavigate } from "react-router-dom";
+import { loadUser } from '../utils'
+
+// TODO: change api key and token inputs to one input for Copy -> Request Headers
+
+export default function Login() {
+
+ const navigate = useNavigate()
+
+ const [ token, setToken ] = useState('')
+ const [ apikey, setApiKey ] = useState(localStorage.getItem("apikey"))
+ const [ failText, setFailText ] = useState('')
+ const [ apiKeyErr, setApiKeyErr ] = useState(false)
+ const [ tokenErr, setTokenErr ] = useState(false)
+ const [ loading, setLoading ] = useState(false)
+
+ const onTokenChange = (e) => setToken(e.target.value);
+ const onApiKeyChange = (e) => setApiKey(e.target.value);
+
+ const addUserToken = async () => {
+ setLoading(true)
+ // reset error values
+ setTokenErr(false)
+ setApiKeyErr(false)
+ // ensure the bearer token provided is valid
+ localStorage.setItem('token', token)
+ localStorage.setItem('apikey', apikey)
+ loadUser().then((r) => {
+ setLoading(false)
+ if (r.success) {
+ navigate('/')
+ } else {
+ if (r.apikeyInvalid) {
+ setApiKeyErr(true)
+ }
+ if (r.tokenInvalid) {
+ setTokenErr(true)
+ }
+ }
+ })
+ }
+
+ return (
+
+
+ Prittee is an experimental alternate front end for Pithee
+ Add your Pithee api key and authorization token to start using Prittee.
+
+ Let's Go
+
+
+
+ )
+}
diff --git a/src/Pages/Profile.jsx b/src/Pages/Profile.jsx
new file mode 100644
index 0000000..3bec0b0
--- /dev/null
+++ b/src/Pages/Profile.jsx
@@ -0,0 +1,61 @@
+import Header from "../Components/Header";
+import Box from '@mui/material/Box'
+import { LinearProgress, CircularProgress } from "@mui/material";
+import { useLoaderData, Await } from "react-router-dom";
+import React from "react";
+import UserPost from "../Components/UserPost";
+
+export default function Profile() {
+ const { user, posts } = useLoaderData()
+
+ const loadingFallback = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+ return (
+
+ value)}>
+ {(value) => {
+ let [ user, posts ] = value
+ user = user.user
+ return(
+
+
+
+
+
+ {user.player_name}
+ Total Points: {user.total_points}
+ Posts: {posts.length}
+
+
+
+ {posts.map((post) =>
+
+ )
+ }}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/contestants.js b/src/contestants.js
new file mode 100644
index 0000000..440d0bc
--- /dev/null
+++ b/src/contestants.js
@@ -0,0 +1,31 @@
+let contestants = {}
+
+const addContestant = function(post) {
+ contestants[post.id] = post
+}
+
+const rmContestant = function(post) {
+ delete contestants[post.id]
+}
+
+const lenContestants = function() {
+ return Object.keys(contestants).length
+}
+
+const getContestants = function() {
+ return Object.keys(contestants)
+}
+
+const getFullContestants = function() {
+ // when fetching the full contestants, the indices need
+ // to be reset to prevent duplication in the React renderer
+ let raw = Object.values(contestants)
+ let i = 0
+ for (let post of raw) {
+ post.index = i
+ i++
+ }
+ return raw
+}
+
+export { addContestant, rmContestant, lenContestants, getContestants, getFullContestants }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..578ae9f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
body {
margin: 0;
+ background-color: #141113;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ color: white;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+.centralContent {
+ margin: auto;
+}
diff --git a/src/index.js b/src/index.js
index d563c0f..5b9879e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,13 +2,94 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
+import Login from './Pages/Login'
+import Profile from './Pages/Profile'
+import CreatePost from './Pages/CreatePost'
+import LeaderboardPage from './Pages/LeaderboardPage';
import reportWebVitals from './reportWebVitals';
+import {
+ createBrowserRouter,
+ redirect,
+ RouterProvider,
+ defer
+} from 'react-router-dom'
+import { createTheme, ThemeProvider } from '@mui/material';
+import { lightBlue, cyan, orange, green, red, purple } from '@mui/material/colors';
+import CssBaseline from '@mui/material/CssBaseline';
+import { loadCurrentWinner, loadLeaderboardPage, loadUser, loadUserPosts, loadWinArchive } from './utils';
+import Index from './Pages/Index';
+
+const theme = createTheme({
+ palette: {
+ mode: 'dark',
+ primary: cyan,
+ secondary: purple,
+ error: red,
+ warning: orange,
+ info: lightBlue,
+ success: green,
+ },
+ typography: {
+ fontSize: 16,
+ }
+})
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element:
-
+ <>
+
+
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-