DarkBirdOrg/minesweeper-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix deployment
All checks were successful
gitea/minesweeper-frontend/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Jose134 2025-01-22 12:00:43 +01:00
parent 9e20fe6829
commit 37e43f25b0
9 changed files with 37 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Dockerfile
View File

@ -1,13 +1,21 @@
FROM node:20-alpine as builder FROM node:20-alpine
WORKDIR /app WORKDIR /app
COPY . . COPY . .
ARG VITE_APP_BACKEND_ADDRESS ARG VITE_SOCKET_URL
ENV VITE_APP_BACKEND_ADDRESS $VITE_APP_BACKEND_ADDRESS ENV VITE_SOCKET_URL $VITE_SOCKET_URL
RUN npm install RUN npm install
RUN npm run build CMD ["npm", "run", "dev"]
FROM nginx:1.25.4-alpine-slim as prod # FROM node:20-alpine as builder
COPY --from=builder /app/dist /usr/share/nginx/html # WORKDIR /app
COPY nginx.conf /etc/nginx/conf.d # COPY . .
EXPOSE 3000 # ARG VITE_SOCKET_URL
CMD ["nginx", "-g", "daemon off;"] # 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 5173
# CMD ["nginx", "-g", "daemon off;"]

3
Jenkinsfile vendored
View File

@ -4,13 +4,14 @@ pipeline {
environment { environment {
IMAGE_NAME = "darkbird/minesweeper-frontend:latest" IMAGE_NAME = "darkbird/minesweeper-frontend:latest"
REGISTRY_IMAGE_NAME = "registry.xdarkbird.duckdns.org/darkbird/minesweeper-frontend:latest" REGISTRY_IMAGE_NAME = "registry.xdarkbird.duckdns.org/darkbird/minesweeper-frontend:latest"
VITE_SOCKET_URL = "http://darkbird.es:5174"
} }
stages { stages {
stage('Docker build') { stage('Docker build') {
steps { steps {
sh """ 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} .
""" """
} }
} }

1
index.html
View File

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minesweeper</title> <title>Minesweeper</title>
</head> </head>

2
nginx.conf
View File

@ -1,5 +1,5 @@
server { server {
listen 3000; listen 5173;
root /usr/share/nginx/html; root /usr/share/nginx/html;
index index.html; index index.html;
etag on; etag on;

2
src/components/Game.jsx
View File

@ -21,7 +21,7 @@ const Game = ({ room, playerSocketId, handleDisconnect, handleTileClick, handleS
<div> <div>
<div style={{ paddingLeft: '2em', paddingRight: '2em' }}> <div style={{ paddingLeft: '2em', paddingRight: '2em' }}>
{ {
room.gameMode === 'turns' room.gameMode === 'rounds'
? <button ? <button
className="confirm-button" className="confirm-button"
disabled={isSelectionConfirmed()} disabled={isSelectionConfirmed()}

4
src/components/RoomInfo.jsx
View File

@ -21,10 +21,10 @@ const RoomInfo = ({ room, handleDisconnect }) => {
room.players.map((user, idx) => room.players.map((user, idx) =>
<li key={idx}> <li key={idx}>
<span className="player-color-indicator" style={{ backgroundColor: user.color }}></span> <span className="player-color-indicator" style={{ backgroundColor: user.color }}></span>
{user.socketId === room.currentPlayer ? <span>&nbsp;&rarr;</span> : <></>} {room.gameMode === "turns" && user.socketId === room.currentPlayer ? <span>&nbsp;&rarr;</span> : <></>}
{user.tombstone ? <span>💀</span> : <></>} {user.tombstone ? <span>💀</span> : <></>}
<span>{user.name}</span> <span>{user.name}</span>
{user.confirmedSelection ? <span>✅</span> : <></>} {room.gameMode === "rounds" && user.confirmedSelection ? <span>✅</span> : <></>}
</li>) </li>)
} }
</ul> </ul>

3
src/main.jsx
View File

@ -1,10 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import './index.css' import './index.css'
import App from './App.jsx' import App from './App.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
<StrictMode>
<App /> <App />
</StrictMode>,
) )

26
src/socket.js
View File

@ -1,56 +1,56 @@
import { io } from 'socket.io-client'; import { io } from "socket.io-client";
const URL = 'http://192.168.0.134:5174'; const URL = import.meta.env.VITE_SOCKET_URL || "http://darkbird.es:5174";
console.log('Backend URL', URL); console.log("Backend URL", URL);
export const socket = io(URL, { export const socket = io(URL, {
autoConnect: false, autoConnect: false,
transports: ['websocket'], transports: ["websocket"],
withCredentials: true, withCredentials: true,
}); });
export const setupSocketEffect = (socket, setRoom) => { export const setupSocketEffect = (socket, setRoom) => {
const socketHandlers = [ const socketHandlers = [
{ {
event: 'connect', event: "connect",
handler: () => { handler: () => {
} }
}, },
{ {
event: 'disconnect', event: "disconnect",
handler: () => { handler: () => {
setRoom(null); setRoom(null);
} }
}, },
{ {
event: 'error', event: "error",
handler: (error) => { handler: (error) => {
console.error(error); console.error("Socket error", error);
} }
}, },
{ {
event: 'youJoinedRoom', event: "youJoinedRoom",
handler: (data) => { handler: (data) => {
setRoom({ ...data }); setRoom({ ...data });
} }
}, },
{ {
event: 'roomUserJoined', event: "roomUserJoined",
handler: (data) => { handler: (data) => {
setRoom({ ...data }); setRoom({ ...data });
} }
}, },
{ {
event: 'roomUserLeft', event: "roomUserLeft",
handler: (data) => { handler: (data) => {
setRoom({ ...data }); setRoom({ ...data });
} }
}, },
{ {
event: 'updateRoom', event: "updateRoom",
handler: (data) => { handler: (data) => {
setRoom({ ...data }); setRoom({ ...data });
} }
} },
]; ];
socketHandlers.forEach(({ event, handler }) => { socketHandlers.forEach(({ event, handler }) => {

2
vite.config.js
View File

@ -7,7 +7,7 @@ export default defineConfig(({ command, mode }) => {
return { return {
plugins: [react()], plugins: [react()],
server: { server: {
port: 3000, port: 5173,
host: true, host: true,
watch: { watch: {
usePolling: true, usePolling: true,