Merge branch 'return-of-react' of ssh://cryps.gg:40022/~/cryps into return-of-react
This commit is contained in:
Mashy
commit
172e84df54
@ -19,15 +19,29 @@ button, input {
|
||||
border-color: whitesmoke;
|
||||
border-radius: 0;
|
||||
letter-spacing: 0.25em;
|
||||
box-sizing: border-box;
|
||||
|
||||
/*the transitions */
|
||||
transition-property: box-shadow;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
/*colour necesary to bash skellington*/
|
||||
button:hover {
|
||||
button:hover, button:focus {
|
||||
/*colour necesary to bash skellington*/
|
||||
color: whitesmoke;
|
||||
animation: whiteglow 2000ms infinite;
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
button.right:hover, button.right:focus {
|
||||
box-shadow: inset -0.5em 0 0 0 whitesmoke;
|
||||
}
|
||||
|
||||
button.left:hover, button.left:focus {
|
||||
box-shadow: inset 0.5em 0 0 0 whitesmoke;
|
||||
}
|
||||
|
||||
/*
|
||||
MENU
|
||||
*/
|
||||
@ -51,7 +65,7 @@ button:hover {
|
||||
height: 100%;
|
||||
margin: 0.5em;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid whitesmoke;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.background {
|
||||
@ -91,62 +105,29 @@ button:hover {
|
||||
fill: none;
|
||||
stroke-width: 4px;
|
||||
stroke-dasharray: 121, 242;
|
||||
animation: pulse 2s infinite linear;
|
||||
animation: saw 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
stroke-dashoffset: 363;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes whiteglow {
|
||||
@keyframes saw {
|
||||
0% {
|
||||
box-shadow: 0 0 0px whitesmoke;
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 20px whitesmoke;
|
||||
}
|
||||
60% {
|
||||
box-shadow: 0 0 20px whitesmoke;
|
||||
stroke-dashoffset: 363;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0px whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes greenglow {
|
||||
0% {
|
||||
box-shadow: 0 0 -20px forestgreen;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 30px forestgreen;
|
||||
color: forestgreen;
|
||||
border-color: forestgreen;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes whiteblackglow {
|
||||
0% {
|
||||
box-shadow: 0 0 0px black;
|
||||
}
|
||||
100% {
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
box-shadow: 0 0 -30px black;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
INSTANCE
|
||||
*/
|
||||
|
||||
.green-btn:hover {
|
||||
animation: greenglow 2s ease 0s 1 normal forwards;
|
||||
animation-iteration-count: 1;
|
||||
transition-property: all;
|
||||
transition-duration: 2s;
|
||||
transition-timing-function: ease;
|
||||
color: forestgreen;
|
||||
border-color: forestgreen;
|
||||
/*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
|
||||
}
|
||||
|
||||
.instance-btn {
|
||||
@ -185,7 +166,6 @@ button:hover {
|
||||
|
||||
.vbox-btn:hover {
|
||||
color: black;
|
||||
animation: whiteblackglow 2s ease 0s 1 normal forwards;
|
||||
}
|
||||
|
||||
.vbox-table {
|
||||
@ -304,9 +284,13 @@ button:hover {
|
||||
flex: 1 1 60%;
|
||||
}
|
||||
|
||||
.cryp-skill-btn.active {
|
||||
animation: whiteblackglow 1s ease 0s 1 normal forwards;
|
||||
animation-iteration-count: 1;
|
||||
.cryp-skill-btn[disabled] {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.game-cryp-ctr.ko {
|
||||
animation: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stack {
|
||||
|
||||
@ -48,10 +48,24 @@ function GamePanel(props) {
|
||||
}
|
||||
|
||||
function Cryp(cryp) {
|
||||
const ko = cryp.hp.value === 0 ? 'ko' : '';
|
||||
|
||||
const skills = range(0, 4).map(i => {
|
||||
const s = cryp.skills[i]
|
||||
? cryp.skills[i].skill
|
||||
: (<span> </span>);
|
||||
const s = cryp.skills[i];
|
||||
if (!s) {
|
||||
return (
|
||||
<button
|
||||
disabled='true'
|
||||
key={i}
|
||||
className='cryp-skill-btn disabled'>
|
||||
<span> </span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const cdText = cryp.skills[i].cd > 0
|
||||
? `- ${s.cd}`
|
||||
: '';
|
||||
|
||||
const highlight = activeSkill
|
||||
? activeSkill.crypId === cryp.id && activeSkill.skill === s
|
||||
@ -60,9 +74,11 @@ function GamePanel(props) {
|
||||
return (
|
||||
<button
|
||||
key={i}
|
||||
className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
|
||||
disabled={!!cdText || ko}
|
||||
className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
|
||||
type="submit"
|
||||
onClick={() => setActiveSkill(cryp.id, s)}>{s}
|
||||
onClick={() => setActiveSkill(cryp.id, s.skill)}>
|
||||
{s.skill} {cdText}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
@ -80,8 +96,9 @@ function GamePanel(props) {
|
||||
</figure>
|
||||
));
|
||||
|
||||
|
||||
return (
|
||||
<div className="game-cryp-ctr" >
|
||||
<div className={`game-cryp-ctr ${ko}`} >
|
||||
<div
|
||||
key={cryp.id}
|
||||
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
||||
@ -160,7 +177,7 @@ function GamePanel(props) {
|
||||
<div className="row">
|
||||
<div className="three columns">
|
||||
<button
|
||||
className="instance-btn instance-ui-btn glow-btn"
|
||||
className="instance-btn instance-ui-btn left"
|
||||
onClick={quit}>
|
||||
Back
|
||||
</button>
|
||||
|
||||
@ -84,7 +84,7 @@ function InstanceComponent(args) {
|
||||
<div className="row">
|
||||
<div className="three columns">
|
||||
<button
|
||||
className="instance-btn instance-ui-btn glow-btn"
|
||||
className="instance-btn instance-ui-btn left"
|
||||
onClick={quit}>
|
||||
Menu
|
||||
</button>
|
||||
|
||||
@ -8,20 +8,20 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
|
||||
|
||||
const instanceJoin = (
|
||||
<button
|
||||
className="instance-btn glow-btn"
|
||||
className="instance-btn right"
|
||||
onClick={() => sendInstanceJoin()}>
|
||||
Join New Instance
|
||||
</button>
|
||||
);
|
||||
|
||||
const instancePanels = instances.map((instance) => {
|
||||
const instancePanels = instances.map(instance => {
|
||||
const name = instance.instance === NULL_UUID
|
||||
? 'Normal Mode'
|
||||
: `${instance.instance.substring(0, 5)}`;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="instance-btn glow-btn"
|
||||
className="instance-btn right"
|
||||
key={instance.id}
|
||||
onClick={() => setActiveInstance(instance)}>
|
||||
{name}
|
||||
|
||||
@ -33,12 +33,10 @@ function Vbox(args) {
|
||||
return sendVboxReclaim(i);
|
||||
}
|
||||
|
||||
if (combiner.indexOf(i) === -1) {
|
||||
const insert = combiner.findIndex(j => j === null);
|
||||
combiner[insert] = i;
|
||||
return setCombiner(combiner);
|
||||
}
|
||||
return setCombiner([i, null, null]);
|
||||
const insert = combiner.findIndex(j => j === null);
|
||||
if (insert === -1) return setCombiner([i, null, null]);
|
||||
combiner[insert] = i;
|
||||
return setCombiner(combiner);
|
||||
}
|
||||
|
||||
function combinerRmv(i) {
|
||||
@ -72,15 +70,25 @@ function Vbox(args) {
|
||||
);
|
||||
});
|
||||
|
||||
const boundTds = range(0, 9).map(i => (
|
||||
<td
|
||||
key={i}
|
||||
draggable="true"
|
||||
onDragStart={e => e.dataTransfer.setData('text', i)}
|
||||
onClick={() => boundClick(i) }>
|
||||
{convertVar(vbox.bound[i])}
|
||||
</td>
|
||||
));
|
||||
const boundTds = range(0, 9).map(i => {
|
||||
if (combiner.indexOf(i) > -1) {
|
||||
return (
|
||||
<td
|
||||
key={i}>
|
||||
|
||||
</td>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
draggable="true"
|
||||
onDragStart={e => e.dataTransfer.setData('text', i)}
|
||||
onClick={() => boundClick(i) }>
|
||||
{convertVar(vbox.bound[i])}
|
||||
</td>
|
||||
);
|
||||
});
|
||||
|
||||
const boundRows = [
|
||||
<tr key={0} >
|
||||
|
||||
@ -26,8 +26,6 @@ put ticks on stack at start of phase
|
||||
cryp vbox
|
||||
update defensives in skill.rs
|
||||
|
||||
Skill::Slay -> red attack with bonus somethingorother for blue / maim no healing
|
||||
|
||||
consolidate buffs debuffs and disables
|
||||
no more red/blue
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user