diff --git a/src/App.vue b/src/App.vue
index a0253e6..ba237a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,24 @@
+
diff --git a/src/components/TheToolPanel.vue b/src/components/TheToolPanel.vue
index 247ad6b..f6a1863 100644
--- a/src/components/TheToolPanel.vue
+++ b/src/components/TheToolPanel.vue
@@ -28,7 +28,7 @@ export default class TheToolPanel extends Vue {
diff --git a/src/components/canvas-tools/ToolContainer.vue b/src/components/canvas-tools/ToolContainer.vue
index e7cbb81..7c9874e 100644
--- a/src/components/canvas-tools/ToolContainer.vue
+++ b/src/components/canvas-tools/ToolContainer.vue
@@ -7,14 +7,28 @@
offset-x
>
-
- {{icon}}
-
+
+
+ {{icon}}
+
+
+ {{ 'fa-caret-down' }}
+
+
Default Content For Slot
@@ -63,4 +77,12 @@ export default class ToolContainer extends Vue {
margin-left: 5px;
box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
}
+ .tools-caret-down {
+ right:2px;
+ transition:0.2s ease-in-out;
+ margin-top:28px;
+ }
+ .rotate90 {
+ transform: rotate(-90deg);
+ }
diff --git a/src/components/navigation/TheNavExtraLarge.vue b/src/components/navigation/TheNavExtraLarge.vue
index ce30499..0557477 100644
--- a/src/components/navigation/TheNavExtraLarge.vue
+++ b/src/components/navigation/TheNavExtraLarge.vue
@@ -1,5 +1,5 @@
-
+
fa-anchor
@@ -72,7 +72,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
color: black;
}
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
background-color: $room-navbar;
color: $room-navbar-text;
position: relative;
diff --git a/src/components/navigation/TheNavExtraSmall.vue b/src/components/navigation/TheNavExtraSmall.vue
index feabf2d..7d2fa29 100644
--- a/src/components/navigation/TheNavExtraSmall.vue
+++ b/src/components/navigation/TheNavExtraSmall.vue
@@ -1,5 +1,5 @@
-
+
fa-anchor
@@ -66,7 +66,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
color: black;
}
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
background-color: $room-navbar;
color: $room-navbar-text;
position: relative;
diff --git a/src/components/navigation/TheNavSmall.vue b/src/components/navigation/TheNavSmall.vue
index 1663857..0fff317 100644
--- a/src/components/navigation/TheNavSmall.vue
+++ b/src/components/navigation/TheNavSmall.vue
@@ -1,5 +1,5 @@
-
+
fa-anchor
@@ -66,7 +66,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
color: black;
}
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
background-color: $room-navbar;
color: $room-navbar-text;
position: relative;
diff --git a/src/components/toolbars/MapButtons.vue b/src/components/toolbars/MapButtons.vue
deleted file mode 100644
index eeacbec..0000000
--- a/src/components/toolbars/MapButtons.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/components/toolbars/index.ts b/src/components/toolbars/index.ts
index 94c2f5d..c672531 100644
--- a/src/components/toolbars/index.ts
+++ b/src/components/toolbars/index.ts
@@ -1,2 +1 @@
-export { default as MapButtons } from './MapButtons.vue'
export { default as SideToolbar } from './SideToolbar.vue'
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index b56a263..baf37b6 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -3,6 +3,8 @@ import '@fortawesome/fontawesome-free/css/all.css'
import Vuetify, {
VApp,
VRow,
+ VImg,
+ VDivider,
VToolbar,
VSpacer,
VBtn,
@@ -11,18 +13,26 @@ import Vuetify, {
VBtnToggle,
VMenu,
VList,
+ VListItem,
+ VListItemAction,
+ VListItemAvatar,
+ VListItemContent,
+ VListItemTitle,
VContent,
VCard,
+ VCardActions,
VSheet,
VColorPicker,
- VSlider
+ VSlider,
+ VNavigationDrawer
} from 'vuetify/lib'
-// import { Ripple } from 'vuetify/lib/directives'
Vue.use(Vuetify, {
components: {
VApp,
VRow,
+ VImg,
+ VDivider,
VToolbar,
VSpacer,
VBtn,
@@ -31,11 +41,18 @@ Vue.use(Vuetify, {
VBtnToggle,
VMenu,
VList,
+ VListItem,
+ VListItemAction,
+ VListItemAvatar,
+ VListItemContent,
+ VListItemTitle,
VContent,
VCard,
+ VCardActions,
VSheet,
VColorPicker,
- VSlider
+ VSlider,
+ VNavigationDrawer
},
directives: { }
})
diff --git a/src/store/index.ts b/src/store/index.ts
index eb794a2..ed0c5e7 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,6 +4,7 @@ import ToolModule from '@/store/modules/tools'
import CursorModule from '@/store/modules/cursor'
import SocketModule from '@/store/modules/socket'
import CanvasModule from '@/store/modules/canvas'
+import RoomModule from '@/store/modules/room'
import AuthenticationModule from '@/store/modules/authentication'
Vue.use(Vuex)
@@ -13,6 +14,7 @@ export enum Namespaces {
CURSOR = 'cursor',
SOCKET = 'socket',
CANVAS = 'canvas',
+ ROOM = 'room',
AUTH = 'authentication'
}
@@ -22,6 +24,7 @@ export default new Vuex.Store<{}>({
[Namespaces.CURSOR]: CursorModule,
[Namespaces.SOCKET]: SocketModule,
[Namespaces.CANVAS]: CanvasModule,
+ [Namespaces.ROOM]: RoomModule,
[Namespaces.AUTH]: AuthenticationModule
}
})
diff --git a/src/store/modules/canvas.ts b/src/store/modules/canvas.ts
index d0a39b6..534cc8f 100644
--- a/src/store/modules/canvas.ts
+++ b/src/store/modules/canvas.ts
@@ -40,7 +40,7 @@ interface RootState extends CanvasElement {
type CursorActionContext = ActionContext
-const CursorModule: Module = {
+const CanvasModule: Module = {
namespaced: true,
state () {
return {
@@ -102,4 +102,4 @@ const CursorModule: Module = {
}
}
-export default CursorModule
+export default CanvasModule
diff --git a/src/store/modules/room.ts b/src/store/modules/room.ts
new file mode 100644
index 0000000..43f63e4
--- /dev/null
+++ b/src/store/modules/room.ts
@@ -0,0 +1,63 @@
+import { ActionContext, Module } from 'vuex'
+
+export enum Game {
+ NONE = '',
+ WOWS = 'wows',
+ WOT = 'wot'
+}
+
+export enum Locale {
+ ENUK = 'en-uk'
+}
+
+export enum RoomAction {
+ SET_GAME = 'setGame',
+ SET_LOCALE = 'setLocale'
+}
+
+export enum RoomMutation {
+ SET_GAME = 'SET_GAME',
+ SET_LOCALE = 'SET_LOCALE'
+}
+
+export enum RoomGetters {
+ ROOM_STATE = 'roomState',
+}
+
+export interface RoomState {
+ game: Game;
+ locale: Locale;
+}
+
+type CursorActionContext = ActionContext
+
+const RoomModule: Module = {
+ namespaced: true,
+ state () {
+ return {
+ game: Game['NONE'],
+ locale: Locale['ENUK']
+ }
+ },
+ getters: {
+ [RoomGetters.ROOM_STATE]: state => ({ game: state.game, locale: state.locale })
+ },
+ mutations: {
+ [RoomMutation.SET_GAME] (state: RoomState, payload: Game) {
+ state.game = payload
+ },
+ [RoomMutation.SET_LOCALE] (state: RoomState, payload: Locale) {
+ state.locale = payload
+ }
+ },
+ actions: {
+ [RoomAction.SET_GAME] (context: CursorActionContext, payload: Game) {
+ context.commit('SET_GAME', payload)
+ },
+ [RoomAction.SET_LOCALE] (context: CursorActionContext, payload: Locale) {
+ context.commit('SET_LOCALE', payload)
+ }
+ }
+}
+
+export default RoomModule
diff --git a/src/tools/Circle.ts b/src/tools/Circle.ts
index 110037b..762fb21 100644
--- a/src/tools/Circle.ts
+++ b/src/tools/Circle.ts
@@ -15,7 +15,7 @@ export default class Circle implements Tool {
this.circle = new Konva.Circle()
this.line = new Konva.Line()
this.text = new Konva.Text()
- this.mapRatio = 1 // TODO: Inplement map ratio dynamicly
+ this.mapRatio = 1 // TODO: Implement map ratio dynamically
}
// eslint-disable-next-line
@@ -32,25 +32,23 @@ export default class Circle implements Tool {
// eslint-disable-next-line
mouseMoveAction = throttle((e: Konva.KonvaPointerEvent, canvasElement: CanvasElement, layer: Konva.Layer, _socket: WebSocket): void => {
- const x = e.evt.x
- const y = e.evt.y
- canvasElement.data = canvasElement.data.concat([x, y])
- this.circle.radius(this.calcRadius(x, y))
- this.line.points([canvasElement.data[0], canvasElement.data[1], x, y])
- this.text.setPosition(this.calcTextPosition(x, y))
- this.text.setText(Math.floor(this.calcRadius(x, y) * this.mapRatio) + ' m')
+ this.circle.radius(this.calcRadius(e.evt.x, e.evt.y, this.circle.getPosition().x, this.circle.getPosition().y))
+ this.line.points([canvasElement.data[0], canvasElement.data[1], e.evt.x, e.evt.y])
+ this.text.setPosition(this.calcTextPosition(e.evt.x, e.evt.y, this.circle.getPosition().x, this.circle.getPosition().y))
+ this.text.setText(Math.floor(this.calcRadius(e.evt.x, e.evt.y, this.circle.getPosition().x, this.circle.getPosition().y) * this.mapRatio) + ' m')
layer.batchDraw()
}, 10)
mouseUpAction = (e: Konva.KonvaPointerEvent, canvasElement: CanvasElement, layer: Konva.Layer, socket: WebSocket): void => {
+ canvasElement.data = canvasElement.data.concat([e.evt.x, e.evt.y])
this.sendToWebsockets(socket, canvasElement)
}
- createTextElement = (canvasElement: CanvasElement, colour?: string): Konva.Shape & Konva.Text => {
+ createTextElement = (canvasElement: CanvasElement, colour?: string, text?: string): Konva.Shape & Konva.Text => {
return new Konva.Text({
x: canvasElement.data[0],
y: canvasElement.data[1],
- text: '0 m',
+ text: text || '0 m',
fontSize: 20,
fontFamily: 'Calibri',
fill: colour || this.colour
@@ -60,7 +58,7 @@ export default class Circle implements Tool {
createLineElement = (canvasElement: CanvasElement, colour?: string): Konva.Shape & Konva.Line => {
return new Konva.Line({
globalCompositeOperation: 'source-over',
- points: [canvasElement.data[0], canvasElement.data[1]],
+ points: canvasElement.data,
stroke: colour || this.colour,
strokeWidth: 2,
lineCap: 'mitter',
@@ -68,38 +66,47 @@ export default class Circle implements Tool {
})
}
- createElement = (canvasElement: CanvasElement, colour?: string, stroke?: number): Konva.Shape & Konva.Circle => {
+ createElement = (canvasElement: CanvasElement, colour?: string, stroke?: number, radius?: number): Konva.Shape & Konva.Circle => {
return new Konva.Circle({
id: canvasElement.id,
globalCompositeOperation: 'source-over',
stroke: colour || this.colour,
strokeWidth: stroke || this.size,
- radius: 5,
+ radius: radius || 0,
x: canvasElement.data[0],
y: canvasElement.data[1]
})
}
renderCanvas = (canvasElement: CanvasElement, layer: Konva.Layer): void => {
- layer.add(this.createElement(canvasElement, canvasElement.tool.colour, canvasElement.tool.size))
+ // Render circle
+ const radius = this.calcRadius(canvasElement.data[0], canvasElement.data[1], canvasElement.data[2], canvasElement.data[3])
+ layer.add(this.createElement(canvasElement, canvasElement.tool.colour, canvasElement.tool.size, radius))
+ // Render dashed line
+ layer.add(this.createLineElement(canvasElement, canvasElement.tool.colour))
+ // Render text
+ this.text = this.createTextElement(canvasElement, canvasElement.tool.colour, Math.floor(radius * this.mapRatio) + ' m')
+ this.text.setPosition(this.calcTextPosition(canvasElement.data[2], canvasElement.data[3], canvasElement.data[0], canvasElement.data[1]))
+ layer.add(this.text)
+ // Batch draw
layer.batchDraw()
}
- calcTextPosition = (x: number, y: number): object => {
+ calcTextPosition = (x1: number, y1: number, x2: number, y2: number): object => {
const offset = 30
- const offsetX = (x - this.circle.getPosition().x) / 2
- const offsetY = (y - this.circle.getPosition().y) / 2
- const angleX = -(y - this.circle.getPosition().y) / (this.calcRadius(x, y))
- const angleY = (x - this.circle.getPosition().x) / (this.calcRadius(x, y))
+ const offsetX = (x1 - x2) / 2
+ const offsetY = (y1 - y2) / 2
+ const angleX = -(y1 - y2) / (this.calcRadius(x1, y1, x2, y2))
+ const angleY = (x1 - x2) / (this.calcRadius(x1, y1, x2, y2))
return {
- x: this.circle.getPosition().x + offsetX + (angleX * offset) - (this.text.getWidth() / 2),
- y: this.circle.getPosition().y + offsetY + (angleY * offset) - (this.text.getHeight() / 2)
+ x: x2 + offsetX + (angleX * offset) - (this.text.getWidth() / 2),
+ y: y2 + offsetY + (angleY * offset) - (this.text.getHeight() / 2)
}
}
- calcRadius = (x: number, y: number): number => {
- const a = Math.pow((x - this.circle.getPosition().x), 2)
- const b = Math.pow((y - this.circle.getPosition().y), 2)
+ calcRadius = (x1: number, y1: number, x2: number, y2: number): number => {
+ const a = Math.pow((x1 - x2), 2)
+ const b = Math.pow((y1 - y2), 2)
return Math.sqrt(a + b)
}
diff --git a/src/tools/FreeDraw.ts b/src/tools/FreeDraw.ts
index 7c00f69..053bce6 100644
--- a/src/tools/FreeDraw.ts
+++ b/src/tools/FreeDraw.ts
@@ -28,7 +28,7 @@ export default class FreeDraw implements Tool {
const newPoints: number[] = this.line.points().concat([x, y])
this.line.points(newPoints)
layer.batchDraw()
- }, 10)
+ }, 0)
mouseUpAction = (e: Konva.KonvaPointerEvent, canvasElement: CanvasElement, _layer: Konva.Layer, socket: WebSocket): void => {
this.sendToWebsockets(socket, canvasElement)