peeley / lucy Goto Github PK

The site should have transitions when moving from welcome -> login, welcome -> create account, welcome -> guest, etc.

bonus points if you figure out how to do a star wipe

• Create settings table
• Users own their user settings

• add GET and POST routes to routes/web.php
• create view w/ form for users to sign up w/ email and password
• create function for POST route that creates users
• create function for GET route that returns view

We currently allow anyone on the website to use the "guest" board, with board id 1. we want users to also "own" a default board when they first create an account so they aren't starting from scratch. however, we don't want users to edit this default board and affect others' default boards.

as such, when a user account is created, we need to create a copy of the default board (board id 1) and all the words on it that they own and are allowed to modify.

this can probably happen in the CreateAccountController. I haven't tried it, but I believe models can be replicated like it says in the docs here.

• add CSS to board screen at /boards/<board id>
• can look similar to screenshot from Project Assignment 2

• Create (static for now) User Settings menu where user can fiddle w/ settings
• Maybe create dummy toggles/checkboxes?

• add styling so that /create-account looks the same as the screenshot in PA3

from the BoardController, serialize the board and all its folders recursively to a JSON blob that can be sent to the frontend via the HTTP API.

this can probably be implemented as a method on the Board/Folder models, but might also be a good candidate for the Tile abstract class.

• create a WordsController class if one does not exist
• add a GET route & controller function to fetch words by id (/words/{id})
• add a POST route & controlelr function to create words (can just be placeholder for now)
• add a GET route & controller function to get all words belonging to user (/words/user/{id})

This would be the functionality for a user to have their own board and to add words to it

• Users can create sentences from word tiles
• Sentence can be read out loud
  • Sentence auto-clears after being read aloud
• Backspace on sentence to delete last word
• Clear sentence button

helpful links:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
https://www.section.io/engineering-education/text-to-speech-in-javascript/

Create CSS styling to match /create-account

The Speech synthesis interface of the Web Speech API is mysteriously broken on Firefox for Linux. According to these bug reports, it's something to do with an implicit dependency on speech-dispatcher.

Speech synthesis still works fine on Chrome, but this is a pain in the ass and might bite us when we start supporting other devices. Might want to look for a solution or workaround if so.

Create a guided use system that will automatically activate after a certain amount of time (users can adjust this).

The guided use system itself will guide the user on how to use the board to form/speak a sentence with the tiles by highlighting certain parts of the screen (maybe also add voice and text to supplement the guide).

we should probably have something more modern in terms of fonts for the website. whatever we choose should be available by default across all common browsers (Chrome, Firefox, Safari)

probably a one-line change in public/css/app.css.

when a user presses the Last Folder button when they're on the base board screen, the board crashes and goes blank. this should get fixed so that the Last Folder button is disabled or does nothing when the user is already on the base board screen.

there's quite a bit of duplication throughout the frontend, we can move it all into a single place using layouts and components.

• create a single layout that implements common HTML, like head tags
• update all our views to extend this common layout, so each view's blade.php file is the relevant page's content
• add a <title> to the common layout for the website title
• make components for any common elements, like back buttons (or buttons in general) so we have all the styling/HTML structure in one file

When a user presses and holds on a tile, a modal should popup giving users the options to delete or edit the tile that was pressed on.

Editing gives the user the option to change the text/color/icon of that tile, and a button to save changes.

Deleting should trigger a confirmation popup that, when confirmed, deletes that tile from that space on the board. Not sure if we want to delete the tile totally (like remove the word from the vocabulary and all other instances of it on the board), so I guess use your discretion.

We need some CSS styling for the home view.
This is the view the user sees when they log in.

Pressing the back button in a board while logged in will bring you to the welcome screen instead of the home screen.

on the board screen, when users click a blank tile, a menu should pop up to create a new word.

the menu should have a field for text, color, icon (as a file to upload), and a button to save the word.

the word should be added to the board in the space that the user initially clicked on.

see project assignment 3 for UI designs

• add a GET route to routes/web.php

• create a LoginController if one doesn't exist

• add a function to LoginController to return the login view

• implement screenshot in Project Assignment 3

• does not need to be ReactJS

• create Board model class
• create boards table & migration

it'd be silly to make a whole new project website when our project is a website, so we can just have an About Us link/tab somewhere that directs to a page with all the assignment requirements on it.

see Canvas assignment for page contents. we can probably just reuse content from last semester's project assignments.

• make "Speak" button green
• round corners on all buttons
• find/create icons for each button (house for "Home" button, left-pointing arrow for backspace, talking head for "Speak", etc.)
• fix sizes/placement of buttons on Board screen

same functionality as clicking the Speak button from the board screen, but when a user clicks on the sentence bar instead.

This would be getting the back button on the same row as the other buttons, putting the back folder in line with the sentence bar, and making the spacing of them more consistent and visually appealing

GitHub Actions are pretty handy to have for a project - every time we commit or make a pull request, arbitrary scripts are run that can do stuff like check syntax, enforce formatting, run tests, etc. There's probably some default ones for PHP that would work.

uhhh just do what this says, I remember setting this up is quite a process

When a user is on the board screen, they should be able to drag-and-drop tiles to edit the tiles' placement on the board. This should be saved to the database, so that the tiles' updated positions persist after reloading the page.

there probably needs to be a Controller method for this functionality. a good place might be in BoardController, since we're just editing the tiles attached to that board rather than every instance of those tiles (if it's attached to multiple boards/folders).

After logging in, a user should be taken to the home screen where they will see a list of all the boards they own.

Board creation

A button should exist on the home screen for users to create a new board. The button should cause a modal to appear, where users can enter information about their new board. Boards can be created as a copy of an existing board they own (or default board), or be blank with a predetermined name, width, and height.

Edit boards

Preexisting boards should have an edit button next to them on the home screen. When pressed, a modal will appear where users can enter a new name, height, width, etc. for their board.

Delete boards

Like editing, a button should appear next to preexisting boards in the home screen. Pressing the button will cause a confirmation popup to appear. When the user confirms, the board should be deleted from their account.

In our public/css/app.css there's quite a bit of duplicated code that we could cut down on, and most of our HTML elements only utilize one class at a time. This might start to be a problem as the project expands and the amount of elements we need to style increases.

• use id rather than class for CSS that is unique to a single element
• specify multiple classes at a time on HTML tags instead of one large class that ends up sharing CSS rules with other classes
• combine CSS classes using duplicated code, e.g. all our buttons have background-color: lightgoldenrodyellow, border-radius: 5px, etc.
• move CSS rules that should apply everywhere (like font-family) to body or html

All buttons/tiles should have an indication when they are hovered over, to indicate that they are interactive

• create a BoardController class if one does not exist
• add a GET route to fetch a board by id, returning a JSON blob representation (/boards/{id})
  • will be fetched by ReactJS to build the board from
• add a GET route to fetch all boards belonging to a user, returning HTML (/boards)
• add a POST route to make a new board (/boards)

• add a GET route to routes/web.php

• create a HomeController, if one doesn't exist

• add a function to HomeController to return the view

• just implement screenshot in Project Assignment 2

• does not need to be ReactJS/interactive

• Move current CSS styling to public/css/app.css
• Edit styling to be similar to /create-account (the only difference I can tell is the font family)

• implement abstract class Tile
• Tiles implement behavior for both words and folders

• create seed file for base vocabulary
• seed base board in boards table
• seed words in words table

docs on seeding:
https://laravel.com/docs/8.x/seeding

Create CSS styling for /user-settings, to match /create-account

Guests can manipulate the default board using the edit/delete tile feature (probably the create tile also).

• Have a user that can log in
• Write a User Model class
• Users own words and boards

When a user is inside of a folder tree on the board, there should be some kind of indication. My idea is to have something like

Board Name > Foods > Orange Foods

display under the sentence bar but above the tiles on the board screen, where "Foods", "Orange Foods", etc. are the names of folders. No need to display anything when a user is not within a folder tree.

• add a folderPath property to the Board.js React Component state, an array should be fine
• when a user clicks a folder tile, append the folder name to the folderPath
• when a user backs out of a folder, pop off the last element of folderPath
• render the folderPath above the tiles

• create User model - php artisan make:model User
• create users table & migration
• Users own words and boards and preferences
• use mappings table schemas from PA3

• create static placeholder of screenshot from PA3

• does not need to be ReactJS

installation and setup is an unholy pain in the ass and containerization would make deployment ezpz.

write a docker-compose.yml file with the following services:

• the web server, w/ php & npm installed
• the database, postgresql maybe?
• redis queue for jobs
• local mail server like mailhog for testing emails

docs:
docker compose
docker

• Create Word model
• Create words table & migration

• board views should be populated with associated tile objects

• clicking on words should add word to sentence

• clicking on folder should open folder (which just looks like a board)

• have a back button to go back to previous board/folder

• will be in ReactJS

This would be a setting that would change the background to a dark color and the text that is on the background (not in a button) to a light color

since our project website will just be a page on the existing lucy project, we need to get the project up and running on a server.

• get domain/subdomain for Lucy project
• make AWS/DigitalOcean instance for website
  • needs both web server and database
• make visible to public