Programming CC-Diff: Automatically generate QC and GP checks

[Zrp200]

https://zrp200.github.io/cc-diff/

I'm developing a web app that greatly eases writing C&C checks by doing all of the formatting for you. All you need is to give an "ideal" version of the analysis and it creates the check properly formatted. Colors are configurable, comments are addable, and it supports export to discord formatting as well.

I created this to make it possible to format checks while colorblind when I found that the existing tool was too imprecise.


The whole thing is coded with ReactJS.

Current Version: v0.1.4

Why use this?

• Avoids the need to have to manually format diffs
  • Eliminates the risk of entangling the original with your check
  • Guarantee consistent colors and formatting*
• Ability to store the "ideal" version of a check (the text in the New box) and keep a copy of the old version.
• If you store the new version of your check, and your check is implemented, you can compare it with the implemented check to generate a "changes" check.
• Determine what changed when someone implements your check for easier evaluation.

Format assumptions*

• Words are never split apart, making for an actually readable output.
• Sequences of REMOVE / ADD / REMOVE are modified to be REMOVE REMOVE ADD, and vice versa.
  • r1 add r2 → r1 r2 add
• Capitalization changes are rendered as only changing that character if that's the only change of note.
  • Defensive defensive → defensive
  • defensive Defensive → Defensive
• Spaces are generated between changes for the most part (subject to change/improvement)

How to generate a "changes" check

1. Generate your check.
2. Keep the "New" section of the check (let's call it "Ideal")
3. When your check is implemented, take the implementation ("Implement"), and put it into the "New" box.
4. Put Ideal into the Old box to generate a check that points out all deviations from your check.

Features
Both have:

• Saves inputs between sessions
• Outputs both a visual diff as well as a copyable BBCode version for pasting.
• Vaguely similar layout scheme

NEW:

• Automatically generates output as you type
• Allows comments delimited by {} in the New Box
  • Comments are automatically filtered out of the Old box for easier reuse of an "ideal" check with comments.
  • Comments can also be used to affect diff output, as they are considered dividers.
• Colors are configurable, saved between sessions, and are easily reset to good defaults.
• Hide the "old" box to focus on your changes.
• Ability to add italics and underline to checks to really make them pop
• Output in Markdown to post on Discord
• Generates (AC)/(RC), and (AP)/(RP), (ASC)/(RSC) in the bb code/markdown output for comma and period changes, respectively. This is toggleable behavior.
• Show paragraph markers in output, toggleable.
• Diff output is properly formatted
• Quickly paste an analysis in, fill both boxes, and hide the old version in the same action.

 

[Zrp200]

Changelog

v0.1.3
v0.1.0: https://www.smogon.com/forums/threa...nerate-qc-and-gp-checks.3743702/post-10131164
v0.0.2: fixed strikethrough output being white in some cases.
v0.0.1: comments are now ignored in the 'old' box.

Known Issues

• Layout is completely cringe
• Line break handling can be inconsistent, and may result in spaces before leading *
• space generation is a little bit sketchy. Sometimes it generates extract spaces, and sometimes it generates none at all.
• color reset is all or nothing
• (RC)/(RP) is crossed out in bbcode output, and the removed punctuation is currently omitted.

Future plans:

• Immediate
  • Omit comments included in the Old version — currently you need to remove all of them for the app to work, sorry!
  • Add ability to show a color guide in bbcode output
  • Descriptions and tips for use (for example how to make comments)
• Short
  • displayed version number
  • Add alternate format output support (discord)
  • Better layout. Includes better loading indicators
  • Show line breaks in output (not bb code) as ¶
• Medium
  • Make code open source
  • Speed up diff generation when the difference is minor changes.
  • Configurable RC / AC messages, and add support for such for colons/semicolons
  • Add bb code parsing support to better facilitate diffing and output formatting.
  • Link resources in the tool.
• Long
  • Add a reverse option to implement checks automatically (generate "ideal" from a diff")
  • Add the ability to have add/remove/comment placeholders in old to allow overlaying checks upon others.

Also please do let me know if there's any oversights I made with formatting. It's a critical concern of this tool.

 

[Tbolt]

Few things that I would appreciate for this tool:

• Enlargement of the font in each <textarea>; it feels like the size of the text boxes is much larger than what the design language of the rest of the page implies. I can comfortably read the text output but have to look more closely for all of the old, new, and BB Code text boxes.
• I mentioned this in the Smogon Discord server already, but deleted punctuation shouldn't be completely omitted in the diff. If I delete a comma, I should see it in red, not just the (RC) after it would be.
• Layout alterations
  • I would change the layout of the tool such that the "New" text box appears next to the "Output" text, since then I wouldn't have to scroll up and down to view the changes to the text.
• Feature request: a way to export diffs to a Discord format, which I have found common when asking questions in the GP Discord. A common format I have used is bold (**text**) for additions and strikethrough (~~text~~) for deletions.

 

[Zrp200]

Hey, thanks so much!

Few things that I would appreciate for this tool:

• Enlargement of the font in each <textarea>; it feels like the size of the text boxes is much larger than what the design language of the rest of the page implies. I can comfortably read the text output but have to look more closely for all of the old, new, and BB Code text boxes.

• Layout alterations
  • I would change the layout of the tool such that the "New" text box appears next to the "Output" text, since then I wouldn't have to scroll up and down to view the changes to the text.

Yeah I'm aware the layout REALLY sucks. The tool....works. That's the stage it's in now.
Actually in the current stage of the project, I was actually having issues with the positioning of output to begin with, but I'll look into this (and possibly auto-scroll) when I figure out how to do this.

• I mentioned this in the Smogon Discord server already, but deleted punctuation shouldn't be completely omitted in the diff. If I delete a comma, I should see it in red, not just the (RC) after it would be.

Hmm, really? I've been doing all my checks like the current format for a while now. I can make this happen, though. I'm also aware that the tags are being struckout in BB code, and I'll fix that as well.

• Feature request: a way to export diffs to a Discord format, which I have found common when asking questions in the GP Discord. A common format I have used is bold (**text**) for additions and strikethrough (~~text~~) for deletions.

I can do this. Might end up restructuring the output area a bit and replace the remove the bbcode output box with a button to copy to clipboard for each supported format.
Technically I can support arbitrary formats with ease, but I haven't found a good use case for that.

 

[Zrp200]

I just updated the tool. New changes:

• Markdown support
• You can copy the text of the bbcode/markdown box by clicking on it.
• Semicolons are now marked.
• The tool is probably a bit slower and the layout is somehow worse :S

Edit: strikethrough was broken, so I just fixed it again.

 

[Tbolt]

Bug report: using the "Copy to Clipboard" button will delete any newline characters before copying.

Edit to avoid double posting: the diff placed a comma next to a semicolon instead of the correct location after a different addition.

Old

Although uncommon, Magearna can also be used as a Trick Room setter on full-room teams as its defensive typing can allow it to set Trick Room multiple times since it doesn’t need to preserve bulk to sweep as its teammates typically serve that role.

New

Though uncommon, Magearna can also be used as a Trick Room setter on Trick Room teams, as its defensive typing can allow it to set Trick Room multiple times; on these teams, it doesn’t need to preserve bulk to sweep because its teammates typically serve that role.

Actual Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times, (AC); on these teams since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Expected Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times; on these teams, (AC) since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Essentially, the diff placed the comma before the "; on these teams" instead of after. I'm not sure if this is the fault of the diffing library you use or something else, but I figured that it should be noted here anyway.

 

[Zrp200]

Bug report: using the "Copy to Clipboard" button will delete any newline characters before copying.

Edit to avoid double posting: the diff placed a comma next to a semicolon instead of the correct location after a different addition.

Old

Although uncommon, Magearna can also be used as a Trick Room setter on full-room teams as its defensive typing can allow it to set Trick Room multiple times since it doesn’t need to preserve bulk to sweep as its teammates typically serve that role.

New

Though uncommon, Magearna can also be used as a Trick Room setter on Trick Room teams, as its defensive typing can allow it to set Trick Room multiple times; on these teams, it doesn’t need to preserve bulk to sweep because its teammates typically serve that role.

Actual Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times, (AC); on these teams since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Expected Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times; on these teams, (AC) since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Essentially, the diff placed the comma before the "; on these teams" instead of after. I'm not sure if this is the fault of the diffing library you use or something else, but I figured that it should be noted here anyway.

Fascinating. Will investigate. There's a post-processing step after the diff is generated to ensure that it adheres to expectations due to limitations of the library, and most of the issues tend to pop up there. Whitespace is annoying, and all symbol conversions are done at the last second.

 

[Zrp200]

Bug report: using the "Copy to Clipboard" button will delete any newline characters before copying.

Edit to avoid double posting: the diff placed a comma next to a semicolon instead of the correct location after a different addition.

Old

Although uncommon, Magearna can also be used as a Trick Room setter on full-room teams as its defensive typing can allow it to set Trick Room multiple times since it doesn’t need to preserve bulk to sweep as its teammates typically serve that role.

New

Though uncommon, Magearna can also be used as a Trick Room setter on Trick Room teams, as its defensive typing can allow it to set Trick Room multiple times; on these teams, it doesn’t need to preserve bulk to sweep because its teammates typically serve that role.

Actual Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times, (AC); on these teams since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Expected Diff

AlthoughThough uncommon, Magearna can also be used as a Trick Room setter on full-room Trick Room teams, (AC) as its defensive typing can allow it to set Trick Room multiple times; on these teams, (AC) since it doesn’t need to preserve bulk to sweep as because its teammates typically serve that role.

Essentially, the diff placed the comma before the "; on these teams" instead of after. I'm not sure if this is the fault of the diffing library you use or something else, but I figured that it should be noted here anyway.

fixed

 

[Zrp200]

I should release a new version of my tool relatively soon. Indev, I've made comment generation much more consistent (before it had a tendency to be slightly off or generate extra spaces), properly integrated the (AC) stuff so it consistently activates, and added toggleable paragraph markers.

It'll likely be slower again, but if there's continued interest I can run analytics on it.

I'm just working on the layout at the moment, and once I've got it to where I like it I'll release a new version.
I'm really not that experienced in layout making, so this might not be quite ideal, and I'll continue researching in the future.

OLD (1/4 total width)​	Visual Output (1/2 total width)​	NEW (1/4 total width)​
Options​ Hide Old box (makes above 0, 2/3, 1/3)​ Toggle Paragraph Symbols​ Other diff options​	Export​ Export type (BBCode/Markdown)​ Copy Button Preview of Export​	Colors​ picker for ARC Reset Color button​

I'm mainly responding to a noted desire to have the visual output adjacent to the new output, but also the current layout sucks and is absolute cringe....


Edit: this is what I have so far.

 

[Zrp200]

Just updated to v0.1.0

Practical use

• Eliminated lag almost entirely from diff algorithm
• Algorithm is much more sensitive to whitespace
• Fixed markdown output to actually.... work.
• Algorithm no longer considers spaces right before a newline, which should remove some fringe added space markers
• Added paragraph markers for the visual output. They don't appear when exporting, currently, however.
• Comments are handled way more accurately and shouldn't cause any issues anymore ;)
  • Whitespace between the comment and the last text change no longer matters at all. (bugged lol)
  • The whitespace after still matters, however.
• Symbols are handled a bit more consistently as well.

UI

• You can now hide the old box to use the diff window as reference instead; this gives more room to see things, as well.
• Reduced font size of output.
• UI below the text boxes is still WIP.
• Misused comments are now just accepted until I figure out a good way to show it.

Known Issues that will be fixed soon:

• space after ac, comments being omitted in output
• capitalization sometimes consuming a trailing comma (fixed by adding a space between them)
• replaced spaces being shown at all

v0.1.1 fixes the space issue for ac and also fixes weird capitalization logic. I also finally added tests for features to start to ensure that fixes don't accidentally get undone.
v0.1.2 fixes the the replaced spaces issue, and some cases where spaces are duplicated.

I'm still hunting for comment-related fixes. That's what I get for saying comments are "solved" lol

 

[Zrp200]

Aaaand I updated it again. Supposedly this is v0.1.3, but there's notable changes.

New options

• Show paragraph markers in output (super experimental and probably slightly broken)
• Use underline with adds and italics for removals in bbcode output. This really makes changes pop.
• Disable symbol "emphasis" markers like (RC)

Other changes

• The preview shown is now an exact preview of the output.
• Added tooltips for most options.
• You can now resize the boxes horizontally, and resizing the export textbox lets you move them up and down. Maybe at some point I'll merge the behavior.
• If you click on the output preview and paste text, it will automatically fill both boxes with that text (if they are empty) and hide the old box, saving you several clicks.
  • If there's stuff in there, it'll ask you instead.

Fixes

• I think I fixed comments again to increase their consistency. Or so the tests say....
• A lot more text ordering issues, especially regarding comments.

Edit (v0.1.4): More fixes. I fixed an issue that was causing duplication of symbols (periods, commas, dashes, parentheses, etc) when chained. Also, I actually disabled ignoring whitespace this time, so spaces won't match tabs or newlines anymore..... (this is why paragraph breaks would sometimes be "lost" or "found" unexpectedly when there's a different number of breaks between versions. Ending whitespace is still ignored.

 

[autumn]

Been using this tool to do a lot of checks today, and it's really been helpful. A clear, readable output makes a tool like this easy to use, and it doesn't require reformatting the posts.

Would support for hyphen changes be possible? Changes like these aren't really visible without adding a comment alongside them.

 

[Zrp200]

Been using this tool to do a lot of checks today, and it's really been helpful. A clear, readable output makes a tool like this easy to use, and it doesn't require reformatting the posts.

Would support for hyphen changes be possible? Changes like these aren't really visible without adding a comment alongside them.
View attachment 640121
View attachment 640123

It's on the list of things to implement. It probably won't be in the next update, though.

For adds,

well-rounded

seems plenty readable to me, though it's fair to say that doesn't help with extra formatting toggled off, while the next update will change the logic for replacing a symbol like that with a space as

Ice-typing Ice typing

I haven't decided if it should be allowed to be alone; the current implementation will group it with related changes.

 

[sunny004]

Your program is really helpful and intuitive—great stuff!

This is more of a quality of life change, but would it be possible to add a "Clear" button to wipe both the old and new text boxes simultaneously? It would be especially helpful when the original text is hidden (which is a great feature btw).

One other thing I noticed was that the underline/strikethrough formatting did not apply to punctuation. This is a relatively minor nitpick, but I think it would be especially useful if the formatting carried over if you implement the option to remove the (AC) and (RC) tags.

ExamplePics

Overall, I really enjoy this, especially the underline and strikethrough formatting for additions and removals, respectively. Keep it up!

 

[Zrp200]

Thanks for your feedback, and I'm delighted that the app was handy!

One other thing I noticed was that the underline/strikethrough formatting did not apply to punctuation. This is a relatively minor nitpick, but I think it would be especially useful if the formatting carried over if you implement the option to remove the (AC) and (RC) tags.

So, this is actually a purposeful change, since the (AC) symbols are more like flavored comments and formatting looks terrible on these single characters.

My current thinking is to actually reduce the amount of these to only be placed in isolated cases, and lump them into an existing removal or addition's formatting if possible.

I've been going back and forth on having this be tied to the presence of italics/underline in the output, but the current plan detailed here doesn't take this into account.

This is more of a quality of life change, but would it be possible to add a "Clear" button to wipe both the old and new text boxes simultaneously? It would be especially helpful when the original text is hidden (which is a great feature btw).

I can add this to the next version. The button would be next to the hide old button.

Technically, the paste feature already does this, if you select a whole box and paste a new analysis in, but I can see the value of a dedicated clear button (and a swap button, to be honest).

I'm still tinkering with the box UI, and I would like to revamp it and add more quality of life features. In fact, those very features were set to be added at that point. Once I learn a bit more, I'll be adding buttons and features to the box area itself, but until then I'm trying to keep it relatively bare. I'll go more into detail about it when I release the next version.