Add README

README.md

@@ -0,0 +1,5 @@
+# Quatuor
+
+Falling blocks
+
+![screenshot](https://git.malingrey.fr/adrien/quatuor/raw/branch/master/thumbnail.png)

css/binaural.css

@@ -0,0 +1,276 @@
+body {
+    background-image: url(binaural/bg.jpg),
+        radial-gradient(
+            circle at center,
+            #39444f 0%,
+            #2c323b 25%,
+            #293036 28%,
+            #252b32 34%,
+            #242930 38%,
+            #1a1d22 52%,
+            #191c22 53%,
+            #151519 63%,
+            #141418 65%,
+            #0f0f12 74%,
+            #0a0c0d 100%
+        );
+    background-repeat: round;
+}
+
+#sceneDiv {
+    perspective: 500px;
+}
+
+#sceneDiv * {
+    transform-style: preserve-3d;
+}
+
+#screenRow {
+    display: block;
+    transform: translateZ(var(--tZ)) rotateX(var(--rX)) rotateY(var(--rY));
+    cursor: grab;
+}
+
+#screenRow:active {
+    cursor: grabbing;
+}
+
+#screenRow * {
+    display: block;
+}
+
+#screenRow .col {
+    display: inline-block !important;
+    width: max-content;
+    height: 100%;
+    vertical-align: top;
+}
+
+.card {
+    background: #36394180;
+}
+
+#matrixCard {
+    background-image: none;
+}
+
+#screenRow .card > * {
+    transform: translateZ(var(--cell-side));
+}
+
+#screenRow .card-header {
+    background-color: transparent;
+    border: none;
+}
+
+.minoes-table th,
+.minoes-table td {
+    display: inline-block !important;
+    width: max-content;
+}
+
+.minoes-table tr {
+    width: max-content;
+    height: var(--cell-side);
+}
+
+#statsTable tr {
+    display: table;
+    width: 100%;
+}
+
+#statsTable th,
+#statsTable td {
+    display: table-cell;
+    border: 0;
+}
+
+tr.matrix td:not(.mino) {
+    border: 0;
+    will-change: transform;
+    transform: translateZ(0);
+}
+
+.minoes-table td {
+    width: var(--cell-side) !important;
+    height: var(--cell-side);
+}
+
+.minoes-table .mino {
+    background: radial-gradient(circle at -150% -200%, #fffb 0%, var(--background-color) 100%);
+    overflow: visible;
+}
+
+.mino::before,
+.mino::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: inherit;
+    height: inherit;
+}
+
+.mino::before {
+    background: var(--light-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(-90deg);
+    transform-origin: left;
+}
+
+.right .mino::before {
+    background: var(--dark-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateY(90deg);
+    transform-origin: right;
+}
+
+.mino::after {
+    background: var(--light-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(90deg);
+    transform-origin: top;
+}
+
+.bottom .mino::after {
+    background: var(--dark-color);
+    transform: translateZ(calc(-1 * var(--cell-side))) rotateX(-90deg);
+    transform-origin: bottom;
+}
+
+.I.mino {
+    --background-color: #42afe1b0;
+    --light-color: #6ceaff80;
+    --dark-color: #00a4b0b0;
+}
+
+.J.mino {
+    --background-color: #1165b5b0;
+    --light-color: #339bff80;
+    --dark-color: #00009db0;
+}
+
+.L.mino {
+    --background-color: #f38927b0;
+    --light-color: #ffba5980;
+    --dark-color: #c54800b0;
+}
+
+.O.mino {
+    --background-color: #f6d03cb0;
+    --light-color: #ffff7f80;
+    --dark-color: #ca9501b0;
+}
+
+.S.mino {
+    --background-color: #51b84db0;
+    --light-color: #84f88080;
+    --dark-color: #1cbc02b0;
+}
+
+.T.mino {
+    --background-color: #9739a2b0;
+    --light-color: #d958e980;
+    --dark-color: #6e019ab0;
+}
+
+.Z.mino {
+    --background-color: #eb4f65b0;
+    --light-color: #ff7f7980;
+    --dark-color: #ad1936b0;
+}
+
+.ghost.mino {
+    --background-color: #8886;
+    --light-color: #ccc6;
+    --dark-color: #3336;
+}
+
+.locking.mino {
+    --background-color: #eeeb;
+    --light-color: #fffb;
+    --dark-color: #dddb;
+}
+
+.disabled.mino {
+    --background-color: #888b;
+    --light-color: #cccb;
+    --dark-color: #333b;
+}
+
+@keyframes cleared-line-animation {
+    from {
+        background-color: #ceffff66;
+        box-shadow: -200px 0 5px white, 200px 0 5px white;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+@keyframes show-level-animation {
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
+    50% {
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(-100%) scaleY(0);
+        line-height: 0;
+    }
+}
+
+@keyframes zoom-in-animation {
+    from {
+        opacity: 1;
+        transform: scale3d(0.3, 0.3, 0.3);
+        line-height: var(--bs-body-line-height);
+    }
+    30% {
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+@keyframes rotate-in-animation {
+    0% {
+        opacity: 1;
+        transform: rotate(200deg);
+        line-height: var(--bs-body-line-height);
+    }
+    30% {
+        transform: translateZ(0);
+        transform: scale3d(1, 1, 1);
+    }
+    80% {
+        transform: scale3d(1, 1, 1);
+        line-height: var(--bs-body-line-height);
+    }
+    to {
+        opacity: 1;
+        transform: scale3d(1.5, 0, 1);
+        line-height: 0;
+    }
+}
+
+@keyframes game-over-animation {
+    from {
+        opacity: 1;
+        transform: translateY(200%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+        line-height: var(--bs-body-line-height);
+    }
+}

css/common.css

@@ -1,5 +1,8 @@
 :root {
     --cell-side: 24px;
+    --rX: -15deg;
+    --rY: 0;
+    --tZ: 0;
 }
 
 body {
@@ -22,7 +25,7 @@ body {
 }
 
 #matrixCard {
-    background: radial-gradient(#222, #25292d)
+    background-image: radial-gradient(#222, #25292d)
 }
 
 .card-header {

css/electro.css

@@ -15,6 +15,11 @@ body[data-bs-theme="dark"] {
     background-color: rgba(37, 41, 45, 40%);
 }
 
+tr.matrix td:not(.mino) {
+    border-left  : none;
+    border-bottom: none;
+}
+
 .mino:not(.ghost):not(.locking):not(.disabled) {
     padding: 1px;
     position: relative;
@@ -46,8 +51,8 @@ body[data-bs-theme="dark"] {
 }
 
 .ghost.mino {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: rgba(242, 255, 255, 10%);
+    border : 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 3px;
     box-shadow: 0px 0px 10px rgba(242, 255, 255, 75%);
 }

css/minimal.css

@@ -32,42 +32,42 @@ tr.matrix td:not(.mino) {
     width: inherit;
     height: inherit;
     display: block;
-    box-shadow: 0 -6px 0 var(--light-color);
+    box-shadow: 0 -6px 0 var(--box-shadow-color);
 }
 
 .I.mino {
     --background-color: #42AFE1;
-    --light-color: #6CEAFF;
+    --box-shadow-color: #6CEAFF;
 }
 
 .J.mino {
     --background-color: #1165B5;
-    --light-color: #339BFF;
+    --box-shadow-color: #339BFF;
 }
 
 .L.mino {
     --background-color: #F38927;
-    --light-color: #FFBA59;
+    --box-shadow-color: #FFBA59;
 }
 
 .O.mino {
     --background-color: #F6D03C;
-    --light-color: #FFFF7F;
+    --box-shadow-color: #FFFF7F;
 }
 
 .S.mino {
     --background-color: #51B84D;
-    --light-color: #84F880;
+    --box-shadow-color: #84F880;
 }
 
 .T.mino {
     --background-color: #9739A2;
-    --light-color: #D958E9;
+    --box-shadow-color: #D958E9;
 }
 
 .Z.mino {
     --background-color: #EB4F65;
-    --light-color: #FF7F79;
+    --box-shadow-color: #FF7F79;
 }
 
 .ghost.mino {

index.html

@@ -16,10 +16,20 @@
     <link rel="alternate stylesheet" href="css/pop.css"     title="Pop">
     <link rel="alternate stylesheet" href="css/retro.css"   title="Rétro">
     <link rel="alternate stylesheet" href="css/opera.css"   title="Opéra">
+    <link rel="alternate stylesheet" href="css/binaural.css"   title="Binaural">
     <link rel="apple-touch-icon"      sizes="180x180" href="favicons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32"   href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16"   href="favicons/favicon-16x16.png">
     <link rel="manifest" href="manifest.json">
+    <meta property="og:title" content="Quatuor"/>
+    <meta property="og:type" content="game"/>
+    <meta property="og:url" content="https://adrien.malingrey.fr/jeux/quatuor/"/>
+    <meta property="og:image" content="https://adrien.malingrey.fr/jeux/quatuor/thumbnail.png"/>
+    <meta property="og:image:width" content="288"/>
+    <meta property="og:image:height" content="288"/>
+    <meta property="og:description" content="Un jeu avec un quatuor de blocs qui tombent."/>
+    <meta property="og:locale" content="fr_FR"/>
+    <meta property="og:site_name" content="adrien.malingrey.fr"/>
   </head>
 
   <body data-bs-theme="dark">
@@ -65,6 +75,7 @@
                   <option value="css/electro.css">Électro</option>
                   <option value="css/retro.css">Rétro</option>
                   <option value="css/opera.css">Opéra</option>
+                  <option value="css/binaural.css">Binaural</option>
                 </select></div>
                 <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
                 <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
@@ -84,7 +95,7 @@
       </div>
     </div>
 
-    <div class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
+    <div id="sceneDiv" class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
 
       <div id="screenRow" class="row row-cols-auto align-items-start gap-2">
         <div class="col d-flex flex-column align-items-end">

js/app.js

@@ -244,7 +244,7 @@ messagesSpan.onanimationend = function(event) {
 }
 
 function gameOver() {
-    matrix.piece.locked = false
+    matrix.piece.locked = true
     matrix.drawPiece()
 
     document.onkeydown = null
@@ -260,3 +260,55 @@ window.onbeforeunload = function(event) {
     settings.save()
     if (playing) return false;
 }
+
+// Play with 3D
+let mousedown = false
+let rX0 = 0
+let rY0 = 0
+let clientX0 = 0
+let clientY0 = 0
+
+sceneDiv.onmousedown = function(event) {
+    mousedown = true
+    rX0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rX"))
+    dy0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rY"))
+    clientX0 = event.clientX
+    clientY0 = event.clientY
+}
+
+sceneDiv.onmousemove = function(event) {
+	if (mousedown) {
+        event.preventDefault()
+        event.stopPropagation()
+        rX = (rX0 - event.clientY + clientY0 + 360) % 360
+        screenRow.style.setProperty("--rX", rX + "deg")
+        if (rX <= 180) {
+            screenRow.classList.remove("top")
+            screenRow.classList.add("bottom")
+        } else {
+            screenRow.classList.add("top")
+            screenRow.classList.remove("bottom")
+        }
+        rY = (rY0 + event.clientX - clientX0 + 360) % 360
+        screenRow.style.setProperty("--rY", rY + "deg")
+        if (rY >= 180) {
+            screenRow.classList.remove("left")
+            screenRow.classList.add("right")
+        } else {
+            screenRow.classList.add("left")
+            screenRow.classList.remove("right")
+        }
+    }
+}
+
+sceneDiv.onmouseup = document.onmouseleave = function(event) {
+    mousedown = false
+}
+
+sceneDiv.onwheel = function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    let tZ = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))
+    tZ += event.deltaY
+    screenRow.style.setProperty("--tZ", tZ + "px")
+}