Quadblock

Learn Liveview and Elixir. Your purchase supports our mentoring programs.

Skills

Code Organization

Reducers

Liveview Lifecycle

Liveview keydown Events

Liveview with Process Timers

Liveview Button Clicks

Liveview Render

SVG Graphics

Boundary Layers

What You Get

16 Videos

for $30.00

Description

Quadblock is loosely based on Tetris, one of the most iconic video games of all time. In this video tutorial with sixteen paid videos you’ll learn to build it. Along the way, we’ll learn a little Elixir, some Phoenix, and also LiveView.

Elixir is the language reshaping the way resilient, high performance apps are made, without losing productivity. LiveView is a hot new framework exploring building web applications without the need for custom JavaScript. Together, we’ll understand how they work together.

Videos

Public & Private

1: Overview, points, and Reducers

We talk about the overall series, and the use of reducers. The repo is https://github.com/groxio-learning/quadblock

2: Structs

We build new structs, and then use them in new reducers.

3: LiveView Lifecycle and SVG

We walk through the LiveView lifecycle, and build a basic blank SVG board.

4: SVG Shapes

We represent a point as an SVG shape. In the repo, we start from the checkpoint_1 branch.

5: Rendering Block Shapes

We build individual tetromino shapes, and render them on our svg. Start on checkpoint_2.

6: Converters and colors

We begin to render colors on our SVG, and introduce the concept of converters. We start at checkpoint_3.

7: Rotation

In this episode, we take the concept of reducers to the max. We rotate our tetromino using some trivial geometry. checkpoint_4

8: LiveView keydown Events

We begin to move our individual tetrominos around the page using phx-window-keydown HTML attributes. checkpoint_5.

9: Boundary Layers

We crank up the complexity, and attempt to isolate that new complexity in a boundary layer. checkpoint_6

10: Integrating View and Boundary

We integrate our new boundary code into the LiveView handlers and mount. checkpoint_7

11: Pile Them Up

We start to build the bottom boundary, where we will eventually merge in old shapes as they hit the bottom. checkpoint_8

12: Knee Deep in the Junkyard

We continue to work with stacking up blocks into the bottom boundary. checkpoint 10

13: Expanding Collisions

In this section, we check for collisions with items in the junkyard. checkpoint_11

14: Templates and Game Over

We move some of our code into templates, and talk about when and why we should do so. checkponit_13

15: Game Over Redirect

In this chapter, we work on a little navigation when the game ends. checkpoint_14

16: Tidy Up

We finish up the game, and tidy up loose ends. checkpoint 15

Old series 1: Basics

Start project, and create a new random brick.

Old series 2: Reducers

In part 2, we establish reducers to move and spin basic brick.

Old series 3: Model the Shapes

In part 3, we create the model for the geomitry of each tetromino using a flat functional data structure.

Old series 4: Shape geometry

In part 4, we create another set of reducers to work on the points of a teromino to manipulate geometry.

Old series 5: Testing Reducers with Pipes

In part 5, we build a test helper to make it easier to test our tetromino.

Old series 6: Render as String

In part 6, we translate the brick to a string in preparation for using the inspect protocol.

Old series 7: Inspect a Brick

In part 7, we make a brick work in IEx by making inspect render a two dimensional shape.

Old series 8: LiveView QuadBlock series

We set up LiveView and learn what a LiveView is.

Old series 9: LiveView Quadblock Series

We set up a LiveView route and work with a trivial LiveView view, paying attention to the lifecycle.

Old series 10: LiveView QuadBlock series

Dependencies. We talk about the strategies for managing dependencies. We set up a Pancho project, and plug in the Tetris work we've done so far.

Old series 11: LiveView QuadBlock series

We begin to show graphics using SVG. We show a background and a single box.

Old series 12: LiveView QuadBlock series

We get ready to render a tetromino by creating a function to prepare us to render, and a reducer called show that adds points to a socket.

Old series 13: LiveView QuadBlock series

For the first time, we tie into handle_event "keydown". We render a block and tie it to the arrow key. so a user can move our pieces right and left.

Old series 14: LiveView QuadBlock series

We work on our api and boundaries layer, working in the idea of collisions with the boundaries and other blocks.

Old series 15: LiveView QuadBlock series

In our API layer, we build an API that handles uncertainty, a function that could potentially take the user out of bounds. We begin to layer on tests.