fix staging server

.env

@@ -1 +1,2 @@
 VITE_API_ENDPOINT=/api
+VITE_BASE=

ci/.drone.yml

@@ -36,6 +36,7 @@ steps:
       - chmod +x /tmp/moshell_setup.sh
       - echo n | /tmp/moshell_setup.sh
       - echo "VITE_API_ENDPOINT=/IQBall/$DRONE_BRANCH/public/api" >> .env.PROD
+      - echo "VITE_BASE=/IQBall/$DRONE_BRANCH/public" >> .env.PROD
       -
       - /root/.local/bin/moshell ci/build_react.msh
 

ci/build_react.msh

@@ -9,8 +9,6 @@ val drone_branch = std::env("DRONE_BRANCH").unwrap()
 val base = "/IQBall/$drone_branch/public"
 npm run build -- --base=$base --mode PROD
 
-npm run build -- --base=/IQBall/public --mode PROD
-
 // Read generated mappings from build
 val result = $(jq -r 'to_entries|map(.key + " " +.value.file)|.[]' dist/manifest.json)
 val mappings = $result.split('\n')

front/Constants.ts

@@ -2,3 +2,8 @@
  * This constant defines the API endpoint.
  */
 export const API = import.meta.env.VITE_API_ENDPOINT
+
+/**
+ * This constant defines the base app's endpoint.
+ */
+export const BASE = import.meta.env.VITE_BASE

front/views/Editor.tsx

@@ -37,14 +37,14 @@ export interface EditorViewProps {
     tactic: Tactic
     onContentChange: (tactic: TacticContent) => Promise<SaveState>
     onNameChange: (name: string) => Promise<boolean>
-    courtType: string
+    courtType: "PLAIN" | "HALF"
 }
 
 export interface EditorProps {
     id: number
     name: string
     content: string
-    courtType: string
+    courtType: "PLAIN" | "HALF"
 }
 
 /**

front/views/NewTacticPanel.tsx

@@ -3,6 +3,7 @@ import "../style/new_tactic_panel.css"
 
 import plainCourt from "../assets/court/court.svg"
 import halfCourt from "../assets/court/half_court.svg"
+import {BASE} from "../Constants";
 
 export default function NewTacticPanel() {
     return (
@@ -44,14 +45,14 @@ function CourtKindButton({
     return (
         <div
             className="court-kind-button"
-            onClick={() => (location.href = redirect)}>
+            onClick={() => location.href = BASE + redirect}>
             <div className="court-kind-button-details">{details}</div>
             <div className="court-kind-button-top">
                 <div className="court-kind-button-image-div">
                     <img
                         src={image}
                         alt={name}
-                        className="court-kind-button-image"></img>
+                        className="court-kind-button-image"/>
                 </div>
             </div>
             <div className="court-kind-button-bottom">