-
- 12
-
-
- →
-
+
+ ));
+ return
;
+ }
+ }
+
+ if (isLoading || !data) {
+ return (
+
);
+ }
+ if (data) {
+ return (
+
+ );
+ }
}
diff --git a/src/pages/review/[id].tsx b/src/pages/review/[id].tsx
new file mode 100644
index 0000000..2451d0c
--- /dev/null
+++ b/src/pages/review/[id].tsx
@@ -0,0 +1,227 @@
+import { trpc } from "@/utils/trpc";
+import React from "react";
+import { useRouter } from "next/router";
+import NextError from "next/error";
+import Link from "next/link";
+
+export default function Review() {
+ const id = useRouter().query.id as string;
+ const cardQuery = trpc.useQuery(["get-cards-from-deck", { id }], {
+ refetchOnWindowFocus: false,
+ });
+
+ if (cardQuery.error) {
+ return (
+
+ );
+ }
+
+ if (cardQuery.status !== "success") {
+ return <>Loading...;
+ }
+ const { data } = cardQuery;
+ console.log({ data });
+ console.log({ cardQuery });
+
+ type CardProps = {};
+ type CardState = {
+ isFront: boolean;
+ cardNumber: number;
+ bars: number;
+ level: number;
+ countdown: number;
+ };
+
+ class Card extends React.Component
{
+ private timerID: number = 0;
+ state: CardState = {
+ isFront: true,
+ cardNumber: 0,
+ bars: 0,
+ level: 0,
+ countdown: 12,
+ };
+
+ componentDidMount() {
+ // NOTE: This seems to reset when 'looking away' from the window
+ this.updateStateForCardIndex(this.state.cardNumber);
+ this.timerID = window.setInterval(() => this.tick(), 1000);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timerID);
+ }
+
+ render() {
+ if (data) {
+ return (
+
+
+
+ {data.cards[this.state.cardNumber].source
+ ? data.cards[this.state.cardNumber].source
+ : ""}
+
+
+
+
+
{
+ this.flip();
+ }}
+ className="cursor-pointer relative flex h-4/5 w-4/5 bg-orangeweboxfordblue-primary justify-center items-center border-orangeweboxfordblue-border border-4 shadow-2xl rounded-[9rem]"
+ >
+
+ {this.state.isFront
+ ? data.cards[this.state.cardNumber].front
+ : data.cards[this.state.cardNumber].back}
+
+
+
{
+ this.next();
+ }}
+ className="cursor-pointer absolute flex w-36 h-36 bottom-[8%] right-[8%] justify-center items-center group bg-orangeweboxfordblue-tertiary border-orangeweboxfordblue-border border-4 shadow-2xl rounded-full"
+ >
+
+ {this.state.countdown}
+
+
+ →
+
+
+
+
+ {this.state.level}
+
+
+
+
+
+ {this.state.level > 1 && (
+
+ )}
+ {this.state.level > 2 && (
+
+ )}
+
+
+
+