diff --git a/app/cuadrados.js b/app/cuadrados.js new file mode 100644 index 0000000..0a971b1 --- /dev/null +++ b/app/cuadrados.js @@ -0,0 +1,12 @@ +const Cuadrado =({valor, alHcerClick})=> { + return( + + ) +} + +export default Cuadrado \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index 9800bf8..9164a11 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,30 +1,10 @@ -import localFont from "next/font/local"; -import "./globals.css"; +import Tablero from "./tablero" -const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", -}); -const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", -}); - -export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ children }) { - return ( - - - {children} - - - ); +const totito=()=>{ + return( +
+ +
+ ) } +export default totito diff --git a/app/page.js b/app/page.js deleted file mode 100644 index 7f0afc2..0000000 --- a/app/page.js +++ /dev/null @@ -1,101 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.js - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
- ); -} diff --git a/app/tablero.js b/app/tablero.js new file mode 100644 index 0000000..fa99432 --- /dev/null +++ b/app/tablero.js @@ -0,0 +1,35 @@ +import{ usiState } from "react" +import Cuadrado from "./cuadros" + +const Tablero =()=>{ + const [cuadros, setCuadros]= usiState(Array(9).fill('')) + const [turno, setTuerno]=usiState('X') + + const pintaFigura=(indexItem)=>{ + + const misCuadros= cuadros.slice() + setCuadros(misCuadros) + if(turno==='X'){ // Verifica los turnos + setTuerno('O') + } + else{ + setTuerno('X') + } + } + return( +

totito

,// Titulo +
+ { //cuerpo e interactividad + cuadros.map((items, indexItem)=>{ + return pintaFigura(indexItem)} + /> + }) + } +
+ ) +} + +export default Tablero