Skip to content

Commit 7c5da7c

Browse files
MrCurtisMrCurtis
committed
Inspecting the Starter Code.
1 parent eb298f4 commit 7c5da7c

File tree

3 files changed

+155
-0
lines changed

3 files changed

+155
-0
lines changed

‎react_learn/index-dev.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>The Scala.js Tutorial</title>
6+
<link rel="stylesheet" href="index.css">
7+
</head>
8+
<body>
9+
<div id="errors" style="
10+
background: #c00;
11+
color: #fff;
12+
display: none;
13+
margin: -20px -20px 20px;
14+
padding: 20px;
15+
white-space: pre-wrap;
16+
"></div>
17+
<div id="root"></div>
18+
<!-- Include Scala.js compiled code -->
19+
<script type="text/javascript" src="./target/scala-2.12/scalajs-bundler/main/scala-js-tutorial-fastopt-bundle.js"></script>
20+
</body>
21+
</html>

‎react_learn/index.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
font: 14px "Century Gothic", Futura, sans-serif;
3+
margin: 20px;
4+
}
5+
6+
ol, ul {
7+
padding-left: 30px;
8+
}
9+
10+
.board-row:after {
11+
clear: both;
12+
content: "";
13+
display: table;
14+
}
15+
16+
.status {
17+
margin-bottom: 10px;
18+
}
19+
20+
.square {
21+
background: #fff;
22+
border: 1px solid #999;
23+
float: left;
24+
font-size: 24px;
25+
font-weight: bold;
26+
line-height: 34px;
27+
height: 34px;
28+
margin-right: -1px;
29+
margin-top: -1px;
30+
padding: 0;
31+
text-align: center;
32+
width: 34px;
33+
}
34+
35+
.square:focus {
36+
outline: none;
37+
}
38+
39+
.kbd-navigation .square:focus {
40+
background: #ddd;
41+
}
42+
43+
.game {
44+
display: flex;
45+
flex-direction: row;
46+
}
47+
48+
.game-info {
49+
margin-left: 20px;
50+
}

‎react_learn/src/main/scala/tutorial/webapp/TutorialApp.scala

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
package tutorial.webapp
2+
3+
import japgolly.scalajs.react._
4+
import japgolly.scalajs.react.vdom.html_<^._
5+
import org.scalajs.dom
6+
7+
8+
object Square {
9+
val component = ScalaComponent.builder[Unit]("Square")
10+
.renderStatic(
11+
<.button(^.cls := "square")
12+
)
13+
.build
14+
15+
def apply() = component()
16+
}
17+
18+
19+
object Board {
20+
def renderSquare(i: Int) = Square()
21+
22+
val component = ScalaComponent.builder[Unit]("Board")
23+
.renderStatic(
24+
{
25+
val status = "Next player: X"
26+
<.div(
27+
<.div(
28+
^.cls := "status",
29+
status,
30+
),
31+
<.div(
32+
^.cls := "board-row",
33+
renderSquare(0),
34+
renderSquare(1),
35+
renderSquare(2)
36+
),
37+
<.div(
38+
^.cls := "board-row",
39+
renderSquare(3),
40+
renderSquare(4),
41+
renderSquare(5)
42+
),
43+
<.div(
44+
^.cls := "board-row",
45+
renderSquare(6),
46+
renderSquare(7),
47+
renderSquare(8)
48+
)
49+
)
50+
}
51+
)
52+
.build
53+
54+
def apply() = component()
55+
}
56+
57+
58+
object Game {
59+
val component = ScalaComponent.builder[Unit]("Game")
60+
.renderStatic(
61+
<.div(
62+
^.cls := "game",
63+
<.div(
64+
^.cls := "game-board",
65+
Board(),
66+
),
67+
<.div(
68+
<.div(/*Status*/),
69+
<.ol(/* TODO */),
70+
),
71+
)
72+
)
73+
.build
74+
75+
def apply() = component()
76+
}
77+
78+
79+
object TutorialApp {
80+
def main(args: Array[String]): Unit = {
81+
Game().renderIntoDOM(dom.document.getElementById("root"))
82+
}
83+
84+
}

0 commit comments

Comments
 (0)