Merge pull request #179 from HyeokjinKang/editor-comment-feat

feat: comment 속성을 추가하고 일부 스타일을 수정했습니다.
HyeokjinKang · Nov 1, 2024 · 9c04918 · 9c04918
2 parents ea0bfe0 + 87fe4e0
commit 9c04918
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/public/css/editor.css b/public/css/editor.css
@@ -379,7 +379,7 @@ body {
 }
 
 .settingsPropertiesContainer {
-  width: 70%;
+  width: 90%;
 }
 
 #settingsTracksContainer {
@@ -396,33 +396,47 @@ body {
 
 .settingsPropertiesTitle {
   letter-spacing: 0px;
-  margin-left: 1.5vw;
   font-size: 1.5vh;
 }
 
 .settingsPropertiesTextbox {
+  box-sizing: border-box;
+  padding: 4px 6px;
   text-align: center;
-  margin-left: 0.5vw;
   width: 50%;
-  height: 2vh;
   border-radius: 2px;
   border: 1px solid #bbb;
   color: #999;
   font-weight: 500;
   font-size: 1.5vh;
 }
 
+.settingsPropertiesTextbox.left {
+  text-align: left;
+}
+
 .settingsPropertiesIndividual {
+  margin-left: 1.5vw;
   margin-top: 1vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
+.settingsPropertiesIndividual.column {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.settingsPropertiesIndividual.column input {
+  margin-left: 0;
+  margin-top: 1vh;
+  width: 100%;
+}
+
 .settingsButtons {
   width: 25%;
-  margin: 0.1vw;
   border: solid 1px #aaa;
   background-color: #fff;
   color: #555;
@@ -635,8 +649,9 @@ body {
 }
 
 .settingsSelectBox {
-  width: 53%;
-  height: 2.6vh;
+  width: 50%;
+  box-sizing: border-box;
+  padding: 4px 6px;
   border-radius: 2px;
   border: 1px solid #bbb;
   color: #999;

diff --git a/public/js/editor.js b/public/js/editor.js
@@ -79,6 +79,7 @@ let pattern = {
     track: "",
     producer: "",
     author: "",
+    comment: "",
     bpm: "",
     speed: "",
     offset: "",
@@ -261,6 +262,7 @@ const songSelected = (isLoaded, withoutSong) => {
       track: tracks[songSelectBox.selectedIndex].name,
       producer: tracks[songSelectBox.selectedIndex].producer,
       author: userName,
+      comment: `Hello. This is ${userName}.`,
       bpm: tracks[songSelectBox.selectedIndex].bpm,
       speed: 2,
       offset: 0,
@@ -273,9 +275,10 @@ const songSelected = (isLoaded, withoutSong) => {
   settingsPropertiesTextbox[0].value = pattern.information.track;
   settingsPropertiesTextbox[1].value = pattern.information.producer;
   settingsPropertiesTextbox[2].value = pattern.information.author;
-  settingsPropertiesTextbox[3].value = pattern.information.bpm;
-  settingsPropertiesTextbox[4].value = pattern.information.speed;
-  settingsPropertiesTextbox[5].value = pattern.information.offset;
+  settingsPropertiesTextbox[3].value = pattern.information.comment;
+  settingsPropertiesTextbox[4].value = pattern.information.bpm;
+  settingsPropertiesTextbox[5].value = pattern.information.speed;
+  settingsPropertiesTextbox[6].value = pattern.information.offset;
   if (denySkin) canvasBackground.style.filter = `grayscale(30%) opacity(20%)`;
   else canvasBackground.style.filter = `brightness(30%)`;
   bpm = pattern.information.bpm;
@@ -679,6 +682,7 @@ const gotoMain = (isCalledByMain) => {
         track: "",
         producer: "",
         author: "",
+        comment: "",
         bpm: "",
         speed: "",
         offset: "",
@@ -1437,6 +1441,7 @@ const save = () => {
     track: trackSettingsForm[0].value,
     producer: trackSettingsForm[1].value,
     author: trackSettingsForm[2].value,
+    comment: trackSettingsForm[3].value,
     bpm: pattern.information.bpm,
     speed: pattern.information.speed,
     offset: offset,
@@ -2408,6 +2413,7 @@ const test = () => {
     pattern.track = trackSettingsForm[0].value;
     pattern.producer = trackSettingsForm[1].value;
     pattern.author = trackSettingsForm[2].value;
+    pattern.comment = trackSettingsForm[3].value;
     localStorage.pattern = JSON.stringify(pattern);
     window.location.href = `${url}/test`;
   }, 500);

diff --git a/views/editor.ejs b/views/editor.ejs
@@ -373,9 +373,9 @@
                     <input type="text" class="settingsPropertiesTextbox metropolis" onfocus="textFocused()" onblur="textBlurred()" onkeyup="triggersInput('y', this)" />
                   </div>
                   <p class="settingsSemiTitle">VALUE</p>
-                  <div class="settingsPropertiesIndividual">
+                  <div class="settingsPropertiesIndividual column">
                     <span class="settingsPropertiesTitle">TEXT</span>
-                    <input type="text" class="settingsPropertiesTextbox metropolis" onfocus="textFocused()" onblur="textBlurred()" onkeyup="triggersInput('text', this)" />
+                    <input type="text" class="settingsPropertiesTextbox metropolis left" onfocus="textFocused()" onblur="textBlurred()" onkeyup="triggersInput('text', this)" />
                   </div>
                 </div>
                 <div class="settingsPropertiesContainer">
@@ -399,15 +399,19 @@
                 <p class="settingsSemiTitle">INFORMATION</p>
                 <div class="settingsPropertiesIndividual">
                   <span class="settingsPropertiesTitle">TRACK</span>
-                  <input type="text" class="settingsPropertiesTextbox metropolis" readonly />
+                  <input type="text" class="settingsPropertiesTextbox metropolis left" readonly />
                 </div>
                 <div class="settingsPropertiesIndividual">
                   <span class="settingsPropertiesTitle">PRODUCER</span>
-                  <input type="text" class="settingsPropertiesTextbox metropolis" readonly />
+                  <input type="text" class="settingsPropertiesTextbox metropolis left" readonly />
                 </div>
                 <div class="settingsPropertiesIndividual">
                   <span class="settingsPropertiesTitle">AUTHOR</span>
-                  <input type="text" class="settingsPropertiesTextbox metropolis" onfocus="textFocused()" onblur="textBlurred()" value="" />
+                  <input type="text" class="settingsPropertiesTextbox metropolis left" onfocus="textFocused()" onblur="textBlurred()" value="" />
+                </div>
+                <div class="settingsPropertiesIndividual column">
+                  <span class="settingsPropertiesTitle">COMMENT</span>
+                  <input type="text" class="settingsPropertiesTextbox metropolis left" onfocus="textFocused()" onblur="textBlurred()" value="" />
                 </div>
               </div>
               <div class="settingsPropertiesContainer">