Skip to content

Commit 041068f

Browse files
d-volutiond-volution
committed
added demo for dartulator
1 parent 9f69b2b commit 041068f

7 files changed

+246
-0
lines changed

‎demo/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# dartulator
2+
3+
- ## Aufgaben (Meilensteine, Tasks)
4+
5+
1. setup repository: in arbeit
6+
2. Hauptansicht MVP (ganz einfach, version 1) erstellen: nicht begonnen
7+
- simulierte Dartscheibe
8+
- klicken auf einzelne Felder -> JS läuft
9+
10+
- ## Organisationsregeln (empfohlen von Don)
11+
- ### Git Branches:
12+
1. am `main` oder `master` Branch nur funktionierende sinnvolle Commits, keine Experimente usw.
13+
2. jeder branch (außer `master`, `main`) hat die Struktur `{ART}-{JAHR}-{MONAT}-{LAUFENDE NUMMER}-{BEZEICHNUNG}`
14+
- z.B. `feature-22-03-001-bei-60-in-1-blinken`, `documentation-22-03-001-user-manual`, `bugfix-22-03-001-scheibe-nach-neuladen-verkehrt`
15+
3. nur Kleinbuchstaben, Ziffern und `-` im Branch-Name (kein `--`, `.`, `_`, ` `, ...)
16+
4. die laufende Nummer fängt jedes Monat von vorne an
17+
5. Branch-Art `experimental` für Coding-Versuche
18+
19+
- ### CSS Class- & ID-Names
20+
- (kann nocht gemacht werden)
21+
- z.B. nur `-` oder nur `_` im Name, nur Kleinbuchstaben

‎demo/basic.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
body {
2+
background-color: grey;
3+
font-family: 'Avenier', 'Arial', 'Helvetika';
4+
5+
min-height: 100vh;
6+
margin: 0;
7+
}
8+
9+
main {
10+
display: block;
11+
min-height: 10vh;
12+
}
13+
14+
main > div {
15+
display:inline-block;
16+
}
17+
18+
.border-red {
19+
border: 1px red solid;
20+
}
21+
22+
23+
.green-bgnd {
24+
background-color: #040;
25+
}
26+
27+
.dark-grey-bgnd {
28+
background-color: #222;
29+
}
30+
31+
.brown-bgnd {
32+
background-color: rgb(100, 62, 11);
33+
}
34+
35+
.red-text {
36+
color: red;
37+
}
38+
39+
.div-size500 {
40+
width: 500px;
41+
height: 500px;
42+
}

‎demo/ellipses-demo1.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ellipses Demo 1</title>
6+
<!--<base href="/">-->
7+
<link rel="icon" type="image/x-icon" href="favicon"> <!-- favicon -->
8+
<link rel="stylesheet" href="basic.css"> <!-- stylesheet -->
9+
<link rel="stylesheet" href="shapes.css"> <!-- stylesheet -->
10+
<script type="text/javascript" src="script.js">console.log('loading site ...');</script>
11+
</head>
12+
<body>
13+
<header>
14+
<nav>
15+
<!-- navbar -->
16+
</nav>
17+
</header>
18+
19+
<main>
20+
<!-- main section -->
21+
<h1>1. Kreis aus Div</h1>
22+
<span>
23+
verwendet css "border-radius: 50%"
24+
</span>
25+
26+
<br>
27+
<span class="red-text">GRAFIK:</span><br>
28+
<div class="border-red">
29+
<div class="brown-bgnd div-size500 shape-circle1" onclick="console.log('demo1: clicked on circle')"></div>
30+
</div>
31+
32+
33+
</main>
34+
</body>
35+
</html>

‎demo/polygons-demo1.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Polygon Demo 1</title>
6+
<!--<base href="/">-->
7+
<link rel="icon" type="image/x-icon" href="favicon"> <!-- favicon -->
8+
<link rel="stylesheet" href="basic.css"> <!-- stylesheet -->
9+
<link rel="stylesheet" href="shapes.css"> <!-- stylesheet -->
10+
<script type="text/javascript" src="script.js">console.log('loading site ...');</script>
11+
</head>
12+
<body>
13+
<header>
14+
<nav>
15+
<!-- navbar -->
16+
</nav>
17+
</header>
18+
19+
<main>
20+
<!-- main section -->
21+
<h1>1. Polygon aus Div</h1>
22+
<span>
23+
Polygon (Vieleck) aus den Ecken {0, 0} (links oben), {100%, 0} (rechts oben), {100%, 100%} (rechts unten), {0, 100%} (links unten), {50%, 50%} (Mitte)
24+
</span>
25+
26+
<br>
27+
<span class="red-text">GRAFIK:</span><br>
28+
<div class="border-red">
29+
<div class="brown-bgnd div-size500 shape-demo1" onclick="console.log('demo1: clicked on poly 1')"></div>
30+
</div>
31+
32+
33+
34+
<h1>2. Dreieck aus Div</h1>
35+
<span>
36+
Polygon aus den Ecken {41.877%, 0} (links oben), {58.123%, 0} (rechts oben), {50%, 50%} (Mitte)
37+
</span>
38+
39+
<br>
40+
<span class="red-text">GRAFIK:</span><br>
41+
<div class="border-red">
42+
<div class="brown-bgnd div-size500 shape-dreieck1" onclick="console.log('demo1: clicked on poly 2')"></div>
43+
</div>
44+
45+
46+
</main>
47+
</body>
48+
</html>

‎demo/polygons-demo2-script.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
3+
function onClick(number, ring) {
4+
console.log(`clicked on ${number} ${ring}`);
5+
}
6+
7+
8+
9+
10+
function generatePolygon1() {
11+
var wrapper = document.getElementById('polygon-wrapper-1');
12+
13+
var innerHtml = '';
14+
for (let i = 0; i < 20; i++) {
15+
innerHtml += `
16+
<div class="${i % 2 ? 'brown-bgnd' : 'dark-grey-bgnd'} div-size500 shape-dreieck1" style="transform: rotate(${18 * i}deg);" onclick="onClick(${i}, 0)"></div>\n
17+
`;
18+
}
19+
20+
wrapper.innerHTML = innerHtml;
21+
}
22+
23+
24+
function init() {
25+
generatePolygon1();
26+
}

‎demo/polygons-demo2.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Polygon Demo 2</title>
6+
<!--<base href="/">-->
7+
<link rel="icon" type="image/x-icon" href="favicon"> <!-- favicon -->
8+
<link rel="stylesheet" href="basic.css"> <!-- stylesheet -->
9+
<link rel="stylesheet" href="shapes.css"> <!-- stylesheet -->
10+
<script type="text/javascript" src="polygons-demo2-script.js">console.log('loading site ...');</script>
11+
</head>
12+
<body>
13+
<header>
14+
<nav>
15+
<!-- navbar -->
16+
</nav>
17+
</header>
18+
19+
<main>
20+
<!-- main section -->
21+
<h1>1. Dreieck 45° gedreht mit css</h1>
22+
<span>
23+
css property "transform: rotate(45deg)",
24+
</span><br>
25+
26+
<div class="border-red">
27+
<div class="brown-bgnd div-size500 shape-dreieck1 rotate-45deg" onclick="console.log('demo1: clicked on poly 1')"></div>
28+
</div>
29+
30+
31+
32+
<h1>2. 20 Dreiecke gedreht und &uuml;berlappend</h1>
33+
<span>
34+
erzeugt mit JS Funktion "generatePolygon1", mit verschiedener Background-Color, jeweils gedreht um Drehung um 18° voneinander
35+
</span><br>
36+
37+
<div class="polygon-wrapper" id="polygon-wrapper-1"></div>
38+
39+
</main>
40+
<script>
41+
init();
42+
</script>
43+
</body>
44+
</html>

‎demo/shapes.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
.polygon-wrapper {
3+
position: relative;
4+
}
5+
6+
.polygon-wrapper > div {
7+
position: absolute;
8+
top: 0;
9+
}
10+
11+
.shape-demo1 {
12+
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%);
13+
}
14+
15+
.shape-dreieck1 {
16+
clip-path: polygon(41.877% 0, 58.123% 0, 50% 50%);
17+
}
18+
19+
.shape-circle1 {
20+
border-radius: 50%;
21+
}
22+
23+
24+
25+
.rotate-45deg {
26+
transform: rotate(45deg);
27+
}
28+
29+
30+

0 commit comments

Comments
 (0)