Merge branch 'main' of https://github.com/WebmasterCamp/jwc13-hackath…

…on-cny

package.json

@@ -10,8 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "fabric": "^6.0.2",
+    "fabricjs-react": "^1.2.2",
+    "html2canvas": "^1.4.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-html5-camera-photo": "^1.5.11",
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
+    "react-webcam": "^7.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
@@ -24,6 +31,8 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
   }
 }

src/components/AR-ken.jsx

@@ -6,30 +6,7 @@ function ARken() {
 
   return (
     <>
-      <div className='h-[240px] w-[100%] flex items-center justify-around'>
-          <div className='h-[161px] w-[142px] bg-gray-200 s1 rounded-[15px]'>
-          </div>
-          <div className='h-[161px] w-[142px] bg-gray-200 s2 rounded-[15px]'>
-          </div>
-          <div className='w-px h-[120px] bg-gray-200'></div>
-
-          <div className='h-[161px] w-[142px] bg-gray-200 l1 rounded-[15px]'>
-          </div>
-          <div className='h-[161px] w-[142px] bg-gray-200 l2 rounded-[15px]'>
-          </div>
-          <div className='w-px h-[120px] bg-gray-200'></div>
-
-          <div className='h-[161px] w-[142px] bg-gray-200 c1 rounded-[15px]'>
-          </div>
-          <div className='h-[161px] w-[142px] bg-gray-200 c2 rounded-[15px]'>
-          </div>
-          <div className='w-px h-[120px] bg-gray-200'></div>
-
-          <div className='h-[161px] w-[142px] bg-gray-200 s1 rounded-[15px]'>
-          </div>
-          <div className='h-[161px] w-[142px] bg-gray-200 s2 rounded-[15px]'>
-          </div>
-      </div>
+
     </>
   )
 }

src/components/AR.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Camera from 'react-html5-camera-photo';
+import 'react-html5-camera-photo/build/css/index.css';
+
+function AR() {
+
+  function handleTakePhoto(dataUri) {
+    // Do stuff with the photo...
+    console.log('takePhoto');
+  }
+
+  return (
+    <div className='flex'>
+      <div className='overflow-y-scroll w-[20%] h-screen bg-red-200'>
+      </div>
+      <Camera 
+        onTakePhoto={(dataUri) => { handleTakePhoto(dataUri); }}
+      />
+
+      <div>
+        <img src='../assets/furnitures/vase.jpg'></img>
+      </div>
+    </div>
+  )
+}
+
+export default AR

src/components/Canvas.jsx

@@ -0,0 +1,119 @@
+import React, { useRef, useState } from 'react';
+import room from '../assets/rooms/room1.jpg'
+import html2canvas from 'html2canvas';
+
+import clock1 from '../assets/furnitures/clocks/clock1.png'
+import clock2 from '../assets/furnitures/clocks/clock2.png'
+import ARken from './AR-ken';
+
+function Canvas() {
+
+  const cnt = [0, 0, 0, 0]
+  const [clocksIdx, setClocksIdx] = useState(0)
+  const [vasesIdx, setVasesIdx] = useState(0)
+
+  const [buy, setBuy] = useState(["เก้าอี้", "โคมไฟ"])
+
+  const divRef = useRef();
+  const clocks = [clock1, clock2]
+
+  const downloadImage = async () => {
+    const canvas = await html2canvas(divRef.current);
+    const dataUrl = canvas.toDataURL('image/png');
+    const link = document.createElement('a');
+    link.href = dataUrl;
+    link.download = 'my-room.png';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleClick = (key) => {
+    console.log(key)
+  }
+
+  return (
+    <div className='flex flex-col pt-[40px] px-[50px] gap-[54px]'>
+
+      <div className='flex gap-[22px]'>
+        <div className='flex flex-col gap-[11px]'>
+          <div className='w-[200px] h-[50px] bg-white rounded-md flex justify-center items-center'>
+            <h1 className='font-[700] text-[22px]'>LIST</h1>
+          </div>
+
+          <div className='w-[200px] h-[100%] bg-white rounded-md'>
+            <div className='flex flex-col'>
+              {buy.map((key, value) => {
+                return <div className='flex justify-between items-center'>
+                  <div className='pl-3'>
+                    {key}
+                  </div>
+                  <div className='flex justify-center items-center pr-4'>
+                    <p className='mr-2'>1 ea</p>
+                    <svg width="20" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M29 14.5C29 22.5081 22.5081 29 14.5 29C6.49187 29 0 22.5081 0 14.5C0 6.49187 6.49187 0 14.5 0C22.5081 0 29 6.49187 29 14.5Z" fill="#D9D9D9" />
+                      <path d="M6.625 7.625H9.125L10.8 15.9938C10.8572 16.2815 11.0137 16.54 11.2422 16.7239C11.4707 16.9079 11.7567 17.0056 12.05 17H18.125C18.4183 17.0056 18.7043 16.9079 18.9328 16.7239C19.1613 16.54 19.3178 16.2815 19.375 15.9938L20.375 10.75H9.75M12.25 20.125C12.25 20.4702 11.9702 20.75 11.625 20.75C11.2798 20.75 11 20.4702 11 20.125C11 19.7798 11.2798 19.5 11.625 19.5C11.9702 19.5 12.25 19.7798 12.25 20.125ZM19.125 20.125C19.125 20.4702 18.8452 20.75 18.5 20.75C18.1548 20.75 17.875 20.4702 17.875 20.125C17.875 19.7798 18.1548 19.5 18.5 19.5C18.8452 19.5 19.125 19.7798 19.125 20.125Z" stroke="#1E1E1E" stroke-width="2.88455" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                  </div>
+                </div>
+              })}
+            </div>
+
+            <div className='flex justify-center items-center '>
+              <div className='bg-green-200 p-1 rounded-md'>
+                <h1 className='font-[700]'>SUBMIT</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div ref={divRef} className="relative w-[100%]">
+            <img className="rounded-md" alt="room" src={room}></img>
+
+            <div className="absolute top-[25%] left-[50%] drop-shadow-lg">
+              <img src={clocks[cnt[0]]} className='w-[10%]'></img>
+            </div>
+
+            <div className="absolute top-[25%] left-[50%] drop-shadow-lg">
+              <img src={clocks[cnt[0]]} className='w-[10%]'></img>
+            </div>
+
+            <button className="p-1 rounded-md bg-white absolute bottom-[10px] right-[10px]" onClick={downloadImage}>
+              Download this image
+            </button>
+          </div>
+
+          {/* <button onClick={() => { setClocksIdx((clocksIdx + 1) % 2) }}>Change</button> */}
+        </div>
+      </div>
+
+      <div className='h-[240px] w-[100%] flex items-center justify-around'>
+        <div className='h-[161px] w-[142px] bg-gray-200 a1 rounded-[15px]' key={0} onClick={handleClick}>
+        </div>
+        <div className='h-[161px] w-[142px] bg-gray-200 a2 rounded-[15px]' >
+        </div>
+        <div className='w-px h-[120px] bg-gray-200'></div>
+
+        <div className='h-[161px] w-[142px] bg-gray-200 l1 rounded-[15px]'>
+        </div>
+        <div className='h-[161px] w-[142px] bg-gray-200 l2 rounded-[15px]'>
+        </div>
+        <div className='w-px h-[120px] bg-gray-200'></div>
+
+        <div className='h-[161px] w-[142px] bg-gray-200 c1 rounded-[15px]'>
+        </div>
+        <div className='h-[161px] w-[142px] bg-gray-200 c2 rounded-[15px]'>
+        </div>
+        <div className='w-px h-[120px] bg-gray-200'></div>
+
+        <div className='h-[161px] w-[142px] bg-gray-200 s1 rounded-[15px]'>
+        </div>
+        <div className='h-[161px] w-[142px] bg-gray-200 s2 rounded-[15px]'>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Canvas

src/components/Header.jsx

@@ -4,6 +4,7 @@ import viteLogo from '/vite.svg'
 import modern from '../assets/Modern.jpeg'
 import minimal from '../assets/Minimal.jpeg'
 import luxury from '../assets/Luxury.jpeg'
+import { Link } from 'react-router-dom'
 
 function Header() {
 
@@ -16,7 +17,7 @@ function Header() {
             <p className='text-[20px]'>Design you room click</p>
             <div className='w-[300px] h-[1px] bg-gray-200 my-[24px]'></div>
             <div>
-            <a href='' className='bg-[#03571a] py-[11px] px-[26px] rounded-[16px] text-white'>Generate Room</a>
+              <Link className='bg-[#03571a] py-[11px] px-[26px] rounded-[16px] text-white' to='/canvas'>Generate Room</Link>
             </div>
         </div>
 

src/components/Landing.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import reactLogo from '../assets/react.svg'
 import viteLogo from '/vite.svg'
-import '../App.css'
 import Navbar from './Navbar'
 import Head from './Header'
 
@@ -15,4 +14,4 @@ function App() {
   )
 }
 
-export default App
+export default App

src/components/NotFound.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Link, useRouteError } from 'react-router-dom'
+
+function NotFound() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+      <Link to='/'>Home page</Link>
+    </div>
+  )
+}
+
+export default NotFound

src/index.css

@@ -9,7 +9,7 @@
 
   /* color: rgba(255, 255, 255, 0.87); */
   /* color-scheme: light dark; */
-  /* background-color: #242424; */
+  background-color: #CAD4BC;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -40,14 +40,14 @@
   background-size: cover;
   background-repeat: no-repeat;
 }
-.s1 {
-  background-image: url('./assets/furnitures/sofa/sofa1.webp');
+.a1 {
+  background-image: url('./assets/furnitures/clocks/clock1.png');
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
 }
-.s2 {
-  background-image: url('./assets/furnitures/sofa/sofa2.png');
+.a2 {
+  background-image: url('./assets/furnitures/clocks/clock2.png');
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

src/main.jsx

@@ -1,10 +1,37 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './components/Landing'
+
+import Landing from './components/Landing.jsx'
+import NotFound from './components/NotFound.jsx'
+import Canvas from './components/Canvas.jsx'
+
 import './index.css'
 
+import { createBrowserRouter, RouterProvider, useParams } from 'react-router-dom';
+import AR from './components/AR.jsx'
+
+const router = createBrowserRouter([
+  {
+    path: '',
+    element: <Landing />,
+    errorElement: <NotFound />
+  },
+  {
+    path: '/canvas',
+    element: <Canvas />,
+    errorElement: <NotFound />
+  },
+  {
+    path: '/AR',
+    element: <AR />,
+    errorElement: <NotFound />
+  }
+]);
+
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+     <RouterProvider router={router} />
   </React.StrictMode>,
 )