Week11-Tic-Tac-Toe/Easy-3.css at main · Lhemingw/Week11-Tic-Tac-Toe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*
   Using CSS Grid to layout our board:
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

*/

.game--container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 300px;
    margin:  auto; /* centering grid */
}

/*
   Using flexbox to center content:
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
*/
.cell {
    border: 1px solid #443aac;
    display: flex;
    align-items: center; /* vertical center - (cross axis) */
    justify-content: center; /* horizontal center - (main axis) I have 100px for width/height.  This is for the making the cells.*/
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 1px #34053c;/* This section is the box shadow, that you really can not see, but see enough to know*/
    border: 1px solid #6a076b;/* This is the border of the game board along with pointer and font size*/
    cursor: pointer;
    font-size: 60px;
}
.cell img{
    max-width: 100%;/*  This is the cell for the photo I played with this and got the photo really small*/
    max-height: 100%;

}
.background{/*This is the background for the photos that is in the background, to cover all, no repeat, and 0 margin/padding*/
    background-image: url("./Photos/Background-image.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
  }

  .tile {/*This is the tile box for the tile*/
    color: currentColor;
    font-size: 2em;
    display: flex;
    justify-content: center;/* This is justify the context center and color and a box shadow*/
    align-items: center;
    color: rgba(255,0,0);
    box-shadow: #34053c;

  }
  /* styles.css */

#title{
    text-align: center;/* This is for the title*/
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
    color: rgba(255,0,0);
    box-shadow: #34053c;
  }
  h1 {
    color: indigo
  }
  #turn {/* This is for the turn it changes is blue, size, and box shadow*/
    text-align: center;
    padding: 10px;
    font-size: 30px;
    font-weight: bold;
    color: blue;
    /* Add box shadow here */
    box-shadow: 0 0 10px rgba(52, 5, 60, 0.7);
}
  /* styles.css */

/* Add a class to cells that are part of the winning combination */
.winning-cell {
    position: relative;
}

/* Add a pseudo-element to create the strike line */
.winning-cell::before {
    content: "";
    position: absolute;
    top: 50%; /* Position at the middle of the cell */
    left: 0;
    width: 100%;
    height: 4px; /* Adjust the line thickness */
    background-color: red; /* Adjust the line color */
    transform: translateY(-50%); /* Center the line vertically */
    z-index: -1; /* Place the line behind the cell content */
}

  .strike {  /* This is for the strike down below, I did not have a chance to work on it, afraid of breaking stuff*/
    position: absolute;
    background-color: darkred;
  }

  .strike-row-1 {
    width: 100%;
    height: 4px;
    top: 15%;
  }
  .strike-row-2 {
    width: 100%;
    height: 4px;
    top: 48%;
  }
  .strike-row-3 {
    width: 100%;
    height: 4px;
    top: 83%;
  }
  .strike-column-1 {
    height: 100%;
    width: 4px;
    left: 15%;
  }
  .strike-column-2 {
    height: 100%;
    width: 4px;
    left: 48%;
  }
  .strike-column-3 {
    height: 100%;
    width: 4px;
    left: 83%;
  }
  .strike-diagonal-1 {
    width: 90%;
    height: 4px;
    top: 50%;
    left: 5%;
    transform: skewY(45deg);
  }
  .strike-diagonal-2 {
    width: 90%;
    height: 4px;
    top: 50%;
    left: 5%;
    transform: skewY(-45deg);
  }