# Design me an UI(rough sketch) for 23 toothpicks game

**URL:** https://forum.kirupa.com/t/design-me-an-ui-rough-sketch-for-23-toothpicks-game/659819
**Category:** Uncategorized
**Created:** [July 4, 2023, 5:33pm UTC](https://forum.kirupa.com/t/design-me-an-ui-rough-sketch-for-23-toothpicks-game/659819 "2023-07-04T17:33:41Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)
#### Post date: [July 4, 2023, 5:33pm UTC](https://forum.kirupa.com/t/design-me-an-ui-rough-sketch-for-23-toothpicks-game/659819/1 "2023-07-04T17:33:41Z")

</div>

[https://cplusplus.com/forum/beginner/174256/](https://cplusplus.com/forum/beginner/174256/)  
This is the problem. I’ve solved it using javascript console.log statements.  
I want to write an application with an UI with html,css and javascript now.  
But I’m not sure how the UI should look? Can you make a rough sketch for me?

```auto
let total_toothpicks = 23;
let pass_toothpick_to_computer;
let counter = 0;
let currentPlayer = "human";
function switchPlayer(currentPlayer) {
  return (currentPlayer = currentPlayer === "human" ? "computer" : "human"); //added a return statement here
}

function playGame(currentPlayer) {
  if (currentPlayer === "human") {
    counter++;
    console.log(counter + "human iteration");
    let user_choosed_toothpicks = Number(
      prompt("Pick 1,2 or 3 toothpicks at a time")
    );
    total_toothpicks -= user_choosed_toothpicks;
    console.log("Human choosed" + user_choosed_toothpicks + "toothpicks");
    console.log("total number of toothpicks=", total_toothpicks);
    pass_toothpick_to_computer = user_choosed_toothpicks;
    if (total_toothpicks === 0) {
      console.log("Human loses the game");
    }
    currentPlayer = "computer";
  }
  if (currentPlayer === "computer") {
    counter++;
    console.log(counter + "computer iteration");
    if (total_toothpicks > 4) {
      total_toothpicks = total_toothpicks - 4 + pass_toothpick_to_computer;
      console.log(
        "Computer takes" + Number(4 - pass_toothpick_to_computer) + "toothpicks"
      );

      console.log("total number of toothpicks=", total_toothpicks);
    } else if (total_toothpicks >= 2 && total_toothpicks <= 4) {
      switch (total_toothpicks) {
        case 2:
          total_toothpicks -= 1;
          console.log("Computer takes 1 toothpicks");

          console.log("total number of toothpicks=", total_toothpicks);
          break;
        case 3:
          total_toothpicks -= 2;
          console.log("Computer takes 2 toothpicks");
          console.log("total number of toothpicks=", total_toothpicks);
          break;
        case 4:
          total_toothpicks -= 3;
          console.log("Computer takes 3 toothpicks");
          console.log("total number of toothpicks=", total_toothpicks);
          break;
        default:
          break;
      }
      if (total_toothpicks === 0) {
        total_toothpicks -= 1;
        console.log("Computer loses the game");
      }
    }
    currentPlayer = "human";
  }
}
while (total_toothpicks > 0) {
  playGame(currentPlayer);
}

```

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 5, 2023, 1:38pm UTC](https://forum.kirupa.com/t/design-me-an-ui-rough-sketch-for-23-toothpicks-game/659819/2 "2023-07-05T13:38:41Z")

</div>

For UI inspiration, go to:

> **[Dribbble - Discover the World’s Top Designers & Creative Professionals](https://dribbble.com)**
>
> Find Top Designers & Creative Professionals on Dribbble. We are where designers gain inspiration, feedback, community, and jobs. Your best resource to discover and connect with designers worldwide.

A lot of them will be overly stylicized, so use your best judgment 😀