From a53f05a3208ef61d8425eec2d6f999a2d3ea0626 Mon Sep 17 00:00:00 2001
From: SMITH Emmanuel <contact@jagfx.fr>
Date: Mon, 1 Nov 2021 11:45:14 +0100
Subject: [PATCH] :construction: #77 [feat/config] rework the loading config

Signed-off-by: JAGFx <contact@jagfx.fr>
---
 src/App.vue                                | 103 ++++++++--------
 src/components/dashboards/shared/Map.vue   |  15 ++-
 src/components/header/Header.vue           |   4 +-
 src/components/menu/MenuTabConfig.vue      |   1 +
 src/components/overlays/LoadingOverlay.vue |  10 +-
 src/components/overlays/Overlay.vue        | 115 ++++++++++--------
 src/data/config/config.json                |   2 +-
 src/mixins/ConfigFieldMixin.vue            |   2 +-
 src/mixins/TelemetryMixin.vue              |  16 +--
 src/plugins/app.plugin.js                  |  62 +++++-----
 src/store/modules/_app.js                  |  25 ++--
 src/store/modules/_config.js               |  30 ++---
 src/utils/_app.js                          |  11 +-
 src/utils/_config.js                       |  47 ++++++--
 src/utils/_splashScreen.js                 | 131 +++++++++++++++++++++
 15 files changed, 371 insertions(+), 203 deletions(-)
 create mode 100644 src/utils/_splashScreen.js

diff --git a/src/App.vue b/src/App.vue
index daa80500..49eb4dfd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <template>
   <main :class="`${Object.hasOwnProperty.apply( 'game', telemetry.game ) ? telemetry.game.game.name : ''}`">
-    <LoadingOverlay :display="gameConnected" />
+    <!--    <LoadingOverlay :display="!appReady || !gameConfigLoaded" />-->
     <HistoryOverlay />
-    <Overlay v-if="gameConnected" />
-    <TelemetryEventOverlay v-if="gameConnected" />
-    <Header />
+    <Overlay />
+    <TelemetryEventOverlay v-if="appReady" />
+    <Header v-if="appReady" />
     <component
       :is="currentSkinComponent()"
-      v-if="gameConnected"
+      v-if="appReady"
       v-show="!menuIsDisplayed"
     />
   </main>
@@ -20,19 +20,24 @@ import JAGFxDashboard         from '@/components/dashboards/JAGFxDashboard';
 import ManTGXDashboard        from '@/components/dashboards/ManTGXDashboard';
 import MapDashboard           from '@/components/dashboards/MapDashboard';
 import MercedesAtegoDashboard from '@/components/dashboards/MercedesAtegoDashboard';
-import RdInfoDashboard        from '@/components/dashboards/RdInfoDashboard';
-import ScaniaDashboard        from '@/components/dashboards/ScaniaDashboard';
-import TestDashboard          from '@/components/dashboards/TestDashboard';
-import VolvoFHDashboard       from '@/components/dashboards/VolvoFHDashboard';
-import Header                 from '@/components/header/Header';
-import HistoryOverlay         from '@/components/overlays/HistoryOverlay';
-import LoadingOverlay         from '@/components/overlays/LoadingOverlay';
-import Overlay                from '@/components/overlays/Overlay';
-import TelemetryEventOverlay  from '@/components/overlays/telemetry-event/TelemetryEventOverlay';
-import TelemetryMixin                   from '@/mixins/TelemetryMixin';
-import { changeLocale, fallbackLocale } from '@/utils/_i18n';
-import { history }                      from '@/utils/utils';
-import { mapGetters }         from 'vuex';
+import RdInfoDashboard                  from '@/components/dashboards/RdInfoDashboard';
+import ScaniaDashboard                  from '@/components/dashboards/ScaniaDashboard';
+import TestDashboard                    from '@/components/dashboards/TestDashboard';
+import VolvoFHDashboard                 from '@/components/dashboards/VolvoFHDashboard';
+import Header                           from '@/components/header/Header';
+import HistoryOverlay                   from '@/components/overlays/HistoryOverlay';
+import Overlay                          from '@/components/overlays/Overlay';
+import TelemetryEventOverlay            from '@/components/overlays/telemetry-event/TelemetryEventOverlay';
+import TelemetryMixin from '@/mixins/TelemetryMixin';
+import {
+  loadAppConfig,
+  loadGameConfig,
+  setConfigActive,
+  setLocale,
+  startTelemetryConnection
+}                     from '@/utils/_splashScreen';
+import { history }    from '@/utils/utils';
+import { mapGetters }                   from 'vuex';
 
 export default {
   name:       'App',
@@ -51,7 +56,6 @@ export default {
     Overlay,
     HistoryOverlay,
     Header,
-    LoadingOverlay
   },
   mixins: [TelemetryMixin],
   computed: {
@@ -59,40 +63,39 @@ export default {
       menuIsDisplayed: 'menu/isDisplayed',
       currentSkin:     'skins/current',
       getConfig:       'config/get',
-      configExist: 'config/exist'
+      configExist: 'config/exist',
+      gameConfigLoaded: 'config/gameConfigLoaded',
+      isLaunched: 'app/isLaunched'
     } )
   },
   mounted() {
-    this.$pushALog( 'App launched', history.HTY_ZONE.MAIN );
-
-    this.$store
-        .dispatch( 'config/load' )
-        .then( () => {
-          this.$pushALog( 'Config loaded', history.HTY_ZONE.MAIN );
-
-          const skinToLoad = this.config( 'general_skin_on_load' );
-
-          try {
-            this.$store.commit( 'skins/setConfigActive', skinToLoad );
-
-          } catch ( e ) {
-            this.$pushALog( 'Value set in "general_skin_on_load" was not a valid skin: ' + skinToLoad,
-                history.HTY_ZONE.MAIN,
-                history.HTY_LEVEL.ERROR );
-            this.$store.dispatch( 'skins/setFirstActive' );
-          }
-
-          const locale = this.config( 'general_skin_locale' );
-          try {
-            changeLocale( locale )
-
-          } catch ( e ) {
-            this.$pushALog( `Value set in "general_skin_locale" was not a valid skin: ${locale}. Revert to fallback locale: ${fallbackLocale}`,
-                history.HTY_ZONE.MAIN,
-                history.HTY_LEVEL.ERROR );
-            changeLocale( fallbackLocale )
-          }
-        } );
+    this.$store.dispatch('app/showMessage', {
+      icon: null,
+      title: 'Launching'
+    } )
+    loadAppConfig()
+    .then( setConfigActive )
+    .then( setLocale )
+    .then( startTelemetryConnection )
+    .then( loadGameConfig )
+    .then(() => {
+      //this.$store.commit('app/setLaunched', true)
+      this.$pushALog( 'App launched', history.HTY_ZONE.MAIN );
+      //console.log( 'Launched' );
+    })
+    .catch( e => {
+      this.$store.dispatch( 'app/setError', {
+        message: {
+          icon: null,
+          title: 'Unable to launch',
+          message: 'An error occurred during the launching',
+        },
+        details: {
+          message: e.message,
+          code: 'APP_LAUNCH'
+        }
+      } )
+    } )
 
     /*// HeaderGameInformation connected
      setTimeout(()=> {
diff --git a/src/components/dashboards/shared/Map.vue b/src/components/dashboards/shared/Map.vue
index 7027c3ec..6f93a8e0 100644
--- a/src/components/dashboards/shared/Map.vue
+++ b/src/components/dashboards/shared/Map.vue
@@ -262,10 +262,9 @@
 </template>
 
 <script>
-import testData              from '@/data/scs_sdk_plugin_parsed_data.json';
-import TelemetryMixin        from '@/mixins/TelemetryMixin';
-import { app, history, map } from '@/utils/utils';
-import { mapGetters }        from 'vuex';
+import TelemetryMixin   from '@/mixins/TelemetryMixin';
+import { history, map } from '@/utils/utils';
+import { mapGetters }   from 'vuex';
 
 export default {
   name:   'Map',
@@ -318,10 +317,10 @@ export default {
          this.rotateWithPlayer = map.d.gBehaviorRotateWithPlayer;
 
          // --- Dev
-         if ( app.useFakeData )
-           setTimeout( () => {
-             this.$updateTelemetry( testData )
-           }, 1000 );
+         //if ( app.useFakeData )
+         //  setTimeout( () => {
+         //    this.$updateTelemetry( testData )
+         //  }, 1000 );
          // --- ./Dev
        } )
        .catch( e => {
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index 4f5c0d58..6aa138a1 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="header">
     <HeaderGameInformation
-      v-if="gameConnected"
+      v-if="appReady"
       id="game"
     />
     <div
-      v-if="gameConnected"
+      v-if="appReady"
       v-show="menuIsDisplayed"
       class="wrapper menu h-100"
     >
diff --git a/src/components/menu/MenuTabConfig.vue b/src/components/menu/MenuTabConfig.vue
index c5c87608..7ce156c2 100644
--- a/src/components/menu/MenuTabConfig.vue
+++ b/src/components/menu/MenuTabConfig.vue
@@ -98,6 +98,7 @@ export default {
             this.$pushALog( 'Config upload done', history.HTY_ZONE.MENU_CONFIG );
 
             //console.log( data );
+            // TODO: Change it
             this.$store.commit( 'config/setElms', data );
 
           }, e => {
diff --git a/src/components/overlays/LoadingOverlay.vue b/src/components/overlays/LoadingOverlay.vue
index f836959a..e73ab452 100644
--- a/src/components/overlays/LoadingOverlay.vue
+++ b/src/components/overlays/LoadingOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <b-overlay
-    :show="!display"
+    :show="display"
     :variant="'dark'"
     no-wrap
   >
@@ -24,10 +24,10 @@
               {{ $t(launching.text) }}
             </h1>
             <small class="mb-3">{{ $t(launching.subText) }}</small>
-            <b-spinner
-              :label="$t('Processing')"
-              type="grow"
-            />
+            <!--            <b-spinner-->
+            <!--              :label="$t('Processing')"-->
+            <!--              type="grow"-->
+            <!--            />-->
           </div>
         </transition>
       </div>
diff --git a/src/components/overlays/Overlay.vue b/src/components/overlays/Overlay.vue
index 32412b42..17e48c76 100644
--- a/src/components/overlays/Overlay.vue
+++ b/src/components/overlays/Overlay.vue
@@ -2,68 +2,81 @@
   <div class="overlay">
     <b-overlay
       :show="isOnProcessing"
-      :variant="message.type"
+      :variant="'dark'"
       no-wrap
     >
       <template #overlay>
-        <div class="d-flex justify-content-center flex-column align-items-center">
-          <h1>{{ $t(message.title) }}</h1>
-          <small
-            v-show="message.message !== null"
-            class="mb-3"
-          >{{ $t(message.message) }}</small>
-          <b-spinner
-            v-if="!hasError"
-            :label="$t('Processing')"
-            type="grow"
-          />
-          <button
-            v-if="hasError"
-            class="btn btn-sm btn-outline-ets"
-            @click="close"
-          >
-            OK
-          </button>
-					
-          <div
-            v-if="hasError"
-            class="details mt-3"
-          >
+        <transition
+          mode="out-in"
+          name="slide-fade"
+        >
+          <div class="d-flex justify-content-center flex-column align-items-center">
+            <h1 v-if="message.icon">
+              <span
+                class="mb-3"
+                v-html="message.icon"
+              />
+            </h1>
+            <h1 class="text-center">
+              {{ $t(message.title) }}
+            </h1>
+            <small
+              v-if="message.message !== null"
+              class="mb-3"
+            >{{ $t(message.message) }}</small>
+            <!--          <b-spinner-->
+            <!--            v-if="!hasError"-->
+            <!--            :label="$t('Processing')"-->
+            <!--            type="grow"-->
+            <!--          />-->
+            <button
+              v-if="hasError"
+              class="btn btn-sm btn-outline-ets"
+              @click="close"
+            >
+              OK
+            </button>
+
             <div
-              class="d-flex w-100 flex-column justify-content-center align-items-center"
-              style="min-width:20rem"
+              v-if="hasError"
+              class="details mt-3"
             >
-              <div @click="showDetails = !showDetails">
-                <small class="text-center px-3">{{ $t(( !showDetails ) ? 'Show' : 'Hide') }} {{ $t('more details') }}</small>
-                <i class="fas fa-caret-down" />
-              </div>
-							
               <div
-                v-if="showDetails"
-                class="d-flex flex-column justify-content-between"
+                class="d-flex w-100 flex-column justify-content-center align-items-center"
+                style="min-width:20rem"
               >
-                <div class="h d-flex justify-content-between align-items-center mb-2">
-                  <span>#{{ details.code }}</span>
-                  <button
-                    v-clipboard:copy="JSON.stringify( details, null, 2 )"
-                    class="copy btn btn-sm btn-outline-ets d-flex justify-content-around align-items-center"
-                  >
-                    <i class="far fa-clipboard pr-1" />
-                    {{ $t('Copy') }}
-                  </button>
+                <div @click="showDetails = !showDetails">
+                  <small class="text-center px-3">{{ $t(( !showDetails ) ? 'Show' : 'Hide') }} {{ $t('more details') }}</small>
+                  <i class="fas fa-caret-down" />
+                </div>
+
+                <div
+                  v-if="showDetails"
+                  class="d-flex flex-column justify-content-between"
+                >
+                  <div class="h d-flex justify-content-between align-items-center mb-2">
+                    <span>#{{ details.code }}</span>
+                    <button
+                      v-clipboard:copy="JSON.stringify( details, null, 2 )"
+                      class="copy btn btn-sm btn-outline-ets d-flex justify-content-around align-items-center"
+                    >
+                      <i class="far fa-clipboard pr-1" />
+                      {{ $t('Copy') }}
+                    </button>
+                  </div>
+                  <pre class="w-100 p-2">{{ JSON.stringify( details, null, 2 ) }}</pre>
+                  <span>{{ $t('You can') }} <a
+                    href="https://github.com/JAGFx/ets2-dashboard-skin/issues/new/choose"
+                    target="_blank"
+                  >{{ $t('create an issue') }}</a> {{ $t('and/or contact me at') }} <a
+                    href="mailto:hey@emmanuel-smith.me"
+                    target="_blank"
+                  >hey@emmanuel-smith.me</a> {{ $t('with the above details') }}</span>
                 </div>
-                <pre class="w-100 p-2">{{ JSON.stringify( details, null, 2 ) }}</pre>
-                <span>{{ $t('You can') }} <a
-                  href="https://github.com/JAGFx/ets2-dashboard-skin/issues/new/choose"
-                  target="_blank"
-                >{{ $t('create an issue') }}</a> {{ $t('and/or contact me at') }} <a
-                  href="mailto:hey@emmanuel-smith.me"
-                  target="_blank"
-                >hey@emmanuel-smith.me</a> {{ $t('with the above details') }}</span>
               </div>
             </div>
           </div>
-        </div>
+        </transition>
       </template>
     </b-overlay>
   </div>
diff --git a/src/data/config/config.json b/src/data/config/config.json
index e1d8d1d0..362611bd 100644
--- a/src/data/config/config.json
+++ b/src/data/config/config.json
@@ -5,5 +5,5 @@
 	"general_unit_auto" :      false,
 	"general_h-shift-layout" : "h-shifter",
 	"general_skin_locale" :    "en-EN",
-	"general_job_remaining" :                  "due_date"
+	"general_job_remaining" :  "due_date"
 }
\ No newline at end of file
diff --git a/src/mixins/ConfigFieldMixin.vue b/src/mixins/ConfigFieldMixin.vue
index a40b7cdd..3f51e789 100644
--- a/src/mixins/ConfigFieldMixin.vue
+++ b/src/mixins/ConfigFieldMixin.vue
@@ -36,7 +36,7 @@ export default {
   computed: {
     ...mapGetters( {
       current:          'config/get',
-      appGetProcessing: 'app/getProcessing'
+      appGetProcessing: 'app/isOnProcessing'
     } )
   },
   mounted() {
diff --git a/src/mixins/TelemetryMixin.vue b/src/mixins/TelemetryMixin.vue
index 69995b10..17c4c5f6 100644
--- a/src/mixins/TelemetryMixin.vue
+++ b/src/mixins/TelemetryMixin.vue
@@ -7,7 +7,8 @@ import {
   temperature as uc_temperature,
   volume as uc_volume
 }                from 'units-converter';
-import { store } from '@/store/telemetry.store';
+import { store as telemetryStore } from '@/store/telemetry.store';
+import store from '@/store';
 
 export default {
   name:     'TelemetryMixin',
@@ -20,12 +21,13 @@ export default {
     }
   },
   computed: {
-    telemetry:     () => store.telemetry,
-    gameConnected: () => (app.useFakeData
-       || (store.receivedData && store.telemetry.game.sdkActive
-            && (store.telemetry.truck.brand.id.length !== 0)))
-        && this.config('unit_weight'),
-    receivedData:  () => store.receivedData,
+    telemetry:     () => telemetryStore.telemetry,
+    appReady: () => telemetryStore.receivedData
+        && telemetryStore.telemetry.game.sdkActive
+        && telemetryStore.telemetry.truck.brand.id.length !== 0
+        && store.getters['app/isLaunched']
+        && store.getters['config/gameConfigLoaded'],
+    receivedData:  () => telemetryStore.receivedData,
     jobDeliveryTime() {
       return (this.telemetry.job.market.id === 'external_contracts')
           ? this.telemetry.job.expectedDeliveryTimestamp.value
diff --git a/src/plugins/app.plugin.js b/src/plugins/app.plugin.js
index 1e387691..ed14f2d2 100644
--- a/src/plugins/app.plugin.js
+++ b/src/plugins/app.plugin.js
@@ -6,22 +6,16 @@
  * Time: 	19:43
  */
 
-import store                   from '@/store';
-import { mutations }           from '@/store/telemetry.store';
-import { translate }           from '@/utils/_i18n';
-import { app, event, history } from '@/utils/utils';
-import { io }                  from 'socket.io-client';
+import store              from '@/store';
+import { mutations }      from '@/store/telemetry.store';
+import { pushLog }        from '@/utils/_app';
+import { translate }      from '@/utils/_i18n';
+import { event, history } from '@/utils/utils';
 
 
 export default {
 	install( Vue ) {
-		Vue.prototype.$pushALog = ( message, zone, level = history.HTY_LEVEL.INFO ) => {
-			store.dispatch( 'debug/addLog', {
-				message,
-				zone,
-				level
-			} );
-		};
+		Vue.prototype.$pushALog = pushLog;
 		
 		Vue.prototype.$updateEvent = data => {
 			const theEvent = event.filterInputEvent( data );
@@ -57,28 +51,28 @@ export default {
 		
 		Vue.prototype.$updateTelemetry = updateTelemetry;
 		
-		if ( !app.useFakeData ) {
-			const telemetrySocket = io( 'http://' + window.location.hostname + ':3000' );
-			telemetrySocket.on( 'connect', () => {
-				store.commit( 'app/setLaunch', {
-					icon:    '<i class="fas fa-truck"></i>',
-					text:    'Connected to telemetry server',
-					subText: 'Ready to delivering'
-				} );
-				
-				setTimeout( () => {
-					store.commit( 'app/setLaunch', {
-						icon:    '<i class="fas fa-truck"></i>',
-						text:    'Waiting game connection',
-						subText: 'Run the game to start your job !'
-					} );
-				}, 5000 );
-			} );
-			telemetrySocket.on( 'update', updateTelemetry);
-			telemetrySocket.on( 'log', data => {
-				Vue.prototype.$updateEvent( data );
-			} );
-		}
+		//if ( !app.useFakeData ) {
+		//	const telemetrySocket = io( 'http://' + window.location.hostname + ':3000' );
+		//	telemetrySocket.on( 'connect', () => {
+		//		store.dispatch( 'app/showMessage', {
+		//			icon:    '<i class="fas fa-truck"></i>',
+		//			title:    'Connected to telemetry server',
+		//			message: 'Ready to delivering'
+		//		} );
+		//
+		//		setTimeout( () => {
+		//			store.dispatch( 'app/showMessage', {
+		//				icon:    '<i class="fas fa-truck"></i>',
+		//				title:    'Waiting game connection',
+		//				message: 'Run the game to start your job !'
+		//			} );
+		//		}, 5000 );
+		//	} );
+		//	telemetrySocket.on( 'update', updateTelemetry);
+		//	telemetrySocket.on( 'log', data => {
+		//		Vue.prototype.$updateEvent( data );
+		//	} );
+		//}
 		
 		// ---
 		
diff --git a/src/store/modules/_app.js b/src/store/modules/_app.js
index a0aa6920..5669964e 100644
--- a/src/store/modules/_app.js
+++ b/src/store/modules/_app.js
@@ -10,7 +10,7 @@ import { history } from '@/utils/utils';
 import Vue         from 'vue';
 
 const defaultMessage = {
-	type:    'dark',
+	icon: null,
 	title:   'Processing',
 	message: 'Your app is on processing. Please wait'
 };
@@ -20,28 +20,19 @@ const defaultDetails = {
 	code:    null
 };
 
-const defaultLaunchObject = {
-	icon:    '<i class="fas fa-box"></i>',
-	text:    'App ready !',
-	subText: 'Starting delivering'
-};
-
 const state = () => ({
+	launched: false,
 	processing: false,
 	message:    defaultMessage,
 	details:    defaultDetails,
-	launch:     defaultLaunchObject
 });
 
 // getters
 const getters = {
+	isLaunched: state => state.launched,
 	isOnProcessing: state => state.processing,
 	message:        state => state.message,
 	details:        state => state.details,
-	launch:         state => state.launch,
-	getProcessing:  ( state ) => {
-		return state.processing;
-	}
 };
 
 // actions
@@ -49,6 +40,10 @@ const actions = {
 	startProcessing( { commit } ) {
 		commit( 'setProcessing', true );
 	},
+	showMessage( { commit }, payload ) {
+		commit( 'setProcessing', true );
+		commit( 'setMessage', payload );
+	},
 	endProcessing( { commit } ) {
 		commit( 'setProcessing', false );
 		commit( 'setMessage', defaultMessage );
@@ -65,6 +60,9 @@ const actions = {
 
 // mutations
 const mutations = {
+	setLaunched( state, value ) {
+		state.launched = value;
+	},
 	setProcessing( state, value ) {
 		state.processing = value;
 	},
@@ -73,9 +71,6 @@ const mutations = {
 	},
 	setDetails( state, details ) {
 		state.details = details;
-	},
-	setLaunch( state, launch ) {
-		state.launch = launch;
 	}
 };
 
diff --git a/src/store/modules/_config.js b/src/store/modules/_config.js
index 388b360b..47a17f5a 100644
--- a/src/store/modules/_config.js
+++ b/src/store/modules/_config.js
@@ -1,6 +1,6 @@
-import { emptyData }        from '@/utils/_config';
-import { config }           from '@/utils/utils';
-import Vue                  from 'vue';
+import { emptyData } from '@/utils/_config';
+import { config }    from '@/utils/utils';
+import Vue           from 'vue';
 
 // initial state
 const state = () => (emptyData());
@@ -8,7 +8,7 @@ const state = () => (emptyData());
 // getters
 const getters = {
 	get:     state => elm => {
-		let value = state[ elm ];
+		let value = {...state.app, ...state.game}[ elm ];
 		
 		if ( value === 'true' )
 			value = true;
@@ -23,29 +23,25 @@ const getters = {
 		return getters.exist( elm ) && getters.get( elm ) === true;
 	},
 	exist:   state => elm => {
-		return Object.hasOwnProperty.call( state, elm );
+		return Object.hasOwnProperty.call( {...state.app, ...state.game}, elm );
 	},
 	all:     state => {
-		return state;
-	}
+		return {...state.app, ...state.game};
+	},
+	gameConfigLoaded: state => state.game !== null
 };
 
 // actions
 const actions = {
-	load( { commit } ) {
-		return config
-			.load()
-			.then( data => commit( 'setElms', data ) );
-	}
 };
 
 // mutations
 const mutations = {
-	setElms( state, configs ) {
-		Object.keys( configs ).forEach( ( key ) => {
-			const value = configs[ key ];
-			Vue.set( state, key, value );
-		} );
+	setApp( state, config ) {
+		state.app = config;
+	},
+	setGame( state, config ) {
+		state.game = config;
 	},
 	setElm( state, elm ) {
 		Vue.set( state, elm.id, elm.value );
diff --git a/src/utils/_app.js b/src/utils/_app.js
index 280e63bb..b3f8a9b3 100644
--- a/src/utils/_app.js
+++ b/src/utils/_app.js
@@ -6,7 +6,8 @@
  * Time: 	18:36
  */
 
-import store   from '@/store';
+import store       from '@/store';
+import { history } from '@/utils/utils';
 import countryList from 'country-list';
 import emojiFlags  from 'emoji-flags';
 import momentjs    from 'moment-timezone';
@@ -116,6 +117,14 @@ export const betweenFloat = ( data, a, b ) => {
 	return parseFloat( data ) >= a && parseFloat( data ) <= b;
 };
 
+export const pushLog = ( message, zone, level = history.HTY_LEVEL.INFO ) => {
+	store.dispatch( 'debug/addLog', {
+		message,
+		zone,
+		level
+	} );
+};
+
 export const formatConstants = {
 	DATE_FORMAT_NONE,
 	DATE_FORMAT_SHORT,
diff --git a/src/utils/_config.js b/src/utils/_config.js
index 115fa906..becd60fe 100644
--- a/src/utils/_config.js
+++ b/src/utils/_config.js
@@ -8,7 +8,7 @@
 
 import fieldValues from '@/data/config-field-values.json';
 import defaultGeneralConfig from '@/data/config/config.json';
-//import defaultEts2Config from '@/data/config/config.ets2.json';
+import defaultEts2Config from '@/data/config/config.ets2.json';
 import store       from '@/store';
 import axios       from 'axios';
 import FileSaver   from 'file-saver';
@@ -33,8 +33,11 @@ export const generateEmptyData = ( config, configSkins ) => {
 	return emptyData;
 };
 
-export const emptyData = () => {
-	return {...defaultGeneralConfig, ...null};
+export const emptyData = (withGame = false) => {
+	return {
+		app: defaultGeneralConfig,
+		game: withGame ? defaultEts2Config : null
+	};
 };
 
 export const save = async data => {
@@ -83,20 +86,16 @@ export const download = () => {
 };
 
 export const load = () => {
-	store.dispatch( 'app/startProcessing' );
-	
 	if ( process.env.VUE_APP_USE_FAKE_DATA === 'true' )
 		return new Promise( resolve => {
 			setTimeout( () => {
-				store.dispatch( 'app/endProcessing' );
-				resolve( emptyData() );
+				resolve( emptyData().app );
 			}, 1000 );
 		} );
 	
 	return axios.get( '/config' )
 				.then( response => {
-					store.dispatch( 'app/endProcessing' );
-					return { ...response.data.app, ...response.data.game };
+					return response.data.app;
 				}, error => {
 					store.dispatch( 'app/setError', {
 						message: {
@@ -109,10 +108,37 @@ export const load = () => {
 							code:  'CONFIG_LOAD_FAILED'
 						}
 					} );
-					return emptyData();
+					return emptyData().app;
 				} );
 };
 
+export const loadGameConfig = () => {
+	if ( process.env.VUE_APP_USE_FAKE_DATA === 'true' )
+		return new Promise( resolve => {
+			setTimeout( () => {
+				resolve( emptyData(true).game );
+			}, 1000 );
+		} );
+	
+	return axios.get( '/config' )
+				.then( response => {
+					return response.data.game;
+				}, error => {
+					store.dispatch( 'app/setError', {
+						message: {
+							type:    'dark',
+							title:   error.name,
+							message: error.message
+						},
+						details: {
+							error: error,
+							code:  'CONFIG_LOAD_FAILED'
+						}
+					} );
+					return emptyData(true).game;
+				} );
+}
+
 export const upload = file => {
 	return new Promise( ( resolve, reject ) => {
 		try {
@@ -154,7 +180,6 @@ export const getFieldValues = fieldId => {
 	if ( Object.hasOwnProperty.call( fieldValues, fieldId ) )
 		return new Promise( resolve => resolve( fieldValues[ fieldId ] ) );
 	
-	// TODO Use async
 	else return new Promise( resolve => resolve( [] ) );
 };
 
diff --git a/src/utils/_splashScreen.js b/src/utils/_splashScreen.js
new file mode 100644
index 00000000..e732ce3f
--- /dev/null
+++ b/src/utils/_splashScreen.js
@@ -0,0 +1,131 @@
+/**
+ * @author:	Emmanuel SMITH <hey@emmanuel-smith.me>
+ * project:	ets2-dashboard-skin
+ * file: 	_splashScreen.js
+ * Date: 	27/10/2021
+ * Time: 	21:41
+ */
+
+import testData                         from '@/data/scs_sdk_plugin_parsed_data.json';
+import store                            from '@/store';
+import { pushLog }                      from '@/utils/_app';
+import { changeLocale, fallbackLocale } from '@/utils/_i18n';
+import { app, history, config }                 from '@/utils/utils';
+import { io }                           from 'socket.io-client';
+import Vue                              from 'vue';
+
+export const loadAppConfig = () => {
+	store.dispatch('app/showMessage', {
+		icon: null,
+		title: 'Launching',
+		message: 'Load app configuration file'
+	} )
+	
+	return config
+		.load()
+		.then( data => {
+			pushLog( 'Config loaded', history.HTY_ZONE.MAIN );
+			store.commit( 'config/setApp', data )
+		} );
+};
+
+export const setConfigActive = () => {
+	store.dispatch('app/showMessage', {
+		icon: null,
+		title: 'Launching',
+		message: 'Set startup skin'
+	} )
+	
+	return new Promise( resolve  => {
+		const skinToLoad = store.getters[ 'config/get' ]( 'general_skin_on_load' );
+		
+		try {
+			store.commit( 'skins/setConfigActive', skinToLoad );
+			console.log( 'Plop' );
+			resolve();
+			
+		} catch ( e ) {
+			pushLog( 'Value set in "general_skin_on_load" was not a valid skin: ' + skinToLoad,
+				history.HTY_ZONE.MAIN,
+				history.HTY_LEVEL.ERROR );
+			store.dispatch( 'skins/setFirstActive' );
+			resolve();
+		}
+	} );
+};
+
+export const setLocale = () => {
+	store.dispatch('app/showMessage', {
+		icon: null,
+		title: 'Launching',
+		message: 'Set language'
+	} )
+	
+	return new Promise( resolve => {
+		const locale = store.getters[ 'config/get' ]( 'general_skin_locale' );
+		try {
+			changeLocale( locale );
+			console.log( 'Hellow' );
+			resolve();
+			
+		} catch ( e ) {
+			pushLog( `Value set in "general_skin_locale" was not a valid skin: ${ locale }. Revert to fallback locale: ${ fallbackLocale }`,
+				history.HTY_ZONE.MAIN,
+				history.HTY_LEVEL.ERROR );
+			changeLocale( fallbackLocale );
+			resolve( e );
+		}
+	} );
+};
+
+export const loadGameConfig = () => {
+	store.dispatch('app/showMessage', {
+		icon: null,
+		title: 'Launching',
+		message: 'Load configuration game'
+	} )
+	
+	return config
+		.loadGameConfig()
+		.then( data => {
+			pushLog( 'Game config loaded', history.HTY_ZONE.MAIN );
+			store.commit( 'config/setGame', data )
+		} );
+};
+
+export const startTelemetryConnection = () => {
+	store.dispatch('app/showMessage', {
+		icon: null,
+		title: 'Launching',
+		message: 'Start '
+	} )
+	
+	if ( !app.useFakeData ) {
+		const telemetrySocket = io( 'http://' + window.location.hostname + ':3000' );
+		telemetrySocket.on( 'connect', () => {
+			store.dispatch( 'app/showMessage', {
+				icon:    '<i class="fas fa-truck"></i>',
+				title:    'Connected to telemetry server',
+				message: 'Ready to delivering'
+			} );
+			
+			setTimeout( () => {
+				store.dispatch( 'app/showMessage', {
+					icon:    '<i class="fas fa-truck"></i>',
+					title:    'Waiting game connection',
+					message: 'Run the game to start your job !'
+				} );
+			}, 5000 );
+		} );
+		telemetrySocket.on( 'update', data => {
+			Vue.prototype.$updateEvent( data );
+		});
+		telemetrySocket.on( 'log', data => {
+			Vue.prototype.$updateEvent( data );
+		} );
+	} else {
+		setTimeout( () => {
+			Vue.prototype.$updateTelemetry( testData )
+		}, 1000 );
+	}
+}
\ No newline at end of file