socket.io, svelte 및 node를 사용하여 멀티플레이어 영화 퀴즈/퀴즈 게임을 만들어 봅시다. 데블로그 #9

짧은 업데이트

이 로그는 짧을거고, 피곤해서 일도 많이 안하고 한국 드라마도 보고...

그래도 어느정도 진척은 있습니다.. 설정 컴포넌트를 만들어서 연결해봤습니다.

이것이 지금의 모습입니다



코드는 간단합니다. 필요한 상점을 가져옵니다.
설정에 개체를 사용하고 다른 입력은 개체 속성에 바인딩됩니다.

Create Game 버튼을 클릭하면 createGame() 함수가 실행됩니다.
이것은 이전과 동일한 기능이지만 차이점은 플레이어 이름과 시드를 상점으로 이동하여 소품을 전달하지 않고 액세스할 수 있도록 하는 것입니다.

내가 나 자신과 논의한 유일한 것은 이 함수가 어디에 있어야 하는가 하는 것입니다. 나는 그것을 최상위 레벨에 놓고 그것을 아래로 전달할 수 있지만, 그것은 단지 일을 어지럽힐 뿐이고 그렇게 할 필요가 없습니다.

이 함수는 또한 joinGame() 함수와 일부 논리를 공유하므로 shld가 이 공유 논리를 일반 Javascript 파일로 추상화하는지 여부에 대해 토론했습니다(상태가 구성 요소에 연결되지 않도록 store를 사용하므로 이제 wld가 가능합니다.)

현재 결론은 이렇게 유지하고 구성 요소가 필요로 하는 논리를 구성 요소 자체 내부에 캡슐화하는 것입니다. 확실히 약간의 코드 중복이 있겠지만 필요한 논리를 다른 파일에 흩어 놓지 않고 한 곳에 수집하는 것이 좋습니다. 올바른 접근 방식입니다.

아래는 컴포넌트 코드...

<script>
    import { gameProps, players, player, activeComponent } from '../lib/stores';
    export let socket;

    const settings = {
        rounds: 3,
        maxPlayers: 3,
        roundTime: 30,
        waitBetweenRounds: 5,
        name: 'my epic quiz',
    };

    function createGame(gameSettings) {
        console.log('gs', gameSettings);
        activeComponent.set('GameSettings');
        let data = { name: $player.name, avatar: $player.seed, settings: gameSettings };
        socket.emit('create-game', data, (response) => {
            console.log(response.status);
            if (response.status === 'ok') {
                //set all the other response data in store.. playerId and gameData
                players.set(response.players);
                gameProps.set(response.gameData);
                $player.id = response.playerId;
                //move to lobby
                activeComponent.set('lobby');
            }
        });
    }
</script>

<div>
    <form>
        <label for="gameName">Game name</label>
        <input id="gameName" type="text" bind:value={settings.name} />
        <label for="rounds">Rounds: {settings.rounds}</label>
        <input id="rounds" type="range" min="1" max="10" bind:value={settings.rounds} />
        <label for="maxPlayers">Max Players: {settings.maxPlayers}</label>
        <input id="maxPlayers" type="range" min="1" max="5" bind:value={settings.maxPlayers} />
        <label for="roundTime">Round Time: {settings.roundTime}s</label>
        <input id="roundTime" type="range" min="10" max="60" bind:value={settings.roundTime} />
        <label for="waitTimeBetweenRounds">Wait Between Rounds: {settings.waitBetweenRounds}s</label>
        <input id="waitTimeBetweenRounds" type="range" min="5" max="20" bind:value={settings.waitBetweenRounds} />
        <button on:click|preventDefault={() => createGame(settings)}>Create Game</button>
    </form>
</div>

지금은 여기까지입니다....

그래, 많이 한 건 아니지만 적어도 몇 개는 여전히 피곤해.. 이제 누워서 한국 드라마를 더 볼거야.. ;)