vue로 텍스트 게임 만들기(1) - 기본 레이아웃 디자인 및 vuex 설치

구상

콘솔창(cmd)창과 비슷한 디자인을 구현하고 채팅을 통해 진행

스토리 + 퍼즐 등으로 구성할 예정

vue 뿐만 아니라 다양한 브라우저API 활용

 

기본 레이아웃 디자인

html과 css를 이용하여 기본적인 cmd 디자인을 만들어 주었다.

<template>
  <div id="scroll">
    <div id="viewport">
      <p>> 테스트</p>
      <p>> 테스트</p>
      <!-- 여기에 콘텐츠가 들어올 예정 -->
    </div>
    <input id="consoleInput" type="text" autocomplete="off" autofocus />
  </div>
</template>


<script>
export default {
  name: "App",
};
</script>


<style>
body {
  background-color: black;
  color: white;
  margin: 0;
}

::selection {
  background-color: gray;
}

#scroll {
  margin-left: 15px;
  width: calc(100% - 20px);
  height: calc(100vh - 15px);
  overflow-y: scroll;
}

#scroll::-webkit-scrollbar {
  width: 2px; /* 스크롤바의 너비 */
}

#scroll::-webkit-scrollbar-thumb {
  background: rgb(15, 15, 15); /* 스크롤바의 색상 */
  border-radius: 10px;
}

#consoleInput {
  width: calc(100% - 15px);
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  color: white;
  font-size: 21px;
}

#consoleInput:focus {
  outline: none;
}

#viewport > * {
  margin: 0;
  font-size: 21px;
}
</style>

브라우저 화면

스크롤 영역을 만든 뒤 내부에 내용이 보여질 div와 input을 넣는다. css를 통해 위치와 스크롤바모양, 드래그시 색상, 폰트사이즈 등을 바꾸어주었다.

 

vuex설치 및 기본 세팅

npm install vuex@next --save

위의 npm명령어를 사용하여  vuex를 설치해주었다.

src폴더의 내부에 store.js파일을 생성하고 내용을 채워준다.

store.js 내용

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
        canWrite:true, //현재 입력받을 수 있는지 여부를 저장하는 state
    }
  },
})

export default store

 

 

레이아웃을 완성했으니 다음번엔 기본적인 기능을 구현해보도록 하겠다.