Added real frontend

Made hostname global and easy to change in docker

cmd/frontend/src/main.js

@@ -1,8 +1,214 @@
-import Vue from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createStore } from "vuex";
+import App from "./App.vue";
+import axios from "axios";
+import VueAxios from "vue-axios";
 
-Vue.config.productionTip = false
+const store = createStore({
+   state() {
+      return {
+         currentGame: "",
+         currentTrack: ``,
+         currentTrackHidden: false,
+         currentlyLoadingTrack: "",
+         specialTrackIsPlaying: false,
+         someoneHasWon: false,
+         winningScore: 20,
+         roundStarted: false,
+         listOfPlayers: [],
+         localPlaylist: [],
+         playlistHistory: [
+            {
+               SongNo: "",
+               Game: "",
+               Song: "",
+            },
+         ],
+         /* Stats */
+         howManyGames: 0,
+         /* Options */
+         stopAfterCurrent: true,
+         hideNextTrack: true,
+      };
+   },
+   mutations: {
+      setCurrentGame(state, payload) {
+         state.currentGame = payload;
+      },
+      setCurrentTrack(state, payload) {
+         state.currentTrack = payload;
+      },
+      setCurrentTrackHidden(state, payload) {
+         state.currentTrackHidden = payload;
+      },
+      setCurrentlyLoadingTrack(state, payload) {
+         state.currentlyLoadingTrack = payload;
+      },
+      setSpecialTrackIsPlaying(state, payload) {
+         state.specialTrackIsPlaying = payload;
+      },
+      setSomeoneHasWon(state, payload) {
+         state.someoneHasWon = payload;
+      },
+      setWinningScore(state, payload) {
+         state.winningScore += payload;
+      },
+      setRoundStarted(state, payload) {
+         state.roundStarted = payload;
+      },
+      updateListOfPlayers(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      changePlayerScore(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].score += payload.scoreToChange;
+      },
+      changePlayerWelcomed(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
+      },
+      changePlayerProfile(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
+      },
+      resetPlayerScore(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      resetPlayerWelcomed(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      updateLocalPlaylist(state, payload) {
+         state.localPlaylist.push(payload);
+      },
+      updatePlaylistHistory(state, payload) {
+         state.playlistHistory = payload;
+      },
+      updateHowManyGames(state, payload) {
+         state.howManyGames = payload;
+      },
+      updateStopAfterCurrent(state, payload) {
+         state.stopAfterCurrent = payload;
+      },
+      updateHideNextTitle(state, payload) {
+         state.hideNextTrack = payload;
+      },
+   },
+   actions: {
+      setCurrentGame(context, payload) {
+         context.commit("setCurrentGame", payload);
+      },
+      setCurrentTrack(context, payload) {
+         context.commit("setCurrentTrack", payload);
+      },
+      setCurrentTrackHidden(context, payload) {
+         context.commit("setCurrentTrackHidden", payload);
+      },
+      setCurrentlyLoadingTrack(context, payload) {
+         context.commit("setCurrentlyLoadingTrack", payload);
+      },
+      setSpecialTrackIsPlaying(context, payload) {
+         context.commit("setSpecialTrackIsPlaying", payload);
+      },
+      setSomeoneHasWon(context, payload) {
+         context.commit("someoneHasWon", payload);
+      },
+      setWinningScore(context, payload) {
+         context.commit("setWinningScore", payload);
+      },
+      setRoundStarted(context, payload) {
+         context.commit("setRoundStarted", payload);
+      },
+      removePlayer(context, payload) {
+         let newPlayerList = this.state.listOfPlayers.filter(
+            (player) => player.playerName != payload
+         );
+         context.commit("updateListOfPlayers", newPlayerList);
+      },
+      addNewPlayer(context, payload) {
+         let newPlayerList = this.state.listOfPlayers;
+         let newPlayer = {
+            playerName: payload,
+            score: 0,
+            welcomed: false,
+            profile: "characters/noCharacter.png",
+         };
+         newPlayerList.push(newPlayer);
+         context.commit("updateListOfPlayers", newPlayerList);
+      },
+      changePlayerScore(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let scoreToChange = payload.score;
+         context.commit("changePlayerScore", {
+            indexOfPlayer,
+            scoreToChange,
+         });
+      },
+      changePlayerWelcomed(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let playerWelcomeTrueOrFalse = payload.welcomeSet;
+         context.commit("changePlayerWelcomed", {
+            indexOfPlayer,
+            playerWelcomeTrueOrFalse,
+         });
+      },
+      changePlayerProfile(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let profileSrc = payload.profile;
+         context.commit("changePlayerProfile", {
+            indexOfPlayer,
+            profileSrc,
+         });
+      },
+      resetPlayerScore(context) {
+         /* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
+         let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
+         for (let i = 0; i < copyOfPlayerList.length; i++) {
+            copyOfPlayerList[i].score = 0;
+         }
+         context.commit("resetPlayerScore", copyOfPlayerList);
+      },
+      resetPlayerWelcomed(context) {
+         /* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
+         let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
+         for (let i = 0; i < copyOfPlayerList.length; i++) {
+            copyOfPlayerList[i].welcomed = false;
+         }
+         context.commit("resetPlayerWelcomed", copyOfPlayerList);
+      },
+      updateLocalPlaylist(context, payload) {
+         context.commit("updateLocalPlaylist", payload);
+      },
+      updatePlaylistHistory(context, payload) {
+         context.commit("updatePlaylistHistory", payload);
+      },
+      updateHowManyGames(context, payload) {
+         context.commit("updateHowManyGames", payload);
+      },
+      updateStopAfterCurrent(context, payload) {
+         context.commit("updateStopAfterCurrent", payload);
+      },
+      updateHideNextTitle(context, payload) {
+         context.commit("updateHideNextTitle", payload);
+      },
+   },
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+   getters: {
+      /* Empty ATM */
+      /* getListOfPlayers: (state) => {
+         return state.listOfPlayers;
+      }, */
+   },
+});
+
+const app = createApp(App);
+
+app.use(store);
+app.use(VueAxios, axios);
+
+app.mount("#app");