diff --git a/package-lock.json b/package-lock.json index 706617d..14348e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@vueuse/core": "^10.9.0", + "axios": "^1.6.8", "phaser": "^3.80.1", "pinia": "^2.1.7", "socket.io-client": "^4.7.5", @@ -2497,8 +2498,17 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } }, "node_modules/balanced-match": { "version": "1.0.2", @@ -2746,7 +2756,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -2952,7 +2961,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -3551,6 +3559,25 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -3571,7 +3598,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dev": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -4387,7 +4413,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -4396,7 +4421,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -5108,6 +5132,11 @@ "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", "dev": true }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/package.json b/package.json index 7ca243c..bba35e5 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,11 @@ }, "dependencies": { "@vueuse/core": "^10.9.0", + "axios": "^1.6.8", + "phaser": "^3.80.1", "pinia": "^2.1.7", "socket.io-client": "^4.7.5", - "vue": "^3.4.21", - "phaser": "^3.80.1" + "vue": "^3.4.21" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", diff --git a/public/assets/Button_1.png b/public/assets/Button_1.png deleted file mode 100644 index 6efcac4..0000000 Binary files a/public/assets/Button_1.png and /dev/null differ diff --git a/public/assets/Button_2.png b/public/assets/Button_2.png deleted file mode 100644 index 9fd2e00..0000000 Binary files a/public/assets/Button_2.png and /dev/null differ diff --git a/public/assets/Button_3.png b/public/assets/Button_3.png deleted file mode 100644 index 819739a..0000000 Binary files a/public/assets/Button_3.png and /dev/null differ diff --git a/public/assets/Button_4.png b/public/assets/Button_4.png deleted file mode 100644 index 6366e7b..0000000 Binary files a/public/assets/Button_4.png and /dev/null differ diff --git a/public/assets/Leaf_BG_standalone.png b/public/assets/Leaf_BG_standalone.png deleted file mode 100644 index 155dd6c..0000000 Binary files a/public/assets/Leaf_BG_standalone.png and /dev/null differ diff --git a/public/assets/bglogin.png b/public/assets/bglogin.png new file mode 100644 index 0000000..8db3cbe Binary files /dev/null and b/public/assets/bglogin.png differ diff --git a/src/App.vue b/src/App.vue index 60fce9c..c25ef45 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,16 +7,24 @@ \ No newline at end of file diff --git a/src/assets/login.scss b/src/assets/login.scss index d924990..38eb903 100644 --- a/src/assets/login.scss +++ b/src/assets/login.scss @@ -1,5 +1,6 @@ #bg-img { height: 100vh; + width: 100%; position: absolute; z-index: -1; left: 50%; @@ -40,7 +41,7 @@ label { color: #000; background-color: rgba(255, 255, 255, 0.5); - padding: 0.25rem 0.5rem; + padding: 0.25rem 0.25rem; font-size: 0.875rem; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -65,26 +66,22 @@ gap: 0.5rem; .button { - padding: 1rem 0; + padding: 0.8rem 0; min-width: 6.25rem; text-align: center; position: relative; font-size: 0.80rem; + background-color: rgba(71, 65, 230, 0.75); + border: rgba(255, 255, 255, 0.35) 1px solid; + border-radius: 5px; - p { + span { + color: white; margin: auto; } - img { - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: -1; - } - &:hover { - filter: brightness(60%); + background-color: rgba(123, 118, 255, 0.75); cursor: pointer; } } diff --git a/src/assets/main.scss b/src/assets/main.scss index f2df152..021af8e 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -7,6 +7,11 @@ body { -ms-overflow-style: none; scrollbar-width: none; background: black; + + // Disable selection, might wanna comment when debugging + -webkit-user-select: none; /* Safari */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ } p, a, li, label { diff --git a/src/components/Controls.vue b/src/components/Controls.vue index 24026f8..d8076c9 100644 --- a/src/components/Controls.vue +++ b/src/components/Controls.vue @@ -39,8 +39,8 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove); function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined { const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y); - console.log(x,y); - console.log('tile', tile); + // console.log(x,y); + // console.log('tile', tile); if (!tile) { return undefined; diff --git a/src/components/Game.vue b/src/components/Game.vue index f2f5c3b..c4d8ca9 100644 --- a/src/components/Game.vue +++ b/src/components/Game.vue @@ -13,6 +13,9 @@ import 'phaser'; import { Game, Scene } from 'phavuer' import World from '@/components/World.vue' import Pointer = Phaser.Input.Pointer +import { useSocketStore } from '@/stores/socket' + +const socket = useSocketStore(); const gameConfig = { name: 'New Quest', diff --git a/src/components/World.vue b/src/components/World.vue index 4da12ba..c8dd1dd 100644 --- a/src/components/World.vue +++ b/src/components/World.vue @@ -2,15 +2,38 @@ +
+ +
diff --git a/src/components/sprites/player/Player.vue b/src/components/sprites/player/Player.vue index 0e9498a..50af0fb 100644 --- a/src/components/sprites/player/Player.vue +++ b/src/components/sprites/player/Player.vue @@ -6,9 +6,15 @@ import { Sprite, useScene } from 'phavuer' import { type Ref, ref } from 'vue' import config from '@/config' +import { useSocketStore } from '@/stores/socket' + +const socket = useSocketStore(); + +socket.socket?.emit('joinRoom', 'game'); const props = defineProps({ - layer: Phaser.Tilemaps.TilemapLayer + layer: Phaser.Tilemaps.TilemapLayer, + player: Object }) const scene = useScene() @@ -16,6 +22,11 @@ const pointer_tile = ref(undefined); const x: Ref = ref(0); const y: Ref = ref(0); +if (props.player) { + x.value = props.player.x; + y.value = props.player.y; +} + function onPointerClick(pointer: Phaser.Input.Pointer) { /** * @TODO : Check if player was dragging, if so, don't move player diff --git a/src/services/socketio.service.ts b/src/services/socketio.service.ts deleted file mode 100644 index a37c8d0..0000000 --- a/src/services/socketio.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { io, Socket } from 'socket.io-client' -import config from '@/config'; - -class SocketioService { - socket: Socket | undefined; - constructor() {} - - setupSocketConnection(): void { - this.socket = io(config.server_endpoint as string); - } - - disconnect(): void { - if (this.socket) { - this.socket.disconnect(); - } - } - - registerAccount(account: string): void { - if (this.socket) { - this.socket.emit('register', account); - } - } -} - -export default new SocketioService(); \ No newline at end of file diff --git a/src/stores/socket.ts b/src/stores/socket.ts new file mode 100644 index 0000000..954808a --- /dev/null +++ b/src/stores/socket.ts @@ -0,0 +1,66 @@ +import { defineStore } from 'pinia'; +import { io, Socket } from 'socket.io-client'; +import config from '@/config'; +import axios from 'axios'; + +export const useSocketStore = defineStore('socket', { + state: () => ({ + isAuthenticated: false, + socket: null as Socket | null, + }), + + actions: { + async register(username: string, password: string) { + if ( this.isAuthenticated ) return console.log('User already authenticated'); + + try { + const response = await axios.post(`${config.server_endpoint}/register`, { username, password }); + console.log(response.data); + return true; + } catch (error) { + console.error('Error registering user:', error); + return false; + } + }, + + async login(username: string, password: string) { + if ( this.isAuthenticated ) return console.log('User already authenticated'); + + try { + const response = await axios.post(`${config.server_endpoint}/login`, { username, password }); + if (response.status === 200) { + this.isAuthenticated = true; + this.setupSocketConnection(username, password); + return true; + } + } catch (error) { + console.error('Login failed:', error); + return false; + } + }, + + setupSocketConnection(username: string, password: string) { + this.socket = io(config.server_endpoint as string, { + query: { username, password }, + transports: ['websocket'] + }); + + this.socket.on('connect', () => { + console.log('Socket connected!'); + }); + + this.socket.on('message', (message) => { + console.log('Received message:', message); + }); + + // Handle more socket events as needed + }, + + disconnectSocket() { + if (this.socket) { + this.socket.disconnect(); + this.socket = null; + } + } + } +});