마지막으로 배포된 버전입니다. (portal -> develop)

characterselectscene.js

@@ -0,0 +1,92 @@
+const SERVER_URL = 'https://kuriverse.shop'; 
+
+class CharacterSelectScene extends Phaser.Scene {
+  constructor() {
+    super('CharacterSelectScene');
+  }
+
+  preload() {
+    this.load.image('character_bg', 'assets/nicknamebg.png');
+    this.load.image('boy1', 'assets/boy1.png');
+    this.load.image('boy2', 'assets/boy2.png');
+    this.load.image('boy3', 'assets/boy3.png');
+    this.load.image('girl1', 'assets/girl1.png');
+    this.load.image('girl2', 'assets/girl2.png');
+    this.load.image('girl3', 'assets/girl3.png');
+  }
+
+  create(data) {
+    const nickname = data?.nickname || window.userInfo?.nickname;
+    if (!nickname) {
+      alert('닉네임 인식 실패로 시작화면으로 돌아갑니다.');
+      this.scene.start('NicknameScene');
+      return;
+    }
+
+    const characterKeyToBodytype = {
+      'boy1': 1, 'boy2': 2, 'boy3': 3,
+      'girl1': 4, 'girl2': 5, 'girl3': 6
+    };
+
+    const saveCustomization = async (nickname, characterKey) => {
+      const bodytypeInt = characterKeyToBodytype[characterKey];
+
+      try {
+        const response = await fetch(`${SERVER_URL}/api/customization/update`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ nickname: nickname, bodyType: bodytypeInt }) 
+        });
+        if (response.ok) {
+          console.log("커스터마이징 저장 완료:", `nickname=${nickname}, bodytype=${bodytypeInt}`);
+          this.scene.start('WorldMapScene', { nickname, character: characterKey });
+        } else {
+          const errorText = await response.text();
+          alert(`커스터마이징 저장 실패: ${errorText}`);
+        }
+      } catch (error) {
+        console.error("저장 중 오류:", error);
+      }
+    };
+
+    this.add.image(800, 450, 'character_bg').setDisplaySize(1600, 900);
+    this.add.rectangle(800, 100, 496, 72, 0xB593CC).setOrigin(0.5).setDepth(1);
+    this.add.text(800, 100, '캐릭터를 선택해주세요', {
+      fontFamily: 'Pretendard',
+      fontSize: '32px',
+      fontStyle: 'bold',
+      color: '#ffffff'
+    }).setOrigin(0.5).setDepth(2);
+
+    const startX = 300;
+    const gapX = 500;
+
+    const characters = [
+      { key: 'boy1', x: startX + 0 * gapX, y: 320 },
+      { key: 'boy2', x: startX + 1 * gapX, y: 320 },
+      { key: 'boy3', x: startX + 2 * gapX, y: 320 },
+      { key: 'girl1', x: startX + 0 * gapX, y: 580 },
+      { key: 'girl2', x: startX + 1 * gapX, y: 580 },
+      { key: 'girl3', x: startX + 2 * gapX, y: 580 },
+    ];
+
+    characters.forEach(({ key, x, y }) => {
+      const sprite = this.add.image(x, y, key)
+        .setDisplaySize(200, 250)
+        .setInteractive({ useHandCursor: true })
+        .setDepth(3);
+      sprite.on('pointerdown', () => {
+        this.selectCharacter(key);
+        saveCustomization(nickname, key);
+      });
+    });
+  }
+
+  selectCharacter(characterKey) {
+    if (!window.userInfo) window.userInfo = {};
+    window.userInfo.character = characterKey;
+  }
+}
+
+export default CharacterSelectScene;

game.js

@@ -1,14 +1,59 @@
+
+import StartScene from './StartScene.js';
+import NicknameScene from './NicknameScene.js';
+import CharacterSelectScene from './CharacterSelectScene.js';
+import WorldMapScene from './WorldMapScene.js';
+import MainScene from './mainScene.js';
+import BridgeScene from './BridgeScene.js';
+
+import { Client } from 'https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.1/+esm';
+
 const config = {
   type: Phaser.AUTO,
-  width: 1600,
-  height: 900,
+  //width: 1600,
+  //height: 900,
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: 1600,
+    height: 900,
+  },
+  parent: 'game-container',
   physics: {
     default: 'arcade',
-    arcade: {
-      debug: false
-    }
+    arcade: { debug: false }
   },
-  scene: [LoginScene, MainScene]
+  dom: {
+    createContainer: true
+  },
+  scene: [
+    StartScene,
+    NicknameScene,
+    CharacterSelectScene,
+    WorldMapScene,
+    MainScene,
+    BridgeScene
+  ]
 };
 
-const game = new Phaser.Game(config);
+const game = new Phaser.Game(config);
+
+const socket = new SockJS(WS_URL); 
+
+const stompClient = new Client({
+  webSocketFactory: () => socket,
+  reconnectDelay: 5000,
+  debug: (str) => console.log('[STOMP]', str)
+});
+
+stompClient.onConnect = () => {
+  console.log("STOMP WebSocket 연결 성공");
+};
+
+stompClient.onStompError = (frame) => {
+  console.error("STOMP 오류:", frame.headers['message']);
+};
+
+stompClient.activate();
+
+export { stompClient, socket };

index.html

@@ -1,37 +1,34 @@
+
 <!DOCTYPE html>
 <html lang="ko">
 <head>
   <meta charset="UTF-8" />
   <title>Kuriverse</title>
   <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
   <style>
-    body { margin: 0;
-    background: #000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    overflow: hidden; }
-    canvas {
-    display: block;
-    border: 2px solid #333;
+    body {
+      margin: 0;
+      background: #000;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
     }
-    #chat-input {
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 300px;
-      height: 30px;
-      font-size: 18px;
-      display: none;
+    canvas {
+      display: block;
     }
   </style>
+
+  <script>
+    const SERVER_URL = "https://kuriverse.shop";
+    const WS_URL = "https://kuriverse.shop/ws/app";
+  </script>
 </head>
 <body>
-  <input id="chat-input" type="text" placeholder="채팅 입력..." />
-  <script src="loginScene.js"></script>
-  <script src="mainScene.js"></script>
-  <script src="game.js"></script>
+  <div id="game-container"></div> 
+  <script type="module" src="game.js"></script>
 </body>
-</html>
+</html>