New world editor in HTML and JavaScript

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, and Segment 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.