Inizio versione segnapunti con vue3 vite e PWA.

per adesso permette solo di aggiungere e togliere punti.
tiene conto delle formazioni ma non le fisualizza.
il fullscreen e il landscape devono essere fatti manualmente
sto guardando come poterlo fare con PWA o javascript.

src/style.css

@@ -0,0 +1,77 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  touch-action: pan-x pan-y;
+  height: 100% 
+}
+
+body {
+  margin: 0;
+  place-items: center;
+  min-width: 320px;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #000;
+}
+
+button {
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 8px;
+  border: 1px solid #fff;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #fff;
+  background-color: #000;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+  background-color: #333;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+#app {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.campo {
+  user-select: none;
+  width: 100%;
+  display: table;
+  color: #fff;
+}
+.hea {
+  float: left;
+  width: 50%;
+  font-size: xx-large;
+}
+.tal {
+  text-align: left;
+}
+.tar {
+  text-align: right;
+}
+.bot {
+  float: left;
+  width: 50%;
+  margin-top: 10px;
+  background-color: #000;
+}
+.col {
+  float: left;
+  font-size: 60vh;
+  width: 50%;
+}
+.home {
+  background-color: #00f;
+}
+.guest {
+  background-color: #f00;
+}