Skip to content

Commit

Permalink
fix placement of drawlock/deckprotect indicators, replace js hp tween…
Browse files Browse the repository at this point in the history 
…ing with css animation
  • Loading branch information
@serprex
serprex committed Feb 21, 2024
1 parent c2170cf commit eef780b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 68 deletions.
96 changes: 32 additions & 64 deletions src/views/Match.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -770,16 +770,6 @@ function FoePlays(props) {
</Show>
);
}
function hpTweenProc(ms, prev, next) {
if (ms > 96 * Math.PI) return next;
return {
x1: prev.x1 + (next.x1 - prev.x1) * Math.sin(ms / 192),
x2: prev.x2 + (next.x2 - prev.x2) * Math.sin(ms / 192),
};
}
function hpTweenCompare(prev, next) {
return prev.x1 === next.x1 && prev.x2 === next.x2;
}

function removeFx(fx) {
return state => {
Expand Down Expand Up @@ -1532,41 +1522,24 @@ export default function Match(props) {
onClick={[thingClick, pl()]}
onMouseOver={e => setInfo(e, pl())}
onMouseMove={e => setInfo(e, pl())}>
<div style="background-color:#000;position:absolute;left:0px;top:19px;padding:1px;width:98px;height:22px;pointer-events:none">
<Tween
state={{ x1: x1(), x2: x2() }}
proc={hpTweenProc}
compare={hpTweenCompare}>
{state => (
<>
<div
style={`background-color:${
strcols[Life]
};position:absolute;width:${
state().x1
}px;height:20px;pointer-events:none;z-index:2`}
/>
<Show when={!cloaked() && expectedDamage() !== 0}>
<div
style={`background-color:${
strcols[
expectedDamage() >= game().get(pl(), 'hp') ? Fire
: expectedDamage() > 0 ? Time
: Water
]
};position:absolute;left:${Math.min(
state().x1,
state().x2,
)}px;right:${
97 - Math.max(state().x1, state().x2)
}px;height:20px;pointer-events:none;z-index:2`}
/>
</Show>
</>
)}
</Tween>
<div class="hpbar">
<div class="hpval life" style={`width:${x1()}px`} />
<Show when={!cloaked()}>
<div
class="hpval"
style={`background-color:${
strcols[
expectedDamage() >= game().get(pl(), 'hp') ? Fire
: expectedDamage() > 0 ? Time
: Water
]
};width:1px;transform:scaleX(${
Math.max(x1(), x2()) - Math.min(x1(), x2())
})`}
/>
</Show>
</div>
<div style="text-align:center;width:100px;pointer-events:none;font-size:12px;line-height:1.1;position:absolute;left:0;top:23px;text-shadow:1px 1px 1px #000,2px 2px 2px #000;z-index:2">
<div class="hptext">
<Text text={hptext()} />
</div>
</div>
Expand All @@ -1575,29 +1548,11 @@ export default function Match(props) {
class="ico sacrifice"
style={`position:absolute;left:0;top:${
j ? 7
: landscape() ? 777
: 502
: landscape() ? 502
: 777
}px;pointer-events:none`}
/>
</Show>
<Show when={game().get(pl(), 'sabbath')}>
<span
class="ico sabbath"
style={`position:absolute;left:0;top:${j ? 96 : 300}px`}
/>
</Show>
<Show
when={
game().get(pl(), 'drawlock') || game().get(pl(), 'protectdeck')
}>
<span
style={`position:absolute;left:95px;top:${
j ? 250 : 543
}px;width:48px;height:48px;background-color:#${
game().get(pl(), 'drawlock') ? '931' : 'ede'
}`}
/>
</Show>
<Show when={handOverlay()}>
<span
style={`z-index:1;position:absolute;left:${
Expand All @@ -1613,6 +1568,9 @@ export default function Match(props) {
style={`display:grid;grid-template-columns:48px 48px;position:absolute;left:2;top:${
(j ? 106 : 308) + quantaoffset()
}px`}>
<Show when={game().get(pl(), 'sabbath')}>
<span class="ico sabbath" style="position:absolute" />
</Show>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(k => (
<span class={'quantapool ico ce' + k}>
&nbsp;
Expand All @@ -1625,6 +1583,16 @@ export default function Match(props) {
<span
class={`deckpool${
game().deck_length(pl()) ? ' ico ccback' : ''
}${
(
game().get(pl(), 'drawlock') ||
game().get(pl(), 'protectdeck')
) ?
' deckfx'
: ''
}`}
style={`border-color:#${
game().get(pl(), 'drawlock') ? '931' : 'ede'
}`}>
{game().deck_length(pl()) || '0!!'}
</span>
Expand Down
52 changes: 48 additions & 4 deletions ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,11 @@ input[type='button']:hover {
input[type='button']:disabled {
color: #888;
background-image: linear-gradient(to bottom, #cde, #888);
cursor: not-allowed;
}
input[type='button']:hover:active:not([disabled]) {
background-image: linear-gradient(to bottom, #abc, #456);
}
input[type='button']:hover:disabled {
cursor: not-allowed;
}
select,
input[type='text'],
input[type='password'],
Expand Down Expand Up @@ -329,7 +327,6 @@ input[type='button'].selected {
2px 2px 2px #000;
}
.deckpool {
margin-top: 8px;
text-align: center;
padding-top: 7px;
pointer-events: none;
Expand All @@ -339,6 +336,15 @@ input[type='button'].selected {
2px 2px 2px #000;
z-index: 3;
}
.deckpool:not(.deckfx) {
margin: 12px 8px 8px 8px;
}
.deckpool.deckfx {
margin-top: 4px;
width: 48px;
height: 48px;
border: 8px solid;
}
#turntell {
position: absolute;
right: 0;
Expand All @@ -356,6 +362,44 @@ input[type='button'].selected {
.handinst {
transition: transform 0.5s;
}
.hptext {
text-align: center;
width: 100px;
pointer-events: none;
font-size: 12px;
line-height: 1.1;
position: absolute;
left: 0;
top: 23px;
text-shadow:
1px 1px 1px #000,
2px 2px 2px #000;
z-index: 2;
}
.hpbar {
background-color: #000;
position: absolute;
display: flex;
left: 0px;
top: 19px;
padding: 1px;
width: 98px;
height: 22px;
pointer-events: none;
}
.hpval {
height: 20px;
pointer-events: none;
z-index: 2;
transform-origin: left;
transition:
width 250ms ease-in-out,
transform 250ms ease-in-out,
background-color 99ms linear;
}
.hpval.life {
background-color: #480;
}
.cantarget {
border: 2px #f00 solid !important;
box-shadow: 0 0 5px #f00;
Expand Down

0 comments on commit eef780b

Please sign in to comment.