From cb48e2edc0ff1d5aa0c44dc0a10bd468c697d1fb Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Wed, 11 Aug 2021 17:33:00 -0400
Subject: [PATCH] correct states

---
 index.html | 116 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 68 insertions(+), 48 deletions(-)
diff --git a/index.html b/index.html
index bbfd166..67b805e 100644
--- a/index.html
+++ b/index.html
@@ -2,45 +2,13 @@
 <html>
 <head>
 <meta charset="utf-8">
-<style>
-figure
-{
-    width:500px;
-    height:500px;
-    transform: perspective(400px);
-    transform-style: preserve-3d;
-}
-.Sheet
-{
-    display:block;
-    width:120px;
-    height:200px;
-    border:2px solid black;
-    position:relative;
-    transform:rotateY(45deg);
-    transform-style: preserve-3d;
-    transform-origin: left center;
-}
-.Sheet img
-{
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-    backface-visibility: hidden;
-}
-.Sheet img:last-child
-{
-    transform: rotateY(180deg);
-}
-</style>
+
 </head>
 <body>
 <main>
 
     <style>
-        .Table
+        .Shot
         {
             transform: perspective(400px);
             transform-style: preserve-3d;
@@ -49,9 +17,21 @@ figure
             margin:20px auto 0 auto;
             text-align:center;
         }
+        .Table
+        {
+            transform:rotateY(-70deg);
+            transform-style: preserve-3d;
+            transition: transform 1s;
+        }
+        .Table[show="cover"]{ transform:rotateY(-70deg); }
+        .Table[show="spine"]{ transform:rotateY(-10deg); }
+        .Table[show="back" ]{ transform:rotateY(115deg); }
+        .Table[show="pages"]{ transform:rotateY(-180deg) translateZ(-150px); }
+
+
         .Book
         {
-            transform: rotateY(-75deg) translateY(50%) translateZ(60px);
+            transform: translateY(50%) translateZ(60px);
             transform-style: preserve-3d;
             position: relative;
             display:inline-block;
@@ -70,15 +50,15 @@ figure
         .Spine__Glue
         {
             flex:0;
-            width:1px;
+            width:0;
             height:100%;
             position:relative;
             transform:rotateY(90deg);
             transform-style: preserve-3d;
             transition: transform 0.4s;
         }
-        .Spine__Glue[swing='right']{transform: rotateY( 5deg   );}
-        .Spine__Glue[swing='left' ]{transform: rotateY( 175deg );}
+        .Spine__Glue[swing='right']{transform: rotateY( 20deg   );}
+        .Spine__Glue[swing='left' ]{transform: rotateY( 160deg );}
         .Panel
         {
             height:100%;
@@ -86,6 +66,9 @@ figure
             float:left;
             position:relative;
         }
+        .Spine__Glue[swing='right'] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
+        .Spine__Glue[swing='left' ] .Panel {box-shadow:0px 0px 2px rgb(0 0 0 / 24%)}
+
         .Panel.Page
         {
             height:98%;
@@ -128,22 +111,59 @@ background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75
         }
     </style>
 
-    <div class="Table">
-        <div class="Book">
-            <img style="display:block;" src="http://placekitten.com/50/200"/>
-            <div class="Spine">
-                <div class="Spine__Glue"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-                <div class="Spine__Glue"><div class="Panel Page"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
-                <div class="Spine__Glue"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://via.placeholder.com/120x200"/></div></div>
+    <div class="Shot">
+        <div class="Table" show="cover">
+            <div class="Book">
+                <img style="display:block;" src="http://placekitten.com/20/200"/>
+                <div class="Spine">
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Cover Front"><img src="http://placekitten.com/120/200"/><img src="http://placekitten.com/120/200"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Page"><img src="http://via.placeholder.com/120x200.jpg?Text=LEFT"/><img src="http://via.placeholder.com/120x200.jpg?Text=RIGHT"/></div></div>
+                    <div class="Spine__Glue" swing="closed"><div class="Panel Cover Back"><img src="http://placekitten.com/120/200"/><img src="http://placekitten.com/120/200"/></div></div>
+                </div>
             </div>
         </div>
     </div>
 
+    <div>
+        <button onclick="bookPose('cover'); bookClose();">Cover</button>
+        <button onclick="bookPose('spine'); bookClose();">Spine</button>
+        <button onclick="bookPose('back');  bookClose();">Back</button>
+        <button onclick="bookPose('pages'); bookOpen(3);">0</button>
+        <button onclick="bookPose('pages'); bookOpen(4);">1</button>
+        <button onclick="bookPose('pages'); bookOpen(5);">2</button>
+        <button onclick="bookPose('pages'); bookOpen(6);">3</button>
+        <button onclick="bookPose('pages'); bookOpen(7);">4</button>
+    </div>
 </main>
 <script>
-
+let $ = query => Array.from(document.querySelectorAll(query));
+let pages = $("[swing]");
+let table = $(".Table")[0];
+let bookOpen = index =>
+{
+    pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
+};
+let bookClose = () => 
+{
+    pages.forEach(p=>p.setAttribute("swing", "closed"));
+};
+let bookPose = inPanel => 
+{
+    table.setAttribute("show", inPanel);
+    bookClose();
+};
 </script>
 </body>
 </html>
\ No newline at end of file
