From c253a304616bee9dd64b63217b24d7253412cd1b Mon Sep 17 00:00:00 2001
From: Eric Fan <50669888+windshadow233@users.noreply.github.com>
Date: Wed, 15 Jan 2025 03:11:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9cfop=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/_data/cfop.yml                          |  5 +++++
 themes/butterfly/layout/includes/page/cfop.pug | 16 +++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/source/_data/cfop.yml b/source/_data/cfop.yml
index 8c5fc152e4..f3d0c5244b 100644
--- a/source/_data/cfop.yml
+++ b/source/_data/cfop.yml
@@ -1,6 +1,7 @@
 - algo_type: F2L
   algo_name: 标态 F2L (First Two Layers)
   page_name: F2L
+  id_prefix: f2l
   algo_list:
     - algo: (R U R')
     - algo: y' (R U R')
@@ -46,6 +47,7 @@
 - algo_type: F2L
   algo_name: 非标态 F2L 或标态其他方向的解法
   page_name: 进阶 F2L
+  id_prefix: f2l+
   algo_list:
     - algo: r' U' R U M'
     - algo: F' r U r'
@@ -58,9 +60,11 @@
     - algo: (R U R') (R' F R F') (R U' R')
     - algo: (U R' U' R2) (U R2' U' R)
     - algo: (U' R U R2') (U' R)
+    - algo: (U R' U' R2) (U R')
 - algo_type: OLL
   algo_name: OLL (Orientation of the Last Layer)
   page_name: OLL
+  id_prefix: oll
   algo_list:
     - algo: (R U R' U) (R U2' R')
     - algo: (R' U' R U') (R' U2' R)
@@ -116,6 +120,7 @@
 - algo_type: PLL
   algo_name: PLL (Permutation of the Last Layer)
   page_name: PLL
+  id_prefix: pll
   algo_list:
     - algo: (R U' R) U (R U R U') (R' U' R2)
     - algo: (R2' U) (R U R' U') (R3 U') (R' U R')
diff --git a/themes/butterfly/layout/includes/page/cfop.pug b/themes/butterfly/layout/includes/page/cfop.pug
index 7bc3bb9c82..36dd35dc70 100644
--- a/themes/butterfly/layout/includes/page/cfop.pug
+++ b/themes/butterfly/layout/includes/page/cfop.pug
@@ -22,16 +22,12 @@ style.
     [data-theme="light"] .twisty-container twisty-player {
         background: none;
     }
-    .twisty-container .algo-text {
-        font-size: 12px;
-        text-align: center;
-        line-height: 110%;
+    twisty-alg-viewer .twisty-alg-alg {
         margin: 10px 5px;
     }
     .twisty-container .algo-simulate{
         width: calc(100% / 8 - 15px);
-        border: 4px double var(--fyz-theme);
-        margin-bottom: 20px;
+        border: 3px solid var(--fyz-theme);
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -137,16 +133,18 @@ if site.data.cfop
       .category-page(data-index=index style=(index === 0 ? '' : 'display: none;'))
         h2= category.algo_name
         .twisty-container
+          - let algoCounter = 0;
           each item in category.algo_list
+            - let id = category.id_prefix + '-' + algoCounter++;
             .algo-simulate
               twisty-player(
+                  id=id,
                   alg=item.algo,
                   experimental-setup-anchor="end",
                   experimental-stickering=category.algo_type,
                   experimental-drag-input="auto",
                   viewer-link="none",
                   background="none",
-                  visualization="PG3D"
+                  visualization="3D"
               )
-              .algo-text= item.algo
-
+              twisty-alg-viewer(for=id)