diff --git a/README.md b/README.md index 9624ece..0671c9f 100644 --- a/README.md +++ b/README.md @@ -1 +1,112 @@ -# final-project_front-end \ No newline at end of file +
+ +# I M A G I N E R I U M + +![Stars](https://img.shields.io/github/stars/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social) +![Forks](https://img.shields.io/github/forks/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social) +![Watchers](https://img.shields.io/github/watchers/SchoolOfCode/bc13_final-project_front-end-room-8-boolean-hooligans?style=social) + +**Imaginerium** (n) - from _imagination_, _engineering_ and _museum_ + +
+ +## :earth_africa: Imaginerium: + +Ever had an idea for a really cool character for a story, or wanted to have somewhere to put down all your game's NPCs? + +Then try [Imaginerium](https://imaginerium.netlify.app)! + +Imaginerium is a world-building site for creatives of all stripes - writers, gamers, and anyone who has an original character or concept they'd like to put down on the internet. Unlike other similar sites, Imaginerium has been designed with accessibility and simplicity of use as the foremost consideration. Using Imaginerium you can create characters and collaborate with your friends, as well as generate and edit world maps for all sorts of storytelling ideas. + +## :construction_worker: Development Team: + +A team of five from the School of Code's 13th Cohort. Imaginerium is our final, four-week long project, built in January 2023. We had four days' planning, 14 days' programming, and one day to present. We are... + +
+ THE BOOLEAN HOOLIGANS: +
+ +[CHARLES SAJAN](https://github.com/csajan) - :microscope::memo::card_index::bust_in_silhouette: + +[FILIP RUMINSKI](https://github.com/fruminski) - :microscope::memo::card_index::bust_in_silhouette: + +[IONA ROSE](https://github.com/ionarose) - :microscope::memo::card_index::bust_in_silhouette: + +[ANDRES ESPIN](https://github.com/andres3m) - :microscope::memo::card_index::bust_in_silhouette: + +_and_ + +[FELICITY CULLEN](https://github.com/Fliss317) - :microscope::memo::card_index::bust_in_silhouette: + +## :wrench: Tech Stack: + +IMAGINERIUM is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +### :computer: Front End Tech: + +* [Next.js](https://nextjs.org/) v.13.1.1 +* [React.js](https://reactjs.org/) v.18.2.0 +* ES6 (JavaScript) +* CSS3 + +### :nut_and_bolt: Back End Tech: + +* [Nodemon](https://www.npmjs.com/package/nodemon) v.2.0.20 +* [Express.js](http://expressjs.com/) v.4.18.2 +* [Morgan](https://www.npmjs.com/package/morgan) v.1.10.0 +* ES6 (JavaScript) +* [PostgreSQL](https://www.npmjs.com/package/pg) v.8.8.0 + +### :house: Hosting: + +* [Netlify](https://www.netlify.com/) (front end) +* [Render](https://render.com/) (back end) +* [ElephantSQL](https://www.elephantsql.com/) (database) + +### :hammer: Testing Tools: + +* [Cypress v12.3.0](https://www.cypress.io/) (end-to-end testing) +* [Supertest v.6.3.3](https://www.npmjs.com/package/supertest) (integration testing) +* [Jest v29.3.1](https://jestjs.io/) (unit testing) +* [Postman](https://www.postman.com/) (api testing) +* [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) (accessibility testing) + +### :book: Libraries: + +* [React Icons](https://react-icons.github.io/react-icons/) +* [React hook form](https://react-hook-form.com/) +* [Next-Auth](https://next-auth.js.org/) +* [Next-Themes](https://www.npmjs.com/package/next-themes) + +### :floppy_disk: Other Tools and Programs: + +* Google Docs +* Google Slides +* Figma +* Miro +* Trello +* Slack +* Zoom +* Skype +* Notepad +* MS Paint + +## :clipboard: Instructions: + +For those who want to add their own spin on IMAGINERIUM or simply just rummage around in our code, here are the commands you'll need to run both the front and back end: + +Front end: +``` +npm i +npm run dev +``` + +Back end: +``` +npm run dev +``` + +Testing - front and back end: +``` +npm run test +``` diff --git a/imaginerium/.gitignore b/imaginerium/.gitignore new file mode 100644 index 0000000..55175ef --- /dev/null +++ b/imaginerium/.gitignore @@ -0,0 +1,32 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel diff --git a/imaginerium/Components/Button.js b/imaginerium/Components/Button.js new file mode 100644 index 0000000..03ceac3 --- /dev/null +++ b/imaginerium/Components/Button.js @@ -0,0 +1,3 @@ +export default function Button(props) { + return ; +} diff --git a/imaginerium/Components/ButtonLink.js b/imaginerium/Components/ButtonLink.js new file mode 100644 index 0000000..4dd11c9 --- /dev/null +++ b/imaginerium/Components/ButtonLink.js @@ -0,0 +1,10 @@ +import Link from "next/link"; + +export default function ButtonLink(props) { + return ( + + ); +} diff --git a/imaginerium/Components/CharacterCard.js b/imaginerium/Components/CharacterCard.js new file mode 100644 index 0000000..7534e67 --- /dev/null +++ b/imaginerium/Components/CharacterCard.js @@ -0,0 +1,122 @@ +import styles from "../styles/characterCard.module.css"; +import { SlGhost } from "react-icons/sl"; +import { GiHeartInside, GiWeight } from "react-icons/gi"; +import { RiCake2Fill } from "react-icons/ri"; +import { MdTransgender } from "react-icons/md"; +import { MdHeight } from "react-icons/md"; +import { useState } from "react"; +import PopUpCharacterCard from "../modals/popUpCharacterCard"; +import CharacterPopUp from "./CharacterPopUp"; +import { motion } from "framer-motion"; + +export default function CharacterCard(props) { + const [showModal, setShowModal] = useState(false); + + return ( +
+
setShowModal(true)} className={styles.center}> + +
+
+
+ {props.char_alive ? ( + + Alive + + ) : ( + + Dead + + )} +
+ + {props.char_img ? ( + Character portrait image + ) : ( + Character portrait image + )} +
+
+
+
+
Gender
+ +
{props.char_gender}
+
+
+
Age
+ +
{props.char_age}
+
+
+
Height
+ +
{props.char_height}cm
+
+
+
Weight
+ +
{props.char_weight}kg
+
+
+
+
+
+

{props.char_name}

+

{props.char_desc}

+ Click to expand +
+
+
+ {showModal ? ( + + + + ) : null} +
+ ); +} diff --git a/imaginerium/Components/CharacterPopUp.js b/imaginerium/Components/CharacterPopUp.js new file mode 100644 index 0000000..f947464 --- /dev/null +++ b/imaginerium/Components/CharacterPopUp.js @@ -0,0 +1,1420 @@ +import { SlGhost } from "react-icons/sl"; +import { GiHeartInside } from "react-icons/gi"; +import { AiFillEdit } from "react-icons/ai"; +import { MdFileDownloadDone } from "react-icons/md"; +import { GrFormClose } from "react-icons/gr"; +import { useState } from "react"; +import styles from "../styles/characterPopup.module.css"; +import { motion } from "framer-motion"; + +export default function CharacterPopUp(props) { + const [editNameInput, setEditNameInput] = useState(false); + const [editName, setEditName] = useState(null); + const [editAgeInput, setEditAgeInput] = useState(false); + const [editAge, setEditAge] = useState(null); + + const [editBackgroundInput, setEditBackgroundInput] = useState(false); + const [editBackground, setEditBackground] = useState(null); + const [editDescInput, setEditDescInput] = useState(false); + const [editDesc, setEditDesc] = useState(null); + const [editDisabilitiesInput, setEditDisabilitiesInput] = useState(false); + const [editDisabilities, setEditDisabilities] = useState(null); + const [editEyeInput, setEditEyeInput] = useState(false); + const [editEye, setEditEye] = useState(null); + const [editFearsInput, setEditFearsInput] = useState(false); + const [editFears, setEditFears] = useState(null); + const [editFeaturesInput, setEditFeaturesInput] = useState(false); + const [editFeatures, setEditFeatures] = useState(null); + const [editGenderInput, setEditGenderInput] = useState(false); + const [editGender, setEditGender] = useState(null); + const [editHairInput, setEditHairInput] = useState(false); + const [editHair, setEditHair] = useState(null); + const [editHeightInput, setEditHeightInput] = useState(false); + const [editHeight, setEditHeight] = useState(null); + const [editHopesInput, setEditHopesInput] = useState(false); + const [editHopes, setEditHopes] = useState(null); + + const [editJobInput, setEditJobInput] = useState(false); + const [editJob, setEditJob] = useState(null); + const [editLikesInput, setEditLikesInput] = useState(false); + const [editLikes, setEditLikes] = useState(null); + const [editMoralityInput, setEditMoralityInput] = useState(false); + const [editMorality, setEditMorality] = useState(null); + const [editNotesInput, setEditNotesInput] = useState(false); + const [editNotes, setEditNotes] = useState(null); + const [editPronounsInput, setEditPronounsInput] = useState(false); + const [editPronouns, setEditPronouns] = useState(null); + const [editRelationshipsInput, setEditRelationshipsInput] = useState(false); + const [editRelationships, setEditRelationships] = useState(null); + const [editSexualityInput, setEditSexualityInput] = useState(false); + const [editSexuality, setEditSexuality] = useState(null); + const [editSkillsInput, setEditSkillsInput] = useState(false); + const [editSkills, setEditSkills] = useState(null); + const [editSkinInput, setEditSkinInput] = useState(false); + const [editSkin, setEditSkin] = useState(null); + const [editSpeciesInput, setEditSpeciesInput] = useState(false); + const [editSpecies, setEditSpecies] = useState(null); + const [editSpeechInput, setEditSpeechInput] = useState(false); + const [editSpeech, setEditSpeech] = useState(null); + const [editWeightInput, setEditWeightInput] = useState(false); + const [editWeight, setEditWeight] = useState(null); + const [emailTrigger, setEmailTrigger] = useState(false); + const [email, setEmail] = useState(null); + + async function destroyCharacter(id) { + await fetch(`https://imaginerium-qpii.onrender.com/characters/${id}`, { + method: "DELETE", + mode: "cors", + headers: { "Content-Type": "application/json" } + }); + } + + + + + async function editCharacter(id, key, value) { + + if (value !== null) { + let body = {}; + body.user_id = 1; + body[key] = value; + await fetch(`https://imaginerium-qpii.onrender.com/characters/${id}`, { + method: "PATCH", + body: JSON.stringify(body), + mode: "cors", + headers: { "Content-Type": "application/json" }, + }); + } else { + console.log("Value is null. Edit not sent."); + } + } + + + async function shareCharacter() { + let body = {}; + body.character_id = props.character_id; + body.user_email = email; + + await fetch(`https://imaginerium-qpii.onrender.com/collab`, { + method: "POST", + body: JSON.stringify(body), + mode: "cors", + headers: { "Content-Type": "application/json" } + }); + } + + return ( + <> + +
+ + {props.char_img ? ( + character portrait + ) : ( + character portrait + )} + +
+ {emailTrigger ? ( + + ) : ( + <> +
+ + {editNameInput ? ( +
+ setEditName(e.target.value)} + className={styles.nameinput} + > + +
+ ) : ( +
+

{props.char_name}

+
+ )} +
+ +
+
+ +
+
+ +
+
+ + )} +
+
+ +
+ + +

{props.char_name}

+
+
+

Physical Appearance:

+ +
+
Age in years:
+ +
+ {editAgeInput ? ( + <> +

+

+ setEditAge(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_age}

+ + )} + +
+
Species / ethnicity:
+ +
+ {editSpeciesInput ? ( + <> +

+

+ setEditSpecies(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_species}

+ + )} + +
+
Hair colour:
+ +
+ {editHairInput ? ( + <> +

+

+ setEditHair(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_haircolour}

+ + )} + +
+
Eye colour:
+ +
+ {editEyeInput ? ( + <> +

+

+ setEditEye(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_eyecolour}

+ + )} + +
+
Skin colour:
+ +
+ {editSkinInput ? ( + <> +

+

+ setEditSkin(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_skincolour}

+ + )} + +
+
Height in centimeters:
+ +
+ {editHeightInput ? ( + <> +

+

+ setEditHeight(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_height}

+ + )} + +
+
Weight in kilograms:
+ +
+ {editWeightInput ? ( + <> +

+

+ setEditWeight(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_weight}

+ + )} + +
+
Distinguishing features:
+ +
+ {editFeaturesInput ? ( + <> +

+

+ setEditFeatures(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_features}

+ + )} + +
+
Physical description:
+ +
+ {editDescInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_desc}

+ + )} + + {props.char_alive ? ( + <> +
Status:
+

+ {" "} + Alive! + +

+ + ) : ( + <> +
Status:
+

+ {" "} + Dead + +

+ + )} +
+
+

Personality:

+ +
+
Hopes, dreams, motivation, and goals:
+ +
+ {editHopesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_hopes}

+ + )} + +
+
Fears, troubles, and flaws:
+ +
+ {editFearsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_fears}

+ + )} + +
+
Catchphrases, speech patterns, languages spoken:
+ +
+ {editSpeechInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_speech}

+ + )} + +
+
Likes and dislikes:
+ +
+ {editLikesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_likes}

+ + )} + +
+

Other Details:

+
+
Character background:
+ +
+ {editBackgroundInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_background}

+ + )} + +
+
Disabilities:
+ +
+ {editDisabilitiesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_disabilities}

+ + )} + +
+
Career and education:
+ +
+ {editJobInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_job}

+ + )} + +
+
Gender:
+ +
+ {editGenderInput ? ( + <> +

+

+ setEditGender(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_gender}

+ + )} + +
+
Pronouns:
+ +
+ {editPronounsInput ? ( + <> +

+

+ setEditPronouns(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_pronouns}

+ + )} + +
+
Sexuality:
+ +
+ {editSexualityInput ? ( + <> +

+

+ setEditSexuality(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_sexuality}

+ + )} + +
+
Skills:
+ +
+ {editSkillsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_skills}

+ + )} + +
+
Morality:
+ +
+ {editMoralityInput ? ( + <> +

+

+ setEditMorality(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_morality}

+ + )} + +
+
Key relationships - family, friends, romance:
+ +
+ {editRelationshipsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_relationships}

+ + )} + +
+
Any other character notes:
+ +
+ {editNotesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_notes}

+ + )} +
+
+
+
+
+ + ); +} diff --git a/imaginerium/Components/DarkModeToggle.js b/imaginerium/Components/DarkModeToggle.js new file mode 100644 index 0000000..c5e6c40 --- /dev/null +++ b/imaginerium/Components/DarkModeToggle.js @@ -0,0 +1,26 @@ +import style from "../styles/darkModeToggle.module.css"; +//import { theme, useTheme } from "next-themes"; + +const ButtonToggleDarkMode = () => { + //const { theme, setTheme } = useTheme(); + + return ( +
+ {/* setTheme(theme == "dark" ? "light" : "dark")} + + checked={theme == "dark" ? true : false} + id="chk" + /> + */} +
+ ); +}; + +export default ButtonToggleDarkMode; diff --git a/imaginerium/Components/Form.js b/imaginerium/Components/Form.js new file mode 100644 index 0000000..0b68f58 --- /dev/null +++ b/imaginerium/Components/Form.js @@ -0,0 +1,36 @@ +import React, { useState } from "react"; + +import Step1 from "./Step1"; +import Step2 from "./Step2"; +import Step3 from "./Step3"; + +export default function Form() { + const [step, setStep] = useState(1); + const [formValues, setFormValues] = useState({}); + + return ( +
+ {step === 1 && ( + + )} + {step === 2 && ( + + )} + {step === 3 && ( + + )} +
+ ); +} diff --git a/imaginerium/Components/Input.js b/imaginerium/Components/Input.js new file mode 100644 index 0000000..49dce57 --- /dev/null +++ b/imaginerium/Components/Input.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Input(props) { + return ; +} diff --git a/imaginerium/Components/Navigation.js b/imaginerium/Components/Navigation.js new file mode 100644 index 0000000..dde8d4d --- /dev/null +++ b/imaginerium/Components/Navigation.js @@ -0,0 +1,69 @@ +// a working navbar for future projects + +import styles from "../styles/navigation.module.css"; +import Link from "next/link"; +import ButtonToggleDarkMode from "./DarkModeToggle"; +import Image from "next/image"; +import LoginOutButton from "./login-btn"; + +export default function Navigation() { + return ( +
+
+ + Imaginerium + +
+ +
+
+ +
+ Homepage + About Us +
+ +
+ + +
+ Character + World map +
+
+ +
+ +
+ Characters + Shared characters +
+
+ +
+ +
+
+ +
+
+
+
+ ); +} diff --git a/imaginerium/Components/NewNavBar.js b/imaginerium/Components/NewNavBar.js new file mode 100644 index 0000000..c40f9c3 --- /dev/null +++ b/imaginerium/Components/NewNavBar.js @@ -0,0 +1,130 @@ +import styles from "../styles/newNavBar.module.css"; +import React from "react"; +import { AnimatePresence, clamp, motion, useCycle } from "framer-motion"; +import LoginOutButton from "./login-btn"; + +const links = [ + { name: "Home", to: "/dashboard", id: 1 }, + { name: "About", to: "/aboutUs", id: 2 }, + { name: "Create Characters", to: "/createCharacter", id: 3 }, + { name: "View Characters", to: "/characterList", id: 4 }, + { name: "Shared Characters", to: "/sharedCharacters", id: 5 }, + { name: "Create World", to: "/createNewWorld", id: 6 } +]; + +const itemVariants = { + closed: { + opacity: 0 + }, + open: { opacity: 1 } +}; + +const sideVariants = { + closed: { + transition: { + staggerChildren: 0.2, + staggerDirection: -1 + } + }, + open: { + transition: { + staggerChildren: 0.2, + staggerDirection: 1 + } + } +}; + +export default function NewNavBar() { + const [open, cycleOpen] = useCycle(false, true); + + return ( +
+ + {open && ( + + + {links.map(({ name, to, id }) => ( + + {name} + + ))} + + + )} + +
+
+ {open ? ( + <> + + + + + ) : ( + <> + + + + + )} +
+
+ +
+ ); +} diff --git a/imaginerium/Components/NoCharactersShared.js b/imaginerium/Components/NoCharactersShared.js new file mode 100644 index 0000000..56788c6 --- /dev/null +++ b/imaginerium/Components/NoCharactersShared.js @@ -0,0 +1,45 @@ +import Link from "next/link"; +import NewNavBar from "./NewNavBar"; +import styles from "./../styles/pleaseLogin.module.css"; +import { VscOrganization } from "react-icons/vsc"; + +export default function NoCharactersYet() { + return ( + <> + + + + +
+
+

IMAGINERIUM

+

Not currently collaborating on any characters

+

+ To share a character with a friend or collaborator, view your + character and click 'share' +

+
+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+ + ); +} diff --git a/imaginerium/Components/NoCharactersYet.js b/imaginerium/Components/NoCharactersYet.js new file mode 100644 index 0000000..3b03695 --- /dev/null +++ b/imaginerium/Components/NoCharactersYet.js @@ -0,0 +1,42 @@ +import Link from "next/link"; +import NewNavBar from "./NewNavBar"; +import styles from "./../styles/pleaseLogin.module.css"; +import { VscPersonAdd } from "react-icons/vsc" + +export default function NoCharactersYet () { + +return ( + <> + + + + +
+
+ +

IMAGINERIUM

+

No characters created yet

+
+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+ +) + +} \ No newline at end of file diff --git a/imaginerium/Components/PleaseLogin.js b/imaginerium/Components/PleaseLogin.js new file mode 100644 index 0000000..34ca74b --- /dev/null +++ b/imaginerium/Components/PleaseLogin.js @@ -0,0 +1,44 @@ +import NewNavBar from "./NewNavBar.js"; +import { AiOutlineLogin } from "react-icons/ai"; +import { useSession } from "next-auth/react"; +import styles from "./../styles/pleaseLogin.module.css"; +import Link from "next/link"; + +export default function PleaseLogin() { + const { data: session } = useSession(); + if (!session) { + return ( + <> + + + + +
+
+ +

IMAGINERIUM

+

Log in to see saved content

+
+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+ + ); + } +} diff --git a/imaginerium/Components/SharedCharacterCard.js b/imaginerium/Components/SharedCharacterCard.js new file mode 100644 index 0000000..bc7401a --- /dev/null +++ b/imaginerium/Components/SharedCharacterCard.js @@ -0,0 +1,124 @@ +import styles from "../styles/characterCard.module.css"; +import { SlGhost } from "react-icons/sl"; +import { GiHeartInside, GiWeight } from "react-icons/gi"; +import { RiCake2Fill } from "react-icons/ri"; +import { MdTransgender } from "react-icons/md"; +import { MdHeight } from "react-icons/md"; +import { useState } from "react"; +import PopUpCharacterCard from "../modals/popUpCharacterCard"; +import SharedCharacterPopUp from "./SharedCharacterPopUp"; +import { motion } from "framer-motion"; + +export default function CharacterCard(props) { + const [showModal, setShowModal] = useState(false); + + return ( +
+
setShowModal(true)} className={styles.center}> + +
+
+
+ {props.char_alive ? ( + + Alive + + ) : ( + + Dead + + )} +
+ + {props.char_img ? ( + Character portrait image + ) : ( + Character portrait image + )} +
+
+ {/*

{props.char_name}

*/} + +
+
+
Gender
+ +
{props.char_gender}
+
+
+
Age
+ +
{props.char_age}
+
+
+
Height
+ +
{props.char_height}m
+
+
+
Weight
+ +
{props.char_weight}kg
+
+
+
+
+
+

{props.char_name}

+

{props.char_desc}

+ Click to expand +
+
+
+ {showModal ? ( + + + + ) : null} +
+ ); +} diff --git a/imaginerium/Components/SharedCharacterPopUp.js b/imaginerium/Components/SharedCharacterPopUp.js new file mode 100644 index 0000000..224d118 --- /dev/null +++ b/imaginerium/Components/SharedCharacterPopUp.js @@ -0,0 +1,1239 @@ +import { SlGhost } from "react-icons/sl"; +import { GiHeartInside } from "react-icons/gi"; +import { AiFillEdit } from "react-icons/ai"; +import { MdFileDownloadDone } from "react-icons/md"; +import { GrFormClose } from "react-icons/gr"; +import { useState } from "react"; +import styles from "../styles/characterPopup.module.css"; +import { motion } from "framer-motion"; + +export default function SharedCharacterPopUp(props) { + const [editNameInput, setEditNameInput] = useState(false); + const [editName, setEditName] = useState(null); + const [editAgeInput, setEditAgeInput] = useState(false); + const [editAge, setEditAge] = useState(null); + const [editBackgroundInput, setEditBackgroundInput] = useState(false); + const [editBackground, setEditBackground] = useState(null); + const [editDescInput, setEditDescInput] = useState(false); + const [editDesc, setEditDesc] = useState(null); + const [editDisabilitiesInput, setEditDisabilitiesInput] = useState(false); + const [editDisabilities, setEditDisabilities] = useState(null); + const [editEyeInput, setEditEyeInput] = useState(false); + const [editEye, setEditEye] = useState(null); + const [editFearsInput, setEditFearsInput] = useState(false); + const [editFears, setEditFears] = useState(null); + const [editFeaturesInput, setEditFeaturesInput] = useState(false); + const [editFeatures, setEditFeatures] = useState(null); + const [editGenderInput, setEditGenderInput] = useState(false); + const [editGender, setEditGender] = useState(null); + const [editHairInput, setEditHairInput] = useState(false); + const [editHair, setEditHair] = useState(null); + const [editHeightInput, setEditHeightInput] = useState(false); + const [editHeight, setEditHeight] = useState(null); + const [editHopesInput, setEditHopesInput] = useState(false); + const [editHopes, setEditHopes] = useState(null); + + const [editJobInput, setEditJobInput] = useState(false); + const [editJob, setEditJob] = useState(null); + const [editLikesInput, setEditLikesInput] = useState(false); + const [editLikes, setEditLikes] = useState(null); + const [editMoralityInput, setEditMoralityInput] = useState(false); + const [editMorality, setEditMorality] = useState(null); + const [editNotesInput, setEditNotesInput] = useState(false); + const [editNotes, setEditNotes] = useState(null); + const [editPronounsInput, setEditPronounsInput] = useState(false); + const [editPronouns, setEditPronouns] = useState(null); + const [editRelationshipsInput, setEditRelationshipsInput] = useState(false); + const [editRelationships, setEditRelationships] = useState(null); + const [editSexualityInput, setEditSexualityInput] = useState(false); + const [editSexuality, setEditSexuality] = useState(null); + const [editSkillsInput, setEditSkillsInput] = useState(false); + const [editSkills, setEditSkills] = useState(null); + const [editSkinInput, setEditSkinInput] = useState(false); + const [editSkin, setEditSkin] = useState(null); + const [editSpeciesInput, setEditSpeciesInput] = useState(false); + const [editSpecies, setEditSpecies] = useState(null); + const [editSpeechInput, setEditSpeechInput] = useState(false); + const [editSpeech, setEditSpeech] = useState(null); + const [editWeightInput, setEditWeightInput] = useState(false); + const [editWeight, setEditWeight] = useState(null); + + async function editCharacter(id, key, value) { + let body = {}; + body.user_id = 1; + body[key] = value; + await fetch(`https://imaginerium-qpii.onrender.com/characters/${id}`, { + method: "PATCH", + body: JSON.stringify(body), + mode: "cors", + headers: { "Content-Type": "application/json" } + }); + } + + return ( + <> + +
+ {props.char_img ? ( + + ) : ( + + )} + +
+
+
+ + {editNameInput ? ( +
+ setEditName(e.target.value)} + > + +
+ ) : ( +
+

{props.char_name}

+
+ )} +
+ +
+
+
+
+
+
+ + +

{props.char_name}

+
+
+

Physical Appearance:

+ +
+
Age in years:
+ +
+ {editAgeInput ? ( + <> +

+

+ setEditAge(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_age}

+ + )} + +
+
Species / ethnicity:
+ +
+ {editSpeciesInput ? ( + <> +

+

+ setEditSpecies(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_species}

+ + )} + +
+
Hair colour:
+ +
+ {editHairInput ? ( + <> +

+

+ setEditHair(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_haircolour}

+ + )} + +
+
Eye colour:
+ +
+ {editEyeInput ? ( + <> +

+

+ setEditEye(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_eyecolour}

+ + )} + +
+
Skin colour:
+ +
+ {editSkinInput ? ( + <> +

+

+ setEditSkin(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_skincolour}

+ + )} + +
+
Height in meters:
+ +
+ {editHeightInput ? ( + <> +

+

+ setEditHeight(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_height}

+ + )} + +
+
Weight in kilograms:
+ +
+ {editWeightInput ? ( + <> +

+

+ setEditWeight(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_weight}

+ + )} + +
+
Distinguishing features:
+ +
+ {editFeaturesInput ? ( + <> +

+

+ setEditFeatures(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_features}

+ + )} + +
+
Physical description:
+ +
+ {editDescInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_desc}

+ + )} + + {props.char_alive ? ( + <> +
Status:
+

+ {" "} + Alive! + +

+ + ) : ( + <> +

Status:

+

+ {" "} + Dead + +

+ + )} +
+
+

Personality:

+ +
+
Hopes, dreams, motivation, and goals:
+ +
+ {editHopesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_hopes}

+ + )} + +
+
Fears, troubles, and flaws:
+ +
+ {editFearsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_fears}

+ + )} + +
+
Catchphrases, speech patterns, languages spoken:
+ +
+ {editSpeechInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_speech}

+ + )} + +
+
Likes and dislikes:
+ +
+ {editLikesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_likes}

+ + )} + +
+

Other Details:

+
+
Character background:
+ +
+ {editBackgroundInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_background}

+ + )} + +
+
Disabilities:
+ +
+ {editDisabilitiesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_disabilities}

+ + )} + +
+
Career and education:
+ +
+ {editJobInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_job}

+ + )} + +
+
Gender:
+ +
+ {editGenderInput ? ( + <> +

+

+ setEditGender(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_gender}

+ + )} + +
+
Pronouns:
+ +
+ {editPronounsInput ? ( + <> +

+

+ setEditPronouns(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_pronouns}

+ + )} + +
+
Sexuality:
+ +
+ {editSexualityInput ? ( + <> +

+

+ setEditSexuality(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_sexuality}

+ + )} + +
+
Skills:
+ +
+ {editSkillsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_skills}

+ + )} + +
+
Morality:
+ +
+ {editMoralityInput ? ( + <> +

+

+ setEditMorality(e.target.value)} + > + +
+

+ + ) : ( + <> +

{props.char_morality}

+ + )} + +
+
Key relationships - family, friends, romance:
+ +
+ {editRelationshipsInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_relationships}

+ + )} + +
+
Any other character notes:
+ +
+ {editNotesInput ? ( + <> +

+

+ + +
+

+ + ) : ( + <> +

{props.char_notes}

+ + )} +
+
+
+
+
+ + ); +} diff --git a/imaginerium/Components/Step1.js b/imaginerium/Components/Step1.js new file mode 100644 index 0000000..0e2bdc9 --- /dev/null +++ b/imaginerium/Components/Step1.js @@ -0,0 +1,243 @@ +import React, { cloneElement, useEffect } from "react"; +import { useForm } from "react-hook-form"; +import { useState } from "react"; +import { useRef } from "react"; +import { useSession } from "next-auth/react"; +import styles from "../styles/steps.module.css"; +import { motion } from "framer-motion"; + +import style from "../styles/switch.module.css"; + +export default function Step1({ setStep, formValues, setFormValues }) { + const [firstName, setFirstName] = useState(""); + const [image, setImage] = useState(""); + const [trigger, setTrigger] = useState(true); + const [isOn, setIsOn] = useState(true); + const myForm = useRef(); + + const { register, handleSubmit } = useForm(); + + const { data: session } = useSession(); + + const spring = { + type: "spring", + stiffness: 700, + damping: 30 + }; + + async function randomName() { + const response = await fetch(`https://randomuser.me/api/`); + const data = await response.json(); + if (data) { + setFirstName( + data.results[0].name.first + " " + data.results[0].name.last + ); + setImage(data.results[0].picture.large); + setFormValues({ ...formValues, char_name: firstName, char_img: image }); + } + } + + useEffect(() => { + randomName(); + setTrigger(true); + }, [trigger]); + + let user = { user_email: session.user.email }; + + // console.log("step1:", formValues); + + async function onSubmit(values, e) { + // e.preventDefault(); + setFormValues({ ...user, ...formValues, ...values, char_alive: isOn }); + + setStep(2); + // if(myForm.current.buttonId === 'next') { + // } + } + + const toggleSwitch = () => { + setIsOn(!isOn); + if (isOn === true) { + let addAlive = { ...formValues, char_alive: false }; + setFormValues(addAlive); + } else { + let addAlive = { ...formValues, char_alive: true }; + setFormValues(addAlive); + } + }; + + return ( +
+

Physical Features

+ + +
+ + + + {formValues.char_img ? ( // if image is true, show image, else show placeholder + Character placeholder + ) : ( + // if image is false, show placeholder + Character placeholder + )} + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +