As with previous assignments, if you have a question you should ask the course staff for assistance and support. In this assignment (and this assignment only), we encourage you to perform web searches if you are stuck and need assistance. However, you must note the following:
The commands and installation procedures for Node and NPM (which are what we're using to manage our React development environment) are the same for both Windows and macOS/Linux users. First, navigate to the Node.js homepage and install the "LTS" version of Node.js. This will also install the correct version of NPM automatically. Windows users should make sure that the “Add to PATH” option is enabled during the installation process.
macOS users running modern versions of macOS may get a warning about the installer not coming from a “verified developer.” To resolve this, open System Preferences and navigate to Security & Privacy > General. There, you'll be able to click “Open” to run the Node/NPM installer.
Once you have Node.js and NPM installed, restart IntelliJ (if it's open). Next, you need to
install React and all of the other things that React needs to work correctly. We provided
which tells NPM how to install React and where to find all the things it needs. All you need to do is run the
installation. From the project root directory (which you can get to by opening the terminal window in IntelliJ),
run the following two commands:
cd hw-dots npm install
The first navigates you to the
hw-dots directory, which you'll need to run all your commands
inside. The second tells NPM to read the
package.json file and perform the installation for you.
It's not uncommon for this installation to take 15+ minutes, depending on the speed of your network connection
and your computer, so don't worry if it seems to be taking a while. You may get a few warnings and messages, but
nothing particularly tragic should be printed to the screen. You'll only need to do this installation once for
each place you have your repository cloned. To test your installation, run
npm start. This will run
your React application, which currently only has the starter code that we provided. When it's done starting up,
a browser window will automatically open the website.
If the browser didn't automatically open, or the wrong browser opened, you can manually navigate to
to view your site. Now that the React server is up and running, you can edit the code and the website will
auto-reload without you having to stop and re-start the React server. When you're done with development, you can
stop the running react server by clicking in the terminal window where it's running and pressing
Unfortunately, the CSE Linux machines (both the lab linux machines and the attu cluster) are running a version
of CentOS that doesn't support the correct version of Node/NPM for our purposes. For this reason, you should
work on your assignment on
either the Windows lab computers
(labs are closed), the CSE Windows Virtual Machine/Remote Desktop, or on your own personal machine. (Windows,
macOS, and Linux will all work fine as long as you are an administrator on the computer so you can install the
correct version of the software we're using.)
In addition to the steps above, we require that you use an up-to-date version of the Chrome web browser. Other browsers have varying compatibility and have the potential to complicate grading or cause your code to fail when being run in the grading environment.
We recommend using React Developer Tools, a Chrome Extension created by Facebook. Using this tool will help you debug your React code as you work on this assignment and the next assignment. It can help you view props and state of your components and trace how data is flowing between your components. It will also provide warnings in the console about common mistakes that it finds in your code.
The Connect the Dots Graphical User Interface(GUI) is written using HTML and TypeScript, principally with the React framework.
To learn about HTML, see the W3 Schools HTML tutorial.
We've created a React handout that explains some of the finer points of React and will guide you as you implement your applications in the next two assignments. It's especially important that you read the Advanced User Interface section before beginning this assignment - many of the concepts discussed there are used throughout this assignment.
We've published a live demo of a completed version of this assignment that's based on the staff solution. This is not intended to be a complete example of “the correct way to do things” — please always follow this spec above all else. In particular, you do not have to have your input validation work the same way as the example: you need to have input validation, but it doesn't have to match the example exactly, you're free to design it as you choose.
You will write a User Interface(UI) to let users run a version of a Connect the Dots drawing puzzle.
You will write the UI in
*.tsx files under
hw-dots/src. You may create additional
files as needed and may edit provided files. Each file may contain no more than a single React class/component.
Be sure to add any new files to your repository as you commit your changes. You may also add
files if you choose to write any other code (i.e. helper functions) that aren't a part of a specific component.
(You aren't required to have separate .ts files if you don't want to.)
The interface provided by the staff has the following elements:
Much of the functionality in this starter code is only half-written, often with hard-coded values instead of actual interactivity. The code is full of unused variables and half-implemented functions for you to complete. For example, the “edges” text box currently can't be edited at all. It's your job to read and modify the provided code to complete the functionality of the application.
The starter code is half-written. This means you will need to add or change props, state, and functions in the components. You are not required to keep our existing code - please change it if you can think of a better design.
GridSizePickeris able to be edited. The actual number that was entered into the text box is stored in the state of App, in
state.gridSize. A string version of it is passed down to be displayed by the
valueprop, and a callback function that updates the state is passed into the GridSizePicker through the
onChangeprop. Whenever the text field has a change, the
onInputChangemethod is called, which parses the text inside the text field into an integer, then calls the
onChangefunction it got as a prop from
Appto tell it about the new data. (This is similar to the standard “fully-controlled component” model described in the Advanced User Interface section of the React handout.) The current value of the grid size is also passed as a prop to
Grid, so it can be used when rendering the grid onto the canvas. It's your job to make use of that information so the
Gridcomponent automatically changes the way it's displayed based on the current grid size.
Gridto make sure the “Current Grid Size: X” text properly displays the current value of the
Gridso that it dynamically calculates the coordinates of all the points that need to be drawn by
redraw, and returns those points in the same format as
getCoordinatesalready does. If the current
gridSizeis 5, it should return an array of 25 2-element arrays, each with an x and y coordinate representing the location of one of the 25 points in a 5x5 grid. The exact spacing and arrangement of the grid is your choice, but it should be centered, and fill a reasonable amount of space on the image (i.e. not be tiny, but also fit completely within the canvas). Note that the
drawCirclefunction already takes care of making the circles smaller or bigger depending on how many there are, though you're welcome to modify this behavior if you have a better idea. :)
Gridcomponent should react (get it? React? :P) immediately to the changing text field, no button presses or other user action should be required. (Lifecycle methods might be helpful here.)
toStringon App's gridSize state.) For example, you could have a piece of state (a string) in GridSizePicker that keeps track of the current string in the text box, and then use the App state to track the current grid size, as it's already doing. That way, you could have App's current grid size be zero, for example, while the GridSizePicker's displayed string is the empty string.
Gridcomponent complete. This is a good point to commit and save your work before continuing.
GridSizePicker. Consider where the data is stored, and how it's passed between components as needed. Much of this machinery doesn't exist for the text area inside the
EdgeList, which is why that text area currently can't be edited. You can use your understanding of
GridSizePickerto aid in your development of similar code for
EdgeList's text area. Your program should have the following functionality with regards to edges:
Gridcomponent somehow, and add to the rendering/drawing code inside the
Gridcomponent so it draws lines in addition to the grid itself, according to the edge data entered by the user. This probably will involve creating state/props in a number of components, to move the data between them. The Canvas Drawing section of the React handout might be a helpful reference for this.
x1,y1 x2,y2 COLOREach line in the text box represents one line that should be drawn on the grid. The X and Y coordinates in this field correspond to the X and Y indices of specific grid dots, and the lines should be drawn connecting two grid dots. Be careful not to confuse grid point (1, 1) with canvas pixel coordinate (1, 1). The upper-left grid dot is defined to be (0, 0). The maximum reasonable coordinate depends on the current grid size.
1,1 1,2 black 1,1 2,1 black 1,2 2,2 black 2,1 2,2 black
EdgeListand then only hand the completed/parsed data object up to
App, OR do you want to hand the raw string from the text box up to
Appdo the parsing, OR should
Apppass that string to
Griddo the parsing? (Or something else entirely?) Think about cohesion/coupling and what makes sense from a design perspective. There are choices you can make at this step that can make implementing the rest of the application easier for yourself — the benefits of good design!
Grid. It is your choice whether you want to clear the contents of the text box, or just clear some internal piece of data so the
Gridstops drawing the edges. If you'd like, you can also make the clear button reset the
Gridsize back to 4x4, though this isn't required.
It can be tempting, when the TypeScript compiler is complaining about something, to simply add the
any annotation to whatever is causing your problem to get the compiler to be quiet. There are
plenty of reasonable uses for
any, but you should always carefully evaluate whether you are simply
masking a bug before you use it.
For example, it's generally fine (in this course) to replace complex names that come from React or HTML with
any to keep the code simple. There's a trade-off here - the code may be somewhat simpler, but (a)
you get less help from the TypeScript compiler, since it can't catch bugs that it can't see, and (b) you get
less help from IntelliJ, since it doesn't know what kind of object it's dealing with. It's up to you to make a
choice about what types you want to write out, and what types you'll leave as
any. TypeScript is a
tool - the more you use it, the more it will help you.
At a minimum, you should attempt to use explicit types for the following:
One note - some TypeScript compiler errors can be long or confusing. When you encounter errors like this, resist the urge to randomly change the code in the hopes that it will go away. By not understanding the error behind what you wrote, you are making yourself more likely to make the same mistake in the future, and you're robbing yourself the opportunity to understand why the compiler said what it said, and why the code that was there had a problem. When you're faced with an error you don't understand, here are some tips for figuring out what's going on:
Writing automated tests for GUIs is important, but it can be difficult and usually involves special frameworks that are beyond the scope of this course. For this reason, you are not required to write unit tests or a test driver. We will test your solution by running your main program.
If you would like to run a sanity check on your code to ensure that your code works as expected, use the following statements to draw edges in your application and make sure the image matches the provided image below. You should set your grid to be size 100 for this test.
82,46 83,46 red 83,46 84,47 red 84,47 84,48 red 84,48 83,49 red 83,49 82,49 red 82,49 81,48 red 81,48 81,47 red 81,47 82,46 red 82,46 81,44 orangered 83,46 84,44 orangered 84,47 86,46 orangered 84,48 86,49 orangered 83,49 84,51 orangered 82,49 81,51 orangered 81,48 79,49 orangered 81,47 79,46 orangered
You are responsible for creating a GUI that performs the required tasks, and that is easy to use and intuitive. You are permitted, but not required, to be creative and improve upon this basic design. (Don't do this until after you have completed all of the basic requirements for the assignment.)
Projects that go substantially beyond the basic requirements will receive a small amount of extra credit. Here are a few suggested enhancements (you're welcome to come up with your own too):
Additional functionality should augment, not replace, the requirements of the assignment. Your internal code
does not need to be structured like the provided code; you're welcome to throw it all out and re-write the app
from scratch if you'd like, but the external functionality must be identical. Please record all additional
functionality you attempted to add in
hw-dots/extras.txt. Extra Credit points will not be
awarded for functionality that is not documented in that specific file.
Time management: there are lots of fun, interesting things that could be done here. Be sure though to get the main requirements done, and be sure you don't wind up attempting more than you have time to accomplish. Simple, meets the requirements, and works, is much better than very elaborate, super interesting, but not done or still buggy at the end.
E_LIFECYCLEwhen I run
package-lock.json(NOT package.json), and the
node_modulesfolder, then re-run
npm installand try again.
npm is not recognized as in internal or external command...
ReactDOM.renderin your application. Only
index.tsx(which you do not need to edit) should call
ReactDOM.renderwill require React to communicate with the DOM which affects performance and defeats the purpose of React, which normally updates the page without re-rendering all of it.
document.getElementByIdthat “go around React” are not permitted.
context.strokeStyleproperty can be set directly to a string with the name of a color, like
context.strokeStyle = "red". You don't need to worry about converting the color entered by the user into some sort of RGB color.
./gradlew validate will not validate your homework assignment. The staff
strongly recommends you use the latest, standard version of Google Chrome to test your code. Your UI must load
when we use Google Chrome to visit http://localhost:3000 after running
npm start from
There are no new files that you must submit as part of the assignment, unless you add any new files yourself.
Make sure to commit any changes and additional files you create. Don't forget to note any additional
Refer to the assignment submission handout for complete turnin
instructions. You should use the tag
hw8-final to mark your final submission.
There is no GitLab validation for this assignment, so not having a pipeline when you submit the tag is normal.