Add Play Online Feature to Website (#9818)

.github/workflows/make.yml

@@ -326,16 +326,18 @@ jobs:
       matrix:
         include:
         - name: Emscripten
-          on: [ 'pull_request' ]
           env:
             FHEROES2_STRICT_COMPILATION: ON
           package_name: fheroes2_emscripten.zip
+          release_name: Emscripten build (latest commit)
+          release_tag: fheroes2-emscripten-sdl2_dev
         - name: Emscripten Multithreaded
-          on: [ 'pull_request' ]
           env:
             FHEROES2_STRICT_COMPILATION: ON
             FHEROES2_WITH_THREADS: ON
           package_name: fheroes2_emscripten_mt.zip
+          release_name: Emscripten Multithreaded build (latest commit)
+          release_tag: fheroes2-emscripten-sdl2-mt_dev
     name: Make (${{ matrix.name }})
     runs-on: ubuntu-latest
     container: emscripten/emsdk:latest
@@ -345,25 +347,33 @@ jobs:
         shell: bash
     steps:
     - uses: actions/checkout@v4
-      if: ${{ contains( matrix.on, github.event_name ) }}
     - name: Install dependencies
-      if: ${{ contains( matrix.on, github.event_name ) }}
       run: |
         sudo apt-get -y update
         sudo apt-get -y install gettext p7zip-full
     - name: Build
-      if: ${{ contains( matrix.on, github.event_name ) }}
       run: |
         emmake make -f Makefile.emscripten -j "$(nproc)"
       env: ${{ matrix.env }}
     - name: Create package
-      if: ${{ contains( matrix.on, github.event_name ) }}
       run: |
         # Translations, H2D files and FH2M maps are already bundled into fheroes2.data
         7z a -bb1 -tzip -- ${{ matrix.package_name }} LICENSE changelog.txt fheroes2.data fheroes2.js fheroes2.wasm ./docs/README.txt ./files/emscripten/*
     - uses: actions/upload-artifact@v4
-      if: ${{ contains( matrix.on, github.event_name ) }}
+      if: ${{ github.event_name == 'pull_request' }}
       with:
         name: ${{ matrix.package_name }}
         path: ${{ matrix.package_name }}
         if-no-files-found: error
+    - uses: ncipollo/release-action@v1
+      if: ${{ github.event_name == 'push' }}
+      with:
+        artifacts: ${{ matrix.package_name }}
+        body: ${{ github.event.head_commit.message }}
+        token: ${{ secrets.GITHUB_TOKEN }}
+        name: ${{ matrix.release_name }}
+        tag: ${{ matrix.release_tag }}
+        allowUpdates: true
+        artifactErrorsFailBuild: true
+        prerelease: true
+        replacesArtifacts: true

.github/workflows/pages.yml

@@ -0,0 +1,59 @@
+name: Build and deploy website
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  id-token: write
+  pages: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build website
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        shell: bash
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./docs
+          destination: ./_site
+      - name: Download Emscripten release
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh release download fheroes2-emscripten-sdl2_dev -D ./dist
+      - name: Extract and prepare website
+        working-directory: ./dist
+        run: |
+          mkdir -p ./site/play-online
+          unzip -q fheroes2_emscripten.zip -d site/play-online
+          cp -r ../_site/* ./site/
+          rm -f fheroes2_emscripten.zip
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist/site
+  deploy:
+    name: Deploy website
+    needs:
+    - build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    defaults:
+      run:
+        shell: bash
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/deploy-pages@v4

.github/workflows/push.yml

@@ -10,6 +10,8 @@ concurrency:
 
 permissions:
   contents: write
+  id-token: write   # To verify the deployment originates from an appropriate source
+  pages: write      # To deploy to Pages
   pull-requests: write
 
 jobs:
@@ -31,6 +33,11 @@ jobs:
     uses: ./.github/workflows/sonarcloud.yml
     secrets:
       SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+  pages:
+    name: Build and deploy website
+    needs:
+    - make
+    uses: ./.github/workflows/pages.yml
   translation:
     name: Translation update
     needs:

docs/deployments/WEB_DEPLOYMENT.md

@@ -0,0 +1,73 @@
+# Website Build and Deployment
+
+This document describes the end-to-end deployment strategy for the fheroes2 site deployment.
+We target Github Pages for hosting and leverage GitHub Actions for automation.
+
+## Functionality
+
+* Builds the documentation site for the fheroes2 project
+* Deploys the site, along with WebAssembly build, to Github Pages on push.
+* Allows end users to view the documentation via the web.
+* Allows end users to click a link and launch the game via the web.
+
+## Build and Deployment Diagram
+
+```mermaid
+sequenceDiagram
+    actor EndUser
+    actor Engineer
+    participant GitHubRepo
+    participant PushAction
+    participant MakeAction
+    participant GitHubReleases
+    participant PagesAction
+    participant GitHubPages
+
+    Engineer->>GitHubRepo: Pushes change to master
+    GitHubRepo->>PushAction: Triggers workflow
+    PushAction->>MakeAction: Calls workflow
+    MakeAction->>GitHubReleases: Uploads release artifacts
+    PushAction->>PagesAction: Triggers workflow
+    PagesAction->>GitHubReleases: Downloads latest release
+    PagesAction->>GitHubPages: Deploys site
+    EndUser->>GitHubPages: Plays game via browser
+```
+
+## Deployment Pipeline Overview
+
+### Trigger
+
+* Deployment is triggered **when a new Git commit is pushed**.
+* A GitHub Action workflow waits for the completion of the build-and-release process (`make.yml` workflow).
+
+### Build Process (Upstream)
+
+* Compiles the FHeroes2 WebAssembly bundle using Emscripten.
+* Packages assets and build artifacts into a ZIP file.
+* Publishes the ZIP as a GitHub Release asset using `ncipollo/release-action`.
+
+### Deploy Process (Downstream)
+
+* Listens for completion of the upstream `Make` workflow.
+* Pulls the latest GitHub Release and extracts the ZIP bundle.
+* Builds and Deploys the Github Pages with the bundle.
+
+## GitHub Workflows Summary
+
+### make.yml
+
+* Triggered on `push` to branch
+* Builds the application
+* Publishes release assets
+
+### pages.yml
+
+* Triggered on completion of `make.yml`
+* Builds Jekyll site
+* Downloads release
+* Deploys to Github Pages
+
+## Future Considerations
+
+* Hook up a custom domain if needed
+* Allow better developer experience around pages/emscripten process for local builds