Initial puzzle test pt 1

components/PuzzleArea.js

@@ -0,0 +1,22 @@
+import { useRef } from 'react';
+import styles from '../styles/Puzzle.module.css';
+import { motion } from 'framer-motion';
+import PuzzlePieces from './PuzzlePieces';
+
+const PuzzleArea = () => {
+  const constraintsRef = useRef(null);
+
+  return (
+    <div className={styles.piecesContainer}>
+      <motion.div className={styles.area} ref={constraintsRef}>
+        <div className={styles.quadrant} id={styles.one}></div>
+        <div className={styles.quadrant} id={styles.two}></div>
+        <div className={styles.quadrant} id={styles.three}></div>
+        <div className={styles.quadrant} id={styles.four}></div>
+      </motion.div>
+      <PuzzlePieces constraintsRef={constraintsRef} />
+    </div>
+  )
+}
+
+export default PuzzleArea;

components/PuzzlePieces.js

@@ -0,0 +1,44 @@
+import { motion } from 'framer-motion';
+import styles from '../styles/Puzzle.module.css';
+
+const PuzzlePieces = ({ constraintsRef }) => {
+  return (
+    <>
+      <motion.div
+        className={`${styles.piece} ` + `bottomLeft`}
+        id={styles.pieceone}
+        drag
+        dragElastic={0.15}
+        dragConstraints={constraintsRef}
+        whileTap={{ opacity: 0.75 }}>
+      </motion.div>
+      <motion.div
+        className={`${styles.piece} ` + `topLeft`}
+        id={styles.piecetwo}
+        drag
+        dragElastic={0.15}
+        dragConstraints={constraintsRef}
+        whileTap={{ opacity: 0.75 }}>
+      </motion.div>
+      <motion.div
+        className={`${styles.piece} ` + `topRight`}
+        id={styles.piecethree}
+        drag
+        dragElastic={0.15}
+        dragConstraints={constraintsRef}
+        whileTap={{ opacity: 0.75 }}>
+      </motion.div>
+      <motion.div
+        className={`${styles.piece} ` + `bottomRight`}
+        id={styles.piecefour}
+        drag
+        dragElastic={0.15}
+        dragConstraints={constraintsRef}
+        whileTap={{ opacity: 0.75 }}>
+      </motion.div>
+    </>
+  );
+}
+
+export default PuzzlePieces;
+// {shuffledIds.map((id, index) => <PuzzlePiece key={`${index}`} position={`${shuffledPositions[index]}`} idName={`${id}`} constraintsRef={constraintsRef} />)}

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  compiler: {
+    styledComponents: true,
+  },
 }
 
 module.exports = nextConfig

pages/index.js

@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <>
-      <span>Hello</span>
+      <p>Under construction</p>
     </>
   )
 }

pages/puzzle.js

@@ -0,0 +1,12 @@
+import PuzzleArea from '../components/PuzzleArea';
+import styles from '../styles/Puzzle.module.css';
+
+const puzzle = () => {
+  return (
+    <div className={styles.container}>
+      <PuzzleArea />
+    </div>
+  );
+};
+
+export default puzzle;

styles/Puzzle.module.css

@@ -0,0 +1,73 @@
+.container {
+  background: linear-gradient(180deg, #9c1aff 0%, rgb(119, 0, 255) 100%);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.quadrant {
+  width: 150px;
+  height: 125px;
+  position: absolute;
+}
+
+#one {
+  top: 0;
+  left: 0;
+}
+
+#two {
+  top: 0;
+  right: 0;
+}
+
+#three {
+  bottom: 0;
+  left: 0;
+}
+
+#four {
+  bottom: 0;
+  right: 0;
+}
+
+.area {
+  opacity: 0.2;
+  background: white;
+  width: 300px;
+  height: 250px;
+  position: relative;
+  user-select: none;
+  box-shadow: rgba(0, 0, 0, 0.75) 0px 5px 15px;
+}
+
+.piecesContainer {
+  width: 300px;
+  height: 250px;
+  position: relative;
+}
+
+.piece {
+  width: 150px;
+  height: 125px;
+  position: absolute;
+  z-index: 999;
+}
+
+#pieceone {
+  background-image: url(/puzzle/one.png);
+}
+
+#piecetwo {
+  background-image: url(/puzzle/two.png);
+}
+
+#piecethree {
+  background-image: url(/puzzle/three.png);
+}
+
+#piecefour {
+  background-image: url(/puzzle/four.png);
+}

styles/globals.css

@@ -9,3 +9,23 @@ html, body {
 * {
   box-sizing: border-box;
 }
+
+.topLeft {
+  top: 0;
+  left: 0;
+}
+
+.topRight {
+  top: 0;
+  right: 0;
+}
+
+.bottomLeft {
+  bottom: 0;
+  left: 0;
+}
+
+.bottomRight {
+  bottom: 0;
+  right: 0;
+}