fix bugs

wevisdemo · Dec 15, 2023 · 99091e1 · 99091e1
1 parent 20e52f8
commit 99091e1
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 43 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -26,7 +26,7 @@ export default function IndexPage() {
         <SectionPart1 />
         <SectionPart2 />
         <SectionPart3 />
-        <div id="chart24" className="pointer-events-auto bg-black">
+        <div id="chart26" className="pointer-events-auto bg-black">
           <SectionPartEnd />
         </div>
       </div>

diff --git a/components/ChartGroup.tsx b/components/ChartGroup.tsx
@@ -87,18 +87,19 @@ export default function ChartGroup() {
     const max = last(chart.xAxes) ?? 0;
     const xAxes =
       bp !== 'lg' && group.charts.length > 1 ? [max / 2, max] : chart.xAxes;
+    const axesCls = 'wv-h11 absolute -bottom-6 md:-bottom-7 w-8';
 
     return (
       <div className="absolute inset-0 flex">
         {(bp === 'lg' || chartIndex === 0) && (
-          <div className="wv-h11 absolute -bottom-7 -left-4 w-8">0</div>
+          <div className={twMerge('-left-4', axesCls)}>0</div>
         )}
         {xAxes.map((i) => (
           <div
             key={i}
             className="relative flex-1 border-r border-dashed border-white/20"
           >
-            <div className="wv-h11 absolute -bottom-7 -right-4 w-8">{i}</div>
+            <div className={twMerge('-right-4', axesCls)}>{i}</div>
           </div>
         ))}
       </div>
@@ -111,9 +112,15 @@ export default function ChartGroup() {
       text = `${year} เลือกตั้งสมาชิกสภาผู้แทนราษฎร`;
     }
     if ([2549].includes(year)) {
-      text = `${year} ทำรัฐประหารโดยคณะปฏิรูปการปกครองในระบอบประชาธิปไตย
+      text = `${year} ในหลวงรัชกาลที่ 9 มีพระราชดำรัสแก่ผู้พิพากษา`;
+    }
+    if ([2549_2].includes(year)) {
+      text = `${2549} ทำรัฐประหารโดยคณะปฏิรูปการปกครองในระบอบประชาธิปไตย
       อันมีพระมหากษัตริย์ทรงเป็นประมุข (คปค.)`;
     }
+    if ([2557_1].includes(year)) {
+      text = `${2557} รัฐประหารโดยคณะรักษาความสงบแห่งชาติ (คสช.)`;
+    }
     return text;
   };
 
@@ -134,14 +141,22 @@ export default function ChartGroup() {
             >
               {i - 2500}
             </div>
-            {guideYears.includes(i) && (
+            {(guideYears.includes(i) ||
+              (guideYears.includes(2549_2) && i === 2549) ||
+              (guideYears.includes(2557_1) && i === 2557)) && (
               <div className="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end">
                 <div className="wv-h11 inline-flex max-w-[85%] items-center justify-center gap-1 rounded-t-md bg-highlight p-1 font-bold text-black md:px-3 lg:max-w-[90%]">
                   <CustomImg
                     src="/images/icon_star_2.webp"
                     className="w-3 lg:w-5"
                   />
-                  {guideText(i)}
+                  {guideText(
+                    guideYears.includes(2557_1)
+                      ? 2557_1
+                      : guideYears.includes(2549_2)
+                        ? 2549_2
+                        : i,
+                  )}
                 </div>
                 <div className="h-[2px] w-full bg-highlight lg:h-1"></div>
               </div>
@@ -294,7 +309,7 @@ export default function ChartGroup() {
         )}
       >
         <div className="flex flex-col gap-1 px-4 pt-4 lg:gap-3 2xl:gap-4">
-          <div className="wv-h5 wv-kondolar font-black">
+          <div className="wv-kondolar text-2xl/6 font-black md:text-4xl">
             ภาพรวมสัดส่วนคำวินิจฉัยศาลรัฐธรรมนูญ
           </div>
           <Legends data={group.legends} boxCls="w-3 h-3 lg:w-5 lg:h-5" />

diff --git a/components/SectionPart1.tsx b/components/SectionPart1.tsx
@@ -108,7 +108,7 @@ export default function SectionPart1() {
                 ตลอดช่วงการบังคับใช้รัฐธรรมนูญ 2540 ศาลรัฐธรรมนูญ
                 มีบทบาทอย่างแข็งขันในการวินิจฉัยชี้ขาดกรณีที่พรรคการเมืองใดทำผิด
                 พ.ร.ป. ว่าด้วยพรรคการเมืองฯ{' '}
-                <span className="bg-politics font-bold leading-8">
+                <span className="bg-politics font-bold leading-6 md:leading-8">
                   มีผลทำให้พรรคการเมืองขนาดเล็ก จำนวน 76
                   พรรคถูกยุบพรรคลงเพราะไม่สามารถปฏิบัติตามเงื่อนไข
                   ให้ถูกต้องตามกฎหมายได้
@@ -118,7 +118,7 @@ export default function SectionPart1() {
                 และยังมีอำนาจในการชี้ขาดว่า ผู้ที่ดำรงตำแหน่งทางการเมืองใด
                 จงใจไม่ยื่นบัญชีแสดงรายการทรัพย์สินฯ หรือแสดงรายการทรัพย์สิน
                 อันเป็นเท็จฯ ต่อคณะกรรมการ ป.ป.ช. เมื่อเข้ารับหรือออกจากตำแหน่ง
-                <span className="bg-politics font-bold">
+                <span className="bg-politics font-bold leading-6 md:leading-8">
                   ส่งผลให้ศาลวินิจฉัยชี้ขาดและสิ้นสุดสถานะผู้ดำรงตำแหน่งทางการเมือง
                   ไปกว่า 28 ราย
                 </span>
@@ -203,8 +203,8 @@ export default function SectionPart1() {
           </div>
         </div>
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart10">
+      <div id="chart10" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="06/01/2544"
           title="2544 เลือกตั้งสมาชิกสภาผู้แทนราษฎร"
@@ -245,8 +245,8 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart11">
+      <div id="chart11" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="25/04/2549"
           title="ในหลวงรัชกาลที่ 9 มีพระราชดำรัสแก่ผู้พิพากษา"
@@ -277,6 +277,7 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
+      <div id="chart12" className="screen"></div>
       <SectionBox>
         <SituationDetail
           date="19/09/2549"
@@ -308,8 +309,8 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart12">
+      <div id="chart13" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="24/08/2550"
           title="รัฐธรรมนูญ 2550 มีผลใช้บังคับ"
@@ -350,8 +351,8 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart13">
+      <div id="chart14" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="22/05/2557"
           title="รัฐประหารโดยคณะรักษาความสงบแห่งชาติ (คสช.)"
@@ -380,6 +381,7 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
+      <div id="chart15" className="screen"></div>
       <SectionBox>
         <SituationDetail
           date="22/07/2557"
@@ -409,8 +411,8 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart14">
+      <div id="chart16" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="06/04/2560"
           title="รัฐธรรมนูญ 2560 มีผลใช้บังคับ"
@@ -443,8 +445,8 @@ export default function SectionPart1() {
           }
         />
       </SectionBox>
-      <div className="screen"></div>
-      <SectionBox id="chart15">
+      <div id="chart17" className="screen"></div>
+      <SectionBox>
         <SituationDetail
           date="24/03/2562"
           title="2562 เลือกตั้งสมาชิกสภาผู้แทนราษฎร"
@@ -477,7 +479,7 @@ export default function SectionPart1() {
         />
       </SectionBox>
       <div className="screen"></div>
-      <div id="chart16" className="screen flex items-center justify-center">
+      <div id="chart18" className="screen flex items-center justify-center">
         <div className="rounded-md bg-white p-5 text-black">
           <div className="wv-h11 mb-3">
             เลื่อนต่อเพื่อไปสำรวจ
@@ -488,7 +490,7 @@ export default function SectionPart1() {
         </div>
       </div>
       <div className="screen"></div>
-      <div id="chart17" className="screen"></div>
+      <div id="chart19" className="screen"></div>
       <SectionPart1Sum />
     </>
   );

diff --git a/components/SectionPart1Sum.tsx b/components/SectionPart1Sum.tsx
@@ -195,7 +195,7 @@ export default function SectionPart1Sum() {
   const bp = useBreakpoint();
 
   return (
-    <div id="chart18" className="pointer-events-auto bg-grey4 pb-[112px]">
+    <div id="chart20" className="pointer-events-auto bg-grey4 pb-[112px]">
       <div className="rounded-b-[100px] bg-black px-4 pb-[112px] pt-20 lg:rounded-b-[200px]">
         <div className="mx-auto max-w-[720px]">
           <div className="wv-h5 wv-kondolar font-black">

diff --git a/components/SectionPart2.tsx b/components/SectionPart2.tsx
@@ -37,7 +37,7 @@ export default function SectionPart2() {
 
   return (
     <>
-      <div id="chart19"></div>
+      <div id="chart21"></div>
       <div
         id="part2"
         className="screen pointer-events-auto flex flex-col items-center justify-center gap-12 bg-black"
@@ -78,7 +78,7 @@ export default function SectionPart2() {
         </div>
       </SectionBox>
       <div className="screen"></div>
-      <SectionBox id="chart20" boxCls="p-5 md:py-8 md:px-16">
+      <SectionBox id="chart22" boxCls="p-5 md:py-8 md:px-16">
         <div className="wv-h9 mx-auto flex max-w-[700px] flex-col gap-5 font-bold">
           <div>
             นับตั้งแต่ปี 2540 ศาลรัฐธรรมนูญได้วินิจฉัย
@@ -97,7 +97,7 @@ export default function SectionPart2() {
         </div>
       </SectionBox>
       <div className="screen"></div>
-      <SectionBox id="chart21" boxCls="p-5 md:py-8 md:px-16">
+      <SectionBox id="chart23" boxCls="p-5 md:py-8 md:px-16">
         <div className="wv-h9 mx-auto flex max-w-[700px] flex-col gap-5">
           <div className="font-bold">
             และมีเพียง 1 คำวินิจฉัย
@@ -119,7 +119,7 @@ export default function SectionPart2() {
         </div>
       </SectionBox>
       <div className="screen"></div>
-      <SectionBox id="chart22" boxCls="p-5 md:py-8 md:px-16">
+      <SectionBox id="chart24" boxCls="p-5 md:py-8 md:px-16">
         <div className="mx-auto flex max-w-[700px] flex-col gap-5">
           <div className="wv-h9 font-bold">
             ในขณะที่คำวินิจฉัยในเรื่องพิทักษ์ระบอบการปกครอง
@@ -147,7 +147,7 @@ export default function SectionPart2() {
         <ScrollHint mode="light" className="mt-3" />
       </SectionBox>
       <div className="screen"></div>
-      <div id="chart23" className="screen"></div>
+      <div id="chart25" className="screen"></div>
       <SectionPart2Sum />
     </>
   );

diff --git a/hooks/useChart.tsx b/hooks/useChart.tsx
@@ -877,7 +877,7 @@ export const useChart = () => {
 
   useEffect(() => {
     const handleScroll = throttle(() => {
-      for (let index = 1; index <= 24; index++) {
+      for (let index = 1; index <= 26; index++) {
         const elm = document.getElementById(`chart${index}`);
         if (isInView(elm)) {
           if (index === 1) {
@@ -931,69 +931,75 @@ export const useChart = () => {
             setGuideYears([2549]);
           }
           if (index === 12) {
+            setGuideYears([2549_2]);
+          }
+          if (index === 13) {
             setHighlightYears([2550, 2551, 2552, 2553, 2554, 2555, 2556]);
             setGuideYears([2550]);
           }
-          if (index === 13) {
+          if (index === 14) {
             setHighlightYears([2557, 2558, 2559]);
+            setGuideYears([2557_1]);
+          }
+          if (index === 15) {
             setGuideYears([2557]);
           }
-          if (index === 14) {
+          if (index === 16) {
             setHighlightYears([2560, 2561, 2562, 2563, 2564, 2565, 2566]);
             setGuideYears([2560]);
           }
-          if (index === 15) {
+          if (index === 17) {
             setHighlightYears([]);
             setInteractable(false);
             setMode('stack');
             setGuideYears([2562]);
           }
-          if (index === 16) {
+          if (index === 18) {
             setGuideYears([]);
             setMode('stack');
             setGroup(groupData[3]);
           }
-          if (index === 17) {
+          if (index === 19) {
             setGroup(groupData[4]);
             setChartSuggests(caseSuggests);
             setInteractable(true);
             setMode('card');
           }
-          if (index === 18) {
+          if (index === 20) {
             setGroup(groupData[4]);
             setInteractable(true);
             setMode('card');
           }
           // part2
-          if (index === 19) {
+          if (index === 21) {
             resetChart('scale');
             setGroup(groupData[5]);
             setInteractable(false);
           }
-          if (index === 20) {
+          if (index === 22) {
             setHighlightKeys([...protectedKeys]);
           }
-          if (index === 21) {
+          if (index === 23) {
             setHighlightKeys([protectedKeys[2]]);
           }
-          if (index === 22) {
+          if (index === 24) {
             setGroup(groupData[5]);
             setInteractable(false);
             setHighlightKeys(destroyCases.map((i) => i.ผลคำวินิจฉัย));
           }
-          if (index === 23) {
+          if (index === 25) {
             resetChart('scale');
             setChartSuggests(freedomSuggests);
             setGroup(groupData[6]);
             setInteractable(true);
             setShowChart(true);
           }
-          if (index === 24) {
+          if (index === 26) {
             setShowChart(false);
           }
         }
       }
-    }, 100);
+    }, 50);
 
     window.addEventListener('scroll', handleScroll, { passive: true });