diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
new file mode 100644
index 0000000..d2508d3
--- /dev/null
+++ b/app/[gameID]/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from 'next/navigation';
+import { socket } from "../../socket";
+
+//import Card from '@/components/Card';
+
+//import type { GameCard } from '@/types';
+
+export default function GamePage() {
+ const { gameID } = useParams();
+
+ const [cards, setCards] = useState();
+
+ useEffect(() => {
+ socket.emit('join', gameID);
+
+ socket.on('init', data => {
+ console.log('init', data);
+ setCards(data.id);
+ });
+
+ socket.on('card-flipped', (data) => {
+ console.log('>>>', data);
+ setCards(data.id);
+ });
+
+ return () => {
+ socket.off('init');
+ socket.off('card-flipped');
+ };
+ }, []);
+
+ return A Page! {cards}
+}
+
+/*
+export default function GamePage() {
+ const { gameID } = useParams();
+
+ const [cards, setCards] = useState([]);
+
+ useEffect(() => {
+ socket.emit('join', gameID);
+
+ socket.on('init', data => {
+ console.log('init', data);
+ setCards(data.cards);
+ });
+
+ socket.on('card-flipped', (data) => {
+ console.log('>>>', data);
+ setCards(data.cards);
+ });
+
+ return () => {
+ socket.off('init');
+ socket.off('card-flipped');
+ };
+ }, []);
+
+ const flipCard = (cardID: string) => {
+ socket.emit('flip-card', {
+ cardID,
+ gameID,
+ });
+ };
+
+ return cards.length ? (
+
+ Game ID: {gameID}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
a
;
-}
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index b804a59..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Link from "next/link";
-
-export default function Home() {
- return (
-
- -
- /a (Pages Router)
-
- -
- b (App Router)
-
-
- );
-}
diff --git a/server.ts b/server.ts
index 5822160..048ccf8 100644
--- a/server.ts
+++ b/server.ts
@@ -1,21 +1,57 @@
-import { createServer } from "http";
-import { parse } from "url";
-import next from "next";
+import next from 'next';
+import { createServer } from 'http';
+import { Server as SocketIOServer, type Socket } from 'socket.io';
-const port = parseInt(process.env.PORT || "3000", 10);
-const dev = process.env.NODE_ENV !== "production";
-const app = next({ dev });
-const handle = app.getRequestHandler();
+//import GameStore from '@/lib/GameStore';
+
+const dev = process.env.NODE_ENV !== 'production';
+const hostname = 'localhost';
+const port = 3000;
+
+// when using middleware `hostname` and `port` must be provided
+const app = next({ dev, hostname, port });
+const handler = app.getRequestHandler();
+
+//const gameStore = new GameStore();
app.prepare().then(() => {
- createServer((req, res) => {
- const parsedUrl = parse(req.url!, true);
- handle(req, res, parsedUrl);
- }).listen(port);
+ const httpServer = createServer(handler);
- console.log(
- `> Server listening at http://localhost:${port} as ${
- dev ? "development" : process.env.NODE_ENV
- }`,
- );
+ const io = new SocketIOServer(httpServer);
+
+ io.on('connection', (socket: Socket) => {
+ console.log(`Client connected: ${socket.id}`);
+
+ socket.on('join', (gameID) => {
+ socket.join(gameID);
+ //const game = gameStore.joinGame(gameID, socket.id);
+
+ console.log(`Socket ${socket.id} joined game ${gameID}`)
+
+ //socket.emit('init', { cards: game.cards });
+ socket.emit('init', { id: socket.id });
+ })
+
+ socket.on('flip-card', ({ gameID, cardID }) => {
+ console.log('Card flipped:', { gameID, cardID });
+ //const game = gameStore.flipCard(gameID, cardID);
+ //io.to(gameID).emit('card-flipped', { gameID, cards: game.cards });
+ io.to(gameID).emit('card-flipped', { id: socket.id });
+ });
+
+ socket.on('disconnect', (obj) => {
+ console.log(`Client disconnected: ${socket.id}`);
+ console.log(obj);
+ console.log(socket);
+ });
+ });
+
+ httpServer
+ .once('error', (err) => {
+ console.error('Server error:', err);
+ process.exit(1);
+ })
+ .listen(port, () => {
+ console.log(`> Ready on http://${hostname}:${port}`);
+ });
});
diff --git a/socket.ts b/socket.ts
new file mode 100644
index 0000000..7f64c15
--- /dev/null
+++ b/socket.ts
@@ -0,0 +1,5 @@
+"use client";
+
+import { io } from 'socket.io-client';
+
+export const socket = io();