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

실수

지금까지는 개발할 때 작업을 쉽게 하기 위해 일부 Svelte if(예, 다른 것을 사용할 수 있지만 지금은 중요하지 않음)를 실행하여 표시할 구성 요소를 결정했습니다.

이렇게 생겼네요..

    {#if $activeComponent === 'start'}
        <Start {socket} />
    {/if}
    {#if $activeComponent === 'Lobby'}
        <Lobby {socket} {currentCount} />
    {/if}
    {#if $activeComponent === 'Question'}
        <Question {currentCount} {socket} question={currentQuestion} />
    {/if}
    {#if $activeComponent === 'RoundResult'}
        <RoundResult {currentCount} {roundResults} />
    {/if}
    {#if $activeComponent === 'GameResult'}
        <GameResult results={gameResults} />
    {/if}
    {#if $activeComponent === 'GameList'}
        <GameList {socket} />
    {/if}
    {#if $activeComponent === 'GameSettings'}
        <GameSettings {socket} />
    {/if}

렌더링할 구성 요소를 동적으로 선택하는 데 사용할 수 있는 <svelte:component>에 대해 알고 있으므로 다음과 같이 했습니다.

<svelte:component this={showComponent} {...props} />

깔끔하고 보기 좋습니다.
showComponent 및 props는 일반 변수일 뿐입니다.
$activeComponent 저장소가 변경될 때 함수로 설정하기 위해 반응식을 사용합니다(활성화할 구성 요소의 문자열 이름 보유).

$: ({ showComponent, props } = getComponent($activeComponent));

getComponent는 필요한 구성 요소와 소품을 결정하는 스위치가 있는 함수일 뿐입니다.

    const getComponent = (active) => {
        switch (active) {
            case 'Start':
                return { showComponent: Start, props: { socket } };
            case 'Lobby':
                return { showComponent: Lobby, props: { socket, currentCount } };
            case 'Question':
                return { showComponent: Question, props: { socket, currentCount, question: currentQuestion } };
            case 'RoundResult':
                return { showComponent: RoundResult, props: { currentCount, roundResults } };
            case 'GameResult':
                return { showComponent: GameResult, props: { gameResults } };
            case 'GameList':
                return { showComponent: GameList, props: { socket } };
            case 'GameSettings':
                return { showComponent: GameSettings, props: { socket } };
            default:
                return {};
        }
    };

이것은 "대부분 작동"하지만 큰 결함이 있습니다. props는 절대 업데이트되지 않으므로 카운트 다운은 일반 변수이므로 작동하지 않으며 props 변수는 보유하고 있는 값이 참조가 아닌 값으로 전달되므로 업데이트되지 않습니다...

확실히 이 문제를 해결하기 위해 더 많은 코드를 추가하거나 문제를 조금 재고하고 약간 다른 방식으로 작업을 수행할 수 있습니다. 무슨 일이 일어나고 있는지 이해하므로 이제 이전 코드로 되돌립니다.

적어도 시간 낭비는 아니었고 몇 가지를 배웠고 문제가 있었습니다...

무작위 호언 장담 n 브레인 스토밍 n 물건

지금의 주요 목표는 KISS가 되어야 한다고 생각합니다. 간단하고 어리석게 유지하고 모든 부분을 통합하는 작업입니다.

큰 장애물은 여전히 ​​멍청한 UI 디자인입니다. 당연히 그렇겠죠. 그냥 퀴즈 게임일 뿐이지만, 괜찮게 보이고 잘 작동하도록 배치하는 방법에 대한 좋은 아이디어가 없습니다..

어쩌면 결과를 테이블로 표시하는 접근 방식을 시도해야 할 수도 있지만 모바일에서 어떻게 멋지게 보일 수 있는지 알 수 없습니다. 네, 저는 여전히 UI 디자인이 좋지 않습니다.

우스운 여담으로, 나는 실제로 인간-컴퓨터 상호 작용 과정을 하고 있지만 UNI의 대부분의 과정에서 고대의 내용을 가르칩니다. 지금 가르치는 내용과 예는 2000년 초반의 것인데 지금 우리가 살고 있는 시대에 적용할 수 없는 부분이 많습니다.

주로 "황금 사각형"과 같은 것들에 대해 이야기합니다. 웹용으로 디자인할 때 응답성이 뛰어나고 크기를 변경할 수 있어야 합니다. 화면 비율과 방향이 크게 다른 장치. 내가 웹 디자인을 볼 때 그것은 종종 트레이드 오프를 만드는 것에 관한 것입니다. UI 물건을 끝없이 조정하는 것을 좋아하지 않기 때문에 대부분의 경우 충분히 잘 작동하는 것을 만드십시오.

이 로그에 개발자 이야기가 많지 않은 것 같지만, 제가 실험하고 있던 것을 되돌리면서 많은 작업을 수행하지 못했습니다.

일단은 여기까지.. 한국 드라마 좀 더 봅시다.. ;)