diff --git a/Dockerfile b/Dockerfile index 1861d40..dd29537 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,13 +1,13 @@ FROM node:20-alpine as builder WORKDIR /app COPY . . -ARG VITE_APP_BACKEND_ADDRESS -ENV VITE_APP_BACKEND_ADDRESS $VITE_APP_BACKEND_ADDRESS +ARG VITE_SOCKET_URL +ENV VITE_SOCKET_URL $VITE_SOCKET_URL RUN npm install RUN npm run build FROM nginx:1.25.4-alpine-slim as prod COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d -EXPOSE 3000 +EXPOSE 5173 CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/Jenkinsfile b/Jenkinsfile index db01716..68474ff 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -4,13 +4,14 @@ pipeline { environment { IMAGE_NAME = "darkbird/minesweeper-frontend:latest" REGISTRY_IMAGE_NAME = "registry.xdarkbird.duckdns.org/darkbird/minesweeper-frontend:latest" + VITE_SOCKET_URL = "http://minesweeper-backend.darkbird.es" } stages { stage('Docker build') { steps { sh """ - docker build --build-arg VITE_SOCKET_URL=http://minesweeper-backend.darkbird.es --network="host" -t ${IMAGE_NAME} . + docker build --build-arg VITE_SOCKET_URL=${VITE_SOCKET_URL} --network="host" -t ${IMAGE_NAME} . """ } } diff --git a/nginx.conf b/nginx.conf index 66f6733..a9db578 100644 --- a/nginx.conf +++ b/nginx.conf @@ -1,5 +1,5 @@ server { - listen 3000; + listen 5173; root /usr/share/nginx/html; index index.html; etag on; diff --git a/src/App.jsx b/src/App.jsx index e21a63c..7eb076d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,20 +7,39 @@ import Game from './components/Game'; const App = () => { const [room, setRoom] = useState({}); + useEffect(() => { + console.log("Attempting to connect socket"); + socket.connect(); + + const cleanup = setupSocketEffect(socket, (room) => { + console.log("Room state updated", room); + setRoom(room); + }); + + return () => { + cleanup(); + socket.disconnect(); + }; + }, []); + useEffect(() => setupSocketEffect(socket, setRoom), []); const handleDisconnect = () => { + console.log('Disconnecting'); socket.disconnect(); } const handleJoinRoom = (username, room) => { + console.log('Joining room', room); socket.connect(); socket.emit('joinRoom', { username, room }); } const handleCreateRoom = (username, rows, cols, bombs, autoflag, gameMode) => { + console.log('Creating room', { username, rows, cols, bombs, autoflag, gameMode }); socket.connect(); socket.emit('createRoom', { username, rows, cols, bombs, autoflag, gameMode }); + console.log(socket); }; const handleTileClick = (tileId) => { diff --git a/src/socket.js b/src/socket.js index 2f0bccf..621dd93 100644 --- a/src/socket.js +++ b/src/socket.js @@ -1,56 +1,64 @@ -import { io } from 'socket.io-client'; +import { io } from "socket.io-client"; -const URL = 'http://192.168.0.134:5174'; -console.log('Backend URL', URL); +const URL = import.meta.env.VITE_SOCKET_URL || "http://minesweeper-backend.darkbird.es:5174"; +console.log("Backend URL", URL); export const socket = io(URL, { autoConnect: false, - transports: ['websocket'], + transports: ["websocket"], withCredentials: true, }); export const setupSocketEffect = (socket, setRoom) => { + console.log("Setting up socket effect", socket, setRoom); + const socketHandlers = [ { - event: 'connect', + event: "connect", handler: () => { + console.log("Socket connected"); } }, { - event: 'disconnect', + event: "disconnect", handler: () => { + console.log("Socket disconnected"); setRoom(null); } }, { - event: 'error', + event: "error", handler: (error) => { - console.error(error); + console.error("Socket error", error); } }, { - event: 'youJoinedRoom', + event: "youJoinedRoom", handler: (data) => { + console.log("Joined room", data); setRoom({ ...data }); } }, { - event: 'roomUserJoined', + event: "roomUserJoined", handler: (data) => { + console.log("User joined room", data); setRoom({ ...data }); } }, { - event: 'roomUserLeft', + event: "roomUserLeft", handler: (data) => { + console.log("User left room", data); setRoom({ ...data }); } }, { - event: 'updateRoom', + event: "updateRoom", handler: (data) => { + console.log("Room updated", data); setRoom({ ...data }); } - } + }, ]; socketHandlers.forEach(({ event, handler }) => { diff --git a/vite.config.js b/vite.config.js index c6050ce..599d6af 100644 --- a/vite.config.js +++ b/vite.config.js @@ -7,7 +7,7 @@ export default defineConfig(({ command, mode }) => { return { plugins: [react()], server: { - port: 3000, + port: 5173, host: true, watch: { usePolling: true,