how can I autoscale all these react components? depending on the screen size?
Code:
import { useEffect, useRef, useState } from 'react';
import { useGameContextUpdate } from '../../contexts/GameContext';
import { useHistory, useParams } from 'react-router-dom';
import Title from './Title';
import config from '../../config';
import styled from 'styled-components';
import { usePageContext } from '../../contexts/PageContext';
import { vh } from '../../common/styled-components';
import QuestionField from './QuestionField';
import Field from './Field';
import { Col, Row } from 'antd';
import Equivalenze from './Equivalenze';
import '../../assets/css/main.css';
const goNextTimeout = 2500;
const Paper = () => {
const { game, id } = useParams();
const history = useHistory();
const { fields, matrix, pageImage } = usePageContext();
const { checkFnUpdate } = useGameContextUpdate();
const [fieldsShow, fieldsShowSet] = useState();
const [questionValue, questionSet] = useState([]);
const [redquestions, setRedquestions] = useState([]);
const [equivalenzeVisibile, setVisibleEquivalenze] =
useState(false);
const pageImgRef = useRef();
useEffect(() => {
clear();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fields]);
useEffect(() => {
if (!pageImage) return;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pageImage]);
const imgloaded = () => {
fieldsShowSet(true);
};
const getMatrixIDs = (xid, yid) => {
return matrix
.map((m, id) => {
if (m.y === yid && m.x.indexOf(xid) !== -1)
return {
yid: id,
xid: m.x.indexOf(xid)
};
else return false;
})
.filter(m => m)[0];
};
const goNext = () => {
const gamesKeys = Object.keys(config.games);
const currentKey = gamesKeys.indexOf(game);
if (
config.games[game].pages.filter(p => p.id === Number(id) + 1)
.length === 0 &&
typeof gamesKeys[currentKey + 1] === 'undefined'
) {
return;
}
if (
config.games[game].pages.filter(p => p.id === Number(id) + 1)
.length > 0
) {
history.push(`/${game}/${Number(id) + 1}`);
} else {
if (typeof gamesKeys[currentKey + 1] !== 'undefined') {
const nextGame = gamesKeys[currentKey + 1];
history.push(`/${nextGame}/1`);
} else {
console.log('ALL GAMES ENDED');
return;
}
}
loadvalues();
};
const clear = () => {
document.querySelectorAll('.field').forEach(f => {
f.innerText = '';
loadvalues();
});
};
const check = () => {
let resultEls = [...document.querySelectorAll('.field.result')];
resultEls = resultEls.map(el => {
const yid = Number(el.getAttribute('y'));
const xid = Number(el.getAttribute('x'));
const mid = getMatrixIDs(xid, yid);
//if (!mid) return;
const input = String(el.innerText);
const value = String(fields[mid.yid][mid.xid].v);
return input === value ? true : false;
});
const isRight = resultEls.every(e => {
return e === true;
});
let response = [];
if (isRight) response[0] = '+';
else response[0] = '-';
response[1] = () => {
const gamesKeys = Object.keys(config.games);
const currentKey = gamesKeys.indexOf(game);
const endOfGames =
config.games[game].pages.filter(p => p.id === Number(id) + 1)
.length === 0 &&
typeof gamesKeys[currentKey + 1] === 'undefined'
? true
: false;
console.log('TRUEFALSE CALLBACK', 'emd of games?', endOfGames);
if (!endOfGames && isRight)
setTimeout(() => {
fieldsShowSet(false);
goNext();
}, goNextTimeout);
document.querySelectorAll('.field').forEach(f => {
const yid = Number(f.getAttribute('y'));
const xid = Number(f.getAttribute('x'));
const mid = getMatrixIDs(xid, yid);
const input = String(f.innerText);
const value = String(fields[mid.yid][mid.xid].v);
if (isRight) {
f.innerText = value;
if (!endOfGames)
setTimeout(() => {
clear();
}, goNextTimeout);
} else {
if (!input) return;
if (input !== value) f.innerText = '';
}
});
};
return response;
};
async function loadvalues() {
try {
localStorage.setItem('nrisposte', 0);
checkFnUpdate(check);
const games = Object.keys(config.games);
const state = games.map(game => ({
link: `${game}`,
color: config.games[game].colors.main,
light1: config.games[game].colors.light1,
title: config.games[game].title,
icon: config.games[game].menuIcon,
disabled: config.games[game].menuIsDisabled,
giochi: config.games[game].giochi,
equivalenze: config.games[game].equivalenze,
pages: config.games[game].pages[id - 1].questions,
redquestions: config.games[game].pages[id - 1].redquestions
}));
console.log(state[0].pages);
const pageObject = config.games[game].pages.filter(
p => p.id === Number(id)
)[0];
var question = state[0].pages;
var redquestions = state[0].redquestions;
questionSet(question);
setVisibleEquivalenze(pageObject.equivalenze);
setRedquestions(redquestions);
} catch (e) {
console.log('errore: ' + e);
}
}
useEffect(() => {
loadvalues();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [questionValue]);
return (
<Container>
<Title />
<CardWrapper>
<img
ref={pageImgRef}
src={pageImage}
alt=""
onLoad={imgloaded}
className={`${fieldsShow ? 'show' : ''}`}
width="90%"
style={{ marginTop: '4%', marginLeft: '5%' }}
/>
{redquestions.length > 0 && equivalenzeVisibile != true ? (
redquestions.map(value => {
return (
<QuestionField
testo={value['text']}
x={10}
y={40}
isRed={true}
/>
);
})
) : (
<></>
)}
<Row>
<div class="mt-4 mb-3 row align-items-center fs-1">
<div class="col-6">
<div class="text-end">
<Col span={8}>
{fieldsShow &&
equivalenzeVisibile != true &&
fields &&
fields.map((row, iRow) => {
const lugnhezza = fields.length;
console.log('n risposte: ' + lugnhezza);
localStorage.setItem('nrisposte', lugnhezza);
const y = matrix[iRow].y;
return row.map((field, iField) => {
const x = matrix[iRow].x[iField];
const result = matrix[iRow].result[iField];
return (
<Field
x={x + 20}
y={y}
i={Number(`${iRow}${iField}`)}
key={`${iRow}-${iField}`}
f={field}
check={check}
result={result}
/>
);
});
})}
{questionValue.length > 0 &&
equivalenzeVisibile != true ? (
questionValue.map((value, index) => {
return (
<div>
<QuestionField
testo={value['text']}
x={10}
y={50 + index * 10}
isRed={false}
/>
</div>
);
})
) : (
<></>
)}
</Col>
</div>
</div>
</div>
</Row>
{equivalenzeVisibile == true ? (
<Equivalenze testo={'prova'} x={20} y={50} />
) : (
<></>
)}
</CardWrapper>
</Container>
);
};
export default Paper;
const CardWrapper = styled.div`
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
`;
const Container = styled.div`
position: relative;
height: ${vh(90)};
.test-box {
width: 10rem;
height: 10rem;
border: 1px solid;
position: absolute;
background-color: #fff;
}
img {
/* width: 500px; */
max-height: ${vh(90)};
opacity: 0;
&.show {
opacity: 1;
}
}
.loading {
}
`;
