@andreabiagini5/applicazioni-e-servizi-web-project/client/assets/TutorialView-CyyiK9Wl.js

Project for Applicazioni e Servizi Web.

import{_ as n}from"./NavBar.vue_vue_type_script_setup_true_lang-DwmXh1aW.js";import{d as r,c as p,o as g,a as i,b as e,w as s,u as o,i as f,F as u,e as a,j as l}from"./index-HkHTkC0I.js";const c="/assets/blue%20topple%20before-CQjTScrW.png",d="/assets/blue%20topple%20after-BH59ZDiq.png",m="/assets/green%20topple%20before-BwUya_d9.png",h="/assets/green%20topple%20after-CppiTJm1.png",b="/assets/chain%20before-Dd1QBXyI.png",w="/assets/chain%20after-sEH4P985.png",y="/assets/tor%20before-CE0rhzTn.png",x="/assets/tor%20after-c3bHjo9z.png",A=r({__name:"TutorialView",setup(v){return(_,t)=>(g(),p(u,null,[i(n),t[11]||(t[11]=e("div",{class:"flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center px-3 mt-md-3"},[e("div",{class:"d-flex flex-column flex-md-row align-items-center mt-4 mt-md-0"},[e("h1",{class:"display-3 fw-bold text-uppercase mt-2 mt-md-0 ms-md-3 mb-4"},"tutorial")])],-1)),i(o(f),null,{default:s(()=>[t[3]||(t[3]=e("p",{class:"text-center"},"Welcome to the tutorial for Sandpiles!",-1)),t[4]||(t[4]=e("p",{class:"text-start"},[a(" In this brief tutorial you will learn the basic rules of the sandpiles game."),e("br"),a("Sandpiles is a two player game where each player takes turns placing sand grains on a 9x9 grid. The goal is to gain control of all of your opponent's piles."),e("br"),a("Every turn you place a grain of sand on one of your piles. Your piles are rappresented by the blue or green colored squares on the board. ")],-1)),t[5]||(t[5]=e("figure",{class:"figure"},[e("img",{src:c,class:"img-fluid",alt:"Example of a blue piles on the grid",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," The figure shows a section of the board with blue piles. One pile has 3 grains which means it is about to topple over. ")],-1)),t[6]||(t[6]=e("p",{class:"text-start"},[a(" The number of dots on the square rapresent the number of grains of sand in that pile."),e("br"),a("In the previous example your pile has 3 grains of sand."),e("br"),a("If you place a grain of sand on a pile that has 3 or more grains, it will collapse and distribute its grains to the adjacent piles."),e("br"),a("If the adiacent piles where empty, they will become new piles belonging to you, with one grain of sand each. ")],-1)),t[7]||(t[7]=e("figure",{class:"figure"},[e("img",{src:d,class:"img-fluid",alt:"Example of a collapsing pile with no neighboars",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," After placing a grain in the pile with 3 grains showed in the previous image, it would topple causing this new board state. ")],-1)),t[8]||(t[8]=e("p",{class:"text-start"},[a(" If the neighboring piles are not empty they each get added a grain."),e("br"),a("Also if a neighboring pile belongs to your opponent, aka it is green, then it is conquered by you, turning it blue."),e("br"),a("This is how you gain control of your opponent's piles, and eventually win the game! ")],-1)),i(o(l),null,{default:s(()=>t[0]||(t[0]=[e("figure",{class:"figure"},[e("img",{src:m,class:"img-fluid",alt:"Example of a collapsing pile with neighboars, before",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," A green pile is about to topple over, notice how it has blue and green neighbors. ")],-1),e("figure",{class:"figure"},[e("img",{src:h,class:"img-fluid",alt:"Example of a collapsing pile with neighboars, after",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," As the center pile has toppled over every neighbor gains an additional grain. Also all blue neighbors turn green. ")],-1)])),_:1,__:[0]}),t[9]||(t[9]=e("p",{class:"text-start"}," Keep in mind that a pile toppling over can cause a chain reaction, where multiple piles collapse in a single turn, so be careful when placing your grains of sand! ",-1)),i(o(l),null,{default:s(()=>t[1]||(t[1]=[e("figure",{class:"figure"},[e("img",{src:b,class:"img-fluid",alt:"Example of a chain reaction, before",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," If the blue player places a grain on the center pile, it will topple over and cause a chain reaction. ")],-1),e("figure",{class:"figure"},[e("img",{src:w,class:"img-fluid",alt:"Example of a chain reaction, after",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," Now the board has completely changed with a single move! ")],-1)])),_:1,__:[1]}),t[10]||(t[10]=e("p",{class:"text-start"},[a(" The board behaves like a torus (packman style), meaning that the edges are connected to each other, so if you topple a pile on the top edge, it will affect the bottom edge pile as well, and the same goes for the left and right edges."),e("br"),a("This means that you can use the edges to your advantage, for example by toppling a pile on the top edge to affect the bottom edge, or by placing a grain on the left edge to affect the right edge."),e("br"),a("This can be useful to create chain reactions or to gain control of your opponent's piles. ")],-1)),i(o(l),null,{default:s(()=>t[2]||(t[2]=[e("figure",{class:"figure"},[e("img",{src:y,class:"img-fluid",alt:"Example of toroidal effect, before",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," An edge pile is about to topple over, notice how it has a neighbor on the opposite edge. ")],-1),e("figure",{class:"figure"},[e("img",{src:x,class:"img-fluid",alt:"Example of toroidal effect, after",style:{"max-width":"50%"}}),e("figcaption",{class:"figure-caption"}," After the edge pile has toppled over, the opposite edge pile has been affected as well. ")],-1)])),_:1,__:[2]})]),_:1,__:[3,4,5,6,7,8,9,10]})],64))}});export{A as default};