Web Dev Project

Problem & Purpose

I was already very familiar with web development by the time I took this class in my senior year of high school. One of the projects was to use SVG graphics in some way, with the example being a map. Around the same time I was playing a lot of Keep Talking and Nobody Explodes and ended up trying to memorize some of the modules. This project was combination of new features to make an interesting game.

Technical Decisions

I needed to use SVG for the project requirement but I also read about Web Components and thought it would be cool to just make custom HTML elements for each module. It would be like making my own little framework for constructing the game.

Web Components

Each module is a custom HTML element which can manage its own state and layout. The main bomb element manages the timer and strikes, and each module is responsible for its own logic. The modules communicate with the bomb by dispatching custom events.

Here's a simplified example of the HTML structure showing custom elements:

<ktane-bomb>
  <div class="module-container">
    <wires-module class="module">
      <!-- SVG paths for wires that can be clicked to cut -->
      <path class="wire w1" d="..." style="stroke: black;"></path>
      <path class="wire w2" d="..." style="stroke: blue;"></path>
    </wires-module>
    
    <timer-module>
      <p class="timer-number">2:30</p>
      <p class="strikes"></p>
    </timer-module>
    
    <keypad-module class="module">
      <!-- Grid of clickable symbol buttons -->
      <svg class="keypad-button smileyface">...</svg>
      <svg class="keypad-button dragon">...</svg>
      <svg class="keypad-button paragraph">...</svg>
    </keypad-module>
  </div>
			</ktane-bomb>

Each module is a self-contained web component that manages its own state and communicates with the main bomb through custom events. This makes the code very modular and easy to extend with new module types.