When cleaning the sum of best, the message tries to be as helpful as
possible by showing as much information about the problematic segments
as possible. Part of that is information about the date of the attempt.
However, as it turns out, the attempt may not actually exist. This
shouldn't generally happen, but we can't trust the correctness of the
splits files, so for whatever reason, the attempt may be missing. In
that case, we simply skip that information.
When the splits selection view is open, the sidebar and the view itself
don't refresh properly anymore when in mobile mode. This is because the
React compiler notices that with the way we wrote the code, these
components have no reason to re-render. There is currently no proper
`useMobile` hook. So while I implemented a quick workaround here, by
forcing it to not memoize the individual props properly, we should
refactor the sidebar code at some point to use a proper `useMobile`
hook.
The splits selection view did not correctly cause rerenders among other
smaller bugs in there. I'm not sure how these bugs got introduced, as I
barely made changes to the content of the functions, but these were
completely different. Maybe this was Copilot's fault.
Additionally, when using Tauri, there was a bug where we had two hotkey
implementations at the same time for the pop out windows. One was the
global hotkey implementation and one was the local one we add to the pop
out window. This caused the hotkey to be triggered twice.
Chrome supports the [Document Picture-in-Picture
API](https://developer.chrome.com/blog/the-future-of-picture-in-picture/),
which allows us to create a popup window that is always on top, has a
"return to tab" button, remembers its position and size, and has a more
compact title bar. Considering not every browser supports this API, we
automatically fall back to `window.open` if the API is not available.
This adds a new button to the sidebar that allows the user to pop out
the entire layout into a separate child window. This makes it take up
less of the screen and capture it more easily in OBS. I'm not sure if
the button should be in the sidebar or not, but it's good enough for an
initial implementation.
Changelog: You can now pop out the timer into a separate window.
This replaces almost all class based components with function based
components. The only exception is the top most component that handles
all the application state. That can be refactored in the future as well.
This converts the remainder of the CSS files to CSS modules. The
following are not converted:
1. `variables.scss`: I'm not entirely sure if variables can be converted
to CSS modules. The documentation states you might need PostCSS for
it. However, we probably may want to look into CSS variables anyway.
So this would be done in a subsequent PR.
2. `main.scss`: This declares global styles. I'm not sure if it's
possible to convert this as this is needed from the very beginning,
before any React is even loaded.
Do some Initial Refactoring of the Code
1. This splits up the UI code into a separate views and components folder to clarify the purpose of each file.
2. This refactors some code to use CSS modules, functional React components and splits up the Settings component into roughly one component per setting.
This is just the beginning of more code refactoring.
This adds the ability to specify an optional text shadow in the general
layout settings.
Changelog: Text shadows are now supported and enabled by default. You
can customize the color or disable text shadows entirely in the layout
settings.
As explained [here](https://twos.dev/splitsio.html), splits.io will shut
down at the end of the month. The website is already not working
properly anymore, so it's time to remove support for it.
Changelog: [Splits.io](https://splits.io) is shutting down at the end of
the month. Integration with it has been removed.
[Ben Carlsson's Goodbye to Splits.io](https://twos.dev/splitsio.html)
We have had a really outdated version of Font Awesome directly vendored
into our repository. Not only was it outdated, but it also is shipped as
a font file, including all the icons, even though we only use a small
subset of them. By switching to Lucide, we not only are depending on
something more up to date, but now the icons can also be tree shaked.
This also updates some of our CSS to use flex box and grid instead of
manually positioning with margins.
WebKit outside of Safari apparently ignores the background color of
`<select>` elements. By using `appearance: none`, we can override the
default style of the combo boxes and make them look consistent across
all browsers.
Co-authored-by: aaronghiurau <[email protected]>
This replaces the context menu with our own. By doing that we no longer
need to force install our npm packages, as there are no longer any
conflicts. In fact, as part of this change, I updated us to the latest
React 19 and even enabled the React compiler.
I also explored CSS modules for the first time, which are going to allow
us to reduce conflicts between CSS rules and possibly even allow us to
fully remove SASS, as the need for it is going to be reduced.
I also found out that the latest Rust nightly is broken due to their
update to LLVM 20. So I pinned the version to the last working nightly
version.
The `react-toggle` library is unmaintained and is preventing us from
properly updating React. I already wrote a Switch for the new Auto
Splitting IDE, so I converted it once again with Copilot.
Apparently React behaves differently from Dioxus in that it doesn't
allow changing inputs if they don't affect the value that they are bound
to. So I spent some time on implementing some proper validation logic
for the color inputs.
The `react-color-picker` library has been unmaintained for quite a
while and it (among other libraries) has been holding us back from
upgrading React properly. I have written a color picker for our Druid
based desktop version before and if we are going to use Dioxus for the
desktop version, I would want to port the Druid version over anyway. And
considering Dioxus is so close to React, I did just that. I ported it to
Dioxus and then let Copilot port it to React, which worked on the very
first try.
With Safari 18.2 having shipped, all browsers now support WebAssembly
Tail Calls. This allows the compiler to call a function at the end of
the current function by reusing the stack frame. This should be a tiny
bit faster and allow for recursion without stack overflows... except
that Rust doesn't have any way of guaranteeing this yet, so you can't
really rely on it.
The `commonmark-react-renderer` and `react-linkifier` libraries are no
longer maintained and have held us back from upgrading our dependencies
for quite some time. This replaces the markdown rendering with an
actually maintained library: `markdown-it`.
Apparently the entire configuration format changed. I didn't fully
replicate the old configuration in order to reduce the complexity of it
all, hopefully resulting in fewer maintenance headaches in the future.
Additionally, I removed some unused dependencies that were no longer
needed.
The tests do not work anymore. They have always been flaky and added a
lot of dependencies, that made it harder to maintain them. Additionally,
the rendering is now handled by `livesplit-core`, which has all the same
tests for the rendering, so it also makes little sense to have the same
rendering tests again in this repository. All other dependencies that
are currently updatable have been updated, except:
1. I'm not sure if you need Tauri 2 for the CLI version 2.
2. The `css-loader` causes problems with the way we import variables
from the SASS files.
3. React 19 does not seem to just work, we get a bunch of TypeScript
issues.
4. `commonmark` is stuck as usual until we replace it entirely.
5. `eslint` changed completely it seems, we probably need to set it up
completely from scratch.
At some point we had to switch away from `wasm-opt` automatically
detecting the WebAssembly features, because they deprecated and turned
that into a no-op. Since then we specified that it should just use all
the features. This used to work all the time, but with the introduction
of reference types it now started optimizing some of those instructions
into instructions that are only available with the `WasmGC` proposal.
This slipped through because Chrome and Firefox already support `WasmGC`
but Safari does not... yet, because they also will start to support it
very soon. In the meantime and also to ensure `wasm-opt` isn't ever
going to sneak in any unwanted features, we now explicitly specify all
the features that we want to use.
This allows us to skip letting `webpack` parse the wasm files, which
means we are not blocked by its limitations anymore. This allows us to
finally start using reference types.
Instead of manually specifying the variables via text boxes, you can now
choose them from combo boxes. This makes it easier to select the
variables you want to use for the layout.
Changelog: You can now choose variables to display on the layout from
combo boxes instead of manually specifying them via text boxes.
This allows the user to choose between specifying segment times and
split times when using the manual game timer.
Changelog: When using the **Manual Game Time Input**, you can now choose
between specifying **Segment Times** and **Split Times**.
With LLVM 19 they explicitly require using the `experimental-mv` ABI in
addition to the `multivalue` LLVM feature (the latter is enabled by
default now). Enabling the ABI is non-trivial and requires a full on
custom Rust target. This adds `wasm32-multivalue.json` which is
identical to `wasm32-unknown-unknown` except it sets the
`experimental-mv` ABI. The target JSON format is very experimental by
itself, so we may need to keep this up to date from time to time.
WebAssembly needs a specific mime type to be allowed to be loaded. Tauri
by default apparently can't send headers on Linux, unless you activate a
specific feature, so the WebAssembly failed to load. Additionally,
without the dialog feature, it also wasn't able to show the error
message.
This adds support for the `Always On Top` setting in the Tauri version
of LiveSplit One. This setting allows you to keep the LiveSplit One
window on top of all other windows.
This introduces a Tauri based desktop version of LiveSplit One. For now
very few changes have been done. It's mostly global hotkeys that work
now. It's unclear if Tauri is the long term solution for LiveSplit One,
but it gets us global hotkeys and auto splitting with very little
effort, so we'll use it until something better comes along.
This moves the server protocol to `livesplit-core` and improves on it in
various ways:
- The protocol is based on JSON messages. This allows for example for
more structured commands where it's easier to provide multiple
arguments for a command and even have optional arguments.
- For each command, there is a corresponding response. It is either a
`success` response with possibly the value that you requested, or an
`error` response with an error `code`.
- On top of the responses you also get sent `event` messages that
indicate changes to the timer. These can either be changes triggered
via a command that you sent or by changes that happened through other
sources, such as the user directly interacting with the timer or an
auto splitter.
The protocol is still work in progress and we will evolve it into a
protocol that fully allows synchronizing timers over the network.
The event sink has now been renamed to command sink, because there is
now a clear distinction between incoming commands and events that are
the results of these commands.
Changelog: The protocol used for the server connection has been
significantly improved. There is a response for each command and clear
errors when something goes wrong. Additionally, there are now event
messages that indicate changes to the timer.
We introduce a new `indexDelayed.ts` file that bundles all the imports
that are used in the `index.ts` file. They are not imported directly
there, because we want to keep the size of the `index.html` as small as
possible, so it can focus on requesting the WASM file as soon as
possible. This should result in the `indexDelayed.ts` bundle containing
basically all the JS. This JS bundle and the WASM file should then be
requested in parallel. While it would be possible to request these all
individually over in the `index.ts`, browsers don't actually like doing
too many requests in parallel and it turns out that big JavaScript files
actually compress better than having many small ones. The WASM file also
is pretty big, so ideally we are not bottlenecked by the large JS file.
If necessary, we could do some more bundle splitting for stuff that
isn't used until much later, like the Markdown library.
The dialogs are now asynchronous as opposed to the browser built-in ones
that are synchronous, probably because they are incredibly old. The
problem with the new dialogs being asynchronous is that for example the
hotkeys, the server protocol and honestly any sort of async download
that's still running in the background can all mess with the timer while
the dialog is open. This could lead to all sorts of weird issues, like
the timer being in a different state than what the dialog expects, the
timer being reset twice and creating two dialogs that are open at the
same time and possibly even memory corruption in the Rust code.
This commit ensures that the timer can not be interacted with while it
is "locked for interaction". In fact we already had such a notion where
when you navigate to the settings, layout or run editor, the hotkeys
would be disabled. Now this is concept is extended so the event sink
also can prevent interaction with the timer. Navigating to these menus
and opening dialogs will now trigger this locking mechanism.
Additionally this improves various async race conditions in the splits
editor related to downloading resources from speedrun.com or splits.io.
This also touches the CSS of the dialogs again, adding some spacing
around the dialog, so it doesn't touch the edges of the window and
allowing the buttons to have more dynamic sizing. In particular I've
noticed that the text sometimes doesn't fit into the buttons on iOS, so
they are now allowed to grow a little to handle that situation.
File open dialogs also now know the file extensions of the files we are
looking for.
This introduces custom dialogs to LiveSplit One. Previously we've used
the builtin browser dialogs that are very limited in what they can do.
Additionally this introduces a bunch of smaller changes:
- The splits editor is now more optimized and only searches for the game
name whenever it or the list of games changes.
- The PWA badge now resets when the app is reloaded.
- Guests on the leaderboard can now have flags.
- If a user encounters a bug, there's now dedicated toast popups that
don't disappear and direct the user to the issue tracker.
- The Sum of Best cleaner now ensures the run can't be modified while
the cleaning is in progress, which would lead to memory corruption,
especially with the async nature of the new dialogs.
- Cancelling out of opening files doesn't lead to an error anymore.
The following changes are introduced by updating `livesplit-core`:
- When resizing images / reencoding them as PNG, we now use a higher
compression setting.
- Invalid timer states are not unrepresentable anymore.
Every browser's `performance.now()` implementation is not spec
compliant, unless the browser is running on Windows. On every other
operating system, `performance.now()` does not properly keep ticking
while the operating system is suspended / sleeping. There isn't much
that we can do. What we can do is we calculate the initial difference
between `performance.now()` and `Date.now()` and store it in a thread
local. Later, when the phone gets locked, `performance.now()` starts to
break. However, we can detect when the phone gets unlocked again by
listening to the `visibilitychange` event. This is where we can update
the difference again. This of course isn't ideal, as `Date.now()` gets
adjusted by NTP synchronizations, but it's the best we can do.
More information:
https://developer.mozilla.org/en-US/docs/Web/API/Performance/now#ticking_during_sleephttps://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/
Instead of assuming each column has the width of the text `88:88:88`, we
now determine the largest string per column (based on unicode scalar
values) and adjust the column width accordingly. There is still a fixed
minimum width based on the string `88:88`, which ensures that the
columns don't switch sizes too often, especially if you start with empty
splits. We could've also chosen `8:88:88`, which would ensure there's no
column size change as you approach the hour mark. However, this would
increase the size of delta columns unnecessarily. So it's a little bit
of a trade-off.
This enables the multivalue feature when building with the nightly Rust
compiler. This is because the Rust standard library is not built with
the multivalue feature enabled by default. Also we need to specifically
use the spec compliant C ABI for it to work, which is also nightly only.
Christopher Serr