feat: initial release — Ranger Reader v1.1.0
Single-file HTML RSVP reader for academic papers and long-form text. Released free / GPL v2+ as a replacement for subscription-based RSVP readers (SwiftRead, etc.) that cost ~$120/year for the same core functionality. v1.1.0 ships with three reading modes: - Word: classic RSVP with ORP focal-character coloring - Sentence: chunked reading, auto-advancing on word-count timing - Paragraph: skim mode Other features: WPM slider 200-1500, drag-drop .txt loading, localStorage persistence (text + WPM + mode + position), keyboard shortcuts, dark-mode WP-tone palette, sentence splitter that handles common academic abbreviations (Mr./Dr./e.g./i.e./et al./ Vol./Fig./decimals). Single self-contained HTML file. No install, no dependencies, no network calls. Runs in any modern browser, fully offline.
This commit is contained in:
@@ -0,0 +1,52 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
All notable changes to **Ranger Reader** are documented here.
|
||||||
|
Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versioning: [SemVer](https://semver.org/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Unreleased]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [1.1.0] — 2026-05-27
|
||||||
|
|
||||||
|
### Added — Sentence and Paragraph reading modes
|
||||||
|
|
||||||
|
The single-word RSVP display from v1.0 is now one of three modes selectable via the toggle in the header (or keyboard `1` / `2` / `3`):
|
||||||
|
|
||||||
|
- **Word** (`1`) — original RSVP, one word at a time with ORP focal-character coloring
|
||||||
|
- **Sentence** (`2`) — one full sentence at a time, auto-advancing on `(words / WPM) × 1.25` interval, clamped to 1.5–12 s per chunk
|
||||||
|
- **Paragraph** (`3`) — one paragraph at a time, larger reading area, `(words / WPM) × 1.40` interval
|
||||||
|
|
||||||
|
The sentence splitter handles common academic-text false positives — titles (`Mr.`, `Dr.`, `Prof.`), Latin (`e.g.`, `i.e.`, `et al.`), abbreviations (`Vol.`, `Fig.`, `Eq.`, `Ref.`), and decimal numbers — by guarding them before splitting on `.!?` followed by whitespace and capital letter.
|
||||||
|
|
||||||
|
Paragraph splitting is on blank-line separation (the conventional output of `pdftotext`).
|
||||||
|
|
||||||
|
Other v1.1 polish:
|
||||||
|
- Stage centre guide-lines hidden in Sentence / Paragraph modes (single-word framing isn't needed)
|
||||||
|
- Skip-distance adapts per mode: ± 10 in Word mode, ± 1 in chunk modes
|
||||||
|
- Meta text adapts to mode: `N / total words` / `sentences` / `paragraphs`
|
||||||
|
- Time-remaining always computed in raw words regardless of mode (so 500 WPM means 500 WPM everywhere)
|
||||||
|
- Mode is persisted alongside text + WPM + position in `localStorage`
|
||||||
|
- v1.1 version stamp visible in header
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [1.0.0] — 2026-05-27
|
||||||
|
|
||||||
|
Initial release.
|
||||||
|
|
||||||
|
### Added
|
||||||
|
|
||||||
|
- Single-word RSVP display with WPM slider (200–1500, default 500)
|
||||||
|
- ORP (Optimal Recognition Point) focal-character coloring in red
|
||||||
|
- Punctuation-aware pause: 2.5× for period/exclamation/question, 1.7× for comma/semicolon/colon, 1.3× for closing brackets
|
||||||
|
- Progress bar + meta (`N / total words · ~X min remaining at Y WPM`)
|
||||||
|
- Keyboard shortcuts (`Space`, `←`/`→`, `+`/`−`, `R`)
|
||||||
|
- Drag-and-drop `.txt` file loading anywhere on the page
|
||||||
|
- `localStorage` persistence — text, WPM and position survive page reloads
|
||||||
|
- Dark-mode WP-tone palette (accessible-contrast colour scheme)
|
||||||
|
- "Done" state turns the display green when the paper finishes
|
||||||
|
|
||||||
|
Single self-contained HTML file. No dependencies, no install, no network calls. Runs in any modern browser, fully offline.
|
||||||
@@ -0,0 +1,338 @@
|
|||||||
|
GNU GENERAL PUBLIC LICENSE
|
||||||
|
Version 2, June 1991
|
||||||
|
|
||||||
|
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
||||||
|
<https://fsf.org/>
|
||||||
|
Everyone is permitted to copy and distribute verbatim copies
|
||||||
|
of this license document, but changing it is not allowed.
|
||||||
|
|
||||||
|
Preamble
|
||||||
|
|
||||||
|
The licenses for most software are designed to take away your
|
||||||
|
freedom to share and change it. By contrast, the GNU General Public
|
||||||
|
License is intended to guarantee your freedom to share and change free
|
||||||
|
software--to make sure the software is free for all its users. This
|
||||||
|
General Public License applies to most of the Free Software
|
||||||
|
Foundation's software and to any other program whose authors commit to
|
||||||
|
using it. (Some other Free Software Foundation software is covered by
|
||||||
|
the GNU Lesser General Public License instead.) You can apply it to
|
||||||
|
your programs, too.
|
||||||
|
|
||||||
|
When we speak of free software, we are referring to freedom, not
|
||||||
|
price. Our General Public Licenses are designed to make sure that you
|
||||||
|
have the freedom to distribute copies of free software (and charge for
|
||||||
|
this service if you wish), that you receive source code or can get it
|
||||||
|
if you want it, that you can change the software or use pieces of it
|
||||||
|
in new free programs; and that you know you can do these things.
|
||||||
|
|
||||||
|
To protect your rights, we need to make restrictions that forbid
|
||||||
|
anyone to deny you these rights or to ask you to surrender the rights.
|
||||||
|
These restrictions translate to certain responsibilities for you if you
|
||||||
|
distribute copies of the software, or if you modify it.
|
||||||
|
|
||||||
|
For example, if you distribute copies of such a program, whether
|
||||||
|
gratis or for a fee, you must give the recipients all the rights that
|
||||||
|
you have. You must make sure that they, too, receive or can get the
|
||||||
|
source code. And you must show them these terms so they know their
|
||||||
|
rights.
|
||||||
|
|
||||||
|
We protect your rights with two steps: (1) copyright the software, and
|
||||||
|
(2) offer you this license which gives you legal permission to copy,
|
||||||
|
distribute and/or modify the software.
|
||||||
|
|
||||||
|
Also, for each author's protection and ours, we want to make certain
|
||||||
|
that everyone understands that there is no warranty for this free
|
||||||
|
software. If the software is modified by someone else and passed on, we
|
||||||
|
want its recipients to know that what they have is not the original, so
|
||||||
|
that any problems introduced by others will not reflect on the original
|
||||||
|
authors' reputations.
|
||||||
|
|
||||||
|
Finally, any free program is threatened constantly by software
|
||||||
|
patents. We wish to avoid the danger that redistributors of a free
|
||||||
|
program will individually obtain patent licenses, in effect making the
|
||||||
|
program proprietary. To prevent this, we have made it clear that any
|
||||||
|
patent must be licensed for everyone's free use or not licensed at all.
|
||||||
|
|
||||||
|
The precise terms and conditions for copying, distribution and
|
||||||
|
modification follow.
|
||||||
|
|
||||||
|
GNU GENERAL PUBLIC LICENSE
|
||||||
|
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||||
|
|
||||||
|
0. This License applies to any program or other work which contains
|
||||||
|
a notice placed by the copyright holder saying it may be distributed
|
||||||
|
under the terms of this General Public License. The "Program", below,
|
||||||
|
refers to any such program or work, and a "work based on the Program"
|
||||||
|
means either the Program or any derivative work under copyright law:
|
||||||
|
that is to say, a work containing the Program or a portion of it,
|
||||||
|
either verbatim or with modifications and/or translated into another
|
||||||
|
language. (Hereinafter, translation is included without limitation in
|
||||||
|
the term "modification".) Each licensee is addressed as "you".
|
||||||
|
|
||||||
|
Activities other than copying, distribution and modification are not
|
||||||
|
covered by this License; they are outside its scope. The act of
|
||||||
|
running the Program is not restricted, and the output from the Program
|
||||||
|
is covered only if its contents constitute a work based on the
|
||||||
|
Program (independent of having been made by running the Program).
|
||||||
|
Whether that is true depends on what the Program does.
|
||||||
|
|
||||||
|
1. You may copy and distribute verbatim copies of the Program's
|
||||||
|
source code as you receive it, in any medium, provided that you
|
||||||
|
conspicuously and appropriately publish on each copy an appropriate
|
||||||
|
copyright notice and disclaimer of warranty; keep intact all the
|
||||||
|
notices that refer to this License and to the absence of any warranty;
|
||||||
|
and give any other recipients of the Program a copy of this License
|
||||||
|
along with the Program.
|
||||||
|
|
||||||
|
You may charge a fee for the physical act of transferring a copy, and
|
||||||
|
you may at your option offer warranty protection in exchange for a fee.
|
||||||
|
|
||||||
|
2. You may modify your copy or copies of the Program or any portion
|
||||||
|
of it, thus forming a work based on the Program, and copy and
|
||||||
|
distribute such modifications or work under the terms of Section 1
|
||||||
|
above, provided that you also meet all of these conditions:
|
||||||
|
|
||||||
|
a) You must cause the modified files to carry prominent notices
|
||||||
|
stating that you changed the files and the date of any change.
|
||||||
|
|
||||||
|
b) You must cause any work that you distribute or publish, that in
|
||||||
|
whole or in part contains or is derived from the Program or any
|
||||||
|
part thereof, to be licensed as a whole at no charge to all third
|
||||||
|
parties under the terms of this License.
|
||||||
|
|
||||||
|
c) If the modified program normally reads commands interactively
|
||||||
|
when run, you must cause it, when started running for such
|
||||||
|
interactive use in the most ordinary way, to print or display an
|
||||||
|
announcement including an appropriate copyright notice and a
|
||||||
|
notice that there is no warranty (or else, saying that you provide
|
||||||
|
a warranty) and that users may redistribute the program under
|
||||||
|
these conditions, and telling the user how to view a copy of this
|
||||||
|
License. (Exception: if the Program itself is interactive but
|
||||||
|
does not normally print such an announcement, your work based on
|
||||||
|
the Program is not required to print an announcement.)
|
||||||
|
|
||||||
|
These requirements apply to the modified work as a whole. If
|
||||||
|
identifiable sections of that work are not derived from the Program,
|
||||||
|
and can be reasonably considered independent and separate works in
|
||||||
|
themselves, then this License, and its terms, do not apply to those
|
||||||
|
sections when you distribute them as separate works. But when you
|
||||||
|
distribute the same sections as part of a whole which is a work based
|
||||||
|
on the Program, the distribution of the whole must be on the terms of
|
||||||
|
this License, whose permissions for other licensees extend to the
|
||||||
|
entire whole, and thus to each and every part regardless of who wrote it.
|
||||||
|
|
||||||
|
Thus, it is not the intent of this section to claim rights or contest
|
||||||
|
your rights to work written entirely by you; rather, the intent is to
|
||||||
|
exercise the right to control the distribution of derivative or
|
||||||
|
collective works based on the Program.
|
||||||
|
|
||||||
|
In addition, mere aggregation of another work not based on the Program
|
||||||
|
with the Program (or with a work based on the Program) on a volume of
|
||||||
|
a storage or distribution medium does not bring the other work under
|
||||||
|
the scope of this License.
|
||||||
|
|
||||||
|
3. You may copy and distribute the Program (or a work based on it,
|
||||||
|
under Section 2) in object code or executable form under the terms of
|
||||||
|
Sections 1 and 2 above provided that you also do one of the following:
|
||||||
|
|
||||||
|
a) Accompany it with the complete corresponding machine-readable
|
||||||
|
source code, which must be distributed under the terms of Sections
|
||||||
|
1 and 2 above on a medium customarily used for software interchange; or,
|
||||||
|
|
||||||
|
b) Accompany it with a written offer, valid for at least three
|
||||||
|
years, to give any third party, for a charge no more than your
|
||||||
|
cost of physically performing source distribution, a complete
|
||||||
|
machine-readable copy of the corresponding source code, to be
|
||||||
|
distributed under the terms of Sections 1 and 2 above on a medium
|
||||||
|
customarily used for software interchange; or,
|
||||||
|
|
||||||
|
c) Accompany it with the information you received as to the offer
|
||||||
|
to distribute corresponding source code. (This alternative is
|
||||||
|
allowed only for noncommercial distribution and only if you
|
||||||
|
received the program in object code or executable form with such
|
||||||
|
an offer, in accord with Subsection b above.)
|
||||||
|
|
||||||
|
The source code for a work means the preferred form of the work for
|
||||||
|
making modifications to it. For an executable work, complete source
|
||||||
|
code means all the source code for all modules it contains, plus any
|
||||||
|
associated interface definition files, plus the scripts used to
|
||||||
|
control compilation and installation of the executable. However, as a
|
||||||
|
special exception, the source code distributed need not include
|
||||||
|
anything that is normally distributed (in either source or binary
|
||||||
|
form) with the major components (compiler, kernel, and so on) of the
|
||||||
|
operating system on which the executable runs, unless that component
|
||||||
|
itself accompanies the executable.
|
||||||
|
|
||||||
|
If distribution of executable or object code is made by offering
|
||||||
|
access to copy from a designated place, then offering equivalent
|
||||||
|
access to copy the source code from the same place counts as
|
||||||
|
distribution of the source code, even though third parties are not
|
||||||
|
compelled to copy the source along with the object code.
|
||||||
|
|
||||||
|
4. You may not copy, modify, sublicense, or distribute the Program
|
||||||
|
except as expressly provided under this License. Any attempt
|
||||||
|
otherwise to copy, modify, sublicense or distribute the Program is
|
||||||
|
void, and will automatically terminate your rights under this License.
|
||||||
|
However, parties who have received copies, or rights, from you under
|
||||||
|
this License will not have their licenses terminated so long as such
|
||||||
|
parties remain in full compliance.
|
||||||
|
|
||||||
|
5. You are not required to accept this License, since you have not
|
||||||
|
signed it. However, nothing else grants you permission to modify or
|
||||||
|
distribute the Program or its derivative works. These actions are
|
||||||
|
prohibited by law if you do not accept this License. Therefore, by
|
||||||
|
modifying or distributing the Program (or any work based on the
|
||||||
|
Program), you indicate your acceptance of this License to do so, and
|
||||||
|
all its terms and conditions for copying, distributing or modifying
|
||||||
|
the Program or works based on it.
|
||||||
|
|
||||||
|
6. Each time you redistribute the Program (or any work based on the
|
||||||
|
Program), the recipient automatically receives a license from the
|
||||||
|
original licensor to copy, distribute or modify the Program subject to
|
||||||
|
these terms and conditions. You may not impose any further
|
||||||
|
restrictions on the recipients' exercise of the rights granted herein.
|
||||||
|
You are not responsible for enforcing compliance by third parties to
|
||||||
|
this License.
|
||||||
|
|
||||||
|
7. If, as a consequence of a court judgment or allegation of patent
|
||||||
|
infringement or for any other reason (not limited to patent issues),
|
||||||
|
conditions are imposed on you (whether by court order, agreement or
|
||||||
|
otherwise) that contradict the conditions of this License, they do not
|
||||||
|
excuse you from the conditions of this License. If you cannot
|
||||||
|
distribute so as to satisfy simultaneously your obligations under this
|
||||||
|
License and any other pertinent obligations, then as a consequence you
|
||||||
|
may not distribute the Program at all. For example, if a patent
|
||||||
|
license would not permit royalty-free redistribution of the Program by
|
||||||
|
all those who receive copies directly or indirectly through you, then
|
||||||
|
the only way you could satisfy both it and this License would be to
|
||||||
|
refrain entirely from distribution of the Program.
|
||||||
|
|
||||||
|
If any portion of this section is held invalid or unenforceable under
|
||||||
|
any particular circumstance, the balance of the section is intended to
|
||||||
|
apply and the section as a whole is intended to apply in other
|
||||||
|
circumstances.
|
||||||
|
|
||||||
|
It is not the purpose of this section to induce you to infringe any
|
||||||
|
patents or other property right claims or to contest validity of any
|
||||||
|
such claims; this section has the sole purpose of protecting the
|
||||||
|
integrity of the free software distribution system, which is
|
||||||
|
implemented by public license practices. Many people have made
|
||||||
|
generous contributions to the wide range of software distributed
|
||||||
|
through that system in reliance on consistent application of that
|
||||||
|
system; it is up to the author/donor to decide if he or she is willing
|
||||||
|
to distribute software through any other system and a licensee cannot
|
||||||
|
impose that choice.
|
||||||
|
|
||||||
|
This section is intended to make thoroughly clear what is believed to
|
||||||
|
be a consequence of the rest of this License.
|
||||||
|
|
||||||
|
8. If the distribution and/or use of the Program is restricted in
|
||||||
|
certain countries either by patents or by copyrighted interfaces, the
|
||||||
|
original copyright holder who places the Program under this License
|
||||||
|
may add an explicit geographical distribution limitation excluding
|
||||||
|
those countries, so that distribution is permitted only in or among
|
||||||
|
countries not thus excluded. In such case, this License incorporates
|
||||||
|
the limitation as if written in the body of this License.
|
||||||
|
|
||||||
|
9. The Free Software Foundation may publish revised and/or new versions
|
||||||
|
of the General Public License from time to time. Such new versions will
|
||||||
|
be similar in spirit to the present version, but may differ in detail to
|
||||||
|
address new problems or concerns.
|
||||||
|
|
||||||
|
Each version is given a distinguishing version number. If the Program
|
||||||
|
specifies a version number of this License which applies to it and "any
|
||||||
|
later version", you have the option of following the terms and conditions
|
||||||
|
either of that version or of any later version published by the Free
|
||||||
|
Software Foundation. If the Program does not specify a version number of
|
||||||
|
this License, you may choose any version ever published by the Free Software
|
||||||
|
Foundation.
|
||||||
|
|
||||||
|
10. If you wish to incorporate parts of the Program into other free
|
||||||
|
programs whose distribution conditions are different, write to the author
|
||||||
|
to ask for permission. For software which is copyrighted by the Free
|
||||||
|
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||||
|
make exceptions for this. Our decision will be guided by the two goals
|
||||||
|
of preserving the free status of all derivatives of our free software and
|
||||||
|
of promoting the sharing and reuse of software generally.
|
||||||
|
|
||||||
|
NO WARRANTY
|
||||||
|
|
||||||
|
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||||
|
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||||
|
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||||
|
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||||
|
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||||
|
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||||
|
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||||
|
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||||
|
REPAIR OR CORRECTION.
|
||||||
|
|
||||||
|
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||||
|
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||||
|
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||||
|
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||||
|
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||||
|
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||||
|
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||||
|
POSSIBILITY OF SUCH DAMAGES.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
How to Apply These Terms to Your New Programs
|
||||||
|
|
||||||
|
If you develop a new program, and you want it to be of the greatest
|
||||||
|
possible use to the public, the best way to achieve this is to make it
|
||||||
|
free software which everyone can redistribute and change under these terms.
|
||||||
|
|
||||||
|
To do so, attach the following notices to the program. It is safest
|
||||||
|
to attach them to the start of each source file to most effectively
|
||||||
|
convey the exclusion of warranty; and each file should have at least
|
||||||
|
the "copyright" line and a pointer to where the full notice is found.
|
||||||
|
|
||||||
|
<one line to give the program's name and a brief idea of what it does.>
|
||||||
|
Copyright (C) <year> <name of author>
|
||||||
|
|
||||||
|
This program is free software; you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation; either version 2 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License along
|
||||||
|
with this program; if not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
Also add information on how to contact you by electronic and paper mail.
|
||||||
|
|
||||||
|
If the program is interactive, make it output a short notice like this
|
||||||
|
when it starts in an interactive mode:
|
||||||
|
|
||||||
|
Gnomovision version 69, Copyright (C) year name of author
|
||||||
|
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||||
|
This is free software, and you are welcome to redistribute it
|
||||||
|
under certain conditions; type `show c' for details.
|
||||||
|
|
||||||
|
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||||
|
parts of the General Public License. Of course, the commands you use may
|
||||||
|
be called something other than `show w' and `show c'; they could even be
|
||||||
|
mouse-clicks or menu items--whatever suits your program.
|
||||||
|
|
||||||
|
You should also get your employer (if you work as a programmer) or your
|
||||||
|
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||||
|
necessary. Here is a sample; alter the names:
|
||||||
|
|
||||||
|
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
|
||||||
|
`Gnomovision' (which makes passes at compilers) written by James Hacker.
|
||||||
|
|
||||||
|
<signature of Moe Ghoul>, 1 April 1989
|
||||||
|
Moe Ghoul, President of Vice
|
||||||
|
|
||||||
|
This General Public License does not permit incorporating your program into
|
||||||
|
proprietary programs. If your program is a subroutine library, you may
|
||||||
|
consider it more useful to permit linking proprietary applications with the
|
||||||
|
library. If this is what you want to do, use the GNU Lesser General
|
||||||
|
Public License instead of this License.
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
# ◈ Ranger Reader
|
||||||
|
|
||||||
|
A lightweight RSVP reader for academic papers and long-form text — single HTML file, no install, no subscription, no cloud, runs offline in any browser.
|
||||||
|
|
||||||
|
Built to handle the volume of reading required by a research thesis without paying the $120/year for SwiftRead or similar tools. Released here so others can do the same.
|
||||||
|
|
||||||
|
## What it does
|
||||||
|
|
||||||
|
Three reading modes for the same text:
|
||||||
|
|
||||||
|
| Mode | What it does | Best for |
|
||||||
|
|---|---|---|
|
||||||
|
| **Word** (key `1`) | Classic RSVP — one word at a time at a chosen WPM, with ORP (Optimal Recognition Point) focal-character colouring | Fast skim, the "I'm reading at 4× normal speed" experience |
|
||||||
|
| **Sentence** (key `2`) | One full sentence at a time, auto-advancing based on word count | Comprehension-grade reading of methods and results sections |
|
||||||
|
| **Paragraph** (key `3`) | One paragraph at a time, longer display | Preview / postview stages, skim for quotes |
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
1. **Open `ranger-reader.html`** in any modern browser (double-click works)
|
||||||
|
2. **Paste text** into the textarea at the bottom, or **drag any `.txt` file** onto the page
|
||||||
|
3. **Press the spacebar** or click **▶ Play**
|
||||||
|
4. **Tap `1` / `2` / `3`** to switch between Word / Sentence / Paragraph modes
|
||||||
|
5. **Slide WPM** up or down to taste (default 500, range 200–1500)
|
||||||
|
|
||||||
|
Text, WPM, mode, and reading position all auto-save in your browser — close the tab, reopen tomorrow, resume where you stopped.
|
||||||
|
|
||||||
|
## Keyboard shortcuts
|
||||||
|
|
||||||
|
| Key | Action |
|
||||||
|
|---|---|
|
||||||
|
| `Space` | Play / pause |
|
||||||
|
| `←` / `→` | Skip back / forward (10 in Word mode, 1 in chunk modes) |
|
||||||
|
| `1` / `2` / `3` | Switch to Word / Sentence / Paragraph mode |
|
||||||
|
| `+` / `−` | Adjust WPM by 50 |
|
||||||
|
| `R` | Reset to start |
|
||||||
|
|
||||||
|
## Converting PDF papers
|
||||||
|
|
||||||
|
The reader takes plain text. To convert academic PDFs:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# macOS / Linux — install poppler-utils first (e.g. brew install poppler)
|
||||||
|
pdftotext input.pdf output.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
Then drag the `.txt` file onto the reader page.
|
||||||
|
|
||||||
|
## What it doesn't do (yet)
|
||||||
|
|
||||||
|
- A built-in file library — paste or drag, one paper at a time
|
||||||
|
- Per-paper bookmarks — single position memory
|
||||||
|
- Background sound / brown noise — planned for v1.2
|
||||||
|
- Browser extension packaging — planned for v2.0
|
||||||
|
- Multi-language ORP heuristics — currently tuned for English
|
||||||
|
|
||||||
|
## Why RSVP works
|
||||||
|
|
||||||
|
RSVP (Rapid Serial Visual Presentation) shows words sequentially at a fixed location, eliminating the eye saccades that normal reading requires. For many readers — particularly dyslexic readers — this:
|
||||||
|
|
||||||
|
- Reduces visual-tracking effort
|
||||||
|
- Eliminates letter-reversal confusion (words don't sit next to each other)
|
||||||
|
- Enforces consistent pacing (no getting lost in a paragraph)
|
||||||
|
- Allows comfortable reading at speeds well above normal saccading limits
|
||||||
|
|
||||||
|
Brain comprehension is the real ceiling, not eye movement. RSVP lets you read closer to that ceiling.
|
||||||
|
|
||||||
|
## Caveats
|
||||||
|
|
||||||
|
For academic citation work, use Sentence or Word mode in combination with the source PDF — RSVP is excellent for prose but cannot render tables, figures, or equations. The published recommended workflow:
|
||||||
|
|
||||||
|
1. First pass via Sprint / RSVP at high WPM to get the paper's shape
|
||||||
|
2. Second pass in the source PDF for the Methods, Results, tables and figures
|
||||||
|
3. Capture exact quotes with page numbers from the PDF, not the RSVP stream
|
||||||
|
|
||||||
|
The abstract is an advert — don't cite it. Read the Introduction, Methods, Results, and Discussion. The meat is in the middle.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
GPL v2 or later. See [LICENSE](./LICENSE).
|
||||||
|
|
||||||
|
## Acknowledgements
|
||||||
|
|
||||||
|
Built as a study tool during an MSc thesis on accessibility-focused authentication research. Released as free software because reading subscriptions are a tax on poor researchers and accessibility tools should not be paywalled.
|
||||||
@@ -0,0 +1,619 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>◈ Ranger Reader — RSVP for thesis papers</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0e1a23;
|
||||||
|
--fg: #d6e1ea;
|
||||||
|
--accent: #2271b1;
|
||||||
|
--accent-hover: #135e96;
|
||||||
|
--orp: #ff5252;
|
||||||
|
--muted: #6b7c8a;
|
||||||
|
--panel: #1a2a36;
|
||||||
|
--border: #2a3a48;
|
||||||
|
--done: #00a32a;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
padding: 14px 24px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.header h1 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.header .meta { color: var(--muted); flex: 1; }
|
||||||
|
.header .version { color: var(--muted); font-size: 11px; }
|
||||||
|
|
||||||
|
.mode-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.mode-toggle button {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
border: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
transition: background 0.15s, color 0.15s;
|
||||||
|
}
|
||||||
|
.mode-toggle button:last-child { border-right: none; }
|
||||||
|
.mode-toggle button:hover { color: var(--fg); }
|
||||||
|
.mode-toggle button.active {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 60px 40px;
|
||||||
|
min-height: 320px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.stage::before, .stage::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.stage.mode-word::before { top: 35%; opacity: 1; }
|
||||||
|
.stage.mode-word::after { bottom: 35%; opacity: 1; }
|
||||||
|
|
||||||
|
.word-display {
|
||||||
|
font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
white-space: pre;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
min-height: 70px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.stage.mode-sentence .word-display {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: normal;
|
||||||
|
white-space: normal;
|
||||||
|
line-height: 1.55;
|
||||||
|
max-width: 760px;
|
||||||
|
min-height: 110px;
|
||||||
|
}
|
||||||
|
.stage.mode-paragraph .word-display {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.65;
|
||||||
|
max-width: 880px;
|
||||||
|
min-height: 200px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orp { color: var(--orp); }
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
padding: 14px 24px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
background: var(--panel);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button.ctrl {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
button.ctrl:hover { background: var(--accent-hover); }
|
||||||
|
button.ctrl.secondary {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
button.ctrl.secondary:hover {
|
||||||
|
background: rgba(34, 113, 177, 0.12);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
.slider-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.slider-group strong { color: var(--fg); min-width: 36px; text-align: right; }
|
||||||
|
input[type=range] {
|
||||||
|
width: 140px;
|
||||||
|
accent-color: var(--accent);
|
||||||
|
}
|
||||||
|
.input-area {
|
||||||
|
padding: 14px 24px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--border);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--accent);
|
||||||
|
width: 0;
|
||||||
|
transition: width 0.2s;
|
||||||
|
}
|
||||||
|
.hint {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: 8px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.kbd {
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
font-family: ui-monospace, monospace;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
.done-state .word-display { color: var(--done); }
|
||||||
|
.dropzone-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(34, 113, 177, 0.20);
|
||||||
|
border: 3px dashed var(--accent);
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--fg);
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.dropzone-overlay.active { display: flex; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<h1>◈ Ranger Reader</h1>
|
||||||
|
|
||||||
|
<div class="mode-toggle" id="mode-toggle">
|
||||||
|
<button data-mode="word" class="active" title="Word-by-word RSVP (classic)">Word</button>
|
||||||
|
<button data-mode="sentence" title="One sentence at a time">Sentence</button>
|
||||||
|
<button data-mode="paragraph" title="One paragraph at a time">Paragraph</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="meta" id="meta">Paste text below, drag a .txt file in, then press Play</span>
|
||||||
|
<span class="version">v1.1</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stage mode-word" id="stage">
|
||||||
|
<div class="word-display" id="word">ready</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button class="ctrl" id="btn-play">▶ Play</button>
|
||||||
|
<button class="ctrl secondary" id="btn-back">◀ Back</button>
|
||||||
|
<button class="ctrl secondary" id="btn-forward">Forward ▶</button>
|
||||||
|
<button class="ctrl secondary" id="btn-reset">⟲ Reset</button>
|
||||||
|
|
||||||
|
<div class="slider-group">
|
||||||
|
<span>WPM</span>
|
||||||
|
<input type="range" id="wpm" min="200" max="1500" value="500" step="50">
|
||||||
|
<strong id="wpm-val">500</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress"><div class="progress-bar" id="progress"></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
<textarea id="text" placeholder="Paste the contents of one of your .txt files here, or drag a .txt file anywhere on the page..."></textarea>
|
||||||
|
<p class="hint">
|
||||||
|
<strong style="color:var(--fg)">Modes</strong> —
|
||||||
|
<span class="kbd">1</span> Word (RSVP, fast),
|
||||||
|
<span class="kbd">2</span> Sentence (chunked, easier comprehension),
|
||||||
|
<span class="kbd">3</span> Paragraph (skim mode).
|
||||||
|
·
|
||||||
|
<span class="kbd">Space</span> play/pause ·
|
||||||
|
<span class="kbd">←</span> <span class="kbd">→</span> skip ·
|
||||||
|
<span class="kbd">+</span> <span class="kbd">−</span> WPM ·
|
||||||
|
<span class="kbd">R</span> reset.
|
||||||
|
Text + WPM + mode + position auto-saved. Drag any <code>.txt</code> file onto the page.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dropzone-overlay" id="dropzone">Drop .txt file here</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(() => {
|
||||||
|
const $ = id => document.getElementById(id);
|
||||||
|
const display = $('word');
|
||||||
|
const meta = $('meta');
|
||||||
|
const wpmSlider = $('wpm');
|
||||||
|
const wpmVal = $('wpm-val');
|
||||||
|
const progress = $('progress');
|
||||||
|
const textarea = $('text');
|
||||||
|
const stage = $('stage');
|
||||||
|
const dropzone = $('dropzone');
|
||||||
|
const btnPlay = $('btn-play');
|
||||||
|
const btnBack = $('btn-back');
|
||||||
|
const btnFwd = $('btn-forward');
|
||||||
|
const btnReset = $('btn-reset');
|
||||||
|
const modeToggle = $('mode-toggle');
|
||||||
|
|
||||||
|
let mode = 'word'; // 'word' | 'sentence' | 'paragraph'
|
||||||
|
let chunks = []; // array of strings — one word, one sentence, or one paragraph each
|
||||||
|
let pos = 0;
|
||||||
|
let timer = null;
|
||||||
|
let playing = false;
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'ranger-reader-v1';
|
||||||
|
|
||||||
|
// ─── Persistence ───────────────────────────────────────────────
|
||||||
|
function load() {
|
||||||
|
try {
|
||||||
|
const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
|
||||||
|
if (s.text) textarea.value = s.text;
|
||||||
|
if (s.wpm) { wpmSlider.value = s.wpm; wpmVal.textContent = s.wpm; }
|
||||||
|
if (s.mode && ['word','sentence','paragraph'].includes(s.mode)) mode = s.mode;
|
||||||
|
if (typeof s.pos === 'number') pos = s.pos;
|
||||||
|
applyMode();
|
||||||
|
updateChunks();
|
||||||
|
if (pos > 0 && pos < chunks.length) renderChunk(chunks[pos]);
|
||||||
|
} catch (e) { /* ignore */ }
|
||||||
|
}
|
||||||
|
function save() {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||||||
|
text: textarea.value,
|
||||||
|
wpm: wpmSlider.value,
|
||||||
|
mode: mode,
|
||||||
|
pos: pos
|
||||||
|
}));
|
||||||
|
} catch (e) { /* ignore quota errors */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Text → chunks (mode-dependent) ────────────────────────────
|
||||||
|
function splitWords(text) {
|
||||||
|
return text.split(/\s+/).filter(w => w.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function splitSentences(text) {
|
||||||
|
// Guard common abbreviations + decimal numbers before splitting on .!?
|
||||||
|
let t = text
|
||||||
|
.replace(/\b(Mr|Mrs|Ms|Dr|Prof|Sr|Jr|St|vs|cf|etc|Vol|No|Fig|Eq|Ref|e\.g|i\.e|et al)\./g, '$1<P>')
|
||||||
|
.replace(/(\d)\.(\d)/g, '$1<P>$2');
|
||||||
|
// Split where punctuation is followed by whitespace + capital letter or whitespace + end-of-string
|
||||||
|
const parts = t.split(/(?<=[.!?])\s+(?=[A-Z“"\(])/);
|
||||||
|
return parts
|
||||||
|
.map(s => s.replace(/<P>/g, '.').trim())
|
||||||
|
.filter(s => s.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function splitParagraphs(text) {
|
||||||
|
// Paragraphs separated by blank line OR repeated newlines
|
||||||
|
return text.split(/\n\s*\n/)
|
||||||
|
.map(p => p.replace(/\s+/g, ' ').trim())
|
||||||
|
.filter(p => p.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateChunks() {
|
||||||
|
const text = textarea.value;
|
||||||
|
if (mode === 'word') chunks = splitWords(text);
|
||||||
|
else if (mode === 'sentence') chunks = splitSentences(text);
|
||||||
|
else chunks = splitParagraphs(text);
|
||||||
|
if (pos >= chunks.length) pos = Math.max(0, chunks.length - 1);
|
||||||
|
updateMeta();
|
||||||
|
updateProgress();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Meta + progress ───────────────────────────────────────────
|
||||||
|
function chunkUnitLabel() {
|
||||||
|
return mode === 'word' ? 'words' : mode === 'sentence' ? 'sentences' : 'paragraphs';
|
||||||
|
}
|
||||||
|
|
||||||
|
function totalWordsFromCurrent() {
|
||||||
|
// Approximate words remaining for accurate time estimate, in any mode
|
||||||
|
let n = 0;
|
||||||
|
for (let i = pos; i < chunks.length; i++) n += splitWords(chunks[i]).length;
|
||||||
|
return n;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMeta() {
|
||||||
|
if (!chunks.length) {
|
||||||
|
meta.textContent = 'Paste text below, drag a .txt file in, then press Play';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const total = chunks.length;
|
||||||
|
const wpm = parseInt(wpmSlider.value);
|
||||||
|
const wordsRemaining = totalWordsFromCurrent();
|
||||||
|
const minsRemaining = Math.ceil(wordsRemaining / wpm);
|
||||||
|
const unit = chunkUnitLabel();
|
||||||
|
meta.textContent = `${pos + 1} / ${total} ${unit} · ~${minsRemaining} min remaining at ${wpm} WPM`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateProgress() {
|
||||||
|
progress.style.width = chunks.length ? `${(pos / chunks.length) * 100}%` : '0%';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Rendering ─────────────────────────────────────────────────
|
||||||
|
// ORP: Optimal Recognition Point. Pinning the focal char keeps eyes still.
|
||||||
|
function orpIndex(word) {
|
||||||
|
const n = word.length;
|
||||||
|
if (n <= 1) return 0;
|
||||||
|
if (n <= 4) return 1;
|
||||||
|
if (n <= 9) return 2;
|
||||||
|
if (n <= 13) return 3;
|
||||||
|
return 4;
|
||||||
|
}
|
||||||
|
function esc(s) {
|
||||||
|
return (s || '').replace(/[<>&]/g, c => ({'<':'<','>':'>','&':'&'}[c]));
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderChunk(chunk) {
|
||||||
|
if (!chunk) { display.innerHTML = ''; return; }
|
||||||
|
if (mode === 'word') {
|
||||||
|
// Single word with ORP coloring
|
||||||
|
const i = Math.min(orpIndex(chunk), chunk.length - 1);
|
||||||
|
const before = chunk.slice(0, i);
|
||||||
|
const orp = chunk[i] || '';
|
||||||
|
const after = chunk.slice(i + 1);
|
||||||
|
display.innerHTML = `${esc(before)}<span class="orp">${esc(orp)}</span>${esc(after)}`;
|
||||||
|
} else {
|
||||||
|
// Sentence or paragraph — render as plain text (no ORP)
|
||||||
|
display.textContent = chunk;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Timing (mode-aware) ───────────────────────────────────────
|
||||||
|
// Pause longer at punctuation — gives the brain a beat to settle (word mode only)
|
||||||
|
function pauseMult(word) {
|
||||||
|
if (!word) return 1;
|
||||||
|
const last = word[word.length - 1];
|
||||||
|
if ('.!?'.includes(last)) return 2.5;
|
||||||
|
if (',;:'.includes(last)) return 1.7;
|
||||||
|
if (')]"”'.includes(last)) return 1.3;
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function chunkInterval(chunk) {
|
||||||
|
const wpm = parseInt(wpmSlider.value);
|
||||||
|
if (mode === 'word') {
|
||||||
|
const base = 60000 / wpm;
|
||||||
|
return base * pauseMult(chunk);
|
||||||
|
}
|
||||||
|
// Sentence / paragraph: time = words / WPM, with a comprehension multiplier
|
||||||
|
const wordCount = splitWords(chunk).length;
|
||||||
|
const baseMs = (wordCount / wpm) * 60000;
|
||||||
|
const multiplier = mode === 'sentence' ? 1.25 : 1.40; // brain needs more time on chunks
|
||||||
|
// Sensible bounds: 1.5s min, 12s max
|
||||||
|
return Math.max(1500, Math.min(12000, baseMs * multiplier));
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
if (pos >= chunks.length) {
|
||||||
|
stop();
|
||||||
|
display.textContent = '— done —';
|
||||||
|
stage.classList.add('done-state');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const chunk = chunks[pos];
|
||||||
|
renderChunk(chunk);
|
||||||
|
updateMeta();
|
||||||
|
updateProgress();
|
||||||
|
save();
|
||||||
|
pos++;
|
||||||
|
timer = setTimeout(tick, chunkInterval(chunk));
|
||||||
|
}
|
||||||
|
|
||||||
|
function play() {
|
||||||
|
stage.classList.remove('done-state');
|
||||||
|
updateChunks();
|
||||||
|
if (!chunks.length) return;
|
||||||
|
if (pos >= chunks.length) pos = 0;
|
||||||
|
playing = true;
|
||||||
|
btnPlay.textContent = '⏸ Pause';
|
||||||
|
tick();
|
||||||
|
}
|
||||||
|
function stop() {
|
||||||
|
playing = false;
|
||||||
|
if (timer) { clearTimeout(timer); timer = null; }
|
||||||
|
btnPlay.textContent = '▶ Play';
|
||||||
|
}
|
||||||
|
function toggle() { playing ? stop() : play(); }
|
||||||
|
|
||||||
|
function skip(n) {
|
||||||
|
stop();
|
||||||
|
updateChunks();
|
||||||
|
pos = Math.max(0, Math.min(chunks.length - 1, pos + n));
|
||||||
|
if (chunks[pos]) renderChunk(chunks[pos]);
|
||||||
|
updateMeta();
|
||||||
|
updateProgress();
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
// Skip distance: 1 in chunk modes, 10 in word mode
|
||||||
|
function skipDelta() { return mode === 'word' ? 10 : 1; }
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
stop();
|
||||||
|
stage.classList.remove('done-state');
|
||||||
|
pos = 0;
|
||||||
|
updateChunks();
|
||||||
|
if (chunks[0]) renderChunk(chunks[0]);
|
||||||
|
else display.textContent = 'ready';
|
||||||
|
updateMeta();
|
||||||
|
updateProgress();
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Mode switching ────────────────────────────────────────────
|
||||||
|
function applyMode() {
|
||||||
|
stage.className = `stage mode-${mode}`;
|
||||||
|
[...modeToggle.querySelectorAll('button')].forEach(b => {
|
||||||
|
b.classList.toggle('active', b.dataset.mode === mode);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function setMode(newMode) {
|
||||||
|
if (newMode === mode) return;
|
||||||
|
stop();
|
||||||
|
mode = newMode;
|
||||||
|
pos = 0;
|
||||||
|
applyMode();
|
||||||
|
updateChunks();
|
||||||
|
if (chunks[0]) renderChunk(chunks[0]);
|
||||||
|
else display.textContent = 'ready';
|
||||||
|
updateMeta();
|
||||||
|
updateProgress();
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Wire up controls ─────────────────────────────────────────
|
||||||
|
modeToggle.addEventListener('click', e => {
|
||||||
|
const btn = e.target.closest('button[data-mode]');
|
||||||
|
if (btn) setMode(btn.dataset.mode);
|
||||||
|
});
|
||||||
|
btnPlay.addEventListener('click', toggle);
|
||||||
|
btnBack.addEventListener('click', () => skip(-skipDelta()));
|
||||||
|
btnFwd.addEventListener('click', () => skip(skipDelta()));
|
||||||
|
btnReset.addEventListener('click', reset);
|
||||||
|
|
||||||
|
wpmSlider.addEventListener('input', () => {
|
||||||
|
wpmVal.textContent = wpmSlider.value;
|
||||||
|
updateMeta();
|
||||||
|
save();
|
||||||
|
});
|
||||||
|
|
||||||
|
textarea.addEventListener('input', () => {
|
||||||
|
pos = 0;
|
||||||
|
stage.classList.remove('done-state');
|
||||||
|
updateChunks();
|
||||||
|
save();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard shortcuts (ignore when focused in textarea)
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.target === textarea) return;
|
||||||
|
const k = e.key;
|
||||||
|
if (k === ' ') { e.preventDefault(); toggle(); }
|
||||||
|
else if (k === 'ArrowLeft') { e.preventDefault(); skip(-skipDelta()); }
|
||||||
|
else if (k === 'ArrowRight') { e.preventDefault(); skip(skipDelta()); }
|
||||||
|
else if (k === '1') { setMode('word'); }
|
||||||
|
else if (k === '2') { setMode('sentence'); }
|
||||||
|
else if (k === '3') { setMode('paragraph'); }
|
||||||
|
else if (k === '+' || k === '=') {
|
||||||
|
wpmSlider.value = Math.min(1500, parseInt(wpmSlider.value) + 50);
|
||||||
|
wpmVal.textContent = wpmSlider.value;
|
||||||
|
updateMeta();
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
else if (k === '-' || k === '_') {
|
||||||
|
wpmSlider.value = Math.max(200, parseInt(wpmSlider.value) - 50);
|
||||||
|
wpmVal.textContent = wpmSlider.value;
|
||||||
|
updateMeta();
|
||||||
|
save();
|
||||||
|
}
|
||||||
|
else if (k === 'r' || k === 'R') { reset(); }
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Drag-and-drop .txt files ─────────────────────────────────
|
||||||
|
let dragCounter = 0;
|
||||||
|
document.addEventListener('dragenter', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
dragCounter++;
|
||||||
|
dropzone.classList.add('active');
|
||||||
|
});
|
||||||
|
document.addEventListener('dragleave', e => {
|
||||||
|
dragCounter--;
|
||||||
|
if (dragCounter <= 0) dropzone.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.addEventListener('dragover', e => e.preventDefault());
|
||||||
|
document.addEventListener('drop', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
dragCounter = 0;
|
||||||
|
dropzone.classList.remove('active');
|
||||||
|
const file = e.dataTransfer.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = ev => {
|
||||||
|
textarea.value = ev.target.result;
|
||||||
|
pos = 0;
|
||||||
|
stage.classList.remove('done-state');
|
||||||
|
updateChunks();
|
||||||
|
save();
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Boot ─────────────────────────────────────────────────────
|
||||||
|
load();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user