doohoyi/sound-parade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update

Browse source
This commit is contained in:
Dooho Yi 2022-01-18 13:20:58 +09:00
parent 6bd1805521
commit 686848b62a
8 changed files with 227 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

214
public/default.css
View file

@ -6,34 +6,39 @@
} }
body { body {
color: white; position: absolute;
font-size: 15px; top: 0;
line-height: 1.4; left: 0;
font-family: 'Noto Sans KR', sans-serif; width: 100%;
height: 100%;
color: white;
font-size: 15px;
line-height: 1.4;
font-family: 'Noto Sans KR', sans-serif;
} }
.bg { .bg {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%); background: linear-gradient(#000000, #222958 65%, #e7e7d6 95%);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
/* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */ /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
z-index: -1; // this is optional z-index: -1; // this is optional
} }
.popup { .popup {
display: none; display: none;
position: absolute; position: absolute;
max-width: 800px; max-width: 800px;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
z-index: 100; z-index: 100;
} }
.content { .content {
@ -46,18 +51,18 @@ body {
top: 20px; top: 20px;
right: 15px; right: 15px;
z-index: 2; z-index: 2;
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.list { .first {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 37.5px; right: 18px;
z-index: 2; z-index: 2;
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.prd { .second {
position: fixed; position: fixed;
top: 20px; top: 20px;
right: 40px; right: 40px;
@ -65,6 +70,18 @@ body {
writing-mode: vertical-lr; writing-mode: vertical-lr;
} }
.third {
position: fixed;
top: 20px;
right: 60px;
z-index: 2;
writing-mode: vertical-lr;
}
audio {
cursor: pointer;
}
.sub { .sub {
position: fixed; position: fixed;
bottom: 15px; bottom: 15px;
@ -98,7 +115,7 @@ body {
a, a,
a:visited, a:visited,
a:hover, a:hover,
a:focus a:focus,
a:active { a:active {
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -170,7 +187,7 @@ ol, ul {
} }
.submit li { .submit li {
margin-bottom: 20px; margin-bottom: 30px;
} }
.submit li li { .submit li li {
@ -185,73 +202,89 @@ ol, ul {
overflow: hidden; overflow: hidden;
} }
.noscroll * { touch-action: none; .noscroll * {
touch-action: none;
} }
button { small {
background-color: transparent; margin-top: 5px;
border: 1px white solid; display: block;
color: white; }
canvas {
margin: 5px 0 5px 0;
} }
.items { .items {
border-top: 1.5px solid white; padding: 50px 0 50px 0;
padding: 10px 0 10px 0;
} }
.drawing { .items li {
position: relative; position: relative;
display: inline-block; vertical-align: top;
width: 300px; padding: 2px 0 2px 0;
left: 50%;
transform: translate(-50%);
vertical-align: top;
text-align: center;
}
.name {
display: inline-block;
} }
.sound { .sound {
display: inline-block; position: relative;
left: 50%;
transform: translate(-50%);
margin-top: 40px;
}
.delete {
margin-top: 15px;
}
.drawing {
position: relative;
display: inline-block;
width: 300px;
left: 50%;
transform: translate(-50%);
vertical-align: top;
text-align: center;
}
.name {
display: inline-block;
}
.sound {
display: inline-block;
} }
.soundinfo { .soundinfo {
position: fixed; padding-top: 30px;
width: 500px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 900;
background-color: white;
opacity: 0.5;
color: white;
padding: 15px 15px 5px 15px;
word-break: break-all;
} }
.soundinfo:target { .soundinfo li {
visibility: visible; vertical-align: top;
opacity: 1; }
z-index: 99;
.group,
.title,
.comment,
.sound,
.smallclose {
display: inline-block;
vertical-algin: top;
}
details summary::-webkit-details-marker {
display:none;
} }
.roomsel { .roomsel {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
.intro { .intro {
position: relative; display: none;
display: block; position: relative;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
font-size: 15px; font-size: 15px;
@ -260,16 +293,31 @@ position: relative;
text-align: center; text-align: center;
} }
tr {
color: red;
}
tr,
td {
display: inline-block;
}
summary {
list-style: none;
outline: none;
cursor: pointer;
}
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.notice { .notice {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: 90%; width: 90%;
top: 50px; top: 50px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
padding-bottom: 20px; padding-bottom: 20px;
} }
} }

2
public/parade.css
View file

@ -1,4 +1,4 @@
html, html,
body { body {
overflow: hidden; overflow: hidden;
} }

34
server.js
View file

@ -201,22 +201,22 @@ fastify.post("/entry", async function (request, reply) {
console.log("convert to mp3..."); console.log("convert to mp3...");
converted = true; converted = true;
function converter() { function converter() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// //
let outputFile = tmpdir + "/converted.mp3"; let outputFile = tmpdir + "/converted.mp3";
// --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg) // --> https://stackoverflow.com/a/36109219 (a quick tip on fluent-ffmpeg)
ffmpeg() ffmpeg()
.addInput(audiofile.filepath) .addInput(audiofile.filepath)
.on("error", function(err) { .on("error", function(err) {
reject(err); reject(err);
}) })
.on("end", function() { .on("end", function() {
resolve(outputFile); resolve(outputFile);
}) })
.outputOptions('-b:a 192000') .outputOptions('-b:a 192000')
.output(outputFile) .output(outputFile)
.run(); .run();
}); });
} }
await converter(); await converter();
// console.log(await fs.readdir(tmpdir)); // console.log(await fs.readdir(tmpdir));
@ -287,7 +287,7 @@ var looper;
// io.to("room" + indexed).emit("post", score[pointed]); // io.to("room" + indexed).emit("post", score[pointed]);
io.to("room" + indexed).emit("post", pointed); io.to("room" + indexed).emit("post", pointed);
// }, score[pointer].object.showtime * index, pointer, index); // }, score[pointer].object.showtime * index, pointer, index);
}, 30000 * index, pointer, index); }, 30000 * index, pointer, index);
} }

4
src/pages/entry.en.html
View file

@ -14,8 +14,8 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/entry">KR</a></div> <div class="first"><a href="/entry">KR</a></div>
<div class="list"><a href="/en/list">list</a></div> <div class="second"><a href="/">Home</a></div>
<div class="notice"> <div class="notice">
<section> <section>
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1> <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>

51
src/pages/entry.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>흐름을 향하여 걷는 | 입장</title> <title>흐름을 향하여 걷는 | 소개</title>
<link rel="stylesheet" href="/default.css" /> <link rel="stylesheet" href="/default.css" />
<link rel="stylesheet" href="/entry.css" /> <link rel="stylesheet" href="/entry.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -14,8 +14,8 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/en/entry">EN</a></div> <div class="first"><a href="/en/entry">EN</a></div>
<div class="prd"><a href="/" target="_blank">퍼레이드</a></div> <div class="second"><a href="/" target="_blank">홈</a></div>
<div class="notice"> <div class="notice">
<section> <section>
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@ -29,7 +29,7 @@
«흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
</p> </p>
<p> <p>
1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다. 1월 27일(목) 밤, «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 ‘사유의 밤’ 행사에서 송출될 예정입니다. ‘사유의 밤’은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
많은 참여 및 관심 부탁드립니다. 많은 참여 및 관심 부탁드립니다.
</p> </p>
<div class="info"> <div class="info">
@ -75,21 +75,23 @@
<h2>소리 제출</h2> <h2>소리 제출</h2>
<form id="form" method="POST" enctype="multipart/form-data"> <form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit"> <ul class="submit">
<h3>1. 소리 유형</h3> <li>
<ul> <h3>1. 소리 유형</h3>
<li> <ul>
<input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들 <li>
</li> <input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
<li> </li>
<input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들 <li>
</li> <input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
<li> </li>
<input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들 <li>
</li> <input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
<li> </li>
<input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들 <li>
</li> <input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
</ul> </li>
</ul>
</li>
<li> <li>
<h3>2. 소리 파일</h3> <h3>2. 소리 파일</h3>
<input type="file" name="audiofile" autocomplete="off" required /> <input type="file" name="audiofile" autocomplete="off" required />
@ -109,16 +111,19 @@
</div> </div>
</li> </li>
<li> <li>
<h3>6. 비밀 번호</h3> <h3>6. 비밀 번호</h3>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required /> <input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</sma </li> <small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</small>
</li>
<li> <li>
<input id="submit" type="submit" value="제출하기" /> <input id="submit" type="submit" value="제출하기" />
</li> </li>
</ul> </ul>
</form> </form>
</section> </section>
<section>
<h2><a href="/list">소리 목록</a></h2>
</section>
</div><!-- div class="notice" --> </div><!-- div class="notice" -->
</div><!-- div class="content" --> </div><!-- div class="content" -->
<script> <script>

8
src/pages/list.en.html
View file

@ -15,12 +15,12 @@
<div class="bg"></div> <div class="bg"></div>
<div class="popup"></div> <div class="popup"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/list">KR</a></div> <div class="first"><a href="/list">KR</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="/en/entry">Entry<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="second"><a href="/">Home</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice"> <div class="notice">
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1> <h1>Sound &nbsp;List</h1>
{{#each list}} {{#each list}}
<div class="items" foldername="{{this.foldername}}"> <div class="items" foldername="{{this.foldername}}">
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /> <img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />

86
src/pages/list.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>흐름을 향하여 걷는 | 목록</title> <title>흐름을 향하여 걷는 | 소리 목록</title>
<link rel="stylesheet" href="/default.css" /> <link rel="stylesheet" href="/default.css" />
<link rel="stylesheet" href="/list.css" /> <link rel="stylesheet" href="/list.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
@ -15,55 +15,57 @@
<div class="bg"></div> <div class="bg"></div>
<div class="popup"></div> <div class="popup"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="/en/list">EN</a></div> <div class="first"><a href="/en/list">EN</a></div>
<div class="second"><a href="/">홈</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice">
<div class="content" id="list"> <h1>소리 &nbsp;목록</h1>
<div class="list-parade"><a href="/" target="_blank">퍼레이드<i class='fas fa-bell' style='font-size:24px'></i></a></div> {{#each list}}
<div class="notice"> <div class="items" foldername="{{this.foldername}}">
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <details>
{{#each list}} <summary><img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /></summary>
<div class="items" foldername="{{this.foldername}}">
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
<div class="group">{{this.group}}</div>
<div class="title">{{this.title}}</div>
<div class="comment">{{this.comment}}</div>
<audio class="sound" preload="none" controls> <audio class="sound" preload="none" controls>
<source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg"> <source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
</audio> </audio>
<button class="delete" type="button" onclick="del(this)">삭제x</button> <ul class="soundinfo"><hr>
</div> <li>유형 | <div class="group">{{this.group}}</div></li><hr>
{{/each}} <li>제목 | <div class="title">{{this.title}}</div></li><hr>
<li>묘사 | <div class="comment">{{this.comment}}</div></li><hr>
</ul>
<button class="delete" type="button" onclick="del(this)">삭제</button>
</details>
</div> </div>
{{/each}}
</div> </div>
<script> </div>
function del(that) { <script>
console.log(); function del(that) {
let text; console.log();
let pass = prompt("Please enter password!", "숫자2개"); let text;
if (/^\d{2}$/.test(pass)) { let pass = prompt("Please enter password!", "숫자2개");
var target = that.parentElement.getAttribute('foldername'); if (/^\d{2}$/.test(pass)) {
const trydelete = async () => { var target = that.parentElement.getAttribute('foldername');
const response = await fetch('/delete/' + target + '/' + pass); const trydelete = async () => {
if (response.ok) { const response = await fetch('/delete/' + target + '/' + pass);
const json = await response.json(); if (response.ok) {
return Promise.resolve(json); const json = await response.json();
} else { return Promise.resolve(json);
return Promise.reject('no response.'); } else {
} return Promise.reject('no response.');
} }
trydelete().then((resp) => {
if (resp.result) {
alert("지우기 성공!");
location.reload();
} else {
alert("지우기 실패-");
}
}).catch(console.log);
} else {
alert("암호는 숫자2개...");
} }
trydelete().then((resp) => {
if (resp.result) {
alert("지우기 성공!");
location.reload();
} else {
alert("지우기 실패-");
}
}).catch(console.log);
} else {
alert("암호는 숫자2개...");
} }
</script> }
</script>
</body> </body>
</html> </html>

3
src/pages/parade.html
View file

@ -17,9 +17,6 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="notice">
<h1> 흐름을 향하여 걷는</h1>
</div>
</div> </div>
</body> </body>
</html> </html>