ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

classname -> class

Browse Source
This commit is contained in:
ntr 2019-06-06 11:53:06 +10:00
parent 6cae6057b9
commit 114ec98aba
28 changed files with 102 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/animations.jsx
View File

@ -2,8 +2,8 @@ const preact = require('preact');
function animationDivs(classes) { function animationDivs(classes) {
switch (classes) { switch (classes) {
case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} className="blast-cast"></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} className="blast-hit"></div>); case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-hit"></div>);
default: return <div>&nbsp;</div>; default: return <div>&nbsp;</div>;
} }
} }

4
client/src/components/construct.jsx
View File

@ -42,7 +42,7 @@ class ConstructAvatar extends Component {
render() { render() {
return ( return (
<div <div
className="avatar" class="avatar"
id={this.props.id} id={this.props.id}
style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}} style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
/> />
@ -62,7 +62,7 @@ class ConstructImg extends Component {
render() { render() {
return ( return (
<img <img
className="avatar" class="avatar"
id={this.props.id} id={this.props.id}
src={`/molecules/${genAvatar(this.props.name)}.svg`} src={`/molecules/${genAvatar(this.props.name)}.svg`}
height="500" height="500"

18
client/src/components/game.construct.jsx
View File

@ -62,8 +62,8 @@ function GameConstruct(props) {
const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => ( const stats = ['RedLife', 'GreenLife', 'BlueLife'].map((s, j) => (
<div key={j} alt={STATS[s].stat}> <div key={j} alt={STATS[s].stat}>
{shapes[s]()} {shapes[s]()}
<div className="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div> <div class="max" >{construct[STATS[s].stat].value} / {construct[STATS[s].stat].max}</div>
<div className="value" >{construct[STATS[s].stat].value}</div> <div class="value" >{construct[STATS[s].stat].value}</div>
</div> </div>
)); ));
@ -71,12 +71,12 @@ function GameConstruct(props) {
.map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />); .map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
let crypSkills = <div> &nbsp; </div>; let crypSkills = <div> &nbsp; </div>;
if (player) crypSkills = (<div className="skills"> {skills} </div>); if (player) crypSkills = (<div class="skills"> {skills} </div>);
const [combatText, combatClass] = getCombatText(construct, resolution); const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`; const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div> ? <div class={combatTextClass}>{combatText}</div>
: null; : null;
const effects = construct.effects.length const effects = construct.effects.length
@ -87,7 +87,7 @@ function GameConstruct(props) {
const playerTeamIds = playerTeam.constructs.map(c => c.id); const playerTeamIds = playerTeam.constructs.map(c => c.id);
const anim = ( const anim = (
<div className="anim-container"> <div class="anim-container">
{animationDivs(combatClass)} {animationDivs(combatClass)}
</div> </div>
); );
@ -96,13 +96,13 @@ function GameConstruct(props) {
<div <div
onClick={() => selectSkillTarget(construct.id)} onClick={() => selectSkillTarget(construct.id)}
style={ activeSkill ? { cursor: 'pointer' } : {}} style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`game-construct ${ko} ${classes}`} > class={`game-construct ${ko} ${classes}`} >
<h3 className="name"> {construct.name} </h3> <h3 class="name"> {construct.name} </h3>
{crypSkills} {crypSkills}
<div className="stats"> {stats} </div> <div class="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar name={construct.name} id={construct.id} />
{combatTextEl} {combatTextEl}
<div className="effects"> {effects} </div> <div class="effects"> {effects} </div>
</div> </div>
); );
} }

6
client/src/components/game.footer.jsx
View File

@ -98,7 +98,7 @@ function GameFooter(props) {
const readyBtn = ( const readyBtn = (
<button <button
className={`${playerTeam.ready ? 'ready' : ''} ready-btn`} class={`${playerTeam.ready ? 'ready' : ''} ready-btn`}
onClick={sendGameReady}> onClick={sendGameReady}>
Ready Ready
</button> </button>
@ -124,8 +124,8 @@ function GameFooter(props) {
}; };
const timer = ( const timer = (
<div className="timer-container"> <div class="timer-container">
<div className="timer" style={timerStyles} >&nbsp;</div> <div class="timer" style={timerStyles} >&nbsp;</div>
</div> </div>
); );

6
client/src/components/game.jsx
View File

@ -72,7 +72,7 @@ function Game(props) {
const constructs = team.constructs.map((c, i) => const constructs = team.constructs.map((c, i) =>
<GameConstruct key={c.id} i={i} construct={c} player={true} />); <GameConstruct key={c.id} i={i} construct={c} player={true} />);
return ( return (
<div className="team player"> <div class="team player">
{constructs} {constructs}
</div> </div>
); );
@ -82,7 +82,7 @@ function Game(props) {
const constructs = team.constructs.map((c, i) => const constructs = team.constructs.map((c, i) =>
<GameConstruct key={c.id} i={i} construct={c} player={false} />); <GameConstruct key={c.id} i={i} construct={c} player={false} />);
return ( return (
<div className="team opponent"> <div class="team opponent">
{constructs} {constructs}
</div> </div>
); );
@ -96,7 +96,7 @@ function Game(props) {
} }
return ( return (
<main className={gameClasses} onClick={gameClick} > <main class={gameClasses} onClick={gameClick} >
{otherTeams.map(OpponentTeam)} {otherTeams.map(OpponentTeam)}
<Targeting /> <Targeting />
{PlayerTeam(playerTeam, setActiveSkill)} {PlayerTeam(playerTeam, setActiveSkill)}

8
client/src/components/header.jsx
View File

@ -21,16 +21,16 @@ function renderHeader(args) {
const { account, ping } = args; const { account, ping } = args;
const accountStatus = account const accountStatus = account
? (<div className="header-status"> ? (<div class="header-status">
<h1 className="header-username">{account.name}</h1> <h1 class="header-username">{account.name}</h1>
{saw(pingColour(ping))} {saw(pingColour(ping))}
<div className="ping-text">{ping}ms</div> <div class="ping-text">{ping}ms</div>
</div>) </div>)
: ''; : '';
return ( return (
<header> <header>
<h1 className="header-title">mnml.gg</h1> <h1 class="header-title">mnml.gg</h1>
{accountStatus} {accountStatus}
</header> </header>
); );

24
client/src/components/info.component.jsx
View File

@ -23,7 +23,7 @@ function InfoComponent(args) {
if (isSkill) { if (isSkill) {
return ( return (
<div className="info-skill"> <div class="info-skill">
<h2>{fullInfo.item}</h2> <h2>{fullInfo.item}</h2>
<div>{fullInfo.description}</div> <div>{fullInfo.description}</div>
</div> </div>
@ -61,7 +61,7 @@ function InfoComponent(args) {
: ''; : '';
return ( return (
<figure key={j} alt={c.colour} className={reqClass} > <figure key={j} alt={c.colour} class={reqClass} >
{shapes.square([c])} {shapes.square([c])}
</figure> </figure>
); );
@ -81,11 +81,11 @@ function InfoComponent(args) {
: 'unmet'; : 'unmet';
return ( return (
<div key={i} className="spec-goal"> <div key={i} class="spec-goal">
<div className="colour-reqs"> <div class="colour-reqs">
{colourGoals} {colourGoals}
</div> </div>
<div className={reqClass}> <div class={reqClass}>
+ {bonus.bonus} + {bonus.bonus}
<hr /> <hr />
</div> </div>
@ -94,10 +94,10 @@ function InfoComponent(args) {
}); });
return ( return (
<div className="info-spec"> <div class="info-spec">
<h2>{info}</h2> <h2>{info}</h2>
<div>{fullInfo.description}</div> <div>{fullInfo.description}</div>
<div className="thresholds"> <div class="thresholds">
{thresholds} {thresholds}
</div> </div>
</div> </div>
@ -105,7 +105,7 @@ function InfoComponent(args) {
} }
return ( return (
<div className="info-item"> <div class="info-item">
<h2>{fullInfo.item}</h2> <h2>{fullInfo.item}</h2>
<div>{fullInfo.description}</div> <div>{fullInfo.description}</div>
</div> </div>
@ -126,7 +126,7 @@ function InfoComponent(args) {
<tbody> <tbody>
{filteredCombos.map((c, i) => {filteredCombos.map((c, i) =>
<tr key={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>)} {c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
</tr> </tr>
)} )}
@ -139,11 +139,11 @@ function InfoComponent(args) {
const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info)); const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
if (vboxCombos.length > 6) return false; if (vboxCombos.length > 6) return false;
return ( return (
<table className="combos"> <table class="combos">
<tbody> <tbody>
{vboxCombos.map((c, i) => {vboxCombos.map((c, i) =>
<tr key={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>)} {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr> </tr>
)} )}
@ -157,7 +157,7 @@ function InfoComponent(args) {
// : null; // : null;
return ( return (
<div className='info' > <div class='info' >
<Info /> <Info />
<Combos /> <Combos />
</div> </div>

6
client/src/components/instance.component.jsx
View File

@ -63,7 +63,7 @@ function Instance(args) {
const pText = playerText(p); const pText = playerText(p);
return ( return (
<tr key={i} <tr key={i}
className={p.ready ? 'ready' : ''}> class={p.ready ? 'ready' : ''}>
<td>{p.name}</td> <td>{p.name}</td>
<td>{p.wins} / {p.losses}</td> <td>{p.wins} / {p.losses}</td>
<td>{pText}</td> <td>{pText}</td>
@ -72,7 +72,7 @@ function Instance(args) {
}); });
return ( return (
<table className="scoreboard" > <table class="scoreboard" >
<tbody> <tbody>
{players} {players}
</tbody> </tbody>
@ -83,7 +83,7 @@ function Instance(args) {
const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`; const instanceClasses = `instance ${nav === 'constructs' ? 'constructs-visible' : ''}`;
return ( return (
<main className={instanceClasses} onMouseOver={() => setInfo(null)} > <main class={instanceClasses} onMouseOver={() => setInfo(null)} >
<ScoreBoard /> <ScoreBoard />
<Vbox /> <Vbox />
<InfoContainer /> <InfoContainer />

18
client/src/components/instance.constructs.jsx
View File

@ -104,7 +104,7 @@ function Construct(props) {
const skill = construct.skills[i]; const skill = construct.skills[i];
const s = skill const s = skill
? skill.skill ? skill.skill
: (<span className="gray">+</span>); : (<span class="gray">+</span>);
function skillClick(e) { function skillClick(e) {
if (!skill) return false; if (!skill) return false;
@ -131,7 +131,7 @@ function Construct(props) {
<button <button
key={i} key={i}
disabled={!skill && itemEquip === null} disabled={!skill && itemEquip === null}
className={classes} class={classes}
onClick={skillClick} onClick={skillClick}
onDblClick={skillDblClick} onDblClick={skillDblClick}
onMouseOver={e => hoverInfo(e, skill && skill.skill)} > onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
@ -146,7 +146,7 @@ function Construct(props) {
if (!s) { if (!s) {
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray'; const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
return ( return (
<figure key={i} className={equip} > <figure key={i} class={equip} >
{shapes.diamond(equip)} {shapes.diamond(equip)}
<figcaption>&nbsp;</figcaption> <figcaption>&nbsp;</figcaption>
</figure> </figure>
@ -192,7 +192,7 @@ function Construct(props) {
return <div key={stat.stat} return <div key={stat.stat}
alt={stat.stat} alt={stat.stat}
className={stat.stat} class={stat.stat}
onMouseOver={e => hoverInfo(e, info)} > onMouseOver={e => hoverInfo(e, info)} >
{shapes[s]()} {shapes[s]()}
<div>{construct[stat.stat].value}</div> <div>{construct[stat.stat].value}</div>
@ -202,14 +202,14 @@ function Construct(props) {
return ( return (
<div key={construct.id} class="instance-construct" onClick={onClick} > <div key={construct.id} class="instance-construct" onClick={onClick} >
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar name={construct.name} id={construct.id} />
<h2 className="name" >{construct.name}</h2> <h2 class="name" >{construct.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} > <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills} {skills}
</div> </div>
<div className="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} > <div class="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
{specs} {specs}
</div> </div>
<div className="stats"> <div class="stats">
{stats} {stats}
</div> </div>
</div> </div>
@ -254,7 +254,7 @@ function InstanceConstructs(props) {
const classes = `construct-list`; const classes = `construct-list`;
return ( return (
<div className={classes} onClick={() => setActiveConstruct(null)}> <div class={classes} onClick={() => setActiveConstruct(null)}>
{constructs} {constructs}
</div> </div>
); );

4
client/src/components/instance.create.form.jsx
View File

@ -54,11 +54,11 @@ class InstanceCreateForm extends Component {
const classes = `create-form ${disabled ? 'disabled' : ''}`; const classes = `create-form ${disabled ? 'disabled' : ''}`;
return ( return (
<div className={classes}> <div class={classes}>
<form> <form>
<label>instance name</label> <label>instance name</label>
<input <input
className="login-input" class="login-input"
type="text" type="text"
disabled={disabled} disabled={disabled}
value={this.state.name} value={this.state.name}

10
client/src/components/instance.equip.jsx
View File

@ -124,16 +124,16 @@ function Equipment(props) {
} }
return ( return (
<div className="equip" > <div class="equip" >
<div className={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} > <div class={skillClass} onClick={e => unequipClick(e)} onMouseOver={e => hoverInfo(e, 'equipSkills')} >
<h3>Skills</h3> <h3>Skills</h3>
<div className ="items"> <div class ="items">
{skills} {skills}
</div> </div>
</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> <h3>Specs</h3>
<div className ="items"> <div class ="items">
{specs} {specs}
</div> </div>
</div> </div>

6
client/src/components/instance.footer.jsx
View File

@ -69,7 +69,7 @@ function Instance(args) {
const readyBtn = ( const readyBtn = (
<button <button
className={rdyClasses} class={rdyClasses}
onMouseOver={e => hoverInfo(e, readyInfo)} onMouseOver={e => hoverInfo(e, readyInfo)}
onClick={() => sendInstanceReady()}> onClick={() => sendInstanceReady()}>
Ready Ready
@ -108,8 +108,8 @@ function Instance(args) {
}; };
const timer = ( const timer = (
<div className="timer-container"> <div class="timer-container">
<div className="timer" style={timerStyles} >&nbsp;</div> <div class="timer" style={timerStyles} >&nbsp;</div>
</div> </div>
); );

12
client/src/components/list.jsx
View File

@ -66,7 +66,7 @@ function List(args) {
return ( return (
<tr key={instance.id} <tr key={instance.id}
className="right" class="right"
onClick={instanceClick} > onClick={instanceClick} >
<td>{instance.name}</td> <td>{instance.name}</td>
<td>{instance.players.length} / {instance.max_players}</td> <td>{instance.players.length} / {instance.max_players}</td>
@ -76,7 +76,7 @@ function List(args) {
}); });
return ( return (
<div className="menu-instance-list" > <div class="menu-instance-list" >
<hr /> <hr />
<table> <table>
<thead> <thead>
@ -88,7 +88,7 @@ function List(args) {
</thead> </thead>
<tbody> <tbody>
{instancePanels} {instancePanels}
<tr className="right" onClick={() => sendInstanceList()}> <tr class="right" onClick={() => sendInstanceList()}>
<td colSpan={3} >↺</td> <td colSpan={3} >↺</td>
</tr> </tr>
</tbody> </tbody>
@ -104,15 +104,15 @@ function List(args) {
.map(construct => .map(construct =>
<div <div
key={construct.id} key={construct.id}
className="menu-construct" > class="menu-construct" >
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar name={construct.name} id={construct.id} />
<h2>{construct.name}</h2> <h2>{construct.name}</h2>
</div> </div>
); );
return ( return (
<main className="menu-instances"> <main class="menu-instances">
<div className="construct-list"> <div class="construct-list">
{constructPanels} {constructPanels}
</div> </div>
{listElements()} {listElements()}

12
client/src/components/login.jsx
View File

@ -56,31 +56,31 @@ class Login extends Component {
render() { render() {
return ( return (
<main> <main>
<div className="login"> <div class="login">
<input <input
className="login-input" class="login-input"
type="email" type="email"
placeholder="username" placeholder="username"
onInput={this.nameInput} onInput={this.nameInput}
/> />
<input <input
className="login-input" class="login-input"
type="password" type="password"
placeholder="password" placeholder="password"
onInput={this.passwordInput} onInput={this.passwordInput}
/> />
<button <button
className="login-btn" class="login-btn"
onClick={this.loginSubmit}> onClick={this.loginSubmit}>
Login Login
</button> </button>
<button <button
className="login-btn" class="login-btn"
onClick={this.registerSubmit}> onClick={this.registerSubmit}>
Register Register
</button> </button>
<button <button
className="login-btn" class="login-btn"
onClick={() => document.location.assign('https://discord.gg/YJJgurM')}> onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
Discord + Invites Discord + Invites
</button> </button>

2
client/src/components/mnml.jsx
View File

@ -11,7 +11,7 @@ const addState = connect(
); );
const Mnml = ({ showNav }) => const Mnml = ({ showNav }) =>
<div id="mnml" className={showNav ? 'nav-visible' : ''}> <div id="mnml" class={showNav ? 'nav-visible' : ''}>
<Nav /> <Nav />
<Main /> <Main />
<Footer /> <Footer />

2
client/src/components/molecule.jsx
View File

@ -2,7 +2,7 @@ const preact = require('preact');
module.exports = function molecule(combatText) { module.exports = function molecule(combatText) {
const text = combatText const text = combatText
? <text x="0" y="400" className="combat-text"> ? <text x="0" y="400" class="combat-text">
{combatText} {combatText}
<animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/> <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"/> <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>

8
client/src/components/nav.jsx
View File

@ -134,16 +134,16 @@ function Nav(args) {
const canJoin = team.some(c => !c); const canJoin = team.some(c => !c);
const accountStatus = account const accountStatus = account
? (<div className="header-status"> ? (<div class="header-status">
<h2 className="header-username">{account.name}</h2> <h2 class="header-username">{account.name}</h2>
{saw(pingColour(ping))} {saw(pingColour(ping))}
<div className="ping-text">{ping}ms</div> <div class="ping-text">{ping}ms</div>
</div>) </div>)
: false; : false;
return ( return (
<nav onClick={hideNav} > <nav onClick={hideNav} >
<h1 className="header-title">mnml.gg</h1> <h1 class="header-title">mnml.gg</h1>
{accountStatus} {accountStatus}
<button onClick={() => navTo('team')}>1. Select Team</button> <button onClick={() => navTo('team')}>1. Select Team</button>
<button disabled={canJoin} onClick={() => navTo('list')}>2. Join</button> <button disabled={canJoin} onClick={() => navTo('list')}>2. Join</button>

4
client/src/components/skill.btn.jsx
View File

@ -42,7 +42,7 @@ function Skill(props) {
return ( return (
<button <button
disabled='true' disabled='true'
className='construct-skill-btn disabled'> class='construct-skill-btn disabled'>
</button> </button>
); );
} }
@ -70,7 +70,7 @@ function Skill(props) {
return ( return (
<button <button
disabled={cdText || s.disabled || ko} disabled={cdText || s.disabled || ko}
className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`} class={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
type="submit" type="submit"
onClick={onClick}> onClick={onClick}>
{s.skill} {cdText} {s.skill} {cdText}

6
client/src/components/spawn.button.jsx
View File

@ -31,11 +31,11 @@ class SpawnButton extends Component {
return ( return (
<div <div
key={this.props.i} key={this.props.i}
className="menu-construct spawn-btn" class="menu-construct spawn-btn"
onClick={() => this.enable()} > onClick={() => this.enable()} >
<h2>+</h2> <h2>+</h2>
<input <input
className="login-input" class="login-input"
type="text" type="text"
disabled={!this.state.enabled} disabled={!this.state.enabled}
value={this.state.value} value={this.state.value}
@ -43,7 +43,7 @@ class SpawnButton extends Component {
onInput={this.handleInput} onInput={this.handleInput}
/> />
<button <button
className="login-btn" class="login-btn"
disabled={!this.state.enabled} disabled={!this.state.enabled}
onClick={this.handleSubmit} onClick={this.handleSubmit}
type="submit"> type="submit">

2
client/src/components/svgs/colour.jsx
View File

@ -2,7 +2,7 @@ const preact = require('preact');
module.exports = function vboxColour(classes) { module.exports = function vboxColour(classes) {
return ( 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" <path id="Unnamed"
fill="none" strokeWidth="1px" fill="none" strokeWidth="1px"
d="M 20,20 d="M 20,20

2
client/src/components/svgs/diamond.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
module.exports = function triangle(classes) { module.exports = function triangle(classes) {
return ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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> <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="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 "/> <polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 "/>

2
client/src/components/svgs/hexagon.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
module.exports = function triangle(classes) { module.exports = function triangle(classes) {
return ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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> <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 <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
"/> "/>

2
client/src/components/svgs/pentagon.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
module.exports = function triangle(classes) { module.exports = function triangle(classes) {
return ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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> <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="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 "/> <polygon class="st4" points="54.38,181.1 22.41,83.61 106.11,23.36 189.8,83.61 157.83,181.1 "/>

4
client/src/components/svgs/saw.jsx
View File

@ -3,8 +3,8 @@ const preact = require('preact');
module.exports = function saw(colour) { module.exports = function saw(colour) {
return ( return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}> <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" class="ping-path"/>
<path d="M0,50l50,-50v100l50,-50" className="ping-path"/> <path d="M0,50l50,-50v100l50,-50" class="ping-path"/>
</svg> </svg>
); );
}; };

2
client/src/components/svgs/squircle.jsx
View File

@ -3,7 +3,7 @@ const preact = require('preact');
module.exports = function triangle(classes) { module.exports = function triangle(classes) {
return ( return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" <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>
<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 <path class="st1" d="M101.35,198.52h-0.9c-54.66,0-98.97-44.31-98.97-98.97V1.48h198.84v98.07

2
client/src/components/targeting.arrows.jsx
View File

@ -78,7 +78,7 @@ class TargetSvg extends Component {
: outgoing.map(getPath); : outgoing.map(getPath);
return ( 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} {arrows}
</svg> </svg>
); );

4
client/src/components/team.jsx
View File

@ -74,7 +74,7 @@ function Team(args) {
return ( return (
<div <div
key={construct.id} key={construct.id}
className="menu-construct" class="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } } style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectConstruct(construct.id)} > onClick={() => selectConstruct(construct.id)} >
<ConstructAvatar name={construct.name} id={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)} />); .map(i => <SpawnButton key={constructs.length + i} spawn={name => sendConstructSpawn(name)} />);
return ( return (
<main className="team"> <main class="team">
{constructPanels} {constructPanels}
{spawnButtons} {spawnButtons}
</main> </main>

24
client/src/components/vbox.component.jsx
View File

@ -167,7 +167,7 @@ function Vbox(args) {
return <td return <td
key={j} key={j}
className={`${highlighted ? 'highlight' : ''}`} class={`${highlighted ? 'highlight' : ''}`}
onTouchStart={e => vboxTouchStart(e, i, j)} onTouchStart={e => vboxTouchStart(e, i, j)}
onTouchEnd={e => vboxTouchEnd(e, i, j)} onTouchEnd={e => vboxTouchEnd(e, i, j)}
onTouchMove={e => vboxTouchMove(e)} onTouchMove={e => vboxTouchMove(e)}
@ -218,7 +218,7 @@ function Vbox(args) {
return ( return (
<td <td
key={i} key={i}
className={`${highlighted ? 'highlight' : ''}`} class={`${highlighted ? 'highlight' : ''}`}
onMouseOver={(e) => vboxHover(e, value)} onMouseOver={(e) => vboxHover(e, value)}
onClick={e => boundClick(e, i, highlighted) }> onClick={e => boundClick(e, i, highlighted) }>
{convertItem(value)} {convertItem(value)}
@ -252,7 +252,7 @@ function Vbox(args) {
return combinerChange(combiner); return combinerChange(combiner);
} }
const combinerElement = ( const combinerElement = (
<table className="vbox-table"> <table class="vbox-table">
<tbody> <tbody>
<tr> <tr>
<td onClick={() => combinerRmv(0)}> <td onClick={() => combinerRmv(0)}>
@ -287,38 +287,38 @@ function Vbox(args) {
const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`; const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
return ( return (
<div className={classes}> <div class={classes}>
<div className='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} > <div class='vbox-box' onClick={() => setReclaiming(false)} onMouseOver={e => hoverInfo(e, 'vbox')} >
<div className="vbox-hdr"> <div class="vbox-hdr">
<h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3> <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> </div>
<button <button
onMouseOver={e => hoverInfo(e, 'reroll')} onMouseOver={e => hoverInfo(e, 'reroll')}
onClick={() => sendVboxDiscard()}> onClick={() => sendVboxDiscard()}>
Reroll Reroll
</button> </button>
<table className="vbox-table"> <table class="vbox-table">
<tbody> <tbody>
{freeRows} {freeRows}
</tbody> </tbody>
</table> </table>
</div> </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> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
<button <button
className={reclaimClass} class={reclaimClass}
onMouseOver={e => hoverInfo(e, 'reclaim')} onMouseOver={e => hoverInfo(e, 'reclaim')}
onClick={reclaimClick}> onClick={reclaimClick}>
reclaim reclaim
</button> </button>
<table className="vbox-table"> <table class="vbox-table">
<tbody> <tbody>
{boundRows} {boundRows}
</tbody> </tbody>
</table> </table>
</div> </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> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
<button <button
onMouseOver={e => hoverInfo(e, 'refine')} onMouseOver={e => hoverInfo(e, 'refine')}