divider update

Author: EnderWolf006

.github/workflows/main.yml

@@ -61,6 +61,7 @@ jobs:
             2024/3/17: 已支持课上隐藏课表，课上仅保留小窗倒计时，开机自动启动，鼠标靠近降低透明度
             2024/3/22: ~~已修复开机自动启动报错Bug~~，新增小窗口倒计时课程名称显示
             2024/3/23: 已修复workingDir未配置导致的开机自动启动报错Bug
+            2024/3/29: 已支持配置课程间分隔线，在配置文件中有详细介绍
             喜欢本项目的话, 点击右上角的Star支持一下作者吧😘
           draft: false
           prerelease: false

css/style.css

@@ -164,4 +164,11 @@
     font-family: JetB;
     color: #FFF;
     display: none;
+}
+
+.divider {
+    width: var(--divider-width);
+    background-color: #aaa;
+    border-radius: calc(var(--divider-width) / 2);
+    margin: var(--divider-margin);
 }

index.html

@@ -47,6 +47,7 @@
   let weekCH = document.getElementById('weekCH')
   let countdownDays = document.getElementById('countdownDays')
   let miniCountdown = document.getElementById('miniCountdown')
+  let root = document.querySelector(':root');
   let isClassCountdown = true
   let isClassHidden = true
   let lastScheduleData = {
@@ -57,7 +58,9 @@
       countdown: null,
       countdownText: null
     },
-    scheduleArray: [null, null, null]
+    scheduleArray: [null, null, null],
+    timetable: null,
+    divider: [null, null]
   }
 
   function setScheduleClass() {
@@ -75,13 +78,15 @@
         else
           classHtml += `<div class="class">${scheduleData.scheduleArray[i]}</div>`
       }
+      if (scheduleData.divider.indexOf(i) != -1)
+        classHtml += '<div class="divider"></div>'
     }
     classContainer.innerHTML = classHtml
   }
 
-  function setBackgroundDisplay(){
+  function setBackgroundDisplay() {
     let elements = document.getElementsByClassName('background')
-    for (element of elements){
+    for (element of elements) {
       element.style.visibility = (scheduleData.currentHighlight.type === 'current' && isClassHidden) ? 'hidden' : 'visible'
     }
   }
@@ -120,9 +125,16 @@
         y: classContainer.offsetHeight
       }
     } else if (scheduleData.currentHighlight.type === 'upcoming') {
-      offset = {
-        x: highlightElement.offsetLeft - countdownContainer.offsetWidth / 2 - Number(getComputedStyle(highlightElement).marginLeft.replace('px', '')),
-        y: classContainer.offsetHeight
+      if (scheduleData.currentHighlight.index != 0 && scheduleData.divider.indexOf((scheduleData.currentHighlight.index - 1)) != -1) {
+        offset = {
+          x: highlightElement.offsetLeft - countdownContainer.offsetWidth / 2 - Number(getComputedStyle(highlightElement).marginLeft.replace('px', '')) - getComputedStyle(root).getPropertyValue('--divider-width').replace('px', '') / 2 - getComputedStyle(root).getPropertyValue('--divider-margin').replace('px', ''),
+          y: classContainer.offsetHeight
+        }
+      } else {
+        offset = {
+          x: highlightElement.offsetLeft - countdownContainer.offsetWidth / 2 - Number(getComputedStyle(highlightElement).marginLeft.replace('px', '')),
+          y: classContainer.offsetHeight
+        }
       }
     }
     if (scheduleData.currentHighlight.isEnd) {
@@ -162,13 +174,12 @@
 
   let lastTickTime = new Date().getTime()
   setInterval(() => {
-    if (new Date().getTime() - lastTickTime >= 1000){
+    if (new Date().getTime() - lastTickTime >= 1000) {
       lastTickTime = new Date().getTime()
       tick()
     }
   }, 20);
 
-  const root = document.querySelector(':root');
   for (key in scheduleConfig.css_style) {
     root.style.setProperty(key, scheduleConfig.css_style[key])
   }
@@ -181,16 +192,16 @@
       timer = setTimeout(() => {
         root.style.opacity = '1'
       }, 5000);
-    }else{
+    } else {
       clearTimeout(timer)
       root.style.opacity = '1'
-    } 
+    }
     if (event.target.className.indexOf('notIgnoreClick') == -1) {
       ipcRenderer.send('setIgnore', true)
     } else {
       ipcRenderer.send('setIgnore', false)
     }
-    
+
   });
   ipcRenderer.send('setIgnore', true)
 

js/index.js

@@ -83,7 +83,9 @@ function getScheduleData() {
     const currentTime = getCurrentTime();
     // let currentTime = '07:10:01';
     const dayOfWeek = getCurrentEditedDate().getDay();
-    const dayTimetable = scheduleConfig.timetable[scheduleConfig.daily_class[dayOfWeek].timetable];
+    const timetable = scheduleConfig.daily_class[dayOfWeek].timetable
+    const dayTimetable = scheduleConfig.timetable[timetable];
+    const divider = scheduleConfig.divider[timetable];
 
     let scheduleArray = [];
     let currentHighlight = { index: null, type: null, fullName: null, countdown: null, countdownText: null };
@@ -136,7 +138,7 @@ function getScheduleData() {
         }
     });
 
-    return { scheduleArray, currentHighlight };
+    return { scheduleArray, currentHighlight, timetable, divider };
 }
 
 

js/scheduleConfig.js

@@ -21,9 +21,10 @@ const _scheduleConfig = {
         '班': '班会',
     },
 
-    // 时间表: 每天课程安排的时间表，冒号前面为时间，后面为课程序号(从0开始的数字[不带'']) 或 课间具体名称(用''包裹中间写文字)
-    // 这里的例子workday和weekend只是举例，你也可以自定义其名字(第一个字符不要为数字)
+    // 时间表: 每天课程安排的时间表，内层冒号前面为时间，后面为课程序号(从0开始的数字[不带'']) 或 课间具体名称(用''包裹中间写文字)
+    // 这里的例子workday和weekend（外层）只是举例，你也可以自定义其名字(第一个字符不要为数字)
     // 比如如果你的学校周三半天，你可以在这里单独添加一个wednesday: {...}
+    // 注：时间段中-后的时间要减一分钟 比如某节课40分钟，时间段为08:00-08:40，但实际配置时要配置'08:00-08:39'
     timetable: {
         workday: {
             '00:00-07:39': '早自习',
@@ -73,6 +74,13 @@ const _scheduleConfig = {
         }
     },
 
+    // 分隔线: 课表中区分不同时段课程的分隔线配置，外层key（冒号前）部分与上面timeable相同
+    // value（冒号后）为分隔线所在位置的前一个课程序号(从0开始的数字[不带''])
+    divider: {
+        workday: [4, 8],
+        weekend: [3]
+    },
+
     // 每日课程：配置星期几对应第几堂课是什么课，星期顺序不可以更改(星期日/一/二/三/四/五/六)，你可以对classList后面内容进行更改
     // 从classList后最外的中括号看起，里面的第几个元素的序号-1就是该元素的下标，这个下标对应你在上面timetable中配置的数字，课程用单引号包含，写入在subject_name中配置的简写
     // 如果该节课可能存在每周轮换，你可以用一个中括号把他们全部写进去如: ['(第一周课)物', '(第二周)化', '(第三周)地'](小括号及其内容无需填写, 最多支持三周轮换)
@@ -136,6 +144,8 @@ const _scheduleConfig = {
         '--container-space': '16px', // 上面三个框中间的间隔长度
         '--top-space': '16px', // 课表主体最顶端与电脑屏幕上边框的间隔长度
         '--main-horizontal-space': '8px', // 中间课表中的课程简写单字之间的间隔长度
+        '--divider-width': '2px', // 分隔线宽度
+        '--divider-margin': '6px', // 分隔线外边距
     }
 }