<commit_before>
import Website.Skeleton (skeleton)
import Window

port title : String
port title = "Making Pong"

main = lift (skeleton "Blog" content) Window.dimensions

content w = width (min 600 w) [markdown|

<style type="text/css">
p { text-align: justify }
pre { background-color: white;
      padding: 10px;
      border: 1px solid rgb(216, 221, 225);
      border-radius: 4px;
}
code > span.kw { color: #268BD2; }
code > span.dt { color: #268BD2; }
code > span.dv, code > span.bn, code > span.fl { color: #D33682; }
code > span.ch { color: #DC322F; }
code > span.st { color: #2AA198; }
code > span.co { color: #93A1A1; }
code > span.ot { color: #A57800; }
code > span.al { color: #CB4B16; font-weight: bold; }
code > span.fu { color: #268BD2; }
code > span.re { }
code > span.er { color: #D30102; font-weight: bold; }
</style>

<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center; font-size: 4em;">Making Pong</div>

This post has two major goals:

 1. Get you thinking about [Functional Reactive
    Programming](/learn/What-is-FRP.elm) (FRP) for games.
 2. Teach you how to make games with Elm.

In this post we will be looking into [Pong in Elm](/edit/examples/Intermediate/Pong.elm):
a functional game written in Elm, playable in any modern browser.

## Functional Game Design

Making games is historically a very imperative undertaking, so it has long
missed the benefits of purely functional programming. FRP makes it possible
to program rich user interactions without traditional imperative idioms.

By the end of this post we will have written Pong without any
imperative code. No global mutable state, no flipping pixels, no destructive
updates. In fact, Elm disallows all of these things at the language level.
So good design and safe coding practices are a requirement, not just
self-inforced suggestions.

Imperative programs allow you to reach into objects and data structures
whenever you want, so it is not a huge deal if your code is somewhat
disorganized. With functional game design, we must be more careful about how
our programs are structured. In fact in Elm, all games will share the same
underlying structure.
<commit_msg>Fix typo: 'self-inforced' -> 'self-enforced'<commit_after>
import Website.Skeleton (skeleton)
import Window

port title : String
port title = "Making Pong"

main = lift (skeleton "Blog" content) Window.dimensions

content w = width (min 600 w) [markdown|

<style type="text/css">
p { text-align: justify }
pre { background-color: white;
      padding: 10px;
      border: 1px solid rgb(216, 221, 225);
      border-radius: 4px;
}
code > span.kw { color: #268BD2; }
code > span.dt { color: #268BD2; }
code > span.dv, code > span.bn, code > span.fl { color: #D33682; }
code > span.ch { color: #DC322F; }
code > span.st { color: #2AA198; }
code > span.co { color: #93A1A1; }
code > span.ot { color: #A57800; }
code > span.al { color: #CB4B16; font-weight: bold; }
code > span.fu { color: #268BD2; }
code > span.re { }
code > span.er { color: #D30102; font-weight: bold; }
</style>

<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center; font-size: 4em;">Making Pong</div>

This post has two major goals:

 1. Get you thinking about [Functional Reactive
    Programming](/learn/What-is-FRP.elm) (FRP) for games.
 2. Teach you how to make games with Elm.

In this post we will be looking into [Pong in Elm](/edit/examples/Intermediate/Pong.elm):
a functional game written in Elm, playable in any modern browser.

## Functional Game Design

Making games is historically a very imperative undertaking, so it has long
missed the benefits of purely functional programming. FRP makes it possible
to program rich user interactions without traditional imperative idioms.

By the end of this post we will have written Pong without any
imperative code. No global mutable state, no flipping pixels, no destructive
updates. In fact, Elm disallows all of these things at the language level.
So good design and safe coding practices are a requirement, not just
self-enforced suggestions.

Imperative programs allow you to reach into objects and data structures
whenever you want, so it is not a huge deal if your code is somewhat
disorganized. With functional game design, we must be more careful about how
our programs are structured. In fact in Elm, all games will share the same
underlying structure.

{'fraction_non_alphanumeric': 0.09713269615470105, 'fraction_numerical': 0.026672593909757725, 'mean_word_length': 4.160550458715596, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 40, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7420623', 'n_tokens_mistral': 1489, 'n_tokens_neox': 1374, 'n_words': 603}