Feature/207 set up state for sockets

src/App.vue

@@ -8,69 +8,69 @@
 import Component from 'vue-class-component'
 import Vue from 'vue'
 import { namespace } from 'vuex-class'
-import { Namespaces } from '@/store'
-import { Api } from './store/modules/types'
+import { AppRoomAction, Locale } from '@/store/modules/app/room'
+import { SocketRoomAction, Game, SocketRoomGetters } from '@/store/modules/socket/room'
+import { AppAuthenticationActions, AppAuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/app/authentication'
+import { Api } from './store/types'
 import { getWowsApiData } from '@/games/wows/api'
-import { GameName, Locale, RoomAction, RoomGetters } from '@/store/modules/room'
-import { AuthenticationActions, AuthenticationGetters, ExtendedJWT, JWT_KEY } from '@/store/modules/authentication'
+import { Namespaces } from '@/store'
 
-const authNamespace = namespace(Namespaces.AUTH)
-const roomNamespace = namespace(Namespaces.ROOM)
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
-  @Component({
-    name: 'TheApp'
-  })
+@Component({
+  name: 'TheApp'
+})
 export default class TheApp extends Vue {
-    @roomNamespace.Action(RoomAction.SET_GAME_NAME) setGameName!: (name: string) => void
-    @roomNamespace.Action(RoomAction.SET_GAME_API) setGameApi!: (api: Api) => void
-    @roomNamespace.Action(RoomAction.SET_LOCALE) setLocale!: (locale: Locale) => void
-    @roomNamespace.Getter(RoomGetters.GAME_NAME) game!: GameName
-    @authNamespace.Action(AuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
-    @authNamespace.Action(AuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
-    @authNamespace.Action(AuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
-    @authNamespace.Action(AuthenticationActions.LOAD_PROVIDERS) loadProviders!: () => void
-    @authNamespace.Getter(AuthenticationGetters.JWT) jwt!: ExtendedJWT
+  @SocketRoom.Action(SocketRoomAction.SET_GAME) setGame!: (name: string) => void
+  @AppRoom.Action(AppRoomAction.ADD_API) addApi!: (api: Api) => void
+  @AppRoom.Action(AppRoomAction.SET_LOCALE) setLocale!: (locale: Locale) => void
+  @SocketRoom.Getter(SocketRoomGetters.GAME) game!: Game
+  @AppAuthentication.Action(AppAuthenticationActions.AUTHENTICATE) authenticate!: (token: string) => Promise<ExtendedJWT>
+  @AppAuthentication.Action(AppAuthenticationActions.CHECK_TOKEN_EXPIRY) checkTokenExpiry!: () => Promise<boolean>
+  @AppAuthentication.Action(AppAuthenticationActions.STORE_TOKEN) storeToken!: (token: string) => void
+  @AppAuthentication.Action(AppAuthenticationActions.LOAD_PROVIDERS) loadProviders!: () => void
+  @AppAuthentication.Getter(AppAuthenticationGetters.JWT) jwt!: ExtendedJWT
 
-    async created () {
-      this.setGameName(GameName['WOWS'])
-      this.setLocale(Locale['EN'])
-      this.initAuthentication()
-    }
+  async created () {
+    this.setGame(Game['WOWS'])
+    this.setLocale(Locale['EN'])
+    this.initAuthentication()
+  }
 
-    async initAuthentication () {
-      this.loadProviders()
-      const localToken = localStorage.getItem(JWT_KEY)
+  async initAuthentication () {
+    this.loadProviders()
+    const localToken = localStorage.getItem(JWT_KEY)
 
-      if (this.checkTokenExpiry()) {
-        if (this.$route?.query?.code) {
-          this.authenticate(this.$route.query.code as string).then(jwt => this.storeToken(jwt.encoded))
-        } else if (localToken !== null) {
-          this.authenticate(localToken)
-        }
-        if (localToken) {
-          switch (this.game) {
-            case GameName['WOWS']:
-              await getWowsApiData(localToken, this.setGameApi)
-              break
-            default:
-              break
-          }
+    if (this.checkTokenExpiry()) {
+      if (this.$route?.query?.code) {
+        this.authenticate(this.$route.query.code as string).then(jwt => this.storeToken(jwt.encoded))
+      } else if (localToken !== null) {
+        this.authenticate(localToken)
+      }
+      if (localToken) {
+        switch (this.game) {
+          case Game['WOWS']:
+            await getWowsApiData(localToken, this.addApi)
+            break
+          default: break
         }
       }
     }
+  }
 }
 </script>
 <style lang="scss">
-  #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    height: 100vh;
-    background-color: $room-secondary;
-    font-size: $app-fontsize;
-  }
-
-  html, .v-application--wrap {
-    overflow: hidden;
-  }
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  background-color: $room-secondary;
+  font-size: $app-fontsize;
+}
+html, .v-application--wrap {
+  overflow: hidden;
+}
 </style>

src/components/TheCanvas.vue

@@ -19,36 +19,46 @@
 import Component, { mixins } from 'vue-class-component'
 import { Tool } from '@/tools/Tool'
 import { CanvasElement, VueKonvaLayer, VueKonvaStage } from '@/types/Canvas'
-import { Action, Getter } from 'vuex-class'
-import { ToolGetters } from '@/store/modules/tools'
-import { CanvasAction, CanvasGetters } from '@/store/modules/canvas'
+import { namespace } from 'vuex-class'
+import { AppToolGetters } from '@/store/modules/app/tools'
+import { SocketCanvasAction, SocketCanvasGetters } from '@/store/modules/socket/canvas'
 import Konva from 'konva'
 import { EventBus } from '@/event-bus'
 import PointerEventMapper, { CustomStageConfig } from '@/util/PointerEventMapper'
 import { KonvaPointerEvent } from 'konva/types/PointerEvents'
 import HandleRenderShapes from '@/util/HandleRenderShapes'
-import { StageActions, StageGetters } from '@/store/modules/stage'
-import { LayerActions, LayerGetters } from '@/store/modules/layer'
-import { CanvasEntityGetters, CanvasEntityState } from '@/store/modules/canvasEntity'
+import { AppStageActions, AppStageGetters } from '@/store/modules/app/stage'
+import { SocketStageActions, SocketStageGetters } from '@/store/modules/socket/stage'
+import { AppLayerActions, AppLayerGetters } from '@/store/modules/app/layer'
+import { AppCanvasEntityGetters, AppCanvasEntityState } from '@/store/modules/app/canvasEntity'
 import CanvasSockets from '@/mixins/CanvasSockets'
 import StageWatcher from '@/mixins/StageWatcher'
+import { Namespaces } from '@/store'
+
+const AppCanvasEntity = namespace(Namespaces.APP_CANVAS_ENTITY)
+const AppLayer = namespace(Namespaces.APP_LAYER)
+const AppStage = namespace(Namespaces.APP_STAGE)
+const AppTools = namespace(Namespaces.APP_TOOLS)
+const SocketCanvas = namespace(Namespaces.SOCKET_CANVAS)
+const SocketStage = namespace(Namespaces.SOCKET_STAGE)
+
 @Component({
   name: 'TheCanvas',
   mixins: [CanvasSockets, StageWatcher]
 })
 
 export default class TheCanvas extends mixins(CanvasSockets, StageWatcher) {
-  @Getter(`tools/${ToolGetters.ENABLED_TOOL}`) enabledTool!: Tool
-  @Getter(`tools/${ToolGetters.TOOLS}`) tools!: Tool[]
-  @Action(`canvas/${CanvasAction.ADD_CANVAS_ELEMENT}`) addCanvasElement!: (canvasElement: CanvasElement) => void
-  @Getter(`canvas/${CanvasGetters.CANVAS_ELEMENTS}`) canvasElements!: CanvasElement[]
-  @Getter(`stage/${StageGetters.STAGE_ZOOM}`) stageZoom!: number
-  @Getter(`stage/${StageGetters.STAGE_CONFIG}`) stageConfig!: CustomStageConfig
-  @Action(`layer/${LayerActions.LAYER_SET}`) setLayer!: (layer: Konva.Layer) => void
-  @Getter(`layer/${LayerGetters.LAYER}`) layerNode!: Konva.Layer
-  @Action(`stage/${StageActions.SET_STAGE}`) setStage!: (stage: Konva.Stage) => void
-  @Getter(`stage/${StageGetters.STAGE}`) stage!: Konva.Stage
-  @Getter(`canvasEntity/${CanvasEntityGetters.CANVAS_ENTITY}`) canvasEntity!: CanvasEntityState
+  @AppCanvasEntity.Getter(AppCanvasEntityGetters.CANVAS_ENTITY) canvasEntity!: AppCanvasEntityState
+  @AppTools.Getter(AppToolGetters.ENABLED_TOOL) enabledTool!: Tool
+  @AppTools.Getter(AppToolGetters.TOOLS) tools!: Tool[]
+  @AppLayer.Getter(AppLayerGetters.LAYER) layerNode!: Konva.Layer
+  @AppStage.Getter(AppStageGetters.STAGE) stage!: Konva.Stage
+  @AppStage.Getter(AppStageGetters.STAGE_ZOOM) stageZoom!: number
+  @SocketCanvas.Getter(SocketCanvasGetters.CANVAS_ELEMENTS) canvasElements!: CanvasElement[]
+  @SocketStage.Getter(SocketStageGetters.STAGE_CONFIG) stageConfig!: CustomStageConfig
+  @AppLayer.Action(AppLayerActions.LAYER_SET) setLayer!: (layer: Konva.Layer) => void
+  @AppStage.Action(AppStageActions.SET_STAGE) setStage!: (stage: Konva.Stage) => void
+  @SocketCanvas.Action(SocketCanvasAction.ADD_CANVAS_ELEMENT) addCanvasElement!: (canvasElement: CanvasElement) => void
 
   $refs!: {
     layer: VueKonvaLayer;

src/components/TheEntityPanel.vue

@@ -9,8 +9,8 @@
           tile
           class="custom-entity-panel"
         >
-          <wows-panel v-if="gameName === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
-          <wot-panel v-if="gameName === 'wot'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wows-panel v-if="game === 'wows'" :clickedItemKey="clickedItemKey" :teams="teams" />
+          <wot-panel v-if="game === 'wot'" :clickedItemKey="clickedItemKey" :teams="teams" />
         </v-card>
       </v-col>
       <v-col class="pt-1">
@@ -23,13 +23,12 @@
           <div>
             <v-list-item class="px-2">
               <v-list-item-avatar>
-                <v-img :src="images[gameName]"></v-img>
+                <v-img :src="images[game]"></v-img>
               </v-list-item-avatar>
             </v-list-item>
             <v-divider></v-divider>
             <div>
               <v-list
-                :disabled="!isCanvasLoaded"
                 dense
                 nav
               >
@@ -44,8 +43,9 @@
                   <template v-slot:activator="{ on }">
                     <v-list-item
                       v-on="on"
-                      dark
+                      light
                       active-class="custom-list-item-active-class"
+                      :disabled="!isItemEnabled"
                       :input-value="clickedItemKey === item.key"
                       class="custom-list-item-center"
                       @click="onItemClickHandler(item.key)"
@@ -55,11 +55,11 @@
                           v-if="index"
                           :content="item.noOfEntities"
                         >
-                          <v-icon :color="!isCanvasLoaded ? 'white' : item.color">{{ item.icon }}</v-icon>
+                          <v-icon :color="!isItemEnabled ? 'rgba(0, 0, 0, 0.26)' : item.color">{{ item.icon }}</v-icon>
                         </v-badge>
                         <v-icon
                           v-else
-                          :color="!isCanvasLoaded ? 'white' : item.color"
+                          :color="!isItemEnabled ? 'rgba(0, 0, 0, 0.26)' : item.color"
                         >
                           {{ item.icon }}
                         </v-icon>
@@ -83,9 +83,16 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { RoomGetters, GameName } from '@/store/modules/room'
-import { Getter } from 'vuex-class'
+import { AppRoomGetters } from '@/store/modules/app/room'
+import { SocketRoomGetters, Game } from '@/store/modules/socket/room'
+import { namespace } from 'vuex-class'
 import { WowsPanel, WotPanel } from './entity-panel'
+import { Namespaces } from '@/store'
+import { AppAuthenticationGetters } from '../store/modules/app/authentication'
+
+const AppAuthentication = namespace(Namespaces.APP_AUTHENTICATION)
+const AppRoom = namespace(Namespaces.APP_ROOM)
+const SocketRoom = namespace(Namespaces.SOCKET_ROOM)
 
 export interface MenuItem {
   key: number;
@@ -103,8 +110,9 @@ export interface MenuItem {
   }
 })
 export default class MapButtons extends Vue {
-  @Getter(`room/${RoomGetters.GAME_NAME}`) private readonly gameName!: GameName;
-  @Getter(`room/${RoomGetters.IS_CANVAS_LOADED}`) isCanvasLoaded!: boolean
+  @SocketRoom.Getter(SocketRoomGetters.GAME) private readonly game!: Game;
+  @AppAuthentication.Getter(AppAuthenticationGetters.IS_AUTH) isAuth!: boolean
+  @AppRoom.Getter(AppRoomGetters.IS_CANVAS_LOADED) isCanvasLoaded!: boolean
 
   show = false
 
@@ -114,7 +122,7 @@ export default class MapButtons extends Vue {
   ]
 
   items: MenuItem[] = [
-    { key: 0, title: 'add', icon: 'fa-plus' },
+    { key: 0, title: 'add', icon: 'fa-plus', color: 'white' },
     ...this.teams
   ]
 
@@ -125,6 +133,10 @@ export default class MapButtons extends Vue {
     wot: require('@/assets/wot-icon.png')
   }
 
+  get isItemEnabled () {
+    return this.isCanvasLoaded && this.isAuth
+  }
+
   onItemClickHandler (key: number) {
     this.show = key !== this.clickedItemKey ? true : !this.show
     if (!this.show) {
@@ -197,10 +209,6 @@ export default class MapButtons extends Vue {
   background-color: $room-primary;
   height: 480px !important;
 
-  i {
-    color: $room-text;
-  }
-
   >div >div {
     display: flex;
     height: 100%;
@@ -229,6 +237,7 @@ export default class MapButtons extends Vue {
     background-color: white;
   }
 }
+
 .custom-list-item-active-class {
   background-color: rgba(white, 0.001);
   color: white;

src/components/TheToolPanel.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="custom-tool-panel-container btn-toggle-box pa-0 pt-1">
     <v-btn-toggle class="flex-column custom-tool-bar">
-      <tool-container icon="fa-arrows-alt" toolname="move" :popout="false" />
-      <tool-container icon="fa-map-pin" toolname="ping" :popout="false" />
-      <tool-container icon="fa-pen" toolname="freeDraw" :popout="true"><free-draw-template /></tool-container>
-      <tool-container icon="fa-slash" toolname="line" :popout="true"><line-template /></tool-container>
-      <tool-container icon="far fa-circle" toolname="circle" :popout="true"><circle-template /></tool-container>
-      <tool-container icon="fa-ruler" toolname="ruler" :popout="true"><ruler-template /></tool-container>
-      <tool-container icon="fa-font" toolname="text" :popout="true"><text-template /></tool-container>
-      <tool-container icon="fa-eraser" toolname="erase" :popout="false"></tool-container>
-      <undo-container icon="fa-undo" toolname="undo"></undo-container>
-      <redo-container icon="fa-redo" toolname="redo"></redo-container>
+      <tool-container icon="fa-arrows-alt" toolName="move" :popout="false" />
+      <tool-container icon="fa-map-pin" toolName="ping" :popout="false" />
+      <tool-container icon="fa-pen" toolName="freeDraw" :popout="true"><free-draw-template /></tool-container>
+      <tool-container icon="fa-slash" toolName="line" :popout="true"><line-template /></tool-container>
+      <tool-container icon="far fa-circle" toolName="circle" :popout="true"><circle-template /></tool-container>
+      <tool-container icon="fa-ruler" toolName="ruler" :popout="true"><ruler-template /></tool-container>
+      <tool-container icon="fa-font" toolName="text" :popout="true"><text-template /></tool-container>
+      <tool-container icon="fa-eraser" toolName="erase" :popout="false"></tool-container>
+      <undo-container icon="fa-undo" toolName="undo"></undo-container>
+      <redo-container icon="fa-redo" toolName="redo"></redo-container>
     </v-btn-toggle>
   </div>
 </template>
@@ -26,8 +26,11 @@ import LineTemplate from './canvas-tools/templates/Line.vue'
 import { Tool } from '@/tools/Tool'
 import CircleTemplate from './canvas-tools/templates/Circle.vue'
 import TextTemplate from './canvas-tools/templates/Text.vue'
-import { Action } from 'vuex-class'
-import { ToolsAction } from '@/store/modules/tools'
+import { namespace } from 'vuex-class'
+import { AppToolsAction } from '@/store/modules/app/tools'
+import { Namespaces } from '@/store'
+
+const AppTools = namespace(Namespaces.APP_TOOLS)
 
 @Component({
   name: 'TheToolPanel',
@@ -43,7 +46,7 @@ import { ToolsAction } from '@/store/modules/tools'
   }
 })
 export default class TheToolPanel extends Vue {
-  @Action(`tools/${ToolsAction.DISABLE_TOOL}`) disableTool!: () => void
+  @AppTools.Action(AppToolsAction.DISABLE_TOOL) disableTool!: () => void
 
   tools: Tool[] = []
 
@@ -65,6 +68,7 @@ export default class TheToolPanel extends Vue {
   width: 72px;
   background: transparent;
 }
+
 .custom-tool-bar {
   border-radius: 0;
 }