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

add

Browse source
This commit is contained in:
Dooho Yi 2022-01-17 14:49:39 +09:00
parent 3e44ca737b
commit 79f17f5682
9 changed files with 297 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/default.css
View file

@ -45,11 +45,13 @@ body {
position: fixed; position: fixed;
top: 15px; top: 15px;
right: 20px; right: 20px;
z-index: 2;
} }
.list { .list {
position: fixed; position: fixed;
top: 15px; top: 15px;
left: 20px; left: 20px;
z-index: 2;
} }
.sub { .sub {
position: fixed; position: fixed;
@ -71,11 +73,13 @@ body {
position: fixed; position: fixed;
top: 36px; top: 36px;
right: 20px; right: 20px;
z-index: 2;
} }
.list-parade { .list-parade {
position: fixed; position: fixed;
top: 68px; top: 68px;
right: 20px; right: 20px;
z-index: 2;
} }
a, a,

16
public/entry.js
View file

@ -63,9 +63,9 @@ function draw() {
//pointer //pointer
fill(0, 255, 0); fill(0, 255, 0);
strokeWeight(0); strokeWeight(0);
circle(mouseX, mouseY, 10);
// //mouse way
circle(mouseX, mouseY, 10);
if (mouseIsPressed && mouseButton === LEFT) { if (mouseIsPressed && mouseButton === LEFT) {
//find slot under the pointer //find slot under the pointer
var mouseC = int(mouseX/(unit+sw)); var mouseC = int(mouseX/(unit+sw));
@ -75,6 +75,18 @@ function draw() {
img.fill(255); img.fill(255);
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2); img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
} }
//touch way
if (touches.length > 0) {
circle(touches[0].x, touches[0].y, 10);
//find slot under the pointer
var mouseC = int(touches[0].x/(unit+sw));
var mouseR = int(touches[0].y/(unit+sw));
if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
img.strokeWeight(0);
img.fill(255);
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
}
} }
function submitForm(event) { function submitForm(event) {

30
server.js
View file

@ -93,6 +93,7 @@ fastify.get("/", function (request, reply) {
//get list //get list
let list = await fs.readdir('/media/storage/public/sound-parade/'); let list = await fs.readdir('/media/storage/public/sound-parade/');
list.reverse();
// console.log(list); // console.log(list);
@ -115,6 +116,35 @@ fastify.get("/", function (request, reply) {
}); });
}); });
//get '/en/list', '/en/list/'
["/en/list", "/en/list/"].forEach(function(item) {
fastify.get(item, async function (request, reply) {
//get list
let list = await fs.readdir('/media/storage/public/sound-parade/');
list.reverse();
// console.log(list);
let folders = [];
for (const item of list) {
var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + item + '/fields.json')).toString('utf8'));
folders.push({
foldername: item,
group: fields.group,
title: fields.title,
comment: fields.comment,
});
}
// console.log(folders);
reply.view("/src/pages/list.en.html", {
list: folders,
});
});
});
//get '/entries' //get '/entries'
fastify.get("/entries", async function (request, reply) { fastify.get("/entries", async function (request, reply) {

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

@ -15,9 +15,9 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content ph5 center"> <div class="content ph5 center">
<div class="lang"><a href="https://stream.dianaband.info/entry">KR</a></div> <div class="lang"><a href="/entry">KR</a></div>
<div class="content"> <div class="content">
<div class="list"><a href="https://stream.dianaband.info/en/list">list</a></div> <div class="list"><a href="/en/list">list</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>
@ -44,12 +44,16 @@
</p> </p>
<p class="white f3 pv3"> <p class="white f3 pv3">
Place<br/> Place<br/>
YouTube streaming, links <a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">France en Corée - YouTube channel</a>
</p> </p>
<p class="white f3 pv3"> <p class="white f3 pv3">
Parade Composition<br/> Parade Composition<br/>
Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 Whoness Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 Whoness
</p> </p>
<p class="white f3 pv3">
Inquiry<br/>
wonjung24@gmail.com
</p>
</section> </section>
<section class="participation"> <section class="participation">
<p class="white f3 pv3 sec"> <p class="white f3 pv3 sec">
@ -120,6 +124,7 @@
<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 />
</div> </div>
</li> </li>
<li> <li>
<div class="pv3"> <div class="pv3">
<input type="submit" value="Upload" /> <input type="submit" value="Upload" />
@ -132,6 +137,5 @@
</div> </div>
</div> </div>
<script src="/entry.js"></script> <script src="/entry.js"></script>
</body> </body>
</html> </html>

16
src/pages/entry.html
View file

@ -2,7 +2,7 @@
<html> <html>
<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, 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" />
@ -14,9 +14,9 @@
<body> <body>
<div class="bg"></div> <div class="bg"></div>
<div class="content"> <div class="content">
<div class="lang"><a href="https://stream.dianaband.info/en/entry">EN</a></div> <div class="lang"><a href="/en/entry">EN</a></div>
<div class="content"> <div class="content">
<div class="list"><a href="https://stream.dianaband.info/list">목록</a></div> <div class="list"><a href="/list">목록</a></div>
<div class="notice"> <div class="notice">
<section> <section>
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
@ -30,7 +30,8 @@
«흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
</p> </p>
<p> <p>
1월 27일(목) 밤, 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. 많은 참여 및 관심 부탁드립니다. 1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
많은 참여 및 관심 부탁드립니다.
</p> </p>
<div class="info"> <div class="info">
<p> <p>
@ -44,12 +45,16 @@
</p> </p>
<p> <p>
장소<br/> 장소<br/>
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">프랑스 문화원 유튜브 채널</a> <a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
</p> </p>
<p> <p>
퍼레이드 구성<br/> 퍼레이드 구성<br/>
무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들 무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
</p> </p>
<p>
문의<br/>
wonjung24@gmail.com
</p>
</div> </div>
</section> </section>
<section class="participation"> <section class="participation">
@ -133,5 +138,6 @@
</div> </div>
</div> </div>
<script src="/entry.js"></script> <script src="/entry.js"></script>
</div>
</body> </body>
</html> </html>

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

@ -14,12 +14,12 @@
<body> <body>
<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="https://stream.dianaband.info/list">KR</a></div> <div class="lang"><a href="/list">KR</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="https://stream.dianaband.info/en/entry">Submission<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="list-sub"><a href="/en/entry">Submission<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-parade"><a href="https://stream.dianaband.info/">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice"> <div class="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice">
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1> <h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
{{#each list}} {{#each list}}
<div class="items" foldername="{{this.foldername}}"> <div class="items" foldername="{{this.foldername}}">

6
src/pages/list.html
View file

@ -15,11 +15,11 @@
<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="https://stream.dianaband.info/en/list">EN</a></div> <div class="lang"><a href="/en/list">EN</a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-sub"><a href="https://stream.dianaband.info/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="list-sub"><a href="/entry">모집<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="content" id="list"> <div class="content" id="list">
<div class="list-parade"><a href="https://stream.dianaband.info/">퍼레이드<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="list-parade"><a href="/" target="_blank">퍼레이드<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="notice"> <div class="notice">
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1> <h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
{{#each list}} {{#each list}}

17
src/pages/submit.en.html
View file

@ -13,7 +13,6 @@
</head> </head>
<body> <body>
<div class="bg"></div> <div class="bg"></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>
@ -21,13 +20,17 @@
Submission complete! Submission complete!
</p> </p>
<div class="content"> <div class="content">
<div class="sub"><a href="https://stream.dianaband.info/entry">≪ SUBMISSTION</a></div> <div class="sub">
<div class="content"> <a href="/entry">≪ ENTRY</a>
<div class="list2"><a href="https://stream.dianaband.info/list">▤ LIST</a></div>
<div class="content">
<div class="parade"><a href="https://stream.dianaband.info/">PARADE ≫</a></div>
</section>
</div> </div>
<div class="list2">
<a href="/list">▤ LIST</a>
</div>
<div class="parade">
<a href="/" target="_blank">PARADE ≫</a>
</div>
</div>
</section>
</div> </div>
</body> </body>
</html> </html>

16
src/pages/submit.html
View file

@ -20,13 +20,17 @@
제출되었습니다 제출되었습니다
</p> </p>
<div class="content"> <div class="content">
<div class="sub"><a href="https://stream.dianaband.info/entry">≪ 소리 모집</a></div> <div class="sub">
<div class="content"> <a href="/entry">≪ 소리 모집</a>
<div class="list2"><a href="https://stream.dianaband.info/list">▤ 소리 목록</a></div>
<div class="content">
<div class="parade"><a href="https://stream.dianaband.info/">퍼레이드 ≫</a></div>
</section>
</div> </div>
<div class="list2">
<a href="/list">▤ 소리 목록</a>
</div>
<div class="parade">
<a href="/" target="_blank">퍼레이드 ≫</a>
</div>
</div>
</section>
</div> </div>
</body> </body>
</html> </html>