Trouble with the design aspect of Simon Game

I am trying my best to replicate the exact look of the Simon game. My design skills need to be improved.
My logic on solving the design issue was to create a div box with a border radius of 50% and divide the width by for which will be used for the buttons. Then I would use border-top-left-radius at 100 percent to mimic the look of the buttons. In my mind this should work, but the buttons do not quite right. If at all possible, can someone give me a hint or a suggestion on how I can improve.

Thanks.

I found that drawing in HTML was a nightmare without learning HTML canvas or HTML SVG, canvas is more flexible but it does not give you direct access to the DOM elements but SVG does give you the access.

Thank you so much I will try to learn that. I was not even aware it existed.

You shouldn’t have to be drawing anything at all in the simon game. All you need to do is change the background color in CSS.

@IsaacAbrahamson I thought so as well. But I’m having so much trouble getting the buttons to resemble the Simon game.

I’m looking at that, give me a second :smiley:

So currently you have the simon game divided into two halves, you called them button one and button two. You have these buttons with a margin on the right to move it to the left, like this:

The problem is that you need to place another button where you have the margin. So instead of having two buttons, think of having two rows on top of each other with two buttons inside of them like this:

<div class="simon">
  <div class="row">
    <div class="green1"></div>
    <div class="green2"></div>
  </div>
  <div class="row">
    <div class="blue1"></div>
    <div class="blue2"></div>
  </div>
</div>

For the rows to work properly, you will need to make them 100% width and 50% height. Then target the divs inside, and you can make them 50% width and 100% height. I see that you are using flexbox to center the simon game, you can also make the rows flexboxes, this will allow the buttons to float together like you want. This should fill up the entire simon game area. Then add the individual styles to the buttons:

.row {
  width: 100%;
  height: 50%;
  display: flex;
}

.row div {
  width: 50%;
  height: 100%;
}

.green1 {
  background: green;
  border-top-left-radius: 100%;
}

.green2 {
  background: lightgreen;
  border-top-right-radius: 100%;
}

.blue1 {
  background: blue;
  border-bottom-left-radius: 100%;
}

.blue2 {
  background: lightblue;
  border-bottom-right-radius: 100%;
}

Here you go:

You should be able to style the rest like you want to. Let me give you a tip for changing the color, you can use tinycolor.js to get a lighter version of the background color. You can check out its documentation for the darken and lighten funcitons below, or see it in action on my simon game!

simon.isaacabrahamson.com

1 Like

I see, well I used SVG for it , hardly no html or css, other than css manipulation from within the script:

@IsaacAbrahamson Perfect, this is exactly what I was looking for.

@Dereje1 wow that looks amazing. What link did you use to learn this magic?

Mostly that MDN link from above and just googling around for SVG practices, once you draw one of the buttons you can mirror/rotate the rest, but there are probably many ways to skin this cat as @IsaacAbrahamson has shown, likely my css skills were too limited and hence why I went with the SVG route, for the pomodoro clock I went with canvas