Code Monkey home page Code Monkey logo

livesplitone's Introduction

LiveSplit LiveSplit One

Build Status

LiveSplit One is a version of LiveSplit that uses the multiplatform livesplit-core library and web technologies like React to create a new LiveSplit experience that works on a lot of different platforms.

The web version of LiveSplit One is available here.

The latest desktop version of LiveSplit One, with support for global hotkeys, can be downloaded here.

Note

This is not yet optimized for desktop usage. It's mostly the same as the web version and there is no update mechanism.

Build Instructions

In order to build LiveSplit One, you need to install npm and the Rust compiler. Make sure to recursively clone the repository so that all git submodules are cloned as well:

git clone --recursive

Once you have cloned the repository and set up both npm and the Rust compiler, you need to install the WebAssembly target:

rustup target add wasm32-unknown-unknown

You also need to build wasm-bindgen:

cargo install wasm-bindgen-cli

You need to set up some npm modules before compiling the project:

npm install -f

You are now ready to build livesplit-core, which powers LiveSplit One:

npm run build:core

Now you can build and host LiveSplit One:

npm run start

A browser tab with LiveSplit One should now open. Alternatively, you can use npm run serve to just host it without opening a browser tab.

Browser Support

Browser Compatibility Known Issues
Chrome ≥91 GitHub issues by-label
Firefox ≥89 GitHub issues by-label
Edge ≥91 GitHub issues by-label
Safari ≥16.4
Opera ≥77 GitHub issues by-label
iOS ≥16.4 GitHub issues by-label
Android WebView ≥91 GitHub issues by-label
Chrome Android ≥91 GitHub issues by-label
Firefox Android ≥89 GitHub issues by-label
Internet Explorer Unsupported
Opera Mini Unsupported

livesplitone's People

Contributors

asauber avatar chrissantamaria avatar cryze avatar darkrta avatar dependabot-preview[bot] avatar dependabot[bot] avatar greenkeeper[bot] avatar hallcristobal avatar rektroth avatar wooferzfg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

livesplitone's Issues

Explore using WebAssembly

That will probably require us to load the wasm binary before including any React component that uses livesplit-core, in order to ensure that the wasm binary is loaded before it gets used. So some form of a loading screen is required for this.

Also we definitely want to keep the asm.js fallback for older browsers. So that should possibly reside in an external file (not in the bundle), to ensure we don't load livesplit-core twice in modern browsers (both asm.js and wasm).

Ask user if they want to save before closing

This should obviously only happen if the run is modified, like in the original LiveSplit. I'm not quite sure how well this works in livesplit-core. So it might need some patching.

Handle the Timer, Layout Editor and Run Editor being null

Whenever they get passed an empty Run / Layout, their creation method is returning null now. Before, livesplit-core just panicked, which was not ideal. With the Timer not being able to be created when having an empty Run, there might not ever be a code path that actually leads to the Run Editor being opened with an empty Run. Similarly with the Layout Editor.

Add an About dialog

A simple About dialog to show copyright, creators and a link to the GitHub repo, similar to LiveSplit's.

Improve Mobile Layout

As long as we don't have mobile apps, the web version is the way to go, so we should improve the Mobile Layout.

  • Layout Renderer
  • Run Editor
  • Layout Editor
  • Settings

Implement Layout Editor

Not sure if this would require changes to livesplit-core because it would essentially just be changing attributes on the html itself.

Implement Text Component

Customization will obviously not be possible initially, but being able to show it is enough until we have layouts with settings.

Submenus in Sidebar

The Sidebar is beginning to get really cluttered. I'd prefer to group together the actions available in the sidebar and have a submenu for each one of them that shows the actual actions, kind of like the right click menu in the original LiveSplit.

Handle keyCode Polyfill Bug

React seems to polyfill the keyboard events, which seems to merge the normal digits and the digits on the numpad. This obviously only applies to old browsers. The problem is that all the digits are recognized as normal digits now, but we require the actual numpad keys in the default configuration. In order to solve it, we polyfill all the normal digits to be recognized as numpad keys in livesplit-hotkey, which is fairly suboptimal, as this really only applies to React.

Instead, LiveSplit One itself should handle this situation and swap the default Hotkey configuration to the digits instead of the numpad. Alternatively we could figure out a way to prevent from polyfilling it like that. Thinking about it, we could load a different polyfill before React can bring in its own.

Save / Export does not save split times

Issue description

Steps to reproduce the issue

  1. Open https://livesplit.github.io/LiveSplitOne, I recommend doing this in a private browser window so your localStorage does not get overwritten
  2. Finish a run, even if it's only the default run with one split so you have split times
  3. Save or export the file file
  4. Refresh the tab
  5. Import your savefile

What's the expected result?

  • On refreshing the tab in (4.) I expect the split times to be included so I can compare my next run to them
  • Same goes for the exported xml in (5.)
  • When I download a sample xml from splits.io the split times are actually included in the xml file

What's the actual result?

  • On refreshing the tab in (4.) the restored xml in the localStorage does not include the split times generated in (2.)
  • Same goes for the exported xml in (5.)

Additional details / screenshot

This might be an issue with livesplit-core instead of LiveSplitOne

Live Validation is broken for the Segments

Submitting every valid intermediate state causes the fixing algorithms to run on those intermediate states, which often causes the Best Segment Times and the following segments to get fixed in an unintended way.

Integrate React Router

This will be important as we want to turn LiveSplit One into a larger scale web page, and not just the web equivalent of the original LiveSplit. I already began working on it a bit, and it doesn't seem too hard.

Fetch Game and Category List from speedrun.com

This used to be blocked by livesplit-core, but due to all the async changes happening in Rust, I'd like to implement the Web Communication with normal TypeScript first and later move that stuff over into Rust, once the Rust ecosystem is ready.

Introduce changing the layout height

So Can You Guys Make It So You Can Zoom Out And In? I Can Barley See Any of My Splits And I Would Love It If We Could Be Able To Zoom Out And In To See More Of Our Splits. Thanks!

Avoid updating parts of the layout that have not changed.

While trying to raise the FPS to 60, I noticed a huge spike in CPU usage, so I decided to investigate. Using the React Developer Tools, I was able to see that the entire layout was updating, and not just the parts that actually changed. The screenshot below shows all the updates happening on the layout every frame.

screenshot_2018-02-19_12-44-54

Due to the large amount of layout updates, React has a hard time keeping up on low end hardware. (caused by dev build.) If we can reduce the amount of updates React is having to process, we can reduce the amount of CPU usage. #

Make the layout serve as a split button on mobile.

At the moment, the split button is small requiring quite a bit of effort to press, especially on a phone. By making the layout act as a split button, the timer is so much more useful on moble. However, the layout should not start the timer in order to prevent accidentally starting the timer.

Try using the State objects instead of going through JSON

livesplit-core provides all the component states as objects that you can traverse. Exposing their states as JSON was quite a fun idea, as that can be directly converted into a JavaScript object. However serializing into JSON and back into a JavaScript object is potentially more expensive than using the state objects directly. So we should try using those and see if it's faster.

Can't get it to compile on Mac OS 10.12

I tried to get it to compile after installing all the components I could find like the nightly build of Rust/Cargo and the target "asmjs-unknown-emscripten" but I can't seem to get it to compile and always get given an extremely lengthy and cryptic error:
Debug.txt

Any assistance in solving this error would be appreciated or tips on compiling.

Submit Runs to speedrun.com

This used to be blocked by livesplit-core, but due to all the async changes happening in Rust, I'd like to implement the Web Communication with normal TypeScript first and later move that stuff over into Rust, once the Rust ecosystem is ready.

This issue specifically may however still be somewhat blocked by livesplit-core, as it probably requires changes in the Run Editor's state.

Prevent the page from closing during a run.

So here is the deal. I was 2 minutes ahead of my PB, until I hit the fucking back button on my phone by mistake. If there was a message that popped up asking me if I wanted to close the page, I would not have lost that run.

Edit: I apologize for the slightly hateful tone. This was written after I just lost the run.

Mobile App

Can We Please Have This As A Mobile App In The Appstore Please I Would Literally Pay $0-$10 Dollars For The App. So If You Good Can Please Make This A App Because I Tried Tops And It Was WAAAAAAAY Better Then My App I Have (Msplit) And I Would Be Very Grateful :D

Add a Share dialog

Exactly the same as LiveSplit, just a dialog to share and export as different formats.

The 5MB localStorage quota may cause issues with saving splits.

As a lot of you may already know, localStorage normally has a quota of 5MB, (can vary across browsers), and attempting to store more than that limit will result in an error. In Firefox and Opera, this limit can be raised as needed by the user, but other browsers have to deal with this limit. Currently LiveSplit One is saving and loading splits from localStorage, and split files like to grow when icons are added and attempts are recorded. This will cause issues when saving, meaning users will eventually have to start importing and exporting their splits in order to continue using them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.