Определение ширины строки относительно размера экрана

Question

Я реализую игру под названием Typespeed, в которой слова плавают слева направо на экране, и задача игрока - набрать слова, прежде чем они столкнутся с правой стороной экрана.

Я «толкаю» слова вправо через второй массив, который содержит ряд значений в процентах, соответствующих тому, как далеко справа от экрана находится слово слева.

Например,

word = "car"
percentage = 35;

Слово "машина" будет отображаться на 35% с левой стороны экрана.

Поэтому, чтобы определить, столкнулась ли строка с правой частью экрана, я буду нужно выяснить, какой процент у каждого данного слова, и проверить, если

35 + percentage("car") === 100.

Как я могу реализовать такую ​​функцию процента?

Мой код:

import React, { useState } from 'react';
import styled from "styled-components";

const GameScreen = styled.div`
    height: 90vh;
    width: 99vw;
    position: relative;
    background-color: #000;
    display: flex;
    flex-direction: column;
`

const WordRow = styled.span`
    height: 5%;
    width: 100%;
    position: relative;
    color: #98FB98;
    display: flex;
`

const initialiseWords = (): string[] => Array.from(Array(20)).map(v => "word")

const initialisePercentages = (): number[] => Array.from(Array(20)).map(c => 35)

const Game: React.FC = () => {

    const [words, updateWords] = useState<string[]>(initialiseWords());
    const [percentages, updatePercentages] = useState<number[]>(initialisePercentages());

    const renderRow = (percentage: number, word: string) => {
        const style = {
            width: percentage.toString() + "%",
            height: "100%"
        }
        return (
            <WordRow>
                <div style = {style}/>
                {word} 
            </WordRow>
        )
    }

    return (
        <GameScreen>
            {words.map((word, i) => renderRow(percentages[i], word))}
        </GameScreen>
    )
}

export default Game;