classname -> class
This commit is contained in:
ntr
parent
6cae6057b9
commit
114ec98aba
@ -2,8 +2,8 @@ const preact = require('preact');
|
||||
|
||||
function animationDivs(classes) {
|
||||
switch (classes) {
|
||||
case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-cast"></div>);
|
||||
case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-hit"></div>);
|
||||
case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-cast"></div>);
|
||||
case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-hit"></div>);
|
||||
default: return <div> </div>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ class ConstructAvatar extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className="avatar"
|
||||
class="avatar"
|
||||
id={this.props.id}
|
||||
style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
|
||||
/>
|
||||
@ -62,7 +62,7 @@ class ConstructImg extends Component {
|
||||
render() {
|
||||
return (
|
||||
<img
|
||||
className="avatar"
|
||||
class="avatar"
|
||||
id={this.props.id}
|
||||
src={`/molecules/${genAvatar(this.props.name)}.svg`}
|
||||
height="500"
|
||||
|
||||
@ -62,8 +62,8 @@ function GameConstruct(props) {
|
||||
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
|
||||
<div key={j} alt={STATS[s].stat}>
|
||||
{shapes[s]()}
|
||||
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
|
||||
<div className="value" >{construct[STATS[s].stat].value}</div>
|
||||
<div class="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
|
||||
<div class="value" >{construct[STATS[s].stat].value}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
@ -71,12 +71,12 @@ function GameConstruct(props) {
|
||||
.map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
|
||||
|
||||
let crypSkills = <div> </div>;
|
||||
if (player) crypSkills = (<div className="skills"> {skills} </div>);
|
||||
if (player) crypSkills = (<div class="skills"> {skills} </div>);
|
||||
|
||||
const [combatText, combatClass] = getCombatText(construct, resolution);
|
||||
const combatTextClass = `combat-text ${combatClass}`;
|
||||
const combatTextEl = combatText
|
||||
? <div className={combatTextClass}>{combatText}</div>
|
||||
? <div class={combatTextClass}>{combatText}</div>
|
||||
: null;
|
||||
|
||||
const effects = construct.effects.length
|
||||
@ -87,7 +87,7 @@ function GameConstruct(props) {
|
||||
const playerTeamIds = playerTeam.constructs.map(c => c.id);
|
||||
|
||||
const anim = (
|
||||
<div className="anim-container">
|
||||
<div class="anim-container">
|
||||
{animationDivs(combatClass)}
|
||||
</div>
|
||||
);
|
||||
@ -96,13 +96,13 @@ function GameConstruct(props) {
|
||||
<div
|
||||
onClick={() => selectSkillTarget(construct.id)}
|
||||
style={ activeSkill ? { cursor: 'pointer' } : {}}
|
||||
className={`game-construct ${ko} ${classes}`} >
|
||||
<h3 className="name"> {construct.name} </h3>
|
||||
class={`game-construct ${ko} ${classes}`} >
|
||||
<h3 class="name"> {construct.name} </h3>
|
||||
{crypSkills}
|
||||
<div className="stats"> {stats} </div>
|
||||
<div class="stats"> {stats} </div>
|
||||
<ConstructAvatar name={construct.name} id={construct.id} />
|
||||
{combatTextEl}
|
||||
<div className="effects"> {effects} </div>
|
||||
<div class="effects"> {effects} </div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ function GameFooter(props) {
|
||||
|
||||
const readyBtn = (
|
||||
<button
|
||||
className={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
|
||||
class={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
|
||||
onClick={sendGameReady}>
|
||||
Ready
|
||||
</button>
|
||||
@ -124,8 +124,8 @@ function GameFooter(props) {
|
||||
};
|
||||
|
||||
const timer = (
|
||||
<div className="timer-container">
|
||||
<div className="timer" style={timerStyles} > </div>
|
||||
<div class="timer-container">
|
||||
<div class="timer" style={timerStyles} > </div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -72,7 +72,7 @@ function Game(props) {
|
||||
const constructs = team.constructs.map((c, i) =>
|
||||
<GameConstruct key={c.id} i={i} construct={c} player={true} />);
|
||||
return (
|
||||
<div className="team player">
|
||||
<div class="team player">
|
||||
{constructs}
|
||||
</div>
|
||||
);
|
||||
@ -82,7 +82,7 @@ function Game(props) {
|
||||
const constructs = team.constructs.map((c, i) =>
|
||||
<GameConstruct key={c.id} i={i} construct={c} player={false} />);
|
||||
return (
|
||||
<div className="team opponent">
|
||||
<div class="team opponent">
|
||||
{constructs}
|
||||
</div>
|
||||
);
|
||||
@ -96,7 +96,7 @@ function Game(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={gameClasses} onClick={gameClick} >
|
||||
<main class={gameClasses} onClick={gameClick} >
|
||||
{otherTeams.map(OpponentTeam)}
|
||||
<Targeting />
|
||||
{PlayerTeam(playerTeam, setActiveSkill)}
|
||||
|
||||
@ -21,16 +21,16 @@ function renderHeader(args) {
|
||||
const { account, ping } = args;
|
||||
|
||||
const accountStatus = account
|
||||
? (<div className="header-status">
|
||||
<h1 className="header-username">{account.name}</h1>
|
||||
? (<div class="header-status">
|
||||
<h1 class="header-username">{account.name}</h1>
|
||||
{saw(pingColour(ping))}
|
||||
<div className="ping-text">{ping}ms</div>
|
||||
<div class="ping-text">{ping}ms</div>
|
||||
</div>)
|
||||
: '';
|
||||
|
||||
return (
|
||||
<header>
|
||||
<h1 className="header-title">mnml.gg</h1>
|
||||
<h1 class="header-title">mnml.gg</h1>
|
||||
{accountStatus}
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -23,7 +23,7 @@ function InfoComponent(args) {
|
||||
|
||||
if (isSkill) {
|
||||
return (
|
||||
<div className="info-skill">
|
||||
<div class="info-skill">
|
||||
<h2>{fullInfo.item}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
</div>
|
||||
@ -61,7 +61,7 @@ function InfoComponent(args) {
|
||||
: '';
|
||||
|
||||
return (
|
||||
<figure key={j} alt={c.colour} className={reqClass} >
|
||||
<figure key={j} alt={c.colour} class={reqClass} >
|
||||
{shapes.square([c])}
|
||||
</figure>
|
||||
);
|
||||
@ -81,11 +81,11 @@ function InfoComponent(args) {
|
||||
: 'unmet';
|
||||
|
||||
return (
|
||||
<div key={i} className="spec-goal">
|
||||
<div className="colour-reqs">
|
||||
<div key={i} class="spec-goal">
|
||||
<div class="colour-reqs">
|
||||
{colourGoals}
|
||||
</div>
|
||||
<div className={reqClass}>
|
||||
<div class={reqClass}>
|
||||
+ {bonus.bonus}
|
||||
<hr />
|
||||
</div>
|
||||
@ -94,10 +94,10 @@ function InfoComponent(args) {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="info-spec">
|
||||
<div class="info-spec">
|
||||
<h2>{info}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
<div className="thresholds">
|
||||
<div class="thresholds">
|
||||
{thresholds}
|
||||
</div>
|
||||
</div>
|
||||
@ -105,7 +105,7 @@ function InfoComponent(args) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="info-item">
|
||||
<div class="info-item">
|
||||
<h2>{fullInfo.item}</h2>
|
||||
<div>{fullInfo.description}</div>
|
||||
</div>
|
||||
@ -126,7 +126,7 @@ function InfoComponent(args) {
|
||||
<tbody>
|
||||
{filteredCombos.map((c, i) =>
|
||||
<tr key={i} >
|
||||
<td className="highlight" >{convertItem(c.item)}</td>
|
||||
<td class="highlight" >{convertItem(c.item)}</td>
|
||||
{c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
|
||||
</tr>
|
||||
)}
|
||||
@ -139,11 +139,11 @@ function InfoComponent(args) {
|
||||
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
|
||||
if (vboxCombos.length > 6) return false;
|
||||
return (
|
||||
<table className="combos">
|
||||
<table class="combos">
|
||||
<tbody>
|
||||
{vboxCombos.map((c, i) =>
|
||||
<tr key={i} >
|
||||
<td className="highlight" >{convertItem(c.item)}</td>
|
||||
<td class="highlight" >{convertItem(c.item)}</td>
|
||||
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
|
||||
</tr>
|
||||
)}
|
||||
@ -157,7 +157,7 @@ function InfoComponent(args) {
|
||||
// : null;
|
||||
|
||||
return (
|
||||
<div className='info' >
|
||||
<div class='info' >
|
||||
<Info />
|
||||
<Combos />
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@ function Instance(args) {
|
||||
const pText = playerText(p);
|
||||
return (
|
||||
<tr key={i}
|
||||
className={p.ready ? 'ready' : ''}>
|
||||
class={p.ready ? 'ready' : ''}>
|
||||
<td>{p.name}</td>
|
||||
<td>{p.wins} / {p.losses}</td>
|
||||
<td>{pText}</td>
|
||||
@ -72,7 +72,7 @@ function Instance(args) {
|
||||
});
|
||||
|
||||
return (
|
||||
<table className="scoreboard" >
|
||||
<table class="scoreboard" >
|
||||
<tbody>
|
||||
{players}
|
||||
</tbody>
|
||||
@ -83,7 +83,7 @@ function Instance(args) {
|
||||
const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
|
||||
|
||||
return (
|
||||
<main className={instanceClasses} onMouseOver={() => setInfo(null)} >
|
||||
<main class={instanceClasses} onMouseOver={() => setInfo(null)} >
|
||||
<ScoreBoard />
|
||||
<Vbox />
|
||||
<InfoContainer />
|
||||
|
||||
@ -104,7 +104,7 @@ function Construct(props) {
|
||||
const skill = construct.skills[i];
|
||||
const s = skill
|
||||
? skill.skill
|
||||
: (<span className="gray">+</span>);
|
||||
: (<span class="gray">+</span>);
|
||||
|
||||
function skillClick(e) {
|
||||
if (!skill) return false;
|
||||
@ -131,7 +131,7 @@ function Construct(props) {
|
||||
<button
|
||||
key={i}
|
||||
disabled={!skill && itemEquip === null}
|
||||
className={classes}
|
||||
class={classes}
|
||||
onClick={skillClick}
|
||||
onDblClick={skillDblClick}
|
||||
onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
|
||||
@ -146,7 +146,7 @@ function Construct(props) {
|
||||
if (!s) {
|
||||
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
|
||||
return (
|
||||
<figure key={i} className={equip} >
|
||||
<figure key={i} class={equip} >
|
||||
{shapes.diamond(equip)}
|
||||
<figcaption> </figcaption>
|
||||
</figure>
|
||||
@ -192,7 +192,7 @@ function Construct(props) {
|
||||
|
||||
return <div key={stat.stat}
|
||||
alt={stat.stat}
|
||||
className={stat.stat}
|
||||
class={stat.stat}
|
||||
onMouseOver={e => hoverInfo(e, info)} >
|
||||
{shapes[s]()}
|
||||
<div>{construct[stat.stat].value}</div>
|
||||
@ -202,14 +202,14 @@ function Construct(props) {
|
||||
return (
|
||||
<div key={construct.id} class="instance-construct" onClick={onClick} >
|
||||
<ConstructAvatar name={construct.name} id={construct.id} />
|
||||
<h2 className="name" >{construct.name}</h2>
|
||||
<div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
|
||||
<h2 class="name" >{construct.name}</h2>
|
||||
<div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
|
||||
{skills}
|
||||
</div>
|
||||
<div className="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
|
||||
<div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
|
||||
{specs}
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div class="stats">
|
||||
{stats}
|
||||
</div>
|
||||
</div>
|
||||
@ -254,7 +254,7 @@ function InstanceConstructs(props) {
|
||||
|
||||
const classes = `construct-list`;
|
||||
return (
|
||||
<div className={classes} onClick={() => setActiveConstruct(null)}>
|
||||
<div class={classes} onClick={() => setActiveConstruct(null)}>
|
||||
{constructs}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -54,11 +54,11 @@ class InstanceCreateForm extends Component {
|
||||
|
||||
const classes = `create-form ${disabled ? 'disabled' : ''}`;
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div class={classes}>
|
||||
<form>
|
||||
<label>instance name</label>
|
||||
<input
|
||||
className="login-input"
|
||||
class="login-input"
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
value={this.state.name}
|
||||
|
||||
@ -124,16 +124,16 @@ function Equipment(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="equip" >
|
||||
<div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
|
||||
<div class="equip" >
|
||||
<div class={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
|
||||
<h3>Skills</h3>
|
||||
<div className ="items">
|
||||
<div class ="items">
|
||||
{skills}
|
||||
</div>
|
||||
</div>
|
||||
<div className={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
|
||||
<div class={specClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSpecs')} >
|
||||
<h3>Specs</h3>
|
||||
<div className ="items">
|
||||
<div class ="items">
|
||||
{specs}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -69,7 +69,7 @@ function Instance(args) {
|
||||
|
||||
const readyBtn = (
|
||||
<button
|
||||
className={rdyClasses}
|
||||
class={rdyClasses}
|
||||
onMouseOver={e => hoverInfo(e, readyInfo)}
|
||||
onClick={() => sendInstanceReady()}>
|
||||
Ready
|
||||
@ -108,8 +108,8 @@ function Instance(args) {
|
||||
};
|
||||
|
||||
const timer = (
|
||||
<div className="timer-container">
|
||||
<div className="timer" style={timerStyles} > </div>
|
||||
<div class="timer-container">
|
||||
<div class="timer" style={timerStyles} > </div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ function List(args) {
|
||||
|
||||
return (
|
||||
<tr key={instance.id}
|
||||
className="right"
|
||||
class="right"
|
||||
onClick={instanceClick} >
|
||||
<td>{instance.name}</td>
|
||||
<td>{instance.players.length} / {instance.max_players}</td>
|
||||
@ -76,7 +76,7 @@ function List(args) {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="menu-instance-list" >
|
||||
<div class="menu-instance-list" >
|
||||
<hr />
|
||||
<table>
|
||||
<thead>
|
||||
@ -88,7 +88,7 @@ function List(args) {
|
||||
</thead>
|
||||
<tbody>
|
||||
{instancePanels}
|
||||
<tr className="right" onClick={() => sendInstanceList()}>
|
||||
<tr class="right" onClick={() => sendInstanceList()}>
|
||||
<td colSpan={3} >↺</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -104,15 +104,15 @@ function List(args) {
|
||||
.map(construct =>
|
||||
<div
|
||||
key={construct.id}
|
||||
className="menu-construct" >
|
||||
class="menu-construct" >
|
||||
<ConstructAvatar name={construct.name} id={construct.id} />
|
||||
<h2>{construct.name}</h2>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="menu-instances">
|
||||
<div className="construct-list">
|
||||
<main class="menu-instances">
|
||||
<div class="construct-list">
|
||||
{constructPanels}
|
||||
</div>
|
||||
{listElements()}
|
||||
|
||||
@ -56,31 +56,31 @@ class Login extends Component {
|
||||
render() {
|
||||
return (
|
||||
<main>
|
||||
<div className="login">
|
||||
<div class="login">
|
||||
<input
|
||||
className="login-input"
|
||||
class="login-input"
|
||||
type="email"
|
||||
placeholder="username"
|
||||
onInput={this.nameInput}
|
||||
/>
|
||||
<input
|
||||
className="login-input"
|
||||
class="login-input"
|
||||
type="password"
|
||||
placeholder="password"
|
||||
onInput={this.passwordInput}
|
||||
/>
|
||||
<button
|
||||
className="login-btn"
|
||||
class="login-btn"
|
||||
onClick={this.loginSubmit}>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
className="login-btn"
|
||||
class="login-btn"
|
||||
onClick={this.registerSubmit}>
|
||||
Register
|
||||
</button>
|
||||
<button
|
||||
className="login-btn"
|
||||
class="login-btn"
|
||||
onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
|
||||
Discord + Invites
|
||||
</button>
|
||||
|
||||
@ -11,7 +11,7 @@ const addState = connect(
|
||||
);
|
||||
|
||||
const Mnml = ({ showNav }) =>
|
||||
<div id="mnml" className={showNav ? 'nav-visible' : ''}>
|
||||
<div id="mnml" class={showNav ? 'nav-visible' : ''}>
|
||||
<Nav />
|
||||
<Main />
|
||||
<Footer />
|
||||
|
||||
@ -2,7 +2,7 @@ const preact = require('preact');
|
||||
|
||||
module.exports = function molecule(combatText) {
|
||||
const text = combatText
|
||||
? <text x="0" y="400" className="combat-text">
|
||||
? <text x="0" y="400" class="combat-text">
|
||||
{combatText}
|
||||
<animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
|
||||
<animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
|
||||
|
||||
@ -134,16 +134,16 @@ function Nav(args) {
|
||||
const canJoin = team.some(c => !c);
|
||||
|
||||
const accountStatus = account
|
||||
? (<div className="header-status">
|
||||
<h2 className="header-username">{account.name}</h2>
|
||||
? (<div class="header-status">
|
||||
<h2 class="header-username">{account.name}</h2>
|
||||
{saw(pingColour(ping))}
|
||||
<div className="ping-text">{ping}ms</div>
|
||||
<div class="ping-text">{ping}ms</div>
|
||||
</div>)
|
||||
: false;
|
||||
|
||||
return (
|
||||
<nav onClick={hideNav} >
|
||||
<h1 className="header-title">mnml.gg</h1>
|
||||
<h1 class="header-title">mnml.gg</h1>
|
||||
{accountStatus}
|
||||
<button onClick={() => navTo('team')}>1. Select Team</button>
|
||||
<button disabled={canJoin} onClick={() => navTo('list')}>2. Join</button>
|
||||
|
||||
@ -42,7 +42,7 @@ function Skill(props) {
|
||||
return (
|
||||
<button
|
||||
disabled='true'
|
||||
className='construct-skill-btn disabled'>
|
||||
class='construct-skill-btn disabled'>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@ -70,7 +70,7 @@ function Skill(props) {
|
||||
return (
|
||||
<button
|
||||
disabled={cdText || s.disabled || ko}
|
||||
className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
|
||||
class={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
|
||||
type="submit"
|
||||
onClick={onClick}>
|
||||
{s.skill} {cdText}
|
||||
|
||||
@ -31,11 +31,11 @@ class SpawnButton extends Component {
|
||||
return (
|
||||
<div
|
||||
key={this.props.i}
|
||||
className="menu-construct spawn-btn"
|
||||
class="menu-construct spawn-btn"
|
||||
onClick={() => this.enable()} >
|
||||
<h2>+</h2>
|
||||
<input
|
||||
className="login-input"
|
||||
class="login-input"
|
||||
type="text"
|
||||
disabled={!this.state.enabled}
|
||||
value={this.state.value}
|
||||
@ -43,7 +43,7 @@ class SpawnButton extends Component {
|
||||
onInput={this.handleInput}
|
||||
/>
|
||||
<button
|
||||
className="login-btn"
|
||||
class="login-btn"
|
||||
disabled={!this.state.enabled}
|
||||
onClick={this.handleSubmit}
|
||||
type="submit">
|
||||
|
||||
@ -2,7 +2,7 @@ const preact = require('preact');
|
||||
|
||||
module.exports = function vboxColour(classes) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" className={classes} >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" class={classes} >
|
||||
<path id="Unnamed"
|
||||
fill="none" strokeWidth="1px"
|
||||
d="M 20,20
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
module.exports = function triangle(classes) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" className={classes} >
|
||||
viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" class={classes} >
|
||||
<g>
|
||||
<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 "/>
|
||||
<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 "/>
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
module.exports = function triangle(classes) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" className={classes} >
|
||||
viewBox="0 0 198.06 199.93" style="enable-background:new 0 0 198.06 199.93;" class={classes} >
|
||||
<g>
|
||||
<polygon class="st3" points="54.42,198.47 1.47,145.01 1.47,54.93 54.42,1.47 143.64,1.47 196.6,54.93 196.6,145.01 143.64,198.47
|
||||
"/>
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
module.exports = function triangle(classes) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" className={classes} >
|
||||
viewBox="0 0 212.21 200" style="enable-background:new 0 0 212.21 200;" class={classes} >
|
||||
<g>
|
||||
<polygon class="st4" points="106.11,1.82 1.74,76.95 41.61,198.52 170.61,198.52 210.47,76.95 "/>
|
||||
<polygon class="st4" points="54.38,181.1 22.41,83.61 106.11,23.36 189.8,83.61 157.83,181.1 "/>
|
||||
|
||||
@ -3,8 +3,8 @@ const preact = require('preact');
|
||||
module.exports = function saw(colour) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
|
||||
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
|
||||
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
|
||||
<path d="M0,50l50,-50v100l50,-50" class="ping-path"/>
|
||||
<path d="M0,50l50,-50v100l50,-50" class="ping-path"/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@ const preact = require('preact');
|
||||
module.exports = function triangle(classes) {
|
||||
return (
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
||||
viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" className={classes} >
|
||||
viewBox="0 0 201.8 200" style="enable-background:new 0 0 201.8 200;" class={classes} >
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M101.35,198.52h-0.9c-54.66,0-98.97-44.31-98.97-98.97V1.48h198.84v98.07
|
||||
|
||||
@ -78,7 +78,7 @@ class TargetSvg extends Component {
|
||||
: outgoing.map(getPath);
|
||||
|
||||
return (
|
||||
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className="targeting-arrows">
|
||||
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" class="targeting-arrows">
|
||||
{arrows}
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -74,7 +74,7 @@ function Team(args) {
|
||||
return (
|
||||
<div
|
||||
key={construct.id}
|
||||
className="menu-construct"
|
||||
class="menu-construct"
|
||||
style={ { 'border-color': borderColour || 'whitesmoke' } }
|
||||
onClick={() => selectConstruct(construct.id)} >
|
||||
<ConstructAvatar name={construct.name} id={construct.id} />
|
||||
@ -89,7 +89,7 @@ function Team(args) {
|
||||
.map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
|
||||
|
||||
return (
|
||||
<main className="team">
|
||||
<main class="team">
|
||||
{constructPanels}
|
||||
{spawnButtons}
|
||||
</main>
|
||||
|
||||
@ -167,7 +167,7 @@ function Vbox(args) {
|
||||
|
||||
return <td
|
||||
key={j}
|
||||
className={`${highlighted ? 'highlight' : ''}`}
|
||||
class={`${highlighted ? 'highlight' : ''}`}
|
||||
onTouchStart={e => vboxTouchStart(e, i, j)}
|
||||
onTouchEnd={e => vboxTouchEnd(e, i, j)}
|
||||
onTouchMove={e => vboxTouchMove(e)}
|
||||
@ -218,7 +218,7 @@ function Vbox(args) {
|
||||
return (
|
||||
<td
|
||||
key={i}
|
||||
className={`${highlighted ? 'highlight' : ''}`}
|
||||
class={`${highlighted ? 'highlight' : ''}`}
|
||||
onMouseOver={(e) => vboxHover(e, value)}
|
||||
onClick={e => boundClick(e, i, highlighted) }>
|
||||
{convertItem(value)}
|
||||
@ -252,7 +252,7 @@ function Vbox(args) {
|
||||
return combinerChange(combiner);
|
||||
}
|
||||
const combinerElement = (
|
||||
<table className="vbox-table">
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td onClick={() => combinerRmv(0)}>
|
||||
@ -287,38 +287,38 @@ function Vbox(args) {
|
||||
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
|
||||
<div className="vbox-hdr">
|
||||
<div class={classes}>
|
||||
<div class='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
|
||||
<div class="vbox-hdr">
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
|
||||
<div className="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
|
||||
</div>
|
||||
<button
|
||||
onMouseOver={e => hoverInfo(e, 'reroll')}
|
||||
onClick={() => sendVboxDiscard()}>
|
||||
Reroll
|
||||
</button>
|
||||
<table className="vbox-table">
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{freeRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
|
||||
<div class='vbox-inventory' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'inventory')} >
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
|
||||
<button
|
||||
className={reclaimClass}
|
||||
class={reclaimClass}
|
||||
onMouseOver={e => hoverInfo(e, 'reclaim')}
|
||||
onClick={reclaimClick}>
|
||||
reclaim
|
||||
</button>
|
||||
<table className="vbox-table">
|
||||
<table class="vbox-table">
|
||||
<tbody>
|
||||
{boundRows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
|
||||
<div class="vbox-combiner" onMouseOver={e => hoverInfo(e, 'combiner')} >
|
||||
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
|
||||
<button
|
||||
onMouseOver={e => hoverInfo(e, 'refine')}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user