fix: no-overlap rendering — hide foot cell for non-T pieces, render all 20 rows
Cell 3 (foot/bottom cell) was always visible for ALL pieces, creating a phantom T-shape foot that overlapped frozen blocks. Now hidden via opacity:0 for non-T/non-I pieces. Also added frozen grid rendering for rows 0-12 (was only 13-19). All 20 rows now fully rendered, frozen, and collision-checked.
This commit is contained in:
enzotar
parent
5e382ce25d
commit
7ad8bde38b
1 changed files with 32 additions and 3 deletions
|
|
@ -263,7 +263,35 @@ view tetris_game = column [
|
|||
for k in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:1px; height:600px; left:{k * 30}px; background:rgba(99,102,241,0.08)" } []
|
||||
|
||||
-- Frozen grid: row 13 (Layer 1 data -> Layer 5 UI)
|
||||
-- Frozen grid: all 20 rows (Layer 1 data -> Layer 5 UI)
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:1px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g0[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:31px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g1[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:61px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g2[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:91px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g3[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:121px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g4[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:151px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g5[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:181px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g6[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:211px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g7[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:241px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g8[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:271px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g9[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:301px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g10[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:331px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g11[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:361px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g12[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
|
||||
-- Frozen grid: row 13
|
||||
for c in [0,1,2,3,4,5,6,7,8,9] ->
|
||||
column { style: "position:absolute; width:28px; height:28px; top:391px; left:{c * 30 + 1}px; border-radius:4px; background:linear-gradient(180deg,#a855f7,#7c3aed); opacity:{if g13[c] > 0 then 1 else 0}; transition:opacity 0.15s; box-shadow:0 0 8px rgba(168,85,247,0.4)" } []
|
||||
|
||||
|
|
@ -301,8 +329,9 @@ view tetris_game = column [
|
|||
-- Cell 2
|
||||
column { style: "position:absolute; width:28px; height:28px; border-radius:4px; background:linear-gradient(180deg,#c084fc,#a855f7); box-shadow:0 0 12px rgba(168,85,247,0.5); transition:left 0.05s,top 0.05s; top:{(if piece == 1 then py + 1 else py) * 30 + 1}px; left:{(if piece == 1 then px + 2 else (if piece == 3 then px + 2 else px + 2)) * 30 + 1}px" } []
|
||||
|
||||
-- Cell 3 (second row of piece, e.g. T-piece center bottom)
|
||||
column { style: "position:absolute; width:28px; height:28px; border-radius:4px; background:linear-gradient(180deg,#c084fc,#a855f7); box-shadow:0 0 12px rgba(168,85,247,0.5); transition:left 0.05s,top 0.05s; top:{(if piece == 1 then py + 1 else py + 1) * 30 + 1}px; left:{(if piece == 1 then px + 3 else (if piece == 6 then px + 1 else (if piece == 4 then px + 2 else px + 2))) * 30 + 1}px" } []
|
||||
-- Cell 3 (second row: T-piece center bottom, I-piece 4th cell)
|
||||
-- Only visible for T-piece (piece==6) and I-piece (piece==1)
|
||||
column { style: "position:absolute; width:28px; height:28px; border-radius:4px; background:linear-gradient(180deg,#c084fc,#a855f7); box-shadow:0 0 12px rgba(168,85,247,0.5); transition:left 0.05s,top 0.05s; opacity:{if piece == 6 then 1 else (if piece == 1 then 1 else 0)}; top:{(if piece == 1 then py + 1 else py + 1) * 30 + 1}px; left:{(if piece == 1 then px + 3 else (if piece == 6 then px + 1 else (if piece == 4 then px + 2 else px + 2))) * 30 + 1}px" } []
|
||||
|
||||
-- Ghost piece (Layer 4 derived -> Layer 5 UI)
|
||||
-- Shows where piece will land (row 18)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue