mobile styling
This commit is contained in:
ntr
parent
e20b1f25a5
commit
223c5188dd
@ -27,7 +27,6 @@
|
||||
|
||||
.opponent {
|
||||
grid-area: opponent;
|
||||
transform: perspective(23rem);
|
||||
}
|
||||
|
||||
.opponent .combat-text {
|
||||
@ -38,10 +37,10 @@
|
||||
|
||||
.opponent .game-construct {
|
||||
align-items: flex-start;
|
||||
grid-template-rows: min-content min-content min-content 2fr;
|
||||
grid-template-rows: min-content min-content min-content minmax(min-content, 2fr);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"stats stats"
|
||||
"stats ."
|
||||
"name ."
|
||||
"effects ."
|
||||
"avatar target";
|
||||
@ -59,14 +58,14 @@
|
||||
justify-items: start;
|
||||
/*align-items: flex-end;*/
|
||||
|
||||
grid-template-rows: 1fr 2fr 1fr min-content;
|
||||
grid-template-rows: min-content minmax(min-content, 2fr) min-content min-content min-content;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"skills ."
|
||||
"avatar target"
|
||||
"effects ."
|
||||
"name ."
|
||||
"stats stats ";
|
||||
"stats .";
|
||||
|
||||
transition-property: all;
|
||||
transition-duration: 0.25s;
|
||||
@ -99,12 +98,20 @@
|
||||
grid-area: stats;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-construct figure {
|
||||
.game-construct .stats div {
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-construct .stats .value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-construct figcaption {
|
||||
@ -139,7 +146,6 @@
|
||||
|
||||
.game-construct .effects {
|
||||
grid-area: effects;
|
||||
font-size: 1.5em;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -378,4 +384,23 @@ CONSTRUCT DAMAGE
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
||||
|
||||
@media (max-height: 800px), (max-width: 1000px) {
|
||||
.game .stats div {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.game .stats .max {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game .stats .value {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.game .stats svg {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
GLOBAL
|
||||
*/
|
||||
|
||||
html, body, #constructs {
|
||||
html, body, #mnml {
|
||||
/*width: 100%;*/
|
||||
margin: 0;
|
||||
|
||||
@ -61,7 +61,7 @@ figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#constructs {
|
||||
#mnml {
|
||||
padding: 0 2em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr;
|
||||
@ -111,8 +111,9 @@ nav button[disabled], nav button[disabled]:hover {
|
||||
text-decoration: line-through
|
||||
}
|
||||
|
||||
nav button:hover {
|
||||
nav button:hover, nav button:focus {
|
||||
color: whitesmoke;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -282,13 +283,13 @@ button[disabled] {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
#constructs input, #constructs select {
|
||||
#mnml input, #mnml select {
|
||||
border-color: #444;
|
||||
background-color: #333;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#constructs input:focus {
|
||||
#mnml input:focus, #mnml select:focus {
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
@ -396,7 +397,8 @@ header {
|
||||
|
||||
.spawn-btn button {
|
||||
flex: 1;
|
||||
margin: 0.5em 2em;
|
||||
margin: 0.5em 1em;
|
||||
padding: 0 0.5em;
|
||||
border-color: #333
|
||||
}
|
||||
|
||||
@ -459,6 +461,13 @@ header {
|
||||
.create-form button {
|
||||
flex: 0 1 25%;
|
||||
font-size: 1.5em;
|
||||
border-color: #444;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.create-form button:hover, .create-form button:focus {
|
||||
border-color: whitesmoke;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure.gray {
|
||||
@ -517,7 +526,7 @@ main .top {
|
||||
}
|
||||
|
||||
@media (max-height: 900px), (max-width: 1500px) {
|
||||
#constructs {
|
||||
#mnml {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@media (max-height: 800px), (max-width: 1000px) {
|
||||
#constructs {
|
||||
#mnml {
|
||||
font-size: 8pt;
|
||||
padding: 0;
|
||||
grid-template-columns: min-content 1fr;
|
||||
@ -17,11 +17,6 @@
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "constructs.gg - mnml pvp atbs",
|
||||
"description": "constructs.gg - mnml pvp atbs",
|
||||
"short_name": "constructs.gg",
|
||||
"name": "mnml",
|
||||
"description": "mnml pvp atbs",
|
||||
"short_name": "mnml",
|
||||
"icons": [
|
||||
{
|
||||
"src": "./assets/icons/726.png",
|
||||
|
||||
@ -28,8 +28,8 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
store.dispatch(actions.setWs(ws));
|
||||
ws.connect();
|
||||
|
||||
const Constructs = () => (
|
||||
<div id="constructs" >
|
||||
const Mnml = () => (
|
||||
<div id="mnml" >
|
||||
<input type="checkbox" id="toggle-nav"/>
|
||||
<label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
|
||||
<Header />
|
||||
@ -40,7 +40,7 @@ document.fonts.load('16pt "Jura"').then(() => {
|
||||
|
||||
const App = () => (
|
||||
<Provider store={store}>
|
||||
<Constructs />
|
||||
<Mnml />
|
||||
</Provider>
|
||||
);
|
||||
|
||||
|
||||
@ -82,7 +82,6 @@ function GamePanel(props) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
const zero = Date.parse(game.phase_end) - (1000 * 60);
|
||||
const now = Date.now();
|
||||
const end = Date.parse(game.phase_end);
|
||||
@ -122,11 +121,12 @@ function GamePanel(props) {
|
||||
const ko = construct.green_life.value === 0 ? 'ko' : '';
|
||||
const classes = eventClasses(resolution, construct);
|
||||
|
||||
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
|
||||
<figure key={j} alt={s.stat}>
|
||||
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
|
||||
<div key={j} alt={s.stat}>
|
||||
{s.svg(`stat-icon ${s.colour}`)}
|
||||
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
|
||||
</figure>
|
||||
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
|
||||
<div className="value" >{construct[s.stat].value}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
const [combatText, combatClass] = getCombatText(construct, resolution);
|
||||
@ -144,11 +144,11 @@ function GamePanel(props) {
|
||||
.filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
|
||||
.map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
|
||||
|
||||
const anim = (
|
||||
<div className="anim-container">
|
||||
{animationDivs(combatClass)}
|
||||
</div>
|
||||
);
|
||||
// const anim = (
|
||||
// <div className="anim-container">
|
||||
// {animationDivs(combatClass)}
|
||||
// </div>
|
||||
// );
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -165,7 +165,6 @@ function GamePanel(props) {
|
||||
onClick={() => selectSkillTarget(construct.id)} >
|
||||
{constructAvatar(construct.name, construct.id)}
|
||||
{combatTextEl}
|
||||
{anim}
|
||||
</figure>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -57,15 +57,13 @@ function GameConstruct(props) {
|
||||
const skills = range(0, 3)
|
||||
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
|
||||
|
||||
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
|
||||
// i've seen this happen ;/
|
||||
if (construct[s.stat].value < 0) console.warn(construct);
|
||||
return <figure key={j} alt={s.stat}>
|
||||
const stats = [STATS.redLife, STATS.greenLife, STATS.blueLife].map((s, j) => (
|
||||
<div key={j} alt={s.stat}>
|
||||
{s.svg(`stat-icon ${s.colour}`)}
|
||||
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
|
||||
</figure>
|
||||
});
|
||||
|
||||
<div className="max" >{construct[s.stat].value} / {construct[s.stat].max}</div>
|
||||
<div className="value" >{construct[s.stat].value}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
const [combatText, combatClass] = getCombatText(construct, resolution);
|
||||
const combatTextClass = `combat-text ${combatClass}`;
|
||||
|
||||
@ -1,59 +1,46 @@
|
||||
const preact = require('preact');
|
||||
const { Component } = require('preact');
|
||||
const { useState } = require('preact/hooks');
|
||||
|
||||
class SpawnButton extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
function SpawnButton({ i }) {
|
||||
const [name, setName] = useState('');
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
this.state = { value: null, enabled: false };
|
||||
|
||||
this.handleInput = this.handleInput.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.enable = this.enable.bind(this);
|
||||
function nameInput(e) {
|
||||
e.stopPropagation();
|
||||
setName(e.target.value);
|
||||
}
|
||||
|
||||
handleInput(event) {
|
||||
this.setState({ value: event.target.value });
|
||||
function enabledToggle(e) {
|
||||
e.stopPropagation();
|
||||
setEnabled(!enabled);
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.props.spawn(this.state.value);
|
||||
this.setState({ value: null, enabled: false });
|
||||
}
|
||||
|
||||
enable() {
|
||||
this.setState({ enabled: true });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="menu-construct-ctr spawn-btn">
|
||||
<div
|
||||
key={this.props.i}
|
||||
className="menu-construct-ctr spawn-btn">
|
||||
<div
|
||||
className="menu-construct"
|
||||
onClick={() => this.enable()} >
|
||||
<h2>+</h2>
|
||||
<input
|
||||
className="login-input"
|
||||
type="text"
|
||||
disabled={!this.state.enabled}
|
||||
value={this.state.value}
|
||||
placeholder="name"
|
||||
onInput={this.handleInput}
|
||||
/>
|
||||
<button
|
||||
className="login-btn"
|
||||
disabled={!this.state.enabled}
|
||||
onClick={this.handleSubmit}
|
||||
type="submit">
|
||||
spawn
|
||||
</button>
|
||||
</div>
|
||||
className="menu-construct"
|
||||
onClick={e => enabledToggle(e)} >
|
||||
<h2>+</h2>
|
||||
<input
|
||||
className="login-input"
|
||||
type="text"
|
||||
disabled={!enabled}
|
||||
value={name}
|
||||
placeholder="name"
|
||||
onInput={e => nameInput(e)}
|
||||
/>
|
||||
<button
|
||||
className="login-btn"
|
||||
disabled={!enabled}
|
||||
onClick={e => enabledToggle(e)}
|
||||
type="submit">
|
||||
spawn
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = SpawnButton;
|
||||
@ -110,6 +110,23 @@ function instanceConstruct(name, id) {
|
||||
);
|
||||
}
|
||||
|
||||
function gameConstructImg(name, id, combatTextEl, selectSkillTarget) {
|
||||
useEffect(() => {
|
||||
animateConstruct(id);
|
||||
return () => clearAnimation(id);
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="avatar"
|
||||
id={id}
|
||||
onClick={() => selectSkillTarget(id)}
|
||||
style={{ 'background-image': `url(/molecules/${genAvatar(name)}.svg)` }} >
|
||||
{combatTextEl}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
||||
|
||||
const STATS = {
|
||||
@ -574,6 +591,7 @@ module.exports = {
|
||||
genAvatar,
|
||||
constructAvatar,
|
||||
instanceConstruct,
|
||||
gameConstructImg,
|
||||
requestAvatar,
|
||||
eventClasses,
|
||||
getCombatSequence,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user