Merge pull request #1 from Triumph-TF2/dev

Production Run

.github/workflows/build.yml

@@ -0,0 +1,40 @@
+name: Build Docker Image
+
+on:
+    push:
+        branches: [ "main" ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+    build-and-push-image:
+      runs-on: ubuntu-latest
+
+      permissions:
+        contents: read
+        packages: write
+        attestations: write
+        id-token: write
+
+      steps:
+        -
+          name: Set up QEMU
+          uses: docker/setup-qemu-action@v3
+        -
+          name: Set up Docker Buildx
+          uses: docker/setup-buildx-action@v3
+        -
+          name: Login to GitHub Container Registry
+          uses: docker/login-action@v3
+          with:
+            registry: ${{ env.REGISTRY }}
+            username: ${{ github.actor }}
+            password: ${{ secrets.GITHUB_TOKEN }}
+
+        - name: Build and push Docker image
+          uses: docker/build-push-action@v6
+          with:
+            push: true
+            tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest

Dockerfile

@@ -0,0 +1,26 @@
+FROM node:20.16.0-bookworm
+LABEL maintainer="Shigbeard <[email protected]>"
+LABEL version="1.0"
+LABEL description="Dockerfile for the TriumphTF2 website"
+
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the package.json and package-lock.json
+COPY package*.json ./
+
+# Install the dependencies
+RUN npm install
+
+# Copy the rest of the files
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Expose the port
+EXPOSE 80
+
+# Start the server
+ENTRYPOINT [ "npm", "run", "start" ]

app/components/Server.tsx

@@ -42,6 +42,19 @@ export const Server: React.FC<QueryResult> = (props) => {
 
         return `${formattedMinutes}:${formattedSeconds}`;
     }
+    const connectTo = (connect: string | undefined) => {
+        return () => {
+            if (connect) {
+                window.prompt(`We are about to use the following Steam URI to connect to the server
+
+steam://connect/${connect}
+
+Your browser may ask you to allow us to do this.
+If it does not allow this, here is the connect string.`, `connect ${connect};`);
+                window.open(`steam://connect/${connect}`);
+            }
+        }
+    }
     return (
         <div className='rounded-lg border dark:bg-gray-700 bg-gray-300 text-black dark:text-white font-bold sm:shadow w-full max-w-md'>
             <div className="flex-col space-y-1.5 p-6 dark:bg-gray-300 bg-gray-700 dark:text-black text-white px-4 py-3 flex items-center justify-between">
@@ -69,7 +82,7 @@ export const Server: React.FC<QueryResult> = (props) => {
                     <span className='font-medium'>Map: {props.map || 'MAPNAME'}</span>
                 </div>
                 <div className='mt-4 text-sm text-white hidden sm:block'>
-                    <button className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded'>
+                    <button onClick={connectTo(props.connect)} className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded'>
                         Connect
                     </button>
                 </div>