Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions cra-hive/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions cra-hive/src/client/components/WelcomeInsect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export default function WelcomeInsect() {
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Stone
hex={HEX.Hex(0, 0)}
stone={ {"team": "white", "insect": "bee"}}
/>
hex={new HEX.Hex(0, 0)}
stone={{ "team": "white", "insect": "bee" }}
/>
</Canvas>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions cra-hive/src/client/lab/BackgroundCanvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { State } from '../../shared/model/state'


const orientation = HEX.orientation_pointy;
const layout = HEX.Layout(orientation, HEX.Point(10, 10), HEX.Point(500, 250))
const layout = HEX.Layout(orientation, new HEX.Point(10, 10), new HEX.Point(500, 250))

export default function BackgroundCanvas() {
const state = new State();
Expand All @@ -17,7 +17,7 @@ export default function BackgroundCanvas() {
ctx.beginPath()
const corners = HEX.polygon_corners(layout, hex);
ctx.moveTo(corners[5].x + 50, corners[5].y + 50);
corners.forEach( p => {
corners.forEach(p => {
ctx.lineTo(p.x + 50, p.y + 50);
})
ctx.fill();
Expand Down
88 changes: 44 additions & 44 deletions cra-hive/src/client/pages/TutorialPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import Insect from '../../shared/model/insects'
import Team from '../../shared/model/teams'
import { Drop } from '../../shared/model/action'
import TestGame from '../lab/TestGame';
import {Hex} from '../../shared/hexlib'
import {DropInsectMenuTeam, iconMap} from '../components/DropInsectMenu'
import { Hex } from '../../shared/hexlib'
import { DropInsectMenuTeam, iconMap } from '../components/DropInsectMenu'
import { Button } from 'semantic-ui-react'

export default function TutorialPage () {
export default function TutorialPage() {
// Idea: define terms
// Make chapers: click to next page
// Boxes for emphasis
Expand Down Expand Up @@ -41,70 +41,70 @@ export default function TutorialPage () {
</div>
}

function TutorialLayout({left, right}) {
function TutorialLayout({ left, right }) {
return <div className="ui two column doubling stackable grid container">
<div className="column">
{left}
</div>
<div className="column">
{right}
</div>
<div className="column">
{left}
</div>
<div className="column">
{right}
</div>
</div>
}

function Introduction() {
const state = new State();
state.apply(new Drop(new Stone(Insect.GRASSHOPPER, Team.WHITE), Hex(0, 0)));
state.apply(new Drop(new Stone(Insect.ANT, Team.BLACK), Hex(1, 0)));
state.apply(new Drop(new Stone(Insect.GRASSHOPPER, Team.WHITE), new Hex(0, 0)));
state.apply(new Drop(new Stone(Insect.ANT, Team.BLACK), new Hex(1, 0)));

const left = <>
<h2> Introduction </h2>
Hive is a strategic boardgame for two players (red and blue).
Each turn they can either place or move a stone on the board. We will refer to placing an insect as "dropping".
We will call the stones "insects" from now on. Each of the insects
has its own set of rules how to move.
In the beginning there is void and the starting player can select any of his insects to drop.</>;
const right = <Hive hive={state.hive} canvasHeight="200px" interactive={false} cameraOpts={ {position: [0, -1, 2]} } />;
Hive is a strategic boardgame for two players (red and blue).
Each turn they can either place or move a stone on the board. We will refer to placing an insect as "dropping".
We will call the stones "insects" from now on. Each of the insects
has its own set of rules how to move.
In the beginning there is void and the starting player can select any of his insects to drop.</>;
const right = <Hive hive={state.hive} canvasHeight="200px" interactive={false} cameraOpts={{ position: [0, -1, 2] }} />;
return <TutorialLayout left={left} right={right} />
}

function Dropping() {
const state = new State();
state.apply(new Drop(new Stone(Insect.GRASSHOPPER, Team.WHITE), Hex(0, 0)));
state.apply(new Drop(new Stone(Insect.ANT, Team.BLACK), Hex(1, 0)));
state.apply(new Drop(new Stone(Insect.GRASSHOPPER, Team.WHITE), new Hex(0, 0)));
state.apply(new Drop(new Stone(Insect.ANT, Team.BLACK), new Hex(1, 0)));
const left = <>
<h2> Dropping </h2>
<DropInsectMenuTeam stones={state.stones} active={true} />
You can select an insect from this menu to drop. Note the numbers denoting how many of each type you still have available.
</>;
<h2> Dropping </h2>
<DropInsectMenuTeam stones={state.stones} active={true} />
You can select an insect from this menu to drop. Note the numbers denoting how many of each type you still have available.
</>;
const right = <Hive hive={state.hive}
team={state.team}
highlighted={state.generateDrops().map(h => [h, 0])}
canvasHeight="200px" interactive={false} cameraOpts={ {position: [0, -3, 4]} } />;
team={state.team}
highlighted={state.generateDrops().map(h => [h, 0])}
canvasHeight="200px" interactive={false} cameraOpts={{ position: [0, -3, 4] }} />;
return <TutorialLayout left={left} right={right} />
}

function GoalOfGame() {
const hive = new HiveModel();
hive.addStone(Hex(0, 0), new Stone(Insect.GRASSHOPPER, Team.WHITE));
hive.addStone(Hex(1, 0), new Stone(Insect.BEE, Team.BLACK));
hive.addStone(Hex(0, 1), new Stone(Insect.BEE, Team.WHITE));
hive.addStone(Hex(1, 1), new Stone(Insect.ANT, Team.BLACK));
hive.addStone(Hex(1, -1), new Stone(Insect.SPIDER, Team.WHITE));
hive.addStone(Hex(2, 0), new Stone(Insect.BEETLE, Team.BLACK));
hive.addStone(Hex(2, -1), new Stone(Insect.ANT, Team.WHITE));
hive.addStone(new Hex(0, 0), new Stone(Insect.GRASSHOPPER, Team.WHITE));
hive.addStone(new Hex(1, 0), new Stone(Insect.BEE, Team.BLACK));
hive.addStone(new Hex(0, 1), new Stone(Insect.BEE, Team.WHITE));
hive.addStone(new Hex(1, 1), new Stone(Insect.ANT, Team.BLACK));
hive.addStone(new Hex(1, -1), new Stone(Insect.SPIDER, Team.WHITE));
hive.addStone(new Hex(2, 0), new Stone(Insect.BEETLE, Team.BLACK));
hive.addStone(new Hex(2, -1), new Stone(Insect.ANT, Team.WHITE));

const left = <>
<h2> The Goal of the Game </h2>
<p> The goal of the game is to surround the bee <Button color='grey' icon={iconMap[Insect.BEE]} /> of the enemy.
<h2> The Goal of the Game </h2>
<p> The goal of the game is to surround the bee <Button color='grey' icon={iconMap[Insect.BEE]} /> of the enemy.

All six adjacent hexes have to be occupied. </p>
<p> In the example the blue player has lost as his bee is completely surrounded.
Note that the color of the surrounding insects does not matter. Also the own insects count.
It can happen that the bees get surrounded at the same time. In this case it is a draw. </p>
</>;
All six adjacent hexes have to be occupied. </p>
<p> In the example the blue player has lost as his bee is completely surrounded.
Note that the color of the surrounding insects does not matter. Also the own insects count.
It can happen that the bees get surrounded at the same time. In this case it is a draw. </p>
</>;

const right = <Hive hive={hive} canvasHeight="200px" interactive={false} cameraOpts={ {position: [1, 1, 4]} } lookAt={[1, 1, 0]}/>;
const right = <Hive hive={hive} canvasHeight="200px" interactive={false} cameraOpts={{ position: [1, 1, 4] }} lookAt={[1, 1, 0]} />;


return <TutorialLayout left={left} right={right} />
Expand All @@ -114,8 +114,8 @@ function GoalOfGame() {

function singleStone(stone) {
const hive = new HiveModel();
hive.addStone(Hex(0, 0), stone);
return <Hive hive={hive} canvasHeight="200px" interactive={false} cameraOpts={ {position: [0, -1, 1]} } lookAt={[0, 0, 0]}/>;
hive.addStone(new Hex(0, 0), stone);
return <Hive hive={hive} canvasHeight="200px" interactive={false} cameraOpts={{ position: [0, -1, 1] }} lookAt={[0, 0, 0]} />;
}

function ExplainBee() {
Expand Down
Loading