23485944748

Committed 24 Mar 2026 10:57AM UTC coverage: 58.261% (-7.9%) from 66.169%

Build # 23485944748

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #25 from projektiryhma/GamePageGameOne

GamePhaseOne

Coverage Stats

33 of 59 branches covered (55.93%)

Branch coverage included in aggregate %.

1 of 42 new or added lines in 4 files covered. (2.38%)

1 existing line in 1 file now uncovered.

101 of 171 relevant lines covered (59.06%)

9.99 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

5.41

/src/components/GameOnePhaseOne.js

import { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import "./GameOnePhaseOne.css";

function Word({ text, isSelected, onClick }) {
  return (
    <span
      onClick={onClick}
      className={`interactive-word ${isSelected ? "is-selected" : ""}`}
    >
      {text}
    </span>
  );
}

Word.propTypes = {
  text: PropTypes.string.isRequired,
  isSelected: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
};

export function GameOnePhaseOne({ data, allFound }) {
  const navigate = useNavigate();
  const [selectedIndices, setSelectedIndices] = useState([]);

  useEffect(() => {
    setSelectedIndices([]);
  }, [data]);

  if (!data) return <p>Ei dataa saatavilla</p>;

  const originalText = data["Virheellinen teksti, virheet punaisella"];
  const amountOfErrors = data["Virheiden lukumäärä tekstissä"];
  const incorrectWordsString = data["Virheelliset sanat"];

  const incorrectWordsList = incorrectWordsString
    .split(",")
    .map((word) => word.trim());

  const words = originalText.split(/\s+/).filter((word) => word.length > 0);

  const handleWordClick = (index) => {
    if (selectedIndices.includes(index)) {
      setSelectedIndices(selectedIndices.filter((i) => i !== index));
    } else {
      setSelectedIndices([...selectedIndices, index]);
    }
  };

  const handleCheckClick = () => {
    const rightChoices = selectedIndices.filter((index) => {
      const wordWithoutPunctuation = words[index].replace(/[.,!?;:]/g, "");
      return incorrectWordsList.includes(wordWithoutPunctuation);
    });

    setSelectedIndices(rightChoices);

    if (rightChoices.length === amountOfErrors) {
      allFound(rightChoices);
    }
  };

  return (
    <div className="phase-one">
      <button
        onClick={() => navigate("/InfoPageGameOne")}
        className="BackToButton"
      >
        &lt; Edellinen
      </button>

      <h1 className="PhaseOneHeader">Vaihe 1 - Lue ja etsi</h1>

      <p className="phaseoneinfotext">
        Lue teksti. <br />
        Valitse mielestäsi virheellisesti kirjoitetut <br /> sanat.
      </p>

      <div className="container">
        <div className="word-container">
          {words.map((word, index) => (
            <Word
              key={index}
              text={word}
              isSelected={selectedIndices.includes(index)}
              onClick={() => handleWordClick(index)}
            />
          ))}
        </div>
        <button onClick={handleCheckClick} className="CheckButton">
          Tarkista
        </button>
      </div>

      <h2 className="phaseoneheader2">Tarvitsetko apua?</h2>
      <p className="phaseonehelptext">
        Voit pyytää vihjeen, joka näyttää, kuinka monta väärin kirjoitettua
        sanaa tekstissä on. Voit myös pyytää jotakuta lukemaan tekstin sinulle
        ääneen tai vaihtataa tehtävän tekstin toiseen.
      </p>
      <button onClick={handleCheckClick} className="CheckButton">
        Näytä vihje
      </button>
    </div>
  );
}

GameOnePhaseOne.propTypes = {
  data: PropTypes.shape({
    "Virheellinen teksti, virheet punaisella": PropTypes.string,
    "Virheiden lukumäärä tekstissä": PropTypes.number,
    "Virheelliset sanat": PropTypes.string,
  }).isRequired,
  allFound: PropTypes.func.isRequired,
};

1	import { useState, useEffect } from "react";
2	import PropTypes from "prop-types";
3	import { useNavigate } from "react-router-dom";
4	import "./GameOnePhaseOne.css";
5
6	function Word({ text, isSelected, onClick }) {
NEW 7	return (	×
8	<span
9	onClick={onClick}
10	className={`interactive-word ${isSelected ? "is-selected" : ""}`}	×
11	>
12	{text}
13	</span>
14	);
15	}
16
17	Word.propTypes = {	1✔
18	text: PropTypes.string.isRequired,
19	isSelected: PropTypes.bool.isRequired,
20	onClick: PropTypes.func.isRequired,
21	};
22
23	export function GameOnePhaseOne({ data, allFound }) {
24	const navigate = useNavigate();	×
NEW 25	const [selectedIndices, setSelectedIndices] = useState([]);	×
26
NEW 27	useEffect(() => {	×
NEW 28	setSelectedIndices([]);	×
29	}, [data]);
30
NEW 31	if (!data) return <p>Ei dataa saatavilla</p>;	×
32
NEW 33	const originalText = data["Virheellinen teksti, virheet punaisella"];	×
NEW 34	const amountOfErrors = data["Virheiden lukumäärä tekstissä"];	×
NEW 35	const incorrectWordsString = data["Virheelliset sanat"];	×
36
NEW 37	const incorrectWordsList = incorrectWordsString	×
38	.split(",")
NEW 39	.map((word) => word.trim());	×
40
NEW 41	const words = originalText.split(/\s+/).filter((word) => word.length > 0);	×
42
NEW 43	const handleWordClick = (index) => {	×
NEW 44	if (selectedIndices.includes(index)) {	×
NEW 45	setSelectedIndices(selectedIndices.filter((i) => i !== index));	×
46	} else {
NEW 47	setSelectedIndices([...selectedIndices, index]);	×
48	}
49	};
50
NEW 51	const handleCheckClick = () => {	×
NEW 52	const rightChoices = selectedIndices.filter((index) => {	×
NEW 53	const wordWithoutPunctuation = words[index].replace(/[.,!?;:]/g, "");	×
NEW 54	return incorrectWordsList.includes(wordWithoutPunctuation);	×
55	});
56
NEW 57	setSelectedIndices(rightChoices);	×
58
NEW 59	if (rightChoices.length === amountOfErrors) {	×
NEW 60	allFound(rightChoices);	×
61	}
62	};
63
64	return (	×
65	<div className="phase-one">
66	<button
67	onClick={() => navigate("/InfoPageGameOne")}	×
68	className="BackToButton"
69	>
70	< Edellinen
71	</button>
72
73	<h1 className="PhaseOneHeader">Vaihe 1 - Lue ja etsi</h1>
74
75	<p className="phaseoneinfotext">
76	Lue teksti. <br />
77	Valitse mielestäsi virheellisesti kirjoitetut <br /> sanat.
78	</p>
79
80	<div className="container">
81	<div className="word-container">
82	{words.map((word, index) => (
NEW 83	<Word	×
84	key={index}
85	text={word}
86	isSelected={selectedIndices.includes(index)}
NEW 87	onClick={() => handleWordClick(index)}	×
88	/>
89	))}
90	</div>
91	<button onClick={handleCheckClick} className="CheckButton">
92	Tarkista
93	</button>
94	</div>
95
96	<h2 className="phaseoneheader2">Tarvitsetko apua?</h2>
97	<p className="phaseonehelptext">
98	Voit pyytää vihjeen, joka näyttää, kuinka monta väärin kirjoitettua
99	sanaa tekstissä on. Voit myös pyytää jotakuta lukemaan tekstin sinulle
100	ääneen tai vaihtataa tehtävän tekstin toiseen.
101	</p>
102	<button onClick={handleCheckClick} className="CheckButton">
103	Näytä vihje
104	</button>
105	</div>
106	);
107	}
108
109	GameOnePhaseOne.propTypes = {	1✔
110	data: PropTypes.shape({
111	"Virheellinen teksti, virheet punaisella": PropTypes.string,
112	"Virheiden lukumäärä tekstissä": PropTypes.number,
113	"Virheelliset sanat": PropTypes.string,
114	}).isRequired,
115	allFound: PropTypes.func.isRequired,
116	};

projektiryhma / lukina / 23485944748

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous