From 8648818459a0e4d9d9cebf4dbd57eaba087cf622 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 05:47:36 +0600 Subject: [PATCH 01/14] splitted for multiplayer --- front-ms/src/api/auth/api.js | 2 +- front-ms/src/api/race/api.js | 3 + front-ms/src/api/race/regex-race.js | 11 +- front-ms/src/pages/games/games.vue | 20 +- .../games/regex-race-multi/game-canvas.vue | 103 +++++++++ .../src/pages/games/regex-race-multi/game.vue | 200 ++++++++++++++++++ .../regex-race-multi/helpers/draw-cars.js | 10 + .../regex-race-multi/helpers/draw-road.js | 48 +++++ .../helpers/draw-usernames.js | 20 ++ .../games/regex-race-multi/helpers/index.js | 9 + .../pages/games/regex-race/single-player.vue | 0 front-ms/src/router/routes.js | 6 + 12 files changed, 426 insertions(+), 6 deletions(-) create mode 100644 front-ms/src/pages/games/regex-race-multi/game-canvas.vue create mode 100644 front-ms/src/pages/games/regex-race-multi/game.vue create mode 100644 front-ms/src/pages/games/regex-race-multi/helpers/draw-cars.js create mode 100644 front-ms/src/pages/games/regex-race-multi/helpers/draw-road.js create mode 100644 front-ms/src/pages/games/regex-race-multi/helpers/draw-usernames.js create mode 100644 front-ms/src/pages/games/regex-race-multi/helpers/index.js delete mode 100644 front-ms/src/pages/games/regex-race/single-player.vue diff --git a/front-ms/src/api/auth/api.js b/front-ms/src/api/auth/api.js index a43e426..8552711 100644 --- a/front-ms/src/api/auth/api.js +++ b/front-ms/src/api/auth/api.js @@ -10,7 +10,7 @@ import User from "./user"; const api = axios.create({ baseURL: `${CONF.AUTH_BASE_URL}/`, headers: { - Authorization: localStorage.getItem("access_token") ? `Token ${localStorage.getItem("access_token")}` : "", + Authorization: localStorage.getItem("access_token") ? localStorage.getItem("access_token") : "", }, transformResponse: [ function (data) { diff --git a/front-ms/src/api/race/api.js b/front-ms/src/api/race/api.js index 61d0191..2e29e8e 100644 --- a/front-ms/src/api/race/api.js +++ b/front-ms/src/api/race/api.js @@ -8,6 +8,9 @@ import { Notify } from "quasar"; const api = axios.create({ baseURL: `${CONF.RACE_BASE_URL}/`, + headers: { + Authorization: localStorage.getItem("access_token") ? localStorage.getItem("access_token") : "", + }, transformResponse: [ function (data) { // Конвертируем все имена переменных в camelKeys diff --git a/front-ms/src/api/race/regex-race.js b/front-ms/src/api/race/regex-race.js index b491bf2..667404e 100644 --- a/front-ms/src/api/race/regex-race.js +++ b/front-ms/src/api/race/regex-race.js @@ -10,9 +10,9 @@ export default { validateAnswer(id, data) { return api.post(`${EDN_POINT}/learn/${id}`, data); }, - // create(data) { - // return api.post(`${EDN_POINT}/educations/`, data); - // }, + validateAnswer(id, data) { + return api.post(`${EDN_POINT}/learn/${id}`, data); + }, // update(id, data) { // return api.patch(`${EDN_POINT}/educations/${id}/`, data); // }, @@ -20,4 +20,9 @@ export default { // return api.delete(`${EDN_POINT}/educations/${id}/`); // }, }, + Lobby: { + create() { + return api.post(`${EDN_POINT}/lobby`); + }, + }, }; diff --git a/front-ms/src/pages/games/games.vue b/front-ms/src/pages/games/games.vue index 7cc3287..f1f78f2 100644 --- a/front-ms/src/pages/games/games.vue +++ b/front-ms/src/pages/games/games.vue @@ -1,7 +1,7 @@ - + diff --git a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue new file mode 100644 index 0000000..6f93668 --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue @@ -0,0 +1,103 @@ + + + diff --git a/front-ms/src/pages/games/regex-race-multi/game.vue b/front-ms/src/pages/games/regex-race-multi/game.vue new file mode 100644 index 0000000..4da7b9d --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/game.vue @@ -0,0 +1,200 @@ + + + diff --git a/front-ms/src/pages/games/regex-race-multi/helpers/draw-cars.js b/front-ms/src/pages/games/regex-race-multi/helpers/draw-cars.js new file mode 100644 index 0000000..1c88b6e --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/helpers/draw-cars.js @@ -0,0 +1,10 @@ +export const drawCars = (ctx, width, height, laneWidth, stepSize, players) => { + players.forEach(player => { + ctx.shadowColor = "black"; + ctx.shadowBlur = 4; + ctx.shadowOffsetX = 4; + ctx.shadowOffsetY = 4; + ctx.drawImage(player.carImage, laneWidth * player.id - laneWidth / 2 - 50, height - player.position * stepSize, 100, 80); + ctx.shadowColor = "transparent"; + }); +}; \ No newline at end of file diff --git a/front-ms/src/pages/games/regex-race-multi/helpers/draw-road.js b/front-ms/src/pages/games/regex-race-multi/helpers/draw-road.js new file mode 100644 index 0000000..fa70b3e --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/helpers/draw-road.js @@ -0,0 +1,48 @@ +export const drawRoad = (ctx, width, height, laneCount, laneWidth, stepSize) => { + ctx.strokeStyle = "#facc15"; + ctx.beginPath(); + ctx.setLineDash([]); + ctx.moveTo(0, 0); + ctx.lineTo(0, height); + ctx.moveTo(width, 0); + ctx.lineTo(width, height); + ctx.lineWidth = 15; + ctx.stroke(); + + // Цвет линий + ctx.strokeStyle = "#f8fafc"; + + // Начальная точка для первой линии + let x = laneWidth; + + // Нарисовать 3 линии с интервалом в 100px + for (let i = 0; i < laneCount - 1; i++) { + ctx.beginPath(); + ctx.moveTo(x, 0); + ctx.lineTo(x, height); + ctx.setLineDash([10, 10]); + ctx.lineWidth = 0.5; + ctx.stroke(); + x += laneWidth; + } + + const lineWidth = 5; // ширина линии + const lineLength = width; // длина линии равна ширине холста + + function drawHorizontalStripes(y, startWithWhite) { + let isWhite = startWithWhite; // флаг, указывающий на цвет текущей полосы + + for (let i = 8; i < lineLength - 8; i += lineWidth) { + ctx.beginPath(); + ctx.moveTo(i, y); + ctx.lineTo(i + lineWidth, y); + ctx.lineWidth = lineWidth; + ctx.strokeStyle = isWhite ? "#f8fafc" : "#374151"; + ctx.stroke(); + isWhite = !isWhite; // меняем флаг цвета на противоположный + } + } + + drawHorizontalStripes(stepSize, true); + drawHorizontalStripes(stepSize + 5, false); +}; diff --git a/front-ms/src/pages/games/regex-race-multi/helpers/draw-usernames.js b/front-ms/src/pages/games/regex-race-multi/helpers/draw-usernames.js new file mode 100644 index 0000000..63e0813 --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/helpers/draw-usernames.js @@ -0,0 +1,20 @@ +function drawText(ctx, text, x, y, fontSize = '14px', fontFace = 'Arial', fillColor = '#ccc') { + ctx.font = `${fontSize} ${fontFace}`; // задаем размер и тип шрифта + ctx.fillStyle = fillColor; // выбираем цвет заливки текста + ctx.fillText(text, x, y); // рисуем текст с заданными координатами +} + +export const drawUsernames = (ctx, width, height, laneWidth, players) => { + ctx.globalAlpha = 0.7; // устанавливаем значение прозрачности (0 - полностью прозрачный, 1 - непрозрачный) + ctx.fillStyle = "#374151"; // выбираем цвет заливки + ctx.fillRect(0, height - 20, width, height); // рисуем прямоугольник с заданными координатами и размерами + ctx.globalAlpha = 1; // возвращаем значение прозрачности к непрозрачному состоянию + + let x = 15; + players.forEach(player => { + const username = player.username.length > 8 ? player.username.substr(0, 8) + "..." : player.username; + drawText(ctx, username, x, height - 5); + x += laneWidth; + }); +}; + diff --git a/front-ms/src/pages/games/regex-race-multi/helpers/index.js b/front-ms/src/pages/games/regex-race-multi/helpers/index.js new file mode 100644 index 0000000..5a5ae3e --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/helpers/index.js @@ -0,0 +1,9 @@ +import { drawRoad } from "./draw-road"; +import { drawCars } from "./draw-cars"; +import { drawUsernames } from "./draw-usernames"; + +export { + drawRoad, + drawCars, + drawUsernames, +} \ No newline at end of file diff --git a/front-ms/src/pages/games/regex-race/single-player.vue b/front-ms/src/pages/games/regex-race/single-player.vue deleted file mode 100644 index e69de29..0000000 diff --git a/front-ms/src/router/routes.js b/front-ms/src/router/routes.js index 893801b..4278cb9 100644 --- a/front-ms/src/router/routes.js +++ b/front-ms/src/router/routes.js @@ -20,6 +20,12 @@ export default [ component: () => import("../pages/games/regex-race/game.vue"), meta: { layout: "default", needsAuthorization: true }, }, + { + path: "/regex-race-multi", + name: "RegexRaceMulti", + component: () => import("../pages/games/regex-race-multi/game.vue"), + meta: { layout: "default", needsAuthorization: true }, + }, { path: "/log-in", name: "LogIn", From c1838d02585d08c883048d480be31c20b3403888 Mon Sep 17 00:00:00 2001 From: abu Date: Sun, 26 Mar 2023 06:30:48 +0600 Subject: [PATCH 02/14] fix docker-compose.sh --- docker-compose.sh | 1 - 1 file changed, 1 deletion(-) diff --git a/docker-compose.sh b/docker-compose.sh index 5c522e1..d8123cd 100755 --- a/docker-compose.sh +++ b/docker-compose.sh @@ -57,7 +57,6 @@ DEV=$( ports: - 8080:8080 -race-ms redis: container_name: redis image: redis From 0de83b743fdef20919f50c56db110195d0b936a4 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 12:14:31 +0600 Subject: [PATCH 03/14] added some logic for multiplayer mode --- front-ms/src/api/race/regex-race.js | 3 + .../games/regex-race-multi/form-data.vue | 153 +++++++++++++++ .../games/regex-race-multi/game-canvas.vue | 27 +-- .../src/pages/games/regex-race-multi/game.vue | 175 ++++++------------ .../games/regex-race-multi/lobyy-gen.vue | 68 +++++++ front-ms/src/pages/log-in/log-in.vue | 16 +- front-ms/src/pages/sign-up/sign-up.vue | 12 +- front-ms/src/router/index.js | 3 +- 8 files changed, 309 insertions(+), 148 deletions(-) create mode 100644 front-ms/src/pages/games/regex-race-multi/form-data.vue create mode 100644 front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue diff --git a/front-ms/src/api/race/regex-race.js b/front-ms/src/api/race/regex-race.js index 667404e..a980b34 100644 --- a/front-ms/src/api/race/regex-race.js +++ b/front-ms/src/api/race/regex-race.js @@ -24,5 +24,8 @@ export default { create() { return api.post(`${EDN_POINT}/lobby`); }, + get(lobbyId) { + return api.get(`${EDN_POINT}/lobby/${lobbyId}`); + }, }, }; diff --git a/front-ms/src/pages/games/regex-race-multi/form-data.vue b/front-ms/src/pages/games/regex-race-multi/form-data.vue new file mode 100644 index 0000000..f010c96 --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/form-data.vue @@ -0,0 +1,153 @@ + + + diff --git a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue index 6f93668..77c3f88 100644 --- a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue +++ b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue @@ -11,7 +11,6 @@ import { drawRoad, drawCars, drawUsernames } from "./helpers"; const props = defineProps({ width: { type: Number, required: true }, height: { type: Number, required: true }, - numPlayers: { type: Number, required: true }, numTasks: { type: Number, required: true }, currentUser: { type: Object, required: true }, }); @@ -23,12 +22,14 @@ const ctx = ref(null); const players = ref([]); -const laneWidth = computed(() => props.width / props.numPlayers); +const laneWidth = computed(() => props.width / numPlayers.value); const stepSize = computed(() => canvas.value?.height / (props.numTasks + 1)); const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; +const numPlayers = computed(() => players.value.length); + // const shuffleCars = () => { // for (let i = 0; i < props.numPlayers; i++) { // players.value[i].position = randInt(1, props.numTasks + 1); @@ -53,29 +54,18 @@ const addCar = (username) => { players.value.push(player); }; -const moveCarUp = (id) => { - let player = players.value.find((p) => p.id === id); +const moveCarUp = (username) => { + let player = players.value.find((p) => p.username === username); player.targetPosition += 1; }; const updateField = async () => { ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height); - drawRoad(ctx.value, canvas.value.width, canvas.value.height, props.numPlayers, laneWidth.value, stepSize.value); + drawRoad(ctx.value, canvas.value.width, canvas.value.height, numPlayers.value, laneWidth.value, stepSize.value); await drawCars(ctx.value, canvas.value.width, canvas.value.height, laneWidth.value, stepSize.value, players.value); drawUsernames(ctx.value, canvas.value.width, canvas.value.height, laneWidth.value, players.value); }; -const initPlayers = () => { - players.value.length = 0; - - addCar(props.currentUser.username); -}; - -watch( - () => props.numPlayers, - () => initPlayers() -); - const animate = () => { requestAnimationFrame(animate); ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height); @@ -92,12 +82,11 @@ onMounted(() => { ctx.value = canvas.value.getContext("2d"); // Установить размер canvas - canvas.value.width = 100; + canvas.value.width = 300; canvas.value.height = 400; - initPlayers(); animate(); }); -defineExpose({ moveCarUp }); +defineExpose({ moveCarUp, addCar }); diff --git a/front-ms/src/pages/games/regex-race-multi/game.vue b/front-ms/src/pages/games/regex-race-multi/game.vue index 4da7b9d..e9a7255 100644 --- a/front-ms/src/pages/games/regex-race-multi/game.vue +++ b/front-ms/src/pages/games/regex-race-multi/game.vue @@ -1,123 +1,53 @@ diff --git a/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue new file mode 100644 index 0000000..a5847a1 --- /dev/null +++ b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue @@ -0,0 +1,68 @@ + + + diff --git a/front-ms/src/pages/log-in/log-in.vue b/front-ms/src/pages/log-in/log-in.vue index 4fc9ab8..46c7cdc 100644 --- a/front-ms/src/pages/log-in/log-in.vue +++ b/front-ms/src/pages/log-in/log-in.vue @@ -47,7 +47,12 @@ - + @@ -59,8 +64,9 @@ import { ref, computed } from "vue"; import { required } from "@/utils/validators"; import { User } from "@/api/auth"; -import { useRouter } from "vue-router"; +import { useRouter, useRoute } from "vue-router"; +const route = useRoute(); const router = useRouter(); const usernameRef = ref(null); @@ -92,7 +98,11 @@ const onLogIn = async () => { .then((r) => { localStorage.setItem("access_token", r.data.accessToken); localStorage.setItem("refresh_token", r.data.refreshToken); - router.push("/"); + if (route.query.target) { + router.push(route.query.target) + } else { + router.push("/"); + } }) .catch((e) => {}); }; diff --git a/front-ms/src/pages/sign-up/sign-up.vue b/front-ms/src/pages/sign-up/sign-up.vue index 9d00402..cca8253 100644 --- a/front-ms/src/pages/sign-up/sign-up.vue +++ b/front-ms/src/pages/sign-up/sign-up.vue @@ -3,7 +3,6 @@ - - + @@ -133,7 +137,7 @@ const onLogIn = async () => { Notify.create({ type: "warning", message: "Пароли не совпадают", - }) + }); } const formData = new FormData(); @@ -143,7 +147,7 @@ const onLogIn = async () => { await User.signup(formData) .then((r) => { - console.log(r.data) + console.log(r.data); localStorage.setItem("access_token", r.data.accessToken); localStorage.setItem("refresh_token", r.data.refreshToken); router.push("/"); diff --git a/front-ms/src/router/index.js b/front-ms/src/router/index.js index 76f6528..4a3f3e7 100644 --- a/front-ms/src/router/index.js +++ b/front-ms/src/router/index.js @@ -15,7 +15,8 @@ router.beforeEach(async (to, from, next) => { await store.dispatch("getUser"); next(); } else { - next("/log-in"); + console.log(to) + next("/log-in?target=/regex-race-multi?lobby=DbTdp"); } } else { next(); From 8e193d864efb7afdf77cae49953fbe5c41f3b363 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 14:04:47 +0600 Subject: [PATCH 04/14] feat: lobby starting --- .gitignore | 1 + front-ms/src/config/index.js | 1 + .../games/regex-race-multi/form-data.vue | 1 - .../games/regex-race-multi/game-canvas.vue | 34 ++++++++----- .../src/pages/games/regex-race-multi/game.vue | 15 ++++-- .../games/regex-race-multi/lobyy-gen.vue | 11 ++++- front-ms/src/pages/games/regex-race/game.vue | 1 - front-ms/src/socket/index.js | 6 +++ front-ms/src/socket/lobby.js | 48 +++++++++++++++++++ 9 files changed, 98 insertions(+), 20 deletions(-) create mode 100644 front-ms/src/socket/index.js create mode 100644 front-ms/src/socket/lobby.js diff --git a/.gitignore b/.gitignore index 9a5752c..18cd736 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .envs docker-compose.yml postgres-data +postgres_data diff --git a/front-ms/src/config/index.js b/front-ms/src/config/index.js index e7c10c9..d687b0b 100644 --- a/front-ms/src/config/index.js +++ b/front-ms/src/config/index.js @@ -5,6 +5,7 @@ const CONF = Object.freeze({ VUEX_STRICT: import.meta.env.VITE_APP_VUEX_STRICT === "true", AUTH_BASE_URL: import.meta.env.VITE_APP_AUTH_BASE_URL, RACE_BASE_URL: import.meta.env.VITE_APP_RACE_BASE_URL, + RACE_BASE_URL_WS: import.meta.env.VITE_APP_RACE_BASE_URL_WS }); export default CONF; diff --git a/front-ms/src/pages/games/regex-race-multi/form-data.vue b/front-ms/src/pages/games/regex-race-multi/form-data.vue index f010c96..d7e69d5 100644 --- a/front-ms/src/pages/games/regex-race-multi/form-data.vue +++ b/front-ms/src/pages/games/regex-race-multi/form-data.vue @@ -27,7 +27,6 @@ dense outlined v-model.trim="form.regex" - autogrow lazy-rules="ondemand" :rules="[required, (val) => maxLength(val, 255)]" /> diff --git a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue index 77c3f88..db6378a 100644 --- a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue +++ b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue @@ -40,18 +40,28 @@ const numPlayers = computed(() => players.value.length); // players.value[randInt(0, props.numPlayers - 1)].targetPosition += 1; // }; -const addCar = (username) => { - const player = { - id: players.value.length + 1, - position: 1, - targetPosition: 1, - username: username, - carImage: new Image(), - }; - - player.carImage.src = `/src/assets/cars/car-${player.id % 6}.svg`; - - players.value.push(player); +const addCar = (users) => { + players.value.length = 0; + + for (const key in users) { + const player = { + id: players.value.length + 1, + position: 1, + targetPosition: 1, + username: users[key], + carImage: new Image(), + }; + + console.log(player) + + console.log((players.value.length + 1) % 6) + + player.carImage.src = `/src/assets/cars/car-${(players.value.length + 1) % 6}.svg`; + + players.value.push(player); + + console.log(`${key}: ${users[key]}`); + } }; const moveCarUp = (username) => { diff --git a/front-ms/src/pages/games/regex-race-multi/game.vue b/front-ms/src/pages/games/regex-race-multi/game.vue index e9a7255..689a0eb 100644 --- a/front-ms/src/pages/games/regex-race-multi/game.vue +++ b/front-ms/src/pages/games/regex-race-multi/game.vue @@ -26,6 +26,7 @@ @@ -57,6 +58,10 @@ const numTasks = ref(5); const increaseNumberOfPlayers = () => (numPlayers.value += 1); +const onNewUserConnected = (data) => { + gameCanvasRef.value.addCar(data); +} + // const tasks = ref([]); // const currentTask = ref(null); // const form = ref({ @@ -115,11 +120,11 @@ const onSubmit = async () => { .catch((e) => {}); }; -watch(isLobbyCreated, () => { - if (isLobbyCreated.value) { - gameCanvasRef.value.addCar(currentUser.value.username); - } -}); +// watch(isLobbyCreated, () => { +// if (isLobbyCreated.value) { +// gameCanvasRef.value.addCar(currentUser.value.username); +// } +// }); onMounted(async () => { await RegexRace.Learn.list() diff --git a/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue index a5847a1..4136559 100644 --- a/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue +++ b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue @@ -26,11 +26,12 @@ import { ref, onMounted } from "vue"; import { RegexRace } from "@/api/race"; import { useRoute, useRouter } from "vue-router"; +import { LobbySocket } from "@/socket"; const route = useRoute(); const router = useRouter(); -const emit = defineEmits(["onLobbyCreated"]); +const emit = defineEmits(["onLobbyCreated", "onNewUserConnected"]); const isLobbyCreated = ref(false); const isGameStarted = ref(false); @@ -52,6 +53,10 @@ const createLobby = async () => { emit("onLobbyCreated"); isLobbyCreated.value = true; router.replace({ query: { ...route.query, lobby: lobby.value.lobbyId } }); + + LobbySocket.connect(lobby.value.lobbyId, (data) => { + emit("onNewUserConnected", data); + }); }) .catch((e) => {}); }; @@ -62,6 +67,10 @@ onMounted(async () => { lobby.value = r.data; isLobbyCreated.value = true; emit("onLobbyCreated"); + + LobbySocket.connect(route.query.lobby, (data) => { + emit("onNewUserConnected", data); + }); }); } }); diff --git a/front-ms/src/pages/games/regex-race/game.vue b/front-ms/src/pages/games/regex-race/game.vue index da52129..ef1cdf1 100644 --- a/front-ms/src/pages/games/regex-race/game.vue +++ b/front-ms/src/pages/games/regex-race/game.vue @@ -53,7 +53,6 @@ dense outlined v-model.trim="form.regex" - autogrow lazy-rules="ondemand" :rules="[required, (val) => maxLength(val, 255)]" /> diff --git a/front-ms/src/socket/index.js b/front-ms/src/socket/index.js new file mode 100644 index 0000000..c0bc067 --- /dev/null +++ b/front-ms/src/socket/index.js @@ -0,0 +1,6 @@ +import LobbySocket from "./lobby"; + +export { + LobbySocket, + +}; diff --git a/front-ms/src/socket/lobby.js b/front-ms/src/socket/lobby.js new file mode 100644 index 0000000..a783b33 --- /dev/null +++ b/front-ms/src/socket/lobby.js @@ -0,0 +1,48 @@ +import CONF from "@/config/"; +import humps from "humps"; + +let socket = null; + +const connect = (lobby, fn) => { + if (socket) socket.close(); + + const ACCESS_TOKEN = localStorage.getItem("access_token"); + + const params = new URLSearchParams({ token: ACCESS_TOKEN }); + + + socket = new WebSocket(`${CONF.RACE_BASE_URL_WS}/lobby/${lobby}/ws?${params.toString()}`); + + socket.addEventListener("message", (e) => fn(humps.camelizeKeys(JSON.parse(e.data)))); + + // socket.addEventListener("close", (e) => { + // if (e.code !== 1000) { + // setTimeout(() => connect(planId, userId, fn), 5000); + // } + // }); +}; + +const disconnect = () => socket?.close(); + +const send = (message) => { + // const decamelizedMessage = JSON.stringify(humps.decamelizeKeys(message, { split: /(?=[A-Z0-9])/ })); + + // if (socket.readyState === WebSocket.OPEN) { + // socket.send(decamelizedMessage); + // return; + // } + + // socket.addEventListener("open", () => { + // socket.send(decamelizedMessage, { once: true }); + // }); +}; + +export default { + connect, + disconnect, + send, +}; + + +//ws://localhost:8000/GTPKB/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjgwMDBiN2VkLTVlZWItNDIzNy05YjU0LTE2MDk4ZGY4ZWM0MSIsInVzZXJuYW1lIjoibWF4aW0iLCJleHAiOjE2Nzk4MTY0MzQsInRva2VuX3R5cGUiOiJhY2Nlc3MifQ.0loT5X9-NHEgJtztzFgibljaW3Ee6x9gxoPMDJ-coFc/ws/. +//ws://127.0.0.1:8000/lobby/ipeYW/ws \ No newline at end of file From af397d2d010f7a43fbb5bf6e4b8105e2f20bbbd1 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 14:06:51 +0600 Subject: [PATCH 05/14] added envs --- .envs_example/.local/.front-ms | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.envs_example/.local/.front-ms b/.envs_example/.local/.front-ms index 2f62923..aa03289 100644 --- a/.envs_example/.local/.front-ms +++ b/.envs_example/.local/.front-ms @@ -1,4 +1,5 @@ VITE_APP_VUEX_STRICT=true VITE_APP_AUTH_BASE_URL=http://localhost:5000 -VITE_APP_RACE_BASE_URL=http://localhost:8000 \ No newline at end of file +VITE_APP_RACE_BASE_URL=http://localhost:8000 +VITE_APP_RACE_BASE_URL_WS=ws://localhost:8000 \ No newline at end of file From 981da202c890b33bdf1431d72b7a999a533a5cb7 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 15:58:53 +0600 Subject: [PATCH 06/14] hide nickname --- front-ms/src/pages/sign-up/sign-up.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front-ms/src/pages/sign-up/sign-up.vue b/front-ms/src/pages/sign-up/sign-up.vue index cca8253..4901e57 100644 --- a/front-ms/src/pages/sign-up/sign-up.vue +++ b/front-ms/src/pages/sign-up/sign-up.vue @@ -5,6 +5,7 @@ { await User.signup(formData) .then((r) => { - console.log(r.data); localStorage.setItem("access_token", r.data.accessToken); localStorage.setItem("refresh_token", r.data.refreshToken); router.push("/"); From 7221f2f8f97e88e86313a70b8bf7dd452d0d7eb7 Mon Sep 17 00:00:00 2001 From: Maxim Kim Date: Sun, 26 Mar 2023 17:18:22 +0600 Subject: [PATCH 07/14] fix huy znaet 4chto, pizdes panika u nas --- .../games/regex-race-multi/game-canvas.vue | 6 --- .../src/pages/games/regex-race-multi/game.vue | 1 + .../games/regex-race-multi/lobyy-gen.vue | 45 +++++++++++++------ front-ms/src/pages/log-in/log-in.vue | 3 +- front-ms/src/router/index.js | 3 +- front-ms/src/socket/lobby.js | 39 ++++++++++------ race-ms/Dockerfile | 2 +- 7 files changed, 62 insertions(+), 37 deletions(-) diff --git a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue index db6378a..680cc29 100644 --- a/front-ms/src/pages/games/regex-race-multi/game-canvas.vue +++ b/front-ms/src/pages/games/regex-race-multi/game-canvas.vue @@ -52,15 +52,9 @@ const addCar = (users) => { carImage: new Image(), }; - console.log(player) - - console.log((players.value.length + 1) % 6) - player.carImage.src = `/src/assets/cars/car-${(players.value.length + 1) % 6}.svg`; players.value.push(player); - - console.log(`${key}: ${users[key]}`); } }; diff --git a/front-ms/src/pages/games/regex-race-multi/game.vue b/front-ms/src/pages/games/regex-race-multi/game.vue index 689a0eb..a89f241 100644 --- a/front-ms/src/pages/games/regex-race-multi/game.vue +++ b/front-ms/src/pages/games/regex-race-multi/game.vue @@ -27,6 +27,7 @@ class="lg:w-1/2 md:w-1/2 bg-slate-100 flex flex-col md:ml-auto w-full mx-2 md:py-8 md:mt-2 rounded-lg p-4" @on-lobby-created="() => (isLobbyCreated = true)" @on-new-user-connected="onNewUserConnected" + @on-game-started="() => isGameStarted = true" /> diff --git a/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue index 4136559..d583044 100644 --- a/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue +++ b/front-ms/src/pages/games/regex-race-multi/lobyy-gen.vue @@ -1,22 +1,13 @@