181227 TIL 해커톤 - '시험지를 훔쳤다!'
Dec 27, 2018
»
1막,
TIL (Today I Learned),
코드스쿼드,
사이드프로젝트
제1회 프론트엔드 해커톤
헤드, 윤, 새라, 솔로몬과 함께 10시부터 6시까지 해커톤을 했다.
헤드와 미리 컨셉과 대략적인 스토리를 기획했고, 오전에 일찍와서 필요한 사진들을 찍어두었다.
타이틀 : 시험지를 훔쳤다!
기획 컨셉 : 방탈출 게임처럼 각 공간에서 힌트를 얻어 마지막 퀴즈를 풀어야 성공
줄거리 : 쪽지시험을 잘 보고 싶어서 시험지를 훔치러 코드스쿼드에 잠입하는 이야기
기획 일정
10:00 - 11:00 컨셉회의 및 스토리 확정
11:10 - 12:30 인트로 && 엔딩 짜기
12:30 - 13:00 점심
13:00 - 14:30 인트로 && 엔딩 완성
14:30 - 16:30 퀴즈 만들기 && 각 공간에 퀴즈 넣기 && 엔딩 크레딧 짜기
16:40 - 17:40 디버깅
현업 경험이 있는 윤 덕분에 여러 라이브러리도 사용하고, Vue도 사용해서 문제를 쉽게 해결할 수 있었다.
초반에 Typed.js라는 라이브러리를 써서 게임에서 타자치듯이 나오는 걸 구현하려고 했는데, 여러 문제가 있어서 애먹었다. 아직도 Strings의 첫번째 인자는 왜 출력이 안되는지 의문…
새라가 애자일 스타일(?)로 하자고 한 덕분에 인트로와 엔딩만 먼저 해서 채워나가는 식으로 진행하여 부담이 덜했다. 중간에 완성은 못해도 어쨌든 구현은 되는 방식으로!
전체 코드 파일
어제 새롭게 배운 내용
- Vue로 for문 도는 것처럼 해당 이미지와 text 띄우기
const app = new Vue({
el: '#app',
data: {
stories: [
{
imageUrl: 'intro1',
text: ["", "매달 마지막 주 목요일에 프론트엔드 클래스는 쪽지시험을 본다.", "지난 시험에 10점을 맞은 H군은 이번 시험은 잘 보기 위해 시험지를 훔치러 늦은 밤 코드스쿼드에 잠입하기로 결심했다."],
},
{
imageUrl: 'intro2',
text: ["", "문은 잠겨있다.", "옆 24시 감자탕 집을 통해 들어간다."],
},
{
imageUrl: 'intro3',
text: ["", "엘리베이터를 타고 올라간다."],
},
{
imageUrl: 'intro5',
text: ["", "4층을 누른다."],
},
{
imageUrl: 'intro6',
text: ["", "코드스쿼드에 도착했다.", "시험지를 훔치러 들어가볼까?"],
},
],
activeIndex: 0,
isLoaded: false,
},
methods: {
addIndex() {
if(this.isLoaded && this.activeIndex < 4) {
this.activeIndex++
this.activeChat();
} else if (this.activeIndex === 4) {
window.location.href = "./door.html";
}
},
activeChat() {
const vm = this;
vm.isLoaded = false;
const typed = new Typed('.chat-text', {
strings: vm.stories[vm.activeIndex].text,
typeSpeed: 40,
backDelay: 500,
fadeOut: true,
onComplete: () => {vm.doneLoading()},
});
},
doneLoading() {
this.isLoaded = true;
}
},
mounted() {
this.activeChat();
}
})
- css reset
@font-face {
font-family:'DungGeunMo';
src: url('../fonts/DungGeunMo.eot'), url('../fonts/DungGeunMo.woff'), url('../fonts/DungGeunMo.woff2');
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'DungGeunMo';
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
사실 짧은 시간이라 완성을 못할 줄 알았는데 구현해서 다행이었다.
윤 덕분에 Vue도 그렇고 전체 구조짜는 것도 여러가지 배울 수 있었고, 전체적인 팀웍이 좋아서 웃으면서 잘 진행해서 너무 좋았다!