Javier Cicchelli
9bcdaa697b
This PR contains all the work related to setting up this project as required to implement the [Assignment](https://repo.rock-n-code.com/rock-n-code/deep-linking-assignment/wiki/Assignment) on top, as intended. To summarise this work: - [x] created a new **Xcode** project; - [x] cloned the `Wikipedia` app and inserted it into the **Xcode** project; - [x] created the `Locations` app and also, its `Libraries` package; - [x] created the `Shared` package to share dependencies between the apps; - [x] added a `Makefile` file and implemented some **environment** and **help** commands. Co-authored-by: Javier Cicchelli <javier@rock-n-code.com> Reviewed-on: rock-n-code/deep-linking-assignment#1
212 lines
5.1 KiB
Ruby
Executable File
212 lines
5.1 KiB
Ruby
Executable File
#!/usr/bin/env ruby
|
|
# generates the HTML for the random dice button
|
|
|
|
output = "<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
|
<!-- This file is generated by scripts/generate_dice_roll_html.rb. Don't try to edit directly -->
|
|
<!-- %1$@ should be replaced with the button background color -->
|
|
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
|
|
|
<html>
|
|
<head>
|
|
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no\">
|
|
<style>
|
|
body {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
#container {
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 8px;
|
|
height: 28px;
|
|
width: 28px;
|
|
padding: 0 !important;
|
|
perspective: 1000px;
|
|
-webkit-perspective: 1000px;
|
|
}
|
|
|
|
#dice {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
height: 100%;
|
|
width: 100%;
|
|
-webkit-transform: translateZ(-19px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
|
|
#dice > div {
|
|
backface-visibility: hidden;
|
|
height: 28px;
|
|
width: 28px;
|
|
position: absolute;
|
|
background: #FFFFFF;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#dice > div > span { /*die dot styling */
|
|
position: absolute;
|
|
background: #%1$@;
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 50%;
|
|
-webkit-transform: translate3d(-50%, -50%, 0);
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.one {
|
|
-webkit-transform: rotateY(0deg) translateZ(11px);
|
|
}
|
|
|
|
.two {
|
|
-webkit-transform: rotateX(180deg) translateZ(11px);
|
|
}
|
|
|
|
.three {
|
|
-webkit-transform: rotateY(90deg) translateZ(11px);
|
|
}
|
|
|
|
.four {
|
|
-webkit-transform: rotateY(-90deg) translateZ(11px);
|
|
}
|
|
|
|
.five {
|
|
-webkit-transform: rotateX(90deg) translateZ(11px);
|
|
}
|
|
|
|
.six {
|
|
-webkit-transform: rotateX(-90deg) translateZ(11px);
|
|
}
|
|
|
|
.one span, .three span:nth-child(2), .five span:nth-child(5) {
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.two span:nth-child(1), .three span:nth-child(1), .four span:nth-child(1), .five span:nth-child(1), .six span:nth-child(1) {
|
|
top: 25%;
|
|
left: 25%;
|
|
}
|
|
|
|
.two span:nth-child(2), .three span:nth-child(3), .four span:nth-child(4), .five span:nth-child(4), .six span:nth-child(6) {
|
|
top: 75%;
|
|
left: 75%;
|
|
}
|
|
|
|
.four span:nth-child(2), .five span:nth-child(2), .six span:nth-child(2) {
|
|
top: 25%;
|
|
left: 75%;
|
|
}
|
|
|
|
.four span:nth-child(3), .five span:nth-child(3), .six span:nth-child(5) {
|
|
top: 75%;
|
|
left: 25%;
|
|
}
|
|
|
|
.six span:nth-child(3) {
|
|
top: 50%;
|
|
left: 25%;
|
|
}
|
|
|
|
.six span:nth-child(4) {
|
|
top: 50%;
|
|
left: 75%;
|
|
}
|
|
"
|
|
|
|
rx = [ 0, 0, 0, 0, -90, 90]
|
|
ry = [ 0, 180, -90, 90, 0, 0]
|
|
rz = 0
|
|
tz = -19
|
|
|
|
mxes = [1, 1, -1, -1]
|
|
myes = [1, -1, -1, 1]
|
|
|
|
for i in 0..5
|
|
side = i+1
|
|
output << "
|
|
#dice.rolled-#{side} {
|
|
-webkit-transform: translateZ(#{tz[i]}px) rotateX(#{rx[i]}deg) rotateY(#{ry[i]}deg) rotateZ(#{rz}deg);
|
|
}"
|
|
for j in 0..5
|
|
next if i == j
|
|
to_side = j+1
|
|
for v in 0..3
|
|
mx = mxes[v]
|
|
my = myes[v]
|
|
variant = v + 1
|
|
output << "
|
|
|
|
#dice.roll-#{side}-#{to_side}-#{variant} {
|
|
-webkit-animation: roll-keyframes-#{side}-#{to_side}-#{variant} 1s 1 ease-in-out forwards;
|
|
}
|
|
|
|
@-webkit-keyframes roll-keyframes-#{side}-#{to_side}-#{variant} {
|
|
0% {
|
|
-webkit-transform: translateZ(#{tz}px) rotateX(#{rx[i]}deg) rotateY(#{ry[i]}deg) rotateZ(#{rz}deg);
|
|
}
|
|
80% {
|
|
-webkit-transform: translateZ(-500px) rotateX(#{mx*360 + rx[j]}deg) rotateY(#{my*360 + ry[j]}deg) rotateZ(#{rz}deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateZ(#{tz}px) rotateX(#{mx*360 + rx[j]}deg) rotateY(#{my*360 + ry[j]}deg) rotateZ(#{rz}deg);
|
|
}
|
|
}"
|
|
# 20% {
|
|
# -webkit-transform: translateZ(-125px) rotateX(#{mx*90 + rx[j]}deg) rotateY(#{my*90 + ry[j]}deg) rotateZ(#{rz}deg);
|
|
# }
|
|
# 40% {
|
|
# -webkit-transform: translateZ(-250px) rotateX(#{mx*180 + rx[j]}deg) rotateY(#{my*180 + ry[j]}deg) rotateZ(#{rz}deg);
|
|
# }
|
|
# 60% {
|
|
# -webkit-transform: translateZ(-375px) rotateX(#{mx*270 + rx[j]}deg) rotateY(#{my*270 + ry[j]}deg) rotateZ(#{rz}deg);
|
|
# }
|
|
end
|
|
|
|
end
|
|
end
|
|
|
|
output << "
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id=\"container\">
|
|
<div id=\"dice\" class=\"rolled-1\">
|
|
<div class=\"one\">
|
|
<span></span>
|
|
</div>
|
|
<div class=\"two\">
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class=\"three\">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class=\"four\">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class=\"five\">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class=\"six\">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
"
|
|
|
|
puts output |