liamgens / bucknaked

A programming language and editor for "Coding Newborns" (CSE 442 Project)

Buck Naked

An interpreted language with custom editor and runtime environment

Prerequisites

# clone respository
git clone https://github.com/liamgens/BuckNaked.git

Windows users will need to install Node from https://nodejs.org/en/

# install package manager npm (Ubuntu)
sudo apt-get install -f npm

# install package manager npm (Mac)
brew install node

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build

# run unit tests
npm test


# lint all JS/Vue component files in `src/`
npm run lint

---

This project was generated with electron-vue@80dc2ec using vue-cli. Documentation about the original structure can be found here.

bucknaked's Issues

Project Setup & Initial Commit

As a developer on this project I will create the initial code and commit it

Program Output

As a developer, I want to be able to see my programs output in the output window.

Add print function to executor

Add the print command to the executor to be able to output to the console when called.

Skeleton Structure

Add a skeleton structure layout to the app. By this we mean just set the application up into logical parts where all of our components will go, but with placeholders for now.

Print command

As a developer, I want to be able to print text to the output window so that I can output data from my program.

Interpreter

Function declarations and calls

As a developer using the BVM I want to be able to declare and write functions that can be later called in the program.

Logic and Control statements

As a developer using the BVM, I want to be able to write programs with statements that control the flow of the program, such as if/else statements

Code and Line Numbers Sync

The code editor panel and the line number panel currently do not scroll in sync together. They get out of place and need to be better aligned. To reproduce the bug, just enter in enough lines of code where you have to scroll, and then after you scroll up and down a bit they should be out of sync.

Graphics

As a developer, I want to be able to draw basic graphics to the graphical output window.

Acceptance Tests

1. Use the

text 20 20 "red" "test"

instruction, and observe red text that says "test" in the graphics window. Trying replacements for the color “red”, such as “green” or “purple”, will cause the text to show in those colors. Putting text that is not a recognized color, such as “fdsf”, should render the text with the most recently used color, or in black if no color has been used yet.

2. Use the

rectf 20 20 32 32 "red"

instruction, and observe a filled red rectangle at (20, 20) in the graphics window. Changing the first two arguments to other numbers should move the rectangle to different locations. Changing the second two arguments should change the dimensions of the rectangle.

3. Use the

recto 20 20 32 32 "red"

instruction, and observe a red rectangle OUTLINE at (20, 20) in the graphics window.

Advanced Graphics test

Type the code into the editor:

var  squareWidth 50
var middle 100
var current middle
recto current current squareWidth squareWidth "green"
add current 5 current
recto current current squareWidth squareWidth "red"
add current 5 current
recto current current squareWidth squareWidth "green"
add current 5 current
recto current current squareWidth squareWidth "red"
add current 5 current
recto current current squareWidth squareWidth "green"
add current 5 current
recto current current squareWidth squareWidth "red"
add current 5 current
recto current current squareWidth squareWidth "green"
add current 5 current
recto current current squareWidth squareWidth "red"
add current 5 current

sub middle 5 middle
recto middle middle squareWidth squareWidth "yellow"
sub middle 5 middle
recto middle middle squareWidth squareWidth "purple"
sub middle 5 middle
recto middle middle squareWidth squareWidth "yellow"
sub middle 5 middle
recto middle middle squareWidth squareWidth "purple"
sub middle 5 middle
recto middle middle squareWidth squareWidth "yellow"
sub middle 5 middle
recto middle middle squareWidth squareWidth "purple"
sub middle 5 middle

This should show a fun image of rectangles of different colors being drawn down a diagonal in the screen.

Load button

Create a button that when clicked lets the user choose a file from which to load text into the editor.

Save Button

Create a button that when clicked saves the code from the editor to a file.

Create 'types' File

Create a file with reusable methods that get the type of a variable and to get the actual value of the variable

rect drawing functionality

Acceptance test: Use the graphics API as a BVM developer to draw a rectangle to the output window, then look at the window and confirm that you are seeing a rectangle

Loading Programs

As a developer, I want to be able to load my programs again so I can continue work on them.

Load Acceptance Test

Press the Load button.
This should open your Operating System's native file explorer.

Click and choose a file out of the file explorer.
This should load the chosen file into the application, and load its contents in
to the editor

Main UI Window

Create a basic "Hello World" window that opens up when the project runs.

Save Functionality

Write a function that saves the code from the editor to a file on the machine with the extension *.buck. This should be called when the save button is clicked #38.

User Interface

As a developer using BVM, I would like to be able to interact with the VM using a graphical user interface.

Code Editor

As a developer, I should be able to type code into a text box in the editor.

BVM Language

As a developer using the BVM program I will be able to write programs in a documented language that includes things like functions, variables and types.

Types

As a developer, I want to be able to create typed variables.

num
string
bool

Say command

As a developer using BVM, writing a command "Say" followed by a string will have the computer audibly speak that word.

Write up design document for BVM Language

Make a design document that documents all of the specific features of the language we will use in the BVM code editor.

Bag Command

As a developer I would like to use the bag keyword to execute my bagged commands at the end of the current scope.

Implement Cross Platform UI Library

UserInterface#5

Use Electron and Vue JS to build a cross platform application. Get the project all ready to go.

Add Arithmetic Operations to Executor

Add arithmetic operation support to the executor so that the operations can be executed correctly.

Syntax Checker

Write code for the syntax checker, which will take input from the parser, and make sure the syntax of each line/function call is correct (that it uses valid keywords, the correct number of arguments, etc.)

Add print to instructions

Add the print command to the instructions.json file.

Loops

Add Menu Options

Figure out how to add file/edit/view... menu options to the top of the window. If possible throw in some dummy data for now, if not we'll have to scrap this task.

Parser

Write file that parses through the text in the editor line by line, and separates the pieces of each line and then sends them to the syntax checker.

Meet to design BVM language

Have a meeting with group members to discuss and design the language that will be used in the BVM

Code Editor Panel

Add a code editing panel on the left side of the window.

Load Functionality

Write a function that loads the code from a chosen file on the machine with the extension *.buck. This should be called when the load button is clicked #40.

Interacting with GUI through a Terminal

As a developer, I'd like to be able to view the GUI side by side with an interactive terminal.

Arithmetic

As a developer, I'd like to be able to perform basic arithmetic operations, as defined by the language specification guide.

Saving Programs

As a developer, I want to be able to save my programs so that I can open them and continue working on them later.

Save Acceptance Test

Press the Save button.
This should write the contents of the editor to a file called code.buck to the user's downloads directory that can be accessed later.

Running Programs

As a developer, I'd like to run my program through the interpreter to produce some sort of output in the graphical window.

Outputting Error Messages

When the code runs and an error in the BVM code is encountered, the details of this information and the line number on which it occurred should be put in the output area.

Loops And Blocks

As a developer, I'd like to be able to implement loops that repeat code ran within the BVM. I would also like to have if else statements. I would like the control of these types of statements to be determined using conditional statements.

Compare Argument Types with Instruction Parameter Types

Fill each instruction in the instructions json file with a list of the types of each of its arguments

Validator

Write code for the validator, which will take input from the syntax checker, and will then check to make sure all of the necessary variables are defined and have the correct typing for the function call, and if so send them to the executor

Executor

Write code for the executor, which will take input from the validator, and run the specified operations with the given inputs, then return control to the parser.

Add graphics canvas component to view

Acceptance test: Use your two eyes to look at the application and see a graphical output window

Audio

As a developer, I want to be able to play simple sounds using sound instructions.

ACCEPTANCE TESTS:

1. Use the beep instruction. You should hear a computer man say "beep".
2. Use the boop instruction. You should hear a computer man say "beep".
3. Use the tts command. You should hear a computer man say "".

Achievements

After a developer or scripter has reached certain significant points in the use of this software, (for example, all commands run, all keywords used) they will receive achievements.

Output/Result Panel

Create an output panel on the right side on the window that shows the result after running code from the editor/file upload.

Add Arithmetic Operations to Syntax Checker

Add the arithmetic operations to the syntax checker to verify that the given operation has the valid syntax.

Add Arithmetic Operations to Validator

Add arithmetic operation support to the validator to make sure that the operation can be successfully carried out by the interpreter.

Link Interpreter Components Together

Link all of the components that make up the interpreter together to complete the interpreter. Will need to add some end-to-end testing to make sure all of the components play nice together.