Results 1 to 2 of 2

Thread: [RESOLVED] CSS Tic-Tac-Toe

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Resolved [RESOLVED] CSS Tic-Tac-Toe

    I'm trying to create a CSS PvCPU tic-tac-toe with minimal JavaScript. To do this I want to create a custom Checkbox that is visualized by an <svg> tag where checked is X and intermediate is O.

    Right now I'm having an issue with toggling the checked <svg> tag. This is the code that I'm using:
    Code:
    <label>
      <input id="00" type="checkbox" />
      <!-- hover -->
      <svg class="hoverX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
        <rect width="140" height="140" ry="20" style="fill:rgb(255,255,255);stroke-width:10" />
        <line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(220,104,90);stroke-width:10" />
        <line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(220,104,90);stroke-width:10" />
      </svg>
      
      <!-- checked -->  
      <svg class="checkedX" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
        <rect width="140" height="140" ry="20" style="fill:rgb(220,104,90);stroke-width:10" />
        <line x1="20" y1="20" x2="120" y2="120" style="stroke:rgb(255,255,255);stroke-width:10" />
        <line x1="20" y1="120" x2="120" y2="20" style="stroke:rgb(255,255,255);stroke-width:10" />
      </svg>
      <svg class="checkedO" xmlns="http://www.w3.org/2000/svg" height="140" width="140">
        <rect width="140" height="140" ry="20" style="fill:rgb(120,190,197);stroke-width:10" />
        <circle cx="70" cy="70" r="70" stroke="rgb(255,255,255)" stroke-width="2" fill="transparent" />
      </svg>
    </label>
    
    label {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      background: #fff;
      border: 1px solid #888;
      border-radius: 20px;
      padding: 0px;
      height: 140px;
      width: 140px;
    }
    
    label input[type="checkbox"] {
      display: none;
    }
    
    /* unchecked */
    label input[type="checkbox"] ~ svg {
      display: none;
    }
    
    /* hover and checked(X) */
    label:hover input[type="checkbox"]:not([disabled]) + svg.hoverX {
      display: inline-block;
    }
    
    label:hover input[type="checkbox"]:disabled + svg.checkedX {
      display: inline-block;
    }
    
    /* unchecked(O) */
    label input[type="checkbox"]:indeterminate + svg + svg {
      display: inline-block;
    }
    Fiddle: https://codepen.io/anon/pen/VzjbQo

    Right now it'll display the hovered X, but as soon as I click on the Checkbox it will no longer display the hovered X on hover nor will it display the checked X. I'm not exactly sure what is causing this.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,715

    Re: [RESOLVED] CSS Tic-Tac-Toe

    I figured it out, I was using the + selector instead of the ~ selector in the following styling:
    Code:
    label:hover input[type="checkbox"]:disabled + svg.checkedX
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width