Svelte JS Magic the Gathering App

Code

REPL Example

Github MTG Code

App Component

<script>
  import { createEventDispatcher } from "svelte";
  export let score;
  export let winningText;
  export let won;
  export let fontColor;
  export let gameOver = false;
  const dispatch = createEventDispatcher();
  function minus() {
    dispatch("points", -1);
  }
  function plus() {
    dispatch("points", 1);
  }
</script>

<style>
  .player {
    flex-grow: 1;
  }
  .plus {
    background-color: seagreen;
  }
  .minus {
    background-color: brown;
  }
  button[disabled] {
    background-color: gray;
    pointer-events: none;
  }
  button {
    font-size: 20px;
    border-radius: 3px;
    width: 40px;
    color: white;
    font-family: monospace;
    font-weight: bold;
  }
</style>

<div style="color: {fontColor}" class="player">
  <h2>{score}</h2>
  <button on:click={plus} disabled={gameOver} class="plus">+</button>
  <button on:click={minus} disabled={gameOver} class="minus">-</button>
  {#if won}
    <h2>{winningText}</h2>
  {/if}
</div>

Player Component Code

<script>
  import { createEventDispatcher } from "svelte";
  export let score;
  export let winningText;
  export let won;
  export let fontColor;
  export let gameOver = false;
  const dispatch = createEventDispatcher();
  function minus() {
    dispatch("points", -1);
  }
  function plus() {
    dispatch("points", 1);
  }
</script>

<style>
  .player {
    flex-grow: 1;
  }
  .plus {
    background-color: seagreen;
  }
  .minus {
    background-color: brown;
  }
  button[disabled] {
    background-color: gray;
    pointer-events: none;
  }
  button {
    font-size: 20px;
    border-radius: 3px;
    width: 40px;
    color: white;
    font-family: monospace;
    font-weight: bold;
  }
</style>

<div style="color: {fontColor}" class="player">
  <h2>{score}</h2>
  <button on:click={plus} disabled={gameOver} class="plus">+</button>
  <button on:click={minus} disabled={gameOver} class="minus">-</button>
  {#if won}
    <h2>{winningText}</h2>
  {/if}
</div>
© 2020 GitHub, Inc.

Demo

We are building a magic the gathering counter app. It allows the user to keep track of the score of their magic game. Here is the working demo

demo

Revelant Tutorials

Requirements