sparklicorn / web-blocky-ai

Blocky

A webserver for my portfolio / demo website. Also used to test out new technologies and coding fun.

Installing

The frontend uses package(s) from the GitHub package registry. Unfortunately at the time of writing, all packages hosted on GH require an authentication token to install.

For the project to compile successfully, you'll need to:

1. Create a personal access token with the read:packages scope.

2. Add the GitHub package registry to your ./.npmrc file, replacing GH_PAT with your personal access token and GITHUB_USERNAME with your GitHub username:

//npm.pkg.github.com/:_authToken=GH_PAT
@GITHUB_USERNAME:registry=https://npm.pkg.github.com

web-blocky-ai's Issues

Incorporate Java bucket / blocky package

Description

The Java Bucket/blocky models will be used to validate user gameplay and save stats to the database, once those components are designed.

Objectives

• Pull the Java Bucket/blocky package into the backend project as a Maven dependency.

Scrub project code and history of any protected entities

This app/game will now be called "Totally Ambiguous Block Game" or just Blocky for short

• Rename affected repos, projects, any repo labels, branches, tags
• Scrub codebase, commit history, issues and PRs (open and closed)
• Consider alternate colors in game

Build interactive BlockyBoard in React

Building upon the demo blocky board in BlockyAiView build an interactive React component with canvas to play the game.

Objectives:

• Keyboard controls:
  • ENTER to start the game, pause if started, resume if paused.
  • Arrow Keys Left/Right/Down to move the active piece. Holding down should repeat the movement.
  • Z/X to rotate the active piece clockwise/counterclockwise respectively.
• The component should hook into the blocky event system for UI updates.

Displaying the next piece or stats will be handled in a follow-up.
Does not need to support custom board sizes - stick with a default size.

Collision detection not correct when piece is rotated

Description

When the active piece is rotated, it does not seem to fit in the puzzle where you might expect. There is something wrong with the collision detection.

Gameplay capture

Screen.Recording.2023-09-08.at.3.50.08.PM.mov

Steps to Reproduce

1. Start the game and try to rotate, move, and drop pieces.

Actual Results

The pieces sometimes cannot be moved left or right when there is clearly room for it to.
Sometimes its terminal position is floating above other blocks.

Expected Results

The piece moves as expected.

Objectives

• Main Defect Resolved

Scope Changes

• (2023-09-10) Also resolve the defect preventing lines from being cleared as expected, if it isn't handled by #7 or #9.

Unit test: ZMod

Add unit tests for ZMod, and update any other unit tests that are affected by switching to its usage.

Unit tests: Event, EventBus

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• Event
• EventBus

Unit tests: Coord, Move, Position, Util

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• Coord
• Move
• Position
• Util (this isn't in Bucket, but I'm anticipating such class to house random utility functions)

Dockerize

Description

It would be advantageous to have the project dockerized, as the site host may change.
Better to take care of this now and incrementally add to the docker files later as features are implemented, rather than trying to dockerize it later if it is potentially much larger with several more services.

Don't need docker-compose yet until a database or other services are added.

Objectives

• Dockerize the project.

Add Jest for frontend testing

Hilla framework doesn't seem to come with any testing tools.

Add Jest for testing. May require some other packages to support typescript.

Write a basic test to show it working.

Setup GitHub Action to trigger CI on PRs

Setup a GitHub action that triggers CI checks on PR events (creation/push).

Objectives

• Check ./mvnw package build success
• Check npm test success
• Checks should run automatically on PR pushes
• PR merging should be blocked by failing checks

Reuse previous project workflows if possible.

Setup CD

Description

Currently there's a script on the server that builds the project and redeploys the server, but it has to be run manually via ssh session. It would be nice if the site could automatically redeploy when a new version is released.

Because the server is a rinky-dinky 1G RAM, it may be better to (1) build the production artifact within the GitHub action, (2) transfer it via ssh to the server, (3) replace the active package, then (4) restart the service. Build failure has only happened once or twice due to hanging on the npm install phase, assumed related to limited memory. As the project grows, it's possible this happens more frequently.

Alternatively, if the build can be reliably handled by the server, another approach is to setup a web-hook on release. A simple node app running in the server background can listen for the release event and then kick-off the build using the current script.

Objectives

• Determine which approach to take.
• Setup a continuous delivery action to automatically deploy the app when a release tag is pushed.

General Refactor Bucket

Bucket for some quick refactoring.

Unit test: Blocky

Description

Create unit tests for Blocky, assuming it's brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

Objectives

• Create unit tests

Setup MySQL Database

Description

New features may require a database. This should be a good exercise in setting that up.

Objectives

• Add a MySQL database to the project via Spring.
• Create documentation on how to setup locally.
• If doing this after #29, add docker-compose setup.
• For demonstration, create a table via JPA, CRUD endpoints to interact with data, and a demo page in the app to show the data reaching the front-end.

Scope Changes

Sometimes new details are uncovered or refined later on which results in the scope of an issue changing. Log that under here.
E.g., adding new objective:
[checkbox] (date YYYY-MM-DD) Also add an Execute Order 66 button to the toolbar in the UI.

Mobile controls

Implement touch controls so the game can be played on a phone or tablet.

Some initial ideas to test out:

• Scope touch events to piece or to the game depending on some defined touch proximity to piece (2 or 3 block-lengths?)
• Define "quick-tap" as a touch and release that occurs within a short amount of a defined time (200ms?)
• Define "double-tap" as a 2 quick-taps
• Game double-taps should be treated similar to pressing Enter key
• Show a "ghost" of the next piece at the top of the board where it will spawn, after the active piece has been moved enough away (3 blocks down?)
• Piece touch + drag events will move the piece around, following the touch point. May want to throttle the motion event to only fire once every X ms.
• Piece quick-taps will rotate the piece depending on the location of the touch relative to the piece (right of piece blocks -> clockwise; left or dead center of piece blocks -> counterclockwise)
• Ghost piece quick-tap will cause the current piece to "soft-drop" and lock-in
• Allow the piece to move UP
  • altered gravity effect: constrain upward movement every tick, i.e. instead of lowering the piece down, lower the ceiling instead, pushing the piece down to respect the ceiling if necessary
  • add visual so the player knows where the ceiling is

Unit tests: TetrisEvent

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• TetrisEvent

Add "next piece" in UI

There should be another canvas component (or extend the current game canvas) that displays the next piece.

Support displaying many pieces.

Props:

• shapes: Array of shapes (or shape indices) to display
• orientation: (HORIZONTAL OR VERTICAL), only really matters when shapes.length > 1
• blockSize: in pixels

Defect Bucket

A bucket for defects.

Tracking

Statuses

Icon	Meaning
🔴	Unstarted
🟡	In progress
✅	Fixed

Severity

Icon	Meaning
🔥	Lowest
🔥🔥	Low
🔥🔥🔥	Medium
🔥🔥🔥🔥	High
🔥🔥🔥🔥🔥	Highest

Date	Title	Status	Severity	Related PR
2023-09-26	Level increases on first line clear	✅	🔥	#45

Unit test: Timer

Objectives

• Add unit tests for Timer.ts

Add game stats in UI

The game stats should be displayed somewhere.

Unit test: BlockyState

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• BlockyState

Unit tests: Shape, ShapeQueue

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• Shape
• ShapeQueue

Unit test: Piece

Create unit tests for the following classes, assuming they're brought over from https://github.com/sparklicorn/bucket as-is or with similar functionality.

• Piece

Create ZMod utility

A ZMod maintains an int value from [0,mod), where mod is a positive int.
Z represents the set of integers in set theory, and mod for modulus.

Implement

• get(): number
• set(value): ZMod
• add(value: number): ZMod
• sub(value: number): ZMod
• and maybe a static confine(value: number, mod: number)

Methods modifying the underlying value should normalize it to be between [0,mod).

The purpose of this utility class is to abstract the concept of a rotor or rotary phone. There are a few paces in the code that use this, e.g.

// Shape.ts
rotationIndex(rotations: number): number {
  return ((rotations % this.numRotations) + this.numRotations) % this.numRotations;
}

Replace any usages with the new ZMod.

Create play-through test

Description

We want to avoid introducing gameplay defects. Unit and integration tests only do so much. What we want is are functional tests that play through an entire game.
Think of ways to accomplish this without being too time-consuming.

Objectives

• Create a functional test that issues a series of commands or replays a specific game history (Move here, Rotate this way, etc) and makes assertions about the state of the game at various points.

Create blocky game interface

Description

The UI and other components could use a clear interface for interacting with a blocky game.

Objectives

• Create an interface or wrapper class around Blocky specifically for interacting with the game.
• Swap out UI usage of Blocky for the new interface.

Attempt to remove Position

Description

Position is essentially just Move with a maxRotation value. 💩

Objectives

• Explore refactoring Move to optionally take maxRotation as a ZMod
  • Replace usages of Position

Convert Bucket/blocky Java models to Typescript

Take the models from the https://github.com/sparklicorn/bucket, convert to Typescript and add here under ./frontend/.

Generalize ShapeQueue

Description

Parts of ShapeQueue could be reusable if generalized. Something to the effect of:

class SelfPopulatingQueue<T> extends Queue<T> {

  constructor(minSize: number, generator: () => T[])

Objectives

• Generalize ShapeQueue as a self-populating queue that takes some generator function.
• (Optional) If there isn't a base Queue built-in to typescript/javascript, create the interface. Maybe start a new package for data structures.