New world editor in HTML and JavaScript
Overview
- Setup a Github action to automatically generate blog posts on Srajan12's Hashnode blog.
- Created an action that says hello to Srajan and outputs the current time.
- Created a world editor HTML page with an empty canvas and JavaScript to create a simple graph of points and segments.
- Refactored JavaScript code into classes, including
Graph
,Point
, andSegment
to improve modularity. - Added CSS to style the world editor page.
File wise changes made
.github/workflows/commit-blog-generator.yml
- Added a GitHub workflow for automatically generating blog posts from commit messages.
- The workflow uses the
srajansohani/commit-blog-generator
action to generate the blog posts. - The blog posts are published to the
srajan12.hashnode.dev
blog.
.github/workflows/hello.yml
- Added a GitHub workflow for running a job that says hello to a specified user.
- The workflow uses the
actions/hello-world-javascript-action
action to say hello. - The job can be triggered by a push or pull request event.
index.html
- Added a new HTML file that serves as the main page of the World Editor application.
- The file includes the necessary JavaScript and CSS files for the application to run.
js/math/graph.js
- Added a new JavaScript class named
Graph
. - The
Graph
class represents a mathematical graph consisting of points and segments. - The class provides methods for adding and removing points and segments, as well as for drawing the graph.
js/primitives/point.js
- Added a new JavaScript class named
Point
. - The
Point
class represents a mathematical point with x and y coordinates. - The class provides methods for comparing points and for drawing them on a canvas.
js/primitives/segment.js
- Added a new JavaScript class named
Segment
. - The
Segment
class represents a mathematical segment between two points. - The class provides methods for comparing segments and for drawing them on a canvas.
styles.css
- Added a new CSS file that contains styles for the World Editor application.
- The stylesheet defines the background color and text alignment for the body element, the color and font family for the h1 element, and the background color for the canvas element.
Summary
- Two new files (.github/workflows/commit-blog-generator.yml and .github/workflows/hello.yml) were added.
- A new HTML file (index.html) was created. It includes everything needed to create a world editor.
- Three new JavaScript files (js/math/graph.js, js/primitives/point.js, and js/primitives/segment.js) were added. They contain classes used to create and manipulate points, segments, and graphs.
- A new CSS file (styles.css) was created. It styles the world editor, making it visually appealing.