<commit_before>import React, { Component } from 'react';
import ReactGA from 'react-ga';

import './Help.css';
import './MoveInfo.css';

import ryuExample from './img/ryu_example.png';
import moveViewerExample from './img/MoveViewerInstructional.png';

import * as MoveInfo from './MoveInfo.js';
const hurtboxColor = '#FFE119';
const superArmorColor = '#730A43';
const invincibleColor = '#FFFFFF';


ReactGA.initialize('UA-107697636-1');

class Help extends Component {
  render() {
    // TODO: fixme, dodgy analytics. Should fire on router events instead of render
    ReactGA.pageview('/help');

    return (
      <div className="prose">
        <hr />
        <h2>How to use this site</h2>
        Here is an example screen from the app. Each part of the
        user interface is highlighted with an explanation on what it does below.
        <br /><br />
        <a href={moveViewerExample}><img src={moveViewerExample} className="Move-viewer-example" alt="move viewer layout example" /></a>
        <br /><br />
        <h3 className="Section-1">1. Selecting a move</h3>
        Use the controls at the top of the page to select a character and a move
        to view. If you uncheck the "Relevant moves only" box then you will be
        able to see every animation the character has, rather than just the most
        viewed ones.
        <br /><br />
        Moves are sorted by category, with attacks at the very top.
        Some moves have different parts which are separate animations, but
        in-game they may be one single move. Unfortunately there is no easy way
        to link all the animations together so you have to view them in
        individual parts.
        <br /><br />
        <h3 className="Section-2">2. Playing the move</h3>
        Use the controls just under the viewport to interact with the move.
        The play button will play the move at the selected speed.
        1x play speed is equal to in-game speed, or 60 frames per second.
        <br /><br />
        The buttons
        immediately to the left and right of play will skip one frame backward
        or forward in the move. The buttons on the ends skip straight to the
        start and end of the move respectively.
        <br /><br />
        Checking the "Loop" checkbox will loop the animation over and over while
        playing. You can also directly enter a frame into the frame box to skip
        to it.
        <br /><br />
        There are hotkeys to make interacting with the movie easier:
        <ul>
          <li>Spacebar: Play/Pause</li>
          <li>Right arrow: Next frame</li>
          <li>Left arrow: Previous frame</li>
        </ul>
        <br />
        <h3 className="Section-3">3. General move information</h3>
        This section contains information about the move in general. Everything
        here is a summary of the entire move. Things that might be here include
        notes about the move, it's First Actionable Frame, and summaries of when
        hurtboxes and hitboxes are present. Mouse over any of the fields to get
        a detailed description about what they mean.
        <br /><br />
        <h3 className="Section-4">4. Hitbox information</h3>
        Always present when there is a hitbox or other special bubble in the
        viewport, this section describes what each bubble represents. It will
        only appear when the move is paused.
        <br /><br />
        <span className="Bold-label">This table contains a lot of information
        </span>. To help you make the most of it, every column header can
        be moused over for detailed information on what the column means and
        how to interpret it. The values in some columns can also be moused
        over, such as the "Type", "Effect" and "Dir" columns. Column header
        tooltips will tell you when their values can be moused over for more
        information.
        <br /><br />
        <span style={{"fontStyle": "italic"}}>Notes for mobile:</span> To mouse
        over something on mobile just tap on it. Also, on mobile you may need
        to scroll to the right to see the full table.
        <br /><br />
        The information with this table will change depending on which frame of
        the move you are viewing. It will always have up-to-date information on
        the current frame of the move. Match the colour in the table row with
        the colour of a bubble in the viewport to find out which hitbox has
        which properties.
        <br /><br />
        <h2>The viewport</h2>
        The most important part of the entire site, the viewport allows
        you to view every frame of animation just as it would appear in-game.
        It also has various useful data overlaid on the animation; mainly
        hitboxes and hurtboxes.
        <br /><br />
        <h3>Frames</h3>
        Smash 4 runs at 60 Frames Per Second (FPS). That means that the smallest
        unit of time according to in-game processing is 1/60th of a second. This
        is known as a "frame". Everything in this app revolves around frames.
        The power of this entire site is in being able to inspect when and how
        the moves in this game interact with each other. All of the following
        parts of the viewport change depending on the current frame of the move
        being displayed.
        <br /><br />
        <h3>Hitboxes</h3>
        If a hitbox bubble intersects with a hurtbox bubble on the same in-game
        frame, then the character who owns the hurtbox will take damage and
        knockback according to the parameters of the intersecting hitbox.
        <br /><br />
        There are two general types of hitbox: <span className="Bold-label">regular</span> and <span className="Bold-label">extended</span>. Regular
        hitboxes are always round. Extended hitboxes make a cylinder between two<commit_msg>Clarifies 'invisible' bubbles<commit_after>import React, { Component } from 'react';
import ReactGA from 'react-ga';

import './Help.css';
import './MoveInfo.css';

import ryuExample from './img/ryu_example.png';
import moveViewerExample from './img/MoveViewerInstructional.png';

import * as MoveInfo from './MoveInfo.js';
const hurtboxColor = '#FFE119';
const superArmorColor = '#730A43';
const invincibleColor = '#FFFFFF';


ReactGA.initialize('UA-107697636-1');

class Help extends Component {
  render() {
    // TODO: fixme, dodgy analytics. Should fire on router events instead of render
    ReactGA.pageview('/help');

    return (
      <div className="prose">
        <hr />
        <h2>How to use this site</h2>
        Here is an example screen from the app. Each part of the
        user interface is highlighted with an explanation on what it does below.
        <br /><br />
        <a href={moveViewerExample}><img src={moveViewerExample} className="Move-viewer-example" alt="move viewer layout example" /></a>
        <br /><br />
        <h3 className="Section-1">1. Selecting a move</h3>
        Use the controls at the top of the page to select a character and a move
        to view. If you uncheck the "Relevant moves only" box then you will be
        able to see every animation the character has, rather than just the most
        viewed ones.
        <br /><br />
        Moves are sorted by category, with attacks at the very top.
        Some moves have different parts which are separate animations, but
        in-game they may be one single move. Unfortunately there is no easy way
        to link all the animations together so you have to view them in
        individual parts.
        <br /><br />
        <h3 className="Section-2">2. Playing the move</h3>
        Use the controls just under the viewport to interact with the move.
        The play button will play the move at the selected speed.
        1x play speed is equal to in-game speed, or 60 frames per second.
        <br /><br />
        The buttons
        immediately to the left and right of play will skip one frame backward
        or forward in the move. The buttons on the ends skip straight to the
        start and end of the move respectively.
        <br /><br />
        Checking the "Loop" checkbox will loop the animation over and over while
        playing. You can also directly enter a frame into the frame box to skip
        to it.
        <br /><br />
        There are hotkeys to make interacting with the movie easier:
        <ul>
          <li>Spacebar: Play/Pause</li>
          <li>Right arrow: Next frame</li>
          <li>Left arrow: Previous frame</li>
        </ul>
        <br />
        <h3 className="Section-3">3. General move information</h3>
        This section contains information about the move in general. Everything
        here is a summary of the entire move. Things that might be here include
        notes about the move, it's First Actionable Frame, and summaries of when
        hurtboxes and hitboxes are present. Mouse over any of the fields to get
        a detailed description about what they mean.
        <br /><br />
        <h3 className="Section-4">4. Hitbox information</h3>
        Always present when there is a hitbox or other special bubble in the
        viewport, this section describes what each bubble represents. It will
        only appear when the move is paused. Match the colour in the table row with
        the colour of a bubble in the viewport to find out which hitbox has
        which properties. If the colour is not present it is likely hidden
        behind an adjacent table row's bubble completely, so assume that they
        are the same size.
        <br /><br />
        <span className="Bold-label">This table contains a lot of information
        </span>. To help you make the most of it, every column header can
        be moused over for detailed information on what the column means and
        how to interpret it. The values in some columns can also be moused
        over, such as the "Type", "Effect" and "Dir" columns. Column header
        tooltips will tell you when their values can be moused over for more
        information.
        <br /><br />
        <span style={{"fontStyle": "italic"}}>Notes for mobile:</span> To mouse
        over something on mobile just tap on it. Also, on mobile you may need
        to scroll to the right to see the full table.
        <br /><br />
        The information with this table will change depending on which frame of
        the move you are viewing. It will always have up-to-date information on
        the current frame of the move.
        <br /><br />
        <h2>The viewport</h2>
        The most important part of the entire site, the viewport allows
        you to view every frame of animation just as it would appear in-game.
        It also has various useful data overlaid on the animation; mainly
        hitboxes and hurtboxes.
        <br /><br />
        <h3>Frames</h3>
        Smash 4 runs at 60 Frames Per Second (FPS). That means that the smallest
        unit of time according to in-game processing is 1/60th of a second. This
        is known as a "frame". Everything in this app revolves around frames.
        The power of this entire site is in being able to inspect when and how
        the moves in this game interact with each other. All of the following
        parts of the viewport change depending on the current frame of the move
        being displayed.
        <br /><br />
        <h3>Hitboxes</h3>
        If a hitbox bubble intersects with a hurtbox bubble on the same in-game
        frame, then the character who owns the hurtbox will take damage and
        knockback according to the parameters of the intersecting hitbox.
        <br /><br />
        There are two general types of hitbox: <span className="Bold-label">regular</span> and <span className="Bold-label">extended</span>. Regular
        hitboxes are always round. Extended hitboxes make a cylinder between two
{'fraction_non_alphanumeric': 0.0698627844712182, 'fraction_numerical': 0.00853413654618474, 'mean_word_length': 2.431811656617858, 'pattern_counts': {'":': 2, '<': 139, '<?xml version=': 0, '>': 139, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '713359', 'n_tokens_mistral': 3100, 'n_tokens_neox': 2999, 'n_words': 1598}