Terminology and Concepts to look out for

Playing Canvas · NPC · Non-Playable Component · noun + prepositional phrase · adjective · Folder 2 · Folder 3 · form-as-repo

Relevance to Me

Yesterday you filled in Folder 1 (Overview) of the Google Form that is your project's repo. Today you build the stage your game is played on — Folder 2, the Playing Canvas — and then the things that sit on it and never move: Folder 3, the NPCs. The canvas is the checker board. The NPCs are the markings printed on it. Neither one is a checker.

And today you meet MuggsOfVibes, the tool that compiles your writing into a working web page. Nothing renders in it until your canvas is described — no stage, nowhere to put anything.

Every NPC you name today gets two lines in the form. On the HTML line, a noun with a prepositional phrase — what it IS and where it sits. On the CSS line, an adjective — how it looks. One pair of lines per element.

Board Question

Chromebooks open to /vibes — click the link on Deck 2. No code, no password. The tool is open during class and closed outside it. The Google Form on the right pane of Deck 2 is your project's repo — use "Edit your response" to reopen the response you started yesterday. Paste your Folder 1 answers into the tool. Then: Folder 2 first — size and shape, background, position, edge, regions. Compile and look at your empty stage. Then Folder 3 — Elements 1, 2 and 3, each with an HTML line and a CSS line. When it looks right, commit back to the form. Copy each folder header, paste into the matching field, submit. The tool forgets; the form remembers.

Yesterday you filled Folder 1 of your project repo — the pitch, the win condition, the lose condition, the mood. Today you build the stage. And today you meet MuggsOfVibes, the tool that turns your writing into a working web page.

Two folders today. They are not the same thing.

Folder 2 is the Playing Canvas. The stage itself. The play area where the action happens — the "checker board." There is exactly one of them in your game, and everything else sits inside it.

Folder 3 is the NPCs. Non-Playable Components. The parts of the screen that sit on the stage and never change. A title banner. A border. The word "SCORE:" beside the number.

The canvas is the board. The NPCs are the markings printed on the board. Neither of them is a checker.

Folder 2 first — nothing renders without it.

The tool will refuse to compile until your Playing Canvas is described. This is not a bug and it is not a punishment. Without a canvas the model has nothing to render into. There is no stage, so there is nowhere to put anything.

Your canvas has to answer five questions. Leave one out and the model picks for you — and what it picks will not be what you meant.

1. SIZE AND SHAPE — what shape, and how much of the screen does it take? A square, a wide rectangle, a tall narrow one. Filling the window, most of the screen, about half, a small window in the middle. "A wide rectangle that fills most of the screen." No numbers needed — shape and coverage are enough.
2. BACKGROUND — what color, or what pattern?
3. POSITION — where does it sit? "Centered on the page."
4. EDGE — is there a visible border? What kind?
5. REGIONS — is the canvas one single area, or is it divided into parts? "One single play area" is a perfectly good answer. So is "a thin strip across the top for the score, and the rest is the play field."

A region is still part of the canvas. The strip across the top is Folder 2. The word SCORE: printed inside that strip is an NPC, Folder 3. The stage can have areas marked off on it; things still sit on it.

Write all five and compile. You will see an empty, styled rectangle. That is correct. That is your stage, and there is nothing on it yet.

What an NPC is.

Here is the whole test, and it is one question:

> Does it change during play? > No → it is an NPC. Folder 3. > Yes → it is an Interactive Element. Folder 4. That's Thursday.

NPCs look like this:

• A title banner across the top of the play area
• The word SCORE: beside the number
• A frame around the score
• A decorative border along the edge of the canvas
• A line of instructions under the play area
• A wall the ball bounces off but that never moves or breaks

These are not NPCs. They belong to Thursday:

• A paddle — it moves
• A ball — it moves
• Bricks — they disappear when hit
• A Start button — it reacts to a click
• The score number — it counts up

Read that last pair again. The word SCORE: is an NPC. The number next to it is not. The label never changes; the value changes constantly. They sit side by side on the screen and they live in different folders, because they are different kinds of thing. Same for LIVES: and the count beside it.

And the wall is the one that catches people. A wall the ball bounces off is doing something in the game — but the wall itself never moves and never breaks. The ball's behavior mentions the wall. The wall just exists. NPC.

Two lines per NPC.

Each element in Folder 3 gets two lines in the form, paired.

- HTML — a noun with a prepositional phrase. What it is and where it sits. No adjectives. No verbs. "A title banner, across the top of the play area, above the score." - CSS — adjectives. How it looks. Color, size, font, shape. "Large, bold, red, retro font."

If you leave the CSS line blank, that element comes back a plain grey box. The tool will not pick a nice color for you. An element you styled looks designed; an element you did not looks unfinished — on purpose, so you can see exactly where your writing ran out.

The tool.

Click the MuggsOfVibes link on the right-hand deck. There is no code and no password — the tool is open during class and closed outside it.

You will see a file tree in the Explorer sidebar that matches your form exactly:

📄 game-name.md                      → form: 1) NAME YOUR GAME
📁 folder-1-overview-and-logic/      → form: FOLDER 1
📁 folder-2-playing-canvas/          → form: FOLDER 2
📁 folder-3-non-playable-components/ → form: FOLDER 3
📁 folder-4-scripts/                 → form: FOLDER: SCRIPTS

Click a folder to expand it. Click a file to open it. Type in the editor pane.

At the bottom is one button, and its label tells you what the compile will actually produce:

• Compile canvas only — Folder 2 is filled, Folders 3 and 4 are empty. You get a visible, empty stage.
• Compile (not yet playable) — Folder 3 has NPCs. You get the stage with its furniture on it. Nothing moves. That is not a bug.
• Compile — Folder 4 has behavior. The game plays. That is Thursday.

Today you are aiming for the middle one.

The tool forgets. The form remembers.

Everything you type here dies when the tab closes. Nothing is saved to your account, because you do not have one.

Copy each folder back into your form before you leave. Every folder header has a Copy button. Click it, open your form, paste into the matching field, submit with "Edit your response." That is your commit. The form is your repo; every save is a commit.

Compiling is not the work.

The tool will stop you if you hammer it. Two compiles back to back, or six in five minutes, and it tells you to take a break. Compile with nothing changed since last time and it refuses outright — it would build the exact same page.

This is deliberate. If the screen is not what you wanted, the fix is in your writing, not in pressing the button again.

Today's job.

1. Paste your Folder 1 answers from the form into the tool.
2. Write Folder 2 — all five canvas properties. Compile. See your empty stage.
3. Write Folder 3 — Elements 1, 2 and 3, each with an HTML line and a CSS line. Compile again.
4. Copy Folder 2 and Folder 3 back into the form. Submit.

Tomorrow: Elements 4 and 5, and the five-element minimum.

One more thing. This is a school. Design school-safe games — no violence, no weapons, no gore. If you love zombies, build Hydro Zombies: you spray them with water, they go calm and walk away, hydrated. The challenge can stay. Swap the language of harm for a gentler action.